/* ============================================================
   logical.day -- Maximalist Carnival of Reasoning
   Colors: #F5EDE0, #2B2D42, #8B5E3C, #3A6B5E, #D4A574, #C77DBA, #5BBFB5, #3D3D3D
   Fonts: Archivo Black, Cormorant Garamond, Source Sans 3, Caveat
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.8;
    color: #3D3D3D;
    background: #F5EDE0;
    overflow-x: hidden;
    position: relative;
}

/* ---------- AURORA BACKGROUND ---------- */
#aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #C77DBA, #5BBFB5, #D4A574, #C77DBA);
    background-size: 400% 400%;
    animation: auroraShift 20s ease infinite;
    z-index: -2;
    pointer-events: none;
}

@keyframes auroraShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- TYPOGRAPHY CLASSES ---------- */
.caveat-font {
    font-family: 'Caveat', cursive;
    font-weight: 400;
}

/* ---------- HERO SECTION (AXIOM BASE) ---------- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: #F5EDE0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* Scattered Logic Symbols */
.logic-symbols-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.logic-symbol {
    position: absolute;
    font-family: 'Source Sans 3', sans-serif;
    color: #D4A574;
    opacity: 0.2;
    user-select: none;
    animation: symbolFloat var(--float-duration, 5s) ease-in-out infinite alternate;
}

.logic-symbol:nth-child(odd) {
    --float-duration: 4s;
    --float-distance: 4px;
}

.logic-symbol:nth-child(even) {
    --float-duration: 6s;
    --float-distance: 5px;
}

.logic-symbol:nth-child(3n) {
    --float-duration: 7s;
    --float-distance: 3px;
}

@keyframes symbolFloat {
    0% { transform: var(--base-rotation, rotate(0deg)) translateY(0); }
    100% { transform: var(--base-rotation, rotate(0deg)) translateY(calc(var(--float-distance, 4px) * -1)); }
}

/* Diagonal Line SVG */
.diagonal-line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.diagonal-line-svg line {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}

.diagonal-line-svg.animate line {
    animation: drawLine 600ms ease-out forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

/* Hero Titles */
.hero-title-container {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hero-title-logical {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    font-size: clamp(5rem, 12vw, 10rem);
    color: #2B2D42;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 0;
    transform: translateX(-60px);
}

.hero-title-logical.animate {
    animation: slideInLeft 500ms ease-out forwards;
}

.hero-title-day {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(4rem, 10vw, 8rem);
    color: #8B5E3C;
    line-height: 1;
    opacity: 0;
    transform: translateX(60px);
}

.hero-title-day.animate {
    animation: slideInRight 500ms ease-out forwards;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Subtitle Typewriter */
.hero-subtitle {
    position: relative;
    z-index: 2;
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #8B5E3C;
    margin-top: 2rem;
    min-height: 2em;
    border-right: 2px solid #8B5E3C;
    white-space: nowrap;
    overflow: hidden;
    animation: blinkCaret 700ms step-end infinite;
}

.hero-subtitle.typing-done {
    border-right-color: transparent;
    animation: none;
}

@keyframes blinkCaret {
    50% { border-right-color: transparent; }
}


/* ============================================================
   THEOREM BANDS (Sections 2-5)
   ============================================================ */

.theorem-band {
    position: relative;
    width: 120vw;
    margin-left: -10vw;
    padding: 6rem 14vw;
    z-index: 1;
    overflow: hidden;
}

.band-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.band-content {
    position: relative;
    z-index: 2;
}

/* Band Rotations */
.band-deduction {
    background: #2B2D42;
    color: #F5EDE0;
    transform: rotate(-3deg);
    margin-top: -4rem;
    margin-bottom: -2rem;
}

.band-deduction .band-inner {
    transform: rotate(3deg);
}

.band-induction {
    background: #8B5E3C;
    color: #F5EDE0;
    transform: rotate(5deg);
    margin-top: -4rem;
    margin-bottom: -2rem;
}

.band-induction .band-inner {
    transform: rotate(-5deg);
}

.band-abduction {
    background: #3A6B5E;
    color: #F5EDE0;
    transform: rotate(-5deg);
    margin-top: -4rem;
    margin-bottom: -2rem;
}

.band-abduction .band-inner {
    transform: rotate(5deg);
}

.band-paradox {
    background: #F5EDE0;
    color: #2B2D42;
    transform: rotate(4deg);
    margin-top: -4rem;
    margin-bottom: -2rem;
}

.band-paradox .band-inner {
    transform: rotate(-4deg);
}

/* Band Titles */
.band-title {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.band-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    margin-bottom: 2rem;
    opacity: 0.85;
}

.band-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.8;
    max-width: 680px;
}

.band-text p {
    margin-bottom: 1.2rem;
}

.band-text em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.1em;
}

.band-annotation {
    display: block;
    margin-top: 1.5rem;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    opacity: 0.7;
    font-style: italic;
}

/* Band Diagrams */
.band-diagram {
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    z-index: 1;
    opacity: 0;
    color: currentColor;
    pointer-events: none;
}

.band-diagram.visible {
    animation: diagramFadeIn 800ms ease-out forwards;
}

@keyframes diagramFadeIn {
    to { opacity: 0.4; }
}

/* Band entry animation */
.theorem-band {
    opacity: 0;
    transition: none;
}

.theorem-band.band-visible {
    animation: bandSlideIn 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes bandSlideIn {
    from {
        opacity: 0;
        transform: var(--band-rotate) translateX(80px);
    }
    to {
        opacity: 1;
        transform: var(--band-rotate) translateX(0);
    }
}

.band-deduction { --band-rotate: rotate(-3deg); }
.band-induction { --band-rotate: rotate(5deg); }
.band-abduction { --band-rotate: rotate(-5deg); }
.band-paradox { --band-rotate: rotate(4deg); }

/* Content stagger within bands */
.band-visible .band-title {
    animation: contentFadeUp 400ms ease-out 100ms both;
}

.band-visible .band-subtitle {
    animation: contentFadeUp 400ms ease-out 200ms both;
}

.band-visible .band-text {
    animation: contentFadeUp 400ms ease-out 300ms both;
}

.band-visible .band-annotation {
    animation: contentFadeUp 400ms ease-out 400ms both;
}

@keyframes contentFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   CULTURAL MOSAIC (Section 6)
   ============================================================ */

.cultural-mosaic-section {
    position: relative;
    z-index: 1;
    background: #F5EDE0;
    padding: 6rem 2rem 4rem;
    overflow: hidden;
}

.mosaic-heading {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: #2B2D42;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 0.02em;
}

.mosaic-panels {
    display: flex;
    width: 100%;
    min-height: 400px;
}

.mosaic-panel {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: scaleX(0);
    transform-origin: left center;
}

.mosaic-panel.panel-visible {
    animation: panelExpand 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes panelExpand {
    to { transform: scaleX(1); }
}

/* Panel Patterns (background overlay) */
.panel-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease 400ms;
}

.panel-visible .panel-pattern {
    opacity: 0.15;
}

/* Greek - marble white with column motif */
.panel-greek {
    background: #e8e0d0;
}

.panel-greek .panel-pattern {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 30px,
        #2B2D42 30px,
        #2B2D42 32px
    ),
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        #2B2D42 40px,
        #2B2D42 42px
    );
}

/* Indian - saffron with mandala pattern */
.panel-indian {
    background: #D4A574;
}

.panel-indian .panel-pattern {
    background-image:
        radial-gradient(circle at 50% 50%, transparent 20px, #8B5E3C 20px, #8B5E3C 22px, transparent 22px),
        radial-gradient(circle at 50% 50%, transparent 40px, #8B5E3C 40px, #8B5E3C 42px, transparent 42px),
        radial-gradient(circle at 50% 50%, transparent 60px, #8B5E3C 60px, #8B5E3C 62px, transparent 62px);
    background-size: 140px 140px;
    background-position: center center;
}

/* Chinese - red with trigram pattern */
.panel-chinese {
    background: #a04040;
}

.panel-chinese .panel-pattern {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            #2B2D42 8px,
            #2B2D42 12px,
            transparent 12px,
            transparent 20px
        );
    background-size: 60px 60px;
}

.panel-chinese .panel-content h3,
.panel-chinese .panel-content p {
    color: #F5EDE0;
}

/* Arabic - blue with geometric arabesque */
.panel-arabic {
    background: #3a5f8a;
}

.panel-arabic .panel-pattern {
    background-image:
        linear-gradient(45deg, #F5EDE0 25%, transparent 25%),
        linear-gradient(-45deg, #F5EDE0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #F5EDE0 75%),
        linear-gradient(-45deg, transparent 75%, #F5EDE0 75%);
    background-size: 30px 30px;
    background-position: 0 0, 0 15px, 15px -15px, 15px 0px;
}

.panel-arabic .panel-content h3,
.panel-arabic .panel-content p {
    color: #F5EDE0;
}

/* European - green with mechanical gear pattern */
.panel-european {
    background: #3A6B5E;
}

.panel-european .panel-pattern {
    background-image:
        radial-gradient(circle at 50% 50%, transparent 15px, #F5EDE0 15px, #F5EDE0 17px, transparent 17px),
        radial-gradient(circle at 50% 50%, transparent 25px, #F5EDE0 25px, #F5EDE0 27px, transparent 27px);
    background-size: 70px 70px;
}

.panel-european .panel-content h3,
.panel-european .panel-content p {
    color: #F5EDE0;
}

/* Panel Content */
.panel-content {
    position: relative;
    z-index: 2;
}

.panel-content h3 {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    color: #2B2D42;
}

.panel-era {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(0.85rem, 1vw, 1rem);
    margin-bottom: 0.8rem;
    opacity: 0.8;
    color: inherit;
}

.panel-desc {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.78rem, 0.9vw, 0.9rem);
    line-height: 1.6;
    color: inherit;
}

.panel-desc em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
}

.panel-greek .panel-content h3,
.panel-greek .panel-content .panel-era {
    color: #2B2D42;
}

.panel-greek .panel-content .panel-desc {
    color: #3D3D3D;
}

.panel-indian .panel-content h3 {
    color: #2B2D42;
}

.panel-indian .panel-content .panel-era,
.panel-indian .panel-content .panel-desc {
    color: #3D3D3D;
}


/* ============================================================
   QED FOOTER
   ============================================================ */

.qed-footer {
    position: relative;
    z-index: 1;
    background: #2B2D42;
    padding: 6rem 2rem;
    text-align: center;
}

.qed-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.qed-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #D4A574;
    letter-spacing: 0.05em;
}

.qed-tombstone {
    width: clamp(1.5rem, 3vw, 2.5rem);
    height: clamp(1.5rem, 3vw, 2.5rem);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .mosaic-panels {
        flex-direction: column;
    }

    .mosaic-panel {
        min-height: 200px;
        transform-origin: top center;
    }

    .mosaic-panel.panel-visible {
        animation-name: panelExpandVertical;
    }

    @keyframes panelExpandVertical {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }

    .band-diagram {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 200px;
        height: 200px;
        margin: 2rem auto 0;
    }

    .theorem-band {
        padding: 5rem 12vw;
    }
}

@media (max-width: 600px) {
    .hero-title-logical {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .hero-title-day {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .theorem-band {
        padding: 4rem 14vw;
    }

    .band-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}