:root {
    --deep-night: #1E0F1B;
    --sunset-coral: #E8734A;
    --desaturated-coral: #C97B6B;
    --desert-gold: #D4A04A;
    --twilight-mauve: #7B5E7B;
    --warm-cream: #F5EDE0;
    --walnut: #5C4033;
    --rose-quartz: #D4A0A0;
    --charcoal-burgundy: #3B1F2B;
    --warm-taupe: #A8917A;
}

/* Design anchors: IntersectionObserver` NO scroll event listeners on `window`. Playfair Display headline (weight 600; Playfair Display headline: "gabs.boo" — set at `clamp(6rem; Playfair Display Italic (`clamp(2.5rem; Playfair Display" (Google Fonts without competing. Set at `clamp(1rem; Playfair's gorgeous swash terminals. Color: warm cream (#F5EDE0. Space Grotesk text fades in at the center: a single word or phrase that serves as a conceptual anchor. The grain overlay persists until the very last pixel. Space Grotesk: "scroll to enter" with a gentle `opacity` pulse (0.3 → 1.0 → 0.3. Space Grotesk" (Google Fonts. */

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

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

body {
    min-height: 100%;
    overflow-x: hidden;
    background: var(--deep-night);
    color: var(--walnut);
    font-family: "DM Sans", Inter, Arial, sans-serif;
    line-height: 1.72;
}

.grain-overlay::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: var(--grain-opacity, 0.12);
    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='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='0.55'/%3E%3C/svg%3E");
    animation: grain-shift 0.12s steps(4) infinite;
}

@keyframes grain-shift {
    0% { transform: translate3d(0, 0, 0); opacity: calc(var(--grain-opacity, 0.12) - 0.02); }
    25% { transform: translate3d(-2%, 1%, 0); opacity: calc(var(--grain-opacity, 0.12) + 0.01); }
    50% { transform: translate3d(1%, -2%, 0); opacity: calc(var(--grain-opacity, 0.12) - 0.01); }
    75% { transform: translate3d(2%, 2%, 0); opacity: calc(var(--grain-opacity, 0.12) + 0.02); }
    100% { transform: translate3d(0, 0, 0); opacity: var(--grain-opacity, 0.12); }
}

.parallax-story {
    position: relative;
    isolation: isolate;
}

.chamber {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    align-items: center;
    margin-bottom: -15vh;
}

.chamber:last-child {
    margin-bottom: 0;
}

.six-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 48px;
    width: 100%;
    padding-left: 80px;
    padding-right: 40px;
}

p {
    max-width: 38em;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.72;
}

.variable-title,
.breathing-headline,
.pull-quote {
    font-family: "Playfair Display", Playfair, Georgia, serif;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variation-settings: "wght" var(--title-weight, 400);
    transition: font-variation-settings 0.8s cubic-bezier(0.22, 1, 0.36, 1), color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.micro-label {
    font-family: "Space Grotesk", Space, Arial, sans-serif;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--desaturated-coral);
}

.chamber-threshold {
    min-height: 100vh;
    background: var(--deep-night);
    place-items: center;
}

.threshold-content {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: 2rem;
    text-align: center;
}

.variable-title {
    color: var(--warm-cream);
    font-size: clamp(6rem, 14vw, 14rem);
    --title-weight: 400;
    animation: materialize-weight 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes materialize-weight {
    from { font-variation-settings: "wght" 400; opacity: 0.76; filter: blur(1px); }
    to { font-variation-settings: "wght" 700; opacity: 1; filter: blur(0); }
}

.pulse-label {
    color: var(--warm-cream);
    opacity: 0.3;
    animation: pulse-label 3s ease-in-out infinite;
}

@keyframes pulse-label {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.aurora-bloom {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 50%;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 115, 74, 0.05) 0%, rgba(212, 160, 160, 0.03) 34%, transparent 70%);
    transform: translate3d(-50%, -50%, 0);
    animation: bloom-breathe 8s ease-in-out infinite;
}

@keyframes bloom-breathe {
    0%, 100% { opacity: 0.35; transform: translate3d(-50%, -50%, 0) scale(0.92); }
    50% { opacity: 0.95; transform: translate3d(-50%, -50%, 0) scale(1.12); }
}

.chamber-awakening {
    min-height: 120vh;
    background: var(--warm-cream);
}

.aurora-plane {
    position: absolute;
    inset: -18vh -10vw;
    z-index: 1;
    pointer-events: none;
    background-size: 180% 180%;
    animation: aurora-position 20s ease-in-out infinite;
}

@keyframes aurora-position {
    0%, 100% { background-position: 0% 40%; filter: hue-rotate(0deg); }
    50% { background-position: 100% 62%; filter: hue-rotate(-6deg); }
}

.awakening-aurora {
    background: linear-gradient(175deg, rgba(245, 237, 224, 1) 0%, rgba(123, 94, 123, 0.08) 28%, rgba(232, 115, 74, 0.06) 48%, rgba(212, 160, 74, 0.08) 68%, rgba(245, 237, 224, 1) 100%);
}

.aurora-band {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 22vh;
    opacity: 0;
    transform: skewY(-5deg) translate3d(0, 0, 0);
    filter: blur(22px);
    animation: band-rise 12s ease-in-out infinite;
}

.band-mauve { top: 18%; background: linear-gradient(90deg, transparent, rgba(123, 94, 123, 0.22), transparent); }
.band-coral { top: 42%; background: linear-gradient(90deg, transparent, rgba(232, 115, 74, 0.18), transparent); animation-delay: 1.8s; }
.band-gold { top: 62%; background: linear-gradient(90deg, transparent, rgba(212, 160, 74, 0.16), transparent); animation-delay: 3.6s; }

@keyframes band-rise {
    0%, 100% { opacity: 0; transform: skewY(-5deg) translate3d(-7%, 8vh, 0); }
    35%, 72% { opacity: 1; transform: skewY(-5deg) translate3d(7%, -4vh, 0); }
}

.chamber-grid {
    align-items: center;
}

.awakening-copy {
    grid-column: 1 / 4;
    color: var(--warm-taupe);
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.awakening-copy.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.foreground-shape,
.kidney,
.orbit,
.last-boomerang,
.last-circle {
    pointer-events: none;
}

.starburst {
    grid-column: 5 / 7;
    justify-self: center;
    width: min(28vw, 280px);
    aspect-ratio: 1;
    opacity: 0.3;
    background: conic-gradient(from 0deg, transparent 0deg 12deg, var(--desert-gold) 12deg 18deg, transparent 18deg 42deg, var(--desert-gold) 42deg 48deg, transparent 48deg 72deg, var(--desert-gold) 72deg 78deg, transparent 78deg 102deg, var(--desert-gold) 102deg 108deg, transparent 108deg 132deg, var(--desert-gold) 132deg 138deg, transparent 138deg 162deg, var(--desert-gold) 162deg 168deg, transparent 168deg 192deg, var(--desert-gold) 192deg 198deg, transparent 198deg 222deg, var(--desert-gold) 222deg 228deg, transparent 228deg 252deg, var(--desert-gold) 252deg 258deg, transparent 258deg 282deg, var(--desert-gold) 282deg 288deg, transparent 288deg 312deg, var(--desert-gold) 312deg 318deg, transparent 318deg 360deg);
    clip-path: circle(49%);
    animation: rotate-slow 60s linear infinite;
}

@keyframes rotate-slow {
    to { rotate: 360deg; }
}

.boomerang {
    position: absolute;
    width: 310px;
    height: 140px;
    right: 18%;
    bottom: 16%;
    border: 22px solid rgba(123, 94, 123, 0.2);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 55% 45% 50% 20%;
    transform: rotate(-18deg);
    animation: boomerang-drift 15s ease-in-out infinite;
}

@keyframes boomerang-drift {
    0%, 100% { translate: -20px 0; }
    50% { translate: 30px -18px; }
}

.chamber-collection {
    min-height: 150vh;
    background: var(--warm-cream);
}

.collection-aurora {
    background: linear-gradient(175deg, rgba(30, 15, 27, 0.05) 0%, rgba(123, 94, 123, 0.12) 20%, rgba(232, 115, 74, 0.08) 40%, rgba(212, 160, 74, 0.06) 55%, rgba(212, 160, 160, 0.08) 70%, rgba(30, 15, 27, 0.05) 100%);
}

.card-stack {
    align-content: start;
    padding-top: 15vh;
    padding-bottom: 18vh;
    row-gap: 30vh;
}

.narrative-card {
    position: relative;
    grid-column: 2 / 6;
    max-width: 720px;
    padding: 1rem 0 1rem 2rem;
    color: var(--walnut);
    opacity: 0;
    transform: translate3d(0, 44px, 0);
    transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.narrative-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    width: 3px;
    height: 80%;
    background: var(--sunset-coral);
}

.narrative-card.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.breathing-headline {
    margin-bottom: 1rem;
    color: var(--charcoal-burgundy);
    font-size: 2.5rem;
    --title-weight: 400;
}

.narrative-card.visible .breathing-headline {
    --title-weight: 700;
}

.kidney {
    position: absolute;
    z-index: 3;
    background: var(--rose-quartz);
    opacity: 0.15;
    border-radius: 58% 42% 64% 36% / 42% 57% 43% 58%;
    animation: kidney-breathe 6s ease-in-out infinite;
}

.kidney-one { width: 220px; height: 145px; right: 7%; top: 18%; }
.kidney-two { width: 260px; height: 170px; left: 2%; top: 52%; animation-delay: 2s; }
.kidney-three { width: 190px; height: 135px; right: 12%; bottom: 12%; animation-delay: 4s; }

@keyframes kidney-breathe {
    0%, 100% { transform: scale(0.9) rotate(-7deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.chamber-aurora {
    min-height: 100vh;
    background: var(--deep-night);
    place-items: center;
}

.full-aurora {
    inset: -25vh -20vw;
    background: linear-gradient(175deg, rgba(30, 15, 27, 1) 0%, rgba(123, 94, 123, 0.6) 20%, rgba(232, 115, 74, 0.3) 40%, rgba(212, 160, 74, 0.2) 55%, rgba(212, 160, 160, 0.15) 70%, rgba(30, 15, 27, 1) 100%);
    animation: aurora-angle 20s ease-in-out infinite;
}

@keyframes aurora-angle {
    0%, 100% { transform: rotate(-2deg) scale(1.05); background-position: 0% 50%; }
    50% { transform: rotate(2deg) scale(1.12); background-position: 100% 50%; }
}

.quote-stage {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    width: min(86vw, 980px);
    padding: 4rem;
}

.pull-quote {
    max-width: 780px;
    color: var(--quote-color, #F5EDE0);
    text-align: center;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-style: italic;
    --title-weight: 500;
}

.orbit-field {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.orbit {
    position: absolute;
    display: block;
    border: 1px solid var(--sunset-coral);
    border-radius: 50%;
    opacity: 0.25;
    transform-origin: center;
    animation: orbit-spin var(--orbit-time, 28s) linear infinite;
}

.orbit-one { width: 220px; height: 220px; left: -2%; top: 8%; --orbit-time: 24s; }
.orbit-two { width: 160px; height: 160px; right: 7%; top: 13%; --orbit-time: 32s; animation-direction: reverse; }
.orbit-three { width: 260px; height: 260px; left: 8%; bottom: -2%; --orbit-time: 36s; }
.orbit-four { width: 140px; height: 140px; right: 2%; bottom: 9%; --orbit-time: 26s; animation-direction: reverse; }

@keyframes orbit-spin {
    from { transform: rotate(0deg) translate3d(18px, 0, 0) rotate(0deg); }
    to { transform: rotate(360deg) translate3d(18px, 0, 0) rotate(-360deg); }
}

.chamber-dissolve {
    min-height: 80vh;
    margin-bottom: 0;
    place-items: center;
    background: linear-gradient(to bottom, rgba(30, 15, 27, 0.88), #1E0F1B 72%, #130910 100%);
}

.dimming-aurora {
    position: absolute;
    inset: -20vh -10vw;
    z-index: 1;
    opacity: 0.34;
    background: radial-gradient(circle at 35% 20%, rgba(232, 115, 74, 0.2), transparent 34%), radial-gradient(circle at 70% 46%, rgba(123, 94, 123, 0.22), transparent 38%), linear-gradient(to bottom, rgba(212, 160, 74, 0.08), transparent 68%);
    animation: dissolve-dim 12s ease-in-out infinite;
}

@keyframes dissolve-dim {
    0%, 100% { opacity: 0.38; transform: translate3d(0, 0, 0); }
    50% { opacity: 0.16; transform: translate3d(0, -26px, 0); }
}

.final-line {
    position: relative;
    z-index: 5;
    color: var(--warm-cream);
    opacity: 0;
    animation: final-fade 3s ease-in-out forwards;
}

@keyframes final-fade {
    to { opacity: 0.72; }
}

.last-boomerang {
    position: absolute;
    width: 220px;
    height: 90px;
    left: 12%;
    bottom: 18%;
    border: 16px solid rgba(123, 94, 123, 0.16);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 60% 40% 55% 20%;
    animation: drift-away 10s ease-in-out infinite;
}

.last-circle {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 10%;
    top: 20%;
    border: 1px solid rgba(232, 115, 74, 0.18);
    border-radius: 50%;
    animation: drift-away 12s ease-in-out infinite reverse;
}

@keyframes drift-away {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-10deg); opacity: 0.45; }
    50% { transform: translate3d(30px, -38px, 0) rotate(8deg); opacity: 0.14; }
}

.waypoint-nav {
    position: fixed;
    z-index: 9998;
    right: 40px;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transform: translateY(-50%);
}

.waypoint-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(232, 115, 74, 0.3);
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.waypoint-dot:hover,
.waypoint-dot.active {
    width: 10px;
    height: 10px;
    background: rgba(232, 115, 74, 0.85);
    box-shadow: 0 0 20px rgba(232, 115, 74, 0.55);
    transform: scale(1.25);
}

[data-depth="background"],
[data-depth="foreground"] {
    will-change: transform;
}

@media (max-width: 780px) {
    .six-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .variable-title { font-size: clamp(4.2rem, 20vw, 8rem); }
    .awakening-copy, .narrative-card { grid-column: 1 / -1; }
    .starburst { grid-column: 1 / -1; margin-top: 12vh; width: 180px; }
    .boomerang { right: -70px; bottom: 10%; }
    .card-stack { row-gap: 22vh; }
    .quote-stage { padding: 2rem; }
    .pull-quote { font-size: clamp(2rem, 10vw, 3.4rem); }
    .waypoint-nav { right: 18px; gap: 1.35rem; }
    .kidney-one { right: -80px; }
    .kidney-two { left: -120px; }
}