:root {
    --midnight: #1a1625;
    --wisteria: #c4b1e6;
    --mint: #a8e6cf;
    --blossom: #f2b5d4;
    --cloud: #f0edf5;
    --lilac: #9b8fb5;
    --candle: #f5d89a;
    --aqua: #7fdbda;
    --panel: rgba(255, 248, 255, 0.07);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Design vocabulary retained: Intersection (threshold: IntersectionObserver` transitions. enormous (`clamp(4rem dramatically underrepresented. Combined (Google Playfair-elegant typography (2% */

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

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--midnight);
    color: var(--cloud);
    font-family: "Nunito Sans", Inter, sans-serif;
    font-weight: 300;
    perspective: 1100px;
}

.filter-bank {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
}

.midnight-base,
.gradient-ocean,
.caustic-veil,
.bubble-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.midnight-base {
    z-index: -5;
    background: radial-gradient(circle at 50% 120%, rgba(127, 219, 218, 0.18), transparent 45%), var(--midnight);
}

.gradient-ocean {
    z-index: -4;
    background:
        radial-gradient(circle at 18% 18%, rgba(245, 216, 154, 0.22), transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(127, 219, 218, 0.25), transparent 30%),
        linear-gradient(135deg, #c4b1e6 0%, #a8e6cf 25%, #f2b5d4 50%, #7fdbda 75%, #c4b1e6 100%);
    background-size: 180% 180%, 160% 160%, 400% 400%;
    animation: gradientMorph 40s ease infinite;
    opacity: 0.82;
    filter: saturate(1.05);
}

.caustic-veil {
    z-index: -3;
    background:
        repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 36px),
        radial-gradient(ellipse at 50% 20%, rgba(240, 237, 245, 0.16), transparent 55%);
    filter: url(#caustic-noise);
    mix-blend-mode: screen;
    opacity: 0.52;
}

@keyframes gradientMorph {
    0% { background-position: 0% 50%, 100% 50%, 0% 50%; }
    25% { background-position: 70% 40%, 40% 80%, 100% 50%; }
    50% { background-position: 100% 100%, 10% 70%, 100% 100%; }
    75% { background-position: 30% 70%, 80% 20%, 0% 100%; }
    100% { background-position: 0% 50%, 100% 50%, 0% 50%; }
}

.depth-stage {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
}

.chamber {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 8vw, 8rem);
    transform-style: preserve-3d;
    overflow: hidden;
}

.chamber::before,
.chamber::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: radial-gradient(ellipse at 30% 30%, rgba(127, 219, 218, 0.18), transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 20px rgba(127, 219, 218, 0.08), 0 0 35px rgba(196, 177, 230, 0.11);
    animation: chamberFloat 18s ease-in-out infinite;
    z-index: 7;
}

.chamber::before {
    width: 9vw;
    height: 9vw;
    min-width: 42px;
    min-height: 42px;
    left: 8vw;
    bottom: 8vh;
}

.chamber::after {
    width: 4vw;
    height: 4vw;
    min-width: 18px;
    min-height: 18px;
    right: 14vw;
    top: 12vh;
    animation-duration: 13s;
    animation-delay: -4s;
}

@keyframes chamberFloat {
    0%, 100% { transform: translate3d(0, 0, 90px) scale(0.9); opacity: 0.16; }
    45% { transform: translate3d(2vw, -12vh, 120px) scale(1.08); opacity: 0.48; }
    70% { transform: translate3d(-1vw, -20vh, 130px) scale(0.78); opacity: 0.24; }
}

.chamber-emergence { min-height: 100vh; }
.chamber-reflection { min-height: 90vh; justify-content: flex-start; }
.chamber-immersion { min-height: 110vh; }
.chamber-illumination { min-height: 90vh; flex-direction: column; }
.chamber-dissolution { min-height: 80vh; flex-direction: column; padding-bottom: 6rem; }

.breath-mark {
    position: relative;
    height: 20vh;
    transform-style: preserve-3d;
}

.breath-mark span {
    position: absolute;
    width: clamp(180px, 30vw, 440px);
    height: clamp(160px, 24vw, 360px);
    left: 12vw;
    top: -8vh;
    background: linear-gradient(135deg, rgba(196, 177, 230, 0.18), rgba(168, 230, 207, 0.12), rgba(242, 181, 212, 0.14));
    clip-path: polygon(42% 2%, 76% 11%, 96% 38%, 82% 77%, 51% 100%, 18% 87%, 0 55%, 13% 20%);
    filter: blur(1px);
    opacity: 0.55;
    animation: polygonBreath 9s ease-in-out infinite;
    transform: translateZ(-120px);
}

.breath-right span {
    left: auto;
    right: 10vw;
    animation-delay: -4s;
}

@keyframes polygonBreath {
    0%, 100% { clip-path: polygon(42% 2%, 76% 11%, 96% 38%, 82% 77%, 51% 100%, 18% 87%, 0 55%, 13% 20%); transform: translate3d(0, 0, -120px) rotate(0deg); }
    50% { clip-path: polygon(36% 0, 88% 18%, 100% 51%, 71% 92%, 38% 86%, 9% 99%, 3% 43%, 21% 8%); transform: translate3d(2vw, -2vh, -90px) rotate(8deg); }
}

.hero-bloom {
    position: relative;
    z-index: 3;
    text-align: center;
    transform: translateZ(80px);
}

.hero-bloom h1,
.illumination-sentence,
.dissolve-stack p {
    font-family: "Playfair Display", Playfair, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--cloud);
    text-shadow: 0 0 40px rgba(196, 177, 230, 0.4), 0 0 80px rgba(127, 219, 218, 0.12);
}

.hero-bloom h1 {
    font-size: clamp(4rem, 12vw, 10rem);
    opacity: 0.15;
    animation: titleArrive 3s var(--ease-out) forwards;
}

@keyframes titleArrive {
    from { opacity: 0.15; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.haiku {
    margin-top: 1rem;
    color: rgba(240, 237, 245, 0.82);
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    opacity: 0;
    animation: haikuArrive 2.2s var(--ease-out) 0.65s forwards;
}

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

.mono-label,
.signature {
    font-family: "DM Mono", "Space Mono", monospace;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lilac);
}

.hero-bloom .mono-label {
    margin-bottom: 1.4rem;
    color: rgba(245, 216, 154, 0.72);
}

.glass-panel {
    position: relative;
    z-index: 3;
    max-width: 620px;
    padding: clamp(2rem, 4vw, 4rem);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    background: var(--panel);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 90px rgba(26, 22, 37, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translate3d(0, 60px, 0) scale(0.97);
    opacity: 0;
    overflow: hidden;
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}

.glass-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    filter: url(#paper-noise);
    mix-blend-mode: overlay;
    opacity: 0.04;
    pointer-events: none;
}

.reflection-panel {
    margin-left: 5vw;
    transform: translate3d(-3vw, 60px, 40px) scale(0.97);
}

.glass-panel p {
    margin-top: 1.1rem;
    color: var(--cloud);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.75;
}

.glass-panel .mono-label {
    margin-top: 0;
    color: rgba(127, 219, 218, 0.76);
}

[data-lines] span {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}

.reveal-item.is-visible,
.glass-panel.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 70px) scale(1);
}

.reflection-panel.is-visible { transform: translate3d(-3vw, 0, 70px) scale(1); }

.is-visible[data-lines] span { opacity: 1; transform: translateY(0); }
.is-visible[data-lines] p:nth-of-type(2) span { transition-delay: 200ms; }
.is-visible[data-lines] p:nth-of-type(3) span { transition-delay: 400ms; }
.is-visible[data-lines] p:nth-of-type(4) span { transition-delay: 600ms; }
.is-visible[data-lines] p:nth-of-type(5) span { transition-delay: 800ms; }

.morphing-blob {
    position: absolute;
    width: clamp(260px, 35vw, 560px);
    height: clamp(240px, 32vw, 520px);
    background: linear-gradient(135deg, rgba(196, 177, 230, 0.28), rgba(168, 230, 207, 0.13), rgba(242, 181, 212, 0.19));
    filter: blur(22px);
    opacity: 0.65;
    animation: blobMorph 11s ease-in-out infinite;
    z-index: 1;
}

.blob-reflection { left: 8vw; top: 17vh; animation-delay: -10s; }
.blob-immersion { right: 9vw; bottom: 12vh; animation-delay: -5s; }

@keyframes blobMorph {
    0%, 100% { border-radius: 42% 58% 70% 30% / 38% 48% 52% 62%; transform: translate3d(0, 0, -80px) rotate(0deg); }
    50% { border-radius: 68% 32% 56% 44% / 62% 31% 69% 38%; transform: translate3d(3vw, -4vh, -40px) rotate(12deg); }
}

.rear-panel {
    position: absolute;
    left: 10vw;
    top: 50%;
    width: min(58vw, 680px);
    height: min(56vw, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(-5vw, -42%, -60px) scale(0.97);
    opacity: 0;
}

.rear-panel.is-visible { transform: translate3d(-5vw, -50%, -35px) scale(1); opacity: 1; }

.decorative-character {
    font-family: "Playfair Display", Playfair, serif;
    font-size: 30vw;
    color: rgba(196, 177, 230, 0.11);
    line-height: 0.8;
    text-shadow: 0 0 60px rgba(196, 177, 230, 0.18);
}

.front-panel {
    margin-left: 20vw;
    max-width: 540px;
    transform: translate3d(5vw, 60px, 120px) scale(0.97);
}

.front-panel.is-visible { transform: translate3d(5vw, 0, 120px) scale(1); }

.warm-hold {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 48%, rgba(242, 181, 212, 0.32), transparent 58%);
    opacity: 0.78;
}

.constellation {
    position: relative;
    z-index: 3;
    width: min(78vw, 620px);
    height: min(52vw, 420px);
    transform: translateZ(100px);
}

.candle-point {
    position: absolute;
    width: var(--size, 82px);
    height: var(--size, 82px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 216, 154, 0.6) 0%, rgba(245, 216, 154, 0.15) 30%, transparent 70%);
    box-shadow: 0 0 34px rgba(245, 216, 154, 0.42), 0 0 90px rgba(245, 216, 154, 0.16);
    animation: candleFlicker var(--duration, 2.7s) ease-in-out infinite;
    z-index: 2;
}

.candle-a { --size: 76px; --duration: 2.1s; left: 14vw; top: 18vh; }
.candle-b { --size: 104px; --duration: 2.7s; right: 11vw; top: 45vh; }
.candle-c { --size: 68px; --duration: 3.3s; left: 53vw; bottom: 16vh; }

@keyframes candleFlicker {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    37% { transform: scale(1.09) translateY(-2px); opacity: 0.94; }
    63% { transform: scale(1.15) translateY(1px); opacity: 1; }
}

.intense { animation-name: candleFlickerIntense; }
@keyframes candleFlickerIntense {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    45% { transform: scale(1.3); opacity: 1; }
}

.c1 { --size: 96px; --duration: 2.1s; left: 5%; top: 8%; }
.c2 { --size: 80px; --duration: 2.7s; left: 38%; top: 0; }
.c3 { --size: 108px; --duration: 3.3s; right: 9%; top: 18%; }
.c4 { --size: 72px; --duration: 2.4s; left: 18%; top: 46%; }
.c5 { --size: 94px; --duration: 2.9s; right: 28%; top: 44%; }
.c6 { --size: 78px; --duration: 2.5s; right: 3%; bottom: 5%; }
.c7 { --size: 112px; --duration: 3.1s; left: 38%; bottom: 0; }
.c8 { --size: 70px; --duration: 2.3s; left: 2%; bottom: 12%; }

.illumination-sentence {
    position: relative;
    z-index: 4;
    max-width: 850px;
    text-align: center;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    opacity: 0;
    transform: translateY(60px) scale(0.97);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    text-shadow: 0 0 42px rgba(245, 216, 154, 0.5);
}

.illumination-sentence.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.dissolve-stack {
    text-align: center;
    transform: translateY(60px) scale(0.97);
    opacity: 0;
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}

.dissolve-stack.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.dissolve-stack p {
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    margin: 0.25em 0;
}

.dissolve-stack p:nth-child(1) { opacity: 0.72; }
.dissolve-stack p:nth-child(2) { opacity: 0.47; }
.dissolve-stack p:nth-child(3) { opacity: 0.28; }

.signature {
    position: absolute;
    left: 50%;
    bottom: 1.8rem;
    transform: translateX(-50%);
    color: rgba(155, 143, 181, 0.76);
    text-shadow: 0 0 20px rgba(245, 216, 154, 0.3);
}

.bubble-field { z-index: 8; overflow: hidden; }

.bubble {
    position: absolute;
    bottom: calc(-1 * var(--size));
    left: var(--left);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%, rgba(127, 219, 218, 0.25), transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 20px rgba(127, 219, 218, 0.08), 0 0 15px rgba(196, 177, 230, 0.1);
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
    animation: bubbleRise var(--duration) linear var(--delay) infinite;
}

.bubble::after {
    content: "";
    position: absolute;
    top: 20%;
    left: 26%;
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: rgba(240, 237, 245, 0.32);
    filter: blur(1px);
}

@keyframes bubbleRise {
    0% { opacity: 0; transform: translate3d(0, 0, var(--z, 80px)) scale(var(--scale, 1)); }
    7% { opacity: var(--peak, 0.48); }
    24% { transform: translate3d(var(--drift-a), -25vh, var(--z, 80px)) scale(var(--scale, 1)); }
    52% { transform: translate3d(var(--drift-b), -55vh, var(--z, 80px)) scale(calc(var(--scale, 1) * 1.04)); }
    84% { opacity: var(--peak, 0.48); transform: translate3d(var(--drift-c), -86vh, var(--z, 80px)) scale(calc(var(--scale, 1) * 0.94)); }
    100% { opacity: 0; transform: translate3d(var(--drift-d), -112vh, var(--z, 80px)) scale(calc(var(--scale, 1) * 0.82)); }
}

@media (max-width: 760px) {
    .chamber { padding: 2rem; min-height: 88vh; }
    .chamber-emergence { min-height: 100vh; }
    .reflection-panel { margin-left: 0; }
    .rear-panel { left: 2vw; width: 88vw; height: 62vw; }
    .front-panel { margin-left: 0; }
    .front-panel.is-visible { transform: translate3d(0, 0, 120px) scale(1); }
    .constellation { width: 92vw; height: 68vw; }
    .glass-panel { padding: 2rem 1.4rem; }
}