/* css/styles.css - All styles consolidated */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

/* Base Styles */
* {
    font-family: "Inter", system-ui, sans-serif;
}

.neo-border {
    border: 3px solid #000;
}

/* Quiz Component Styles */
.choice-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

@media(hover: hover) and (pointer: fine) {
    .choice-card:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px 0px #000000;
    }
}

.choice-card.selected {
    background: #fde047;
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px 0px #000000;
    animation: choiceConfirm 0.4s ease-out;
}

.choice-card.confirming {
    background: #fde047;
    color: black;
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px 0px #000000;
}

.loading-text::after {
    content: 'Understanding your answers';
    animation: loadingDots 1.5s infinite;
}

/* Toast Styles */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 500px;
    width: 90%;
}

.toast.show {
    animation: toast-slide-in 0.3s ease-out;
}

.toast.hide {
    animation: toast-slide-out 0.3s ease-in;
}

/* Manifesto Page Styles */
.reading-flow {
    max-width: 65ch;
    line-height: 1.7;
}

.reading-flow h1, .reading-flow h2, .reading-flow h3 {
    line-height: 1.3;
}

.big-quote {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.4;
}

.rule-number {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    box-shadow: 4px 4px 0px 0px #fde047;
}

.gentle-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gentle-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.text-balance {
    text-wrap: balance;
}

.content-spacing > * + * {
    margin-top: 2rem;
}

.section-break {
    background: linear-gradient(90deg, transparent 0%, #fde047 20%, #fde047 80%, transparent 100%);
    height: 3px;
    margin: 3rem auto;
    max-width: 200px;
}