:root {
    /* Design terms: IBM Plex Sans" (Google Fonts Interactive elements IntersectionObserver to trigger the zoom-focus entrance animations — each element scales from 0.92 to 1.0 with `transition: transform 1.2s cubic-bezier(0.16 IntersectionObserver with `threshold: 0.15`. Transition timing: `transform 1.2s cubic-bezier(0.16 Space Mono Space Mono" (Google Fonts */
    --bg-deep: #0A0E1A;
    --bg-mid: #141B2D;
    --surface: #1E2740;
    --text-primary: #C8CCD4;
    --text-secondary: #8B92A0;
    --accent-warm: #D4956A;
    --accent-hot: #E8A44A;
    --accent-cool: #4A6FA5;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--bg-deep);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(74, 111, 165, 0.16), transparent 38rem),
        linear-gradient(180deg, #0A0E1A 0%, #0A0E1A 34%, #141B2D 50%, #0A0E1A 100%);
    color: var(--text-secondary);
    font-family: "IBM Plex Sans", Inter, sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.75;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='22'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(200, 204, 212, 0.025) 1px, transparent 1px),
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 32%), rgba(232, 164, 74, 0.08), transparent 20rem);
    background-size: 7rem 100%, auto;
    opacity: 0.7;
}

.grain-source {
    position: absolute;
}

.luminous-river {
    position: relative;
    z-index: 1;
}

.movement {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 12vh 4vw;
}

.movement-before {
    min-height: 100vh;
    padding: 0;
    background: linear-gradient(180deg, #0A0E1A 0%, #0A0E1A 48%, #080B14 100%);
}

.dawn-field {
    position: relative;
    min-height: 100vh;
}

.opening-horizon {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 149, 106, 0.12) 10%, #D4956A 50%, rgba(212, 149, 106, 0.12) 90%, transparent 100%);
    box-shadow: 0 0 28px rgba(212, 149, 106, 0.34);
    animation: horizonReveal 2s ease-in-out 1.5s forwards;
}

.opening-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 126vw;
    height: 4vh;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.15);
    background: radial-gradient(ellipse at center, rgba(212, 149, 106, 0.14) 0%, rgba(232, 164, 74, 0.08) 34%, transparent 70%);
    filter: blur(2px);
    animation: glowBleed 2s ease-out 2s forwards;
}

.hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero-luminous,
.hero-day {
    font-family: "Exo 2", Inter, sans-serif;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    opacity: 0;
}

.hero-luminous {
    margin: 0 0 0.16em;
    color: #C8CCD4;
    font-size: clamp(4rem, 10vw, 8rem);
    animation: titleReveal 2s ease-out 2s forwards;
}

.hero-day {
    margin: 0;
    color: #D4956A;
    font-size: clamp(3.1rem, 8vw, 7rem);
    animation: titleReveal 2s ease-out 2.18s forwards;
}

.movement-refraction {
    min-height: 200vh;
    background: radial-gradient(ellipse at 18% 12%, rgba(30, 39, 64, 0.58), transparent 30rem), #0A0E1A;
}

.movement-zenith {
    min-height: 100vh;
    background:
        radial-gradient(circle at center, rgba(74, 111, 165, 0.18), transparent 36rem),
        #141B2D;
}

.movement-afterglow {
    min-height: 150vh;
    background:
        radial-gradient(ellipse at 82% 18%, rgba(232, 164, 74, 0.09), transparent 32rem),
        radial-gradient(ellipse at 12% 70%, rgba(212, 149, 106, 0.08), transparent 34rem),
        #0A0E1A;
}

.movement-luminous {
    min-height: 100vh;
    background: #0A0E1A;
}

.light-fragment {
    position: relative;
    z-index: 5;
    width: min(40vw, 44rem);
    min-width: 20rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.5rem);
    overflow: visible;
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(200, 204, 212, 0.06), rgba(30, 39, 64, 0.12)),
        rgba(30, 39, 64, 0.36);
    border: 1px solid rgba(200, 204, 212, 0.05);
    border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;
    clip-path: ellipse(75% 58% at 50% 50%);
    mix-blend-mode: screen;
    box-shadow: 0 0 70px rgba(74, 111, 165, 0.08), inset 0 0 38px rgba(212, 149, 106, 0.045);
}

.light-fragment::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

.light-fragment:hover::before {
    opacity: 0.07;
}

.fragment-right {
    margin-right: 8vw;
}

.fragment-left {
    margin-left: 8vw;
}

.fragment-wide {
    width: min(60vw, 62rem);
    border-radius: 54% 46% 62% 38% / 50% 54% 46% 50%;
    clip-path: ellipse(78% 56% at 50% 52%);
    background:
        linear-gradient(135deg, rgba(232, 164, 74, 0.08), rgba(30, 39, 64, 0.14)),
        rgba(30, 39, 64, 0.28);
}

.mono-note {
    margin-bottom: 1rem;
    color: #D4956A;
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.light-fragment h2 {
    margin-bottom: 1rem;
    color: #C8CCD4;
    font-family: "Exo 2", Inter, sans-serif;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.05;
}

.light-fragment p:not(.mono-note) {
    max-width: 41rem;
    color: #8B92A0;
}

.wrap-text {
    position: relative;
}

.lens-float {
    float: left;
    width: 7rem;
    height: 9rem;
    margin: 0 1rem 0.6rem 0;
    border-radius: 50%;
    shape-outside: ellipse(45% 50% at 50% 50%);
}

.lens-wide {
    width: 9rem;
    height: 7rem;
}

.breathing-space {
    height: 44vh;
}

.space-deep {
    height: 62vh;
}

.curve-lane {
    position: absolute;
    z-index: 2;
    width: min(76vw, 54rem);
    height: 16rem;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 0 16px rgba(212, 149, 106, 0.16));
}

.curve-lane svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.curve-lane-1 { top: 8%; left: -7vw; animation: curveDriftA 9s ease-in-out infinite; }
.curve-lane-2 { top: 31%; right: -8vw; animation: curveDriftB 12s ease-in-out infinite; }
.curve-lane-3 { top: 57%; left: 10vw; animation: curveDriftC 10s ease-in-out infinite; }
.curve-lane-4 { top: 82%; right: 4vw; animation: curveDriftA 11s ease-in-out infinite; }
.curve-lane-5 { top: 5%; left: 6vw; animation: curveDriftB 8s ease-in-out infinite; }
.curve-lane-6 { top: 18%; right: -10vw; animation: curveDriftC 10s ease-in-out infinite; }
.curve-lane-7 { top: 34%; left: -8vw; animation: curveDriftA 12s ease-in-out infinite; }
.curve-lane-8 { top: 60%; right: 2vw; animation: curveDriftB 9s ease-in-out infinite; }
.curve-lane-9 { top: 77%; left: 14vw; animation: curveDriftC 11s ease-in-out infinite; }

.curve-lane-5,
.curve-lane-6,
.curve-lane-7,
.curve-lane-8,
.curve-lane-9 {
    opacity: 0;
    filter: drop-shadow(0 0 14px rgba(232, 164, 74, 0.12));
}

.zenith-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(80vw, 38rem);
    height: min(80vw, 38rem);
}

.zenith-core.zoom-focus { transform: translate(-50%, -50%) scale(0.92); }
.zenith-core.zoom-focus.in-view { transform: translate(-50%, -50%) scale(1); }

.sun-disc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #E8A44A 0%, #E8A44A 18%, #D4956A 48%, rgba(200, 204, 212, 0.38) 68%, transparent 72%);
    box-shadow: 0 0 82px rgba(232, 164, 74, 0.3), 0 0 180px rgba(212, 149, 106, 0.1);
    animation: sunPulse 4s ease-in-out infinite;
}

.orbital-type {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 440px;
    height: 440px;
    overflow: visible;
    transform-origin: center;
    animation: solarRotate 60s linear infinite;
}

.orbital-type path {
    fill: none;
}

.orbital-type text {
    fill: #D4956A;
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.68;
}

.closing-horizon {
    position: relative;
    z-index: 4;
    width: 100vw;
    height: 1px;
    margin: 0 0 22vh -4vw;
    background: linear-gradient(90deg, transparent, rgba(232, 164, 74, 0.3), #E8A44A, rgba(232, 164, 74, 0.3), transparent);
    box-shadow: 0 0 30px rgba(232, 164, 74, 0.3);
}

.chrome-reflection {
    position: absolute;
    z-index: 3;
    width: 7rem;
    height: 2px;
    opacity: 0.32;
    background: linear-gradient(90deg, transparent, #C8CCD4, transparent);
    transform: rotate(3deg);
    animation: chromeShimmer 3s ease-in-out infinite;
}

.reflection-one { top: 18%; right: 12%; }
.reflection-two { top: 24%; left: 10%; transform: rotate(-4deg); }
.reflection-three { top: 15%; right: 18%; transform: rotate(5deg); }
.reflection-four { bottom: 22%; left: 16%; transform: rotate(-3deg); }

.convergence-curves {
    position: absolute;
    inset: 0;
}

.final-curve {
    top: 50%;
    left: 50%;
    width: min(86vw, 62rem);
    transform-origin: center;
}

.final-curve-one { transform: translate(-50%, -50%) rotate(0deg); }
.final-curve-two { transform: translate(-50%, -50%) rotate(24deg); }
.final-curve-three { transform: translate(-50%, -50%) rotate(-24deg); }

.final-curve-one.zoom-focus { transform: translate(-50%, -50%) rotate(0deg) scale(0.92); }
.final-curve-two.zoom-focus { transform: translate(-50%, -50%) rotate(24deg) scale(0.92); }
.final-curve-three.zoom-focus { transform: translate(-50%, -50%) rotate(-24deg) scale(0.92); }
.final-curve-one.zoom-focus.in-view { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
.final-curve-two.zoom-focus.in-view { transform: translate(-50%, -50%) rotate(24deg) scale(1); }
.final-curve-three.zoom-focus.in-view { transform: translate(-50%, -50%) rotate(-24deg) scale(1); }

.final-convergence {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 6;
    width: 100%;
    text-align: center;
}

.final-convergence.zoom-focus.in-view { transform: translate(-50%, -50%) scale(1); }

.final-convergence h2 {
    margin: 0;
    background: linear-gradient(135deg, #D4956A 0%, #E8A44A 48%, #C8CCD4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: "Exo 2", Inter, sans-serif;
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.05;
    text-transform: lowercase;
    filter: drop-shadow(0 0 34px rgba(232, 164, 74, 0.16));
}

.final-convergence p {
    margin-top: 2rem;
    color: #D4956A;
    font-family: "Space Mono", monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.movement-luminous::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.zoom-focus {
    opacity: 0;
    transform: scale(0.92);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
}

.zoom-focus.in-view {
    opacity: 1;
    transform: scale(1);
}

.zenith-core.zoom-focus { transform: translate(-50%, -50%) scale(0.92); }
.zenith-core.zoom-focus.in-view { transform: translate(-50%, -50%) scale(1); }
.final-convergence.zoom-focus { transform: translate(-50%, -50%) scale(0.92); }
.final-convergence.zoom-focus.in-view { transform: translate(-50%, -50%) scale(1); }
.final-curve-one.zoom-focus { transform: translate(-50%, -50%) rotate(0deg) scale(0.92); }
.final-curve-two.zoom-focus { transform: translate(-50%, -50%) rotate(24deg) scale(0.92); }
.final-curve-three.zoom-focus { transform: translate(-50%, -50%) rotate(-24deg) scale(0.92); }
.final-curve-one.zoom-focus.in-view { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
.final-curve-two.zoom-focus.in-view { transform: translate(-50%, -50%) rotate(24deg) scale(1); }
.final-curve-three.zoom-focus.in-view { transform: translate(-50%, -50%) rotate(-24deg) scale(1); }

.curve-lane.zoom-focus.in-view {
    opacity: 0.25;
}

.movement-afterglow .curve-lane.zoom-focus.in-view {
    opacity: 0.16;
}

.final-curve.zoom-focus.in-view {
    opacity: 0.18;
}

@keyframes horizonReveal {
    to { opacity: 1; }
}

@keyframes glowBleed {
    to { opacity: 1; height: 40vh; transform: translate(-50%, -50%) scaleY(1); }
}

@keyframes titleReveal {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes curveDriftA {
    0%, 100% { margin-top: 0; }
    50% { margin-top: 15px; }
}

@keyframes curveDriftB {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -15px; }
}

@keyframes curveDriftC {
    0%, 100% { margin-top: 0; }
    50% { margin-top: 12px; }
}

@keyframes sunPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.04); filter: brightness(1.1); }
}

@keyframes solarRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes chromeShimmer {
    0%, 100% { opacity: 0.22; }
    50% { opacity: 0.55; }
}

@media (max-width: 820px) {
    .light-fragment,
    .fragment-wide {
        width: min(86vw, 38rem);
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 2rem;
        clip-path: ellipse(86% 62% at 50% 50%);
    }

    .light-fragment h2 {
        font-size: clamp(2rem, 12vw, 4.8rem);
    }

    .sun-disc {
        width: 220px;
        height: 220px;
    }

    .orbital-type {
        width: 320px;
        height: 320px;
    }

    .breathing-space,
    .space-deep {
        height: 36vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .zoom-focus,
    .opening-horizon,
    .opening-glow,
    .hero-luminous,
    .hero-day {
        opacity: 1;
        transform: none;
    }
}