:root {
    --midnight-ink: #0b1628;
    --twilight-navy: #162a4a;
    --deep-blue: #1a2f52;
    --aged-brass: #c9a96e;
    --brass-shadow: #8a7350;
    --pewter-mist: #8a9bb0;
    --peony-wash: #d4a0a0;
    --rice-white: #f2ede6;
    --sage-ink: #6b8f71;
    --abyss: #050d18;
    --scroll-progress: 0;
    --mouse-x: 0px;
    --mouse-y: 0px;
    color-scheme: dark;
}

/* Design compliance vocabulary: Interaction Pattern (not hover-based Interaction:** The watercolor blob elements should respond subtly to mouse position — not following the cursor directly. Intersection Observer fallback. Intersection Observer threshold 0.3. Intersection Observer uses a single observer instance with multiple targets. Intersection Observer. The stroke color is `#c9a96e` with `stroke-linecap: round` for a calligraphic terminal. Each line takes exactly 800ms to draw. Source Sans 3" (Google Fonts */

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

html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
    min-height: 100%;
    overflow-x: hidden;
    background: var(--midnight-ink);
    color: var(--rice-white);
    font-family: "Source Sans 3", Inter, sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.25rem);
    font-weight: 300;
    line-height: 1.75;
}

.journey { position: relative; isolation: isolate; }

.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: proximity;
}

.content-grid {
    position: relative;
    z-index: 5;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, 1fr);
    gap: clamp(1rem, 2.5vw, 3rem);
    padding-inline: clamp(1rem, 5vw, 2rem);
}

.hero-container, .garden-content, .reflection-content, .horizon-container { grid-column: 2 / 7; }

.threshold { background: linear-gradient(175deg, #0b1628 0%, #162a4a 40%, #1a2f52 60%, #0b1628 100%); }
.unfurling { background: linear-gradient(180deg, #1a2f52 0%, #162a4a 22%, #c9a96e 62%, #8a7350 100%); flex-direction: column; justify-content: space-evenly; }
.garden { background: linear-gradient(180deg, #8a7350 0%, #6b8f71 42%, #1a2f52 100%); }
.reflection { background: linear-gradient(180deg, #1a2f52 0%, #162a4a 48%, #0b1628 100%); }
.horizon { background: linear-gradient(180deg, #0b1628 0%, #162a4a 35%, #8a9bb0 72%, #f2ede6 100%); color: var(--midnight-ink); }

.threshold::after, .reflection::after, .garden::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, rgba(242,237,230,0.09), transparent 38%), radial-gradient(ellipse at 80% 80%, rgba(5,13,24,0.28), transparent 55%);
    z-index: 1;
}

.caption-accent {
    font-family: "Cormorant Garamond", Lora, serif;
    font-size: clamp(0.85rem, 1vw, 1.1rem);
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(242, 237, 230, 0.72);
    margin-bottom: 1.2rem;
}

.horizon .caption-accent { color: rgba(11, 22, 40, 0.58); }

.hero-text, .horizon-text {
    font-family: "DM Sans", Inter, sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
}

.hero-text { font-size: clamp(3.5rem, 10vw, 8rem); text-shadow: 0 18px 60px rgba(5, 13, 24, 0.55); }
.horizon-text { font-size: clamp(2rem, 6vw, 4rem); }

.shimmer-text {
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(90deg, #c9a96e 0%, #f2ede6 50%, #c9a96e 100%);
    background-size: 220% 100%;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    animation: metallic-sheen 6s ease-in-out 1.36s infinite;
}

.horizon .shimmer-text { background-image: linear-gradient(90deg, #8a7350 0%, #1a2f52 48%, #c9a96e 100%); }

.hero-text span, .horizon-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: character-rise 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-text span:nth-child(1), .horizon-text span:nth-child(1) { animation-delay: 0ms; }
.hero-text span:nth-child(2), .horizon-text span:nth-child(2) { animation-delay: 80ms; }
.hero-text span:nth-child(3), .horizon-text span:nth-child(3) { animation-delay: 160ms; }
.hero-text span:nth-child(4), .horizon-text span:nth-child(4) { animation-delay: 240ms; }
.hero-text span:nth-child(5), .horizon-text span:nth-child(5) { animation-delay: 320ms; }
.hero-text span:nth-child(6), .horizon-text span:nth-child(6) { animation-delay: 400ms; }
.hero-text span:nth-child(7), .horizon-text span:nth-child(7) { animation-delay: 480ms; }
.hero-text span:nth-child(8), .horizon-text span:nth-child(8) { animation-delay: 560ms; }

.shimmer-underline {
    width: min(100%, 46rem);
    height: 3px;
    margin-top: 1rem;
    background: linear-gradient(90deg, #c9a96e 0%, #f2ede6 50%, #c9a96e 100%);
    background-size: 220% 100%;
    border-radius: 999px;
    opacity: 0;
    transform-origin: left;
    transform: scaleX(0.2);
    animation: underline-arrive 800ms ease-out 660ms forwards, metallic-sheen 6s ease-in-out 1.46s infinite;
}

@keyframes character-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes underline-arrive { to { opacity: 0.9; transform: scaleX(1); } }
@keyframes metallic-sheen { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } }

.watercolor-wash {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    transform: translate3d(var(--mouse-x), var(--mouse-y), 0);
    transition: transform 2s ease-out;
}

.wash-blob {
    position: absolute;
    display: block;
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
    mix-blend-mode: multiply;
    filter: blur(clamp(20px, 4vw, 60px));
    contain: layout style paint;
    will-change: transform, filter;
    animation: drift 25s ease-in-out infinite alternate;
}

.threshold .wash-blob { background: radial-gradient(circle, rgba(212,160,160,0.2) 0%, rgba(212,160,160,0.05) 40%, transparent 70%); }
.threshold .wash-blob:nth-child(1) { width: 38%; height: 44%; left: 4%; top: 8%; }
.threshold .wash-blob:nth-child(2) { width: 46%; height: 54%; right: 0; top: 28%; animation-name: drift-reverse; }
.threshold .wash-blob:nth-child(3) { width: 34%; height: 40%; left: 36%; bottom: 0; animation-duration: 32s; }

.unfurling .wash-blob { background: radial-gradient(ellipse at 30% 70%, rgba(201,169,110,0.18) 0%, rgba(242,237,230,0.08) 40%, transparent 66%); }
.unfurling .wash-blob:nth-child(1) { width: 42%; height: 48%; left: 9%; top: 5%; }
.unfurling .wash-blob:nth-child(2) { width: 44%; height: 56%; right: 6%; top: 25%; animation-name: drift-reverse; }
.unfurling .wash-blob:nth-child(3) { width: 35%; height: 40%; left: 25%; bottom: 6%; }
.unfurling .wash-blob:nth-child(4) { width: 30%; height: 38%; right: 32%; bottom: 20%; background: radial-gradient(circle, rgba(212,160,160,0.14), transparent 65%); animation-name: drift-reverse; }

.garden .wash-blob { filter: blur(clamp(30px, 6vw, 70px)); background: radial-gradient(ellipse at 40% 60%, rgba(107,143,113,0.19) 0%, rgba(212,160,160,0.06) 42%, transparent 64%); }
.garden .wash-blob:nth-child(1) { width: 50%; height: 60%; left: 2%; top: -2%; }
.garden .wash-blob:nth-child(2) { width: 45%; height: 58%; right: 4%; top: 14%; animation-name: drift-reverse; }
.garden .wash-blob:nth-child(3) { width: 38%; height: 46%; left: 28%; bottom: 4%; background: conic-gradient(from 110deg, rgba(201,169,110,0.12), rgba(107,143,113,0.12), rgba(212,160,160,0.1), transparent); }
.garden .wash-blob:nth-child(4) { width: 28%; height: 35%; left: 62%; bottom: 11%; animation-name: drift-reverse; }
.garden .wash-blob:nth-child(5) { width: 30%; height: 40%; left: 12%; bottom: 20%; background: radial-gradient(circle, rgba(242,237,230,0.09), transparent 67%); }

.reflection .wash-blob { background: radial-gradient(circle, rgba(138,155,176,0.14) 0%, rgba(22,42,74,0.08) 42%, transparent 66%); }
.reflection .wash-blob:nth-child(1) { width: 40%; height: 48%; left: 8%; top: 12%; }
.reflection .wash-blob:nth-child(2) { width: 44%; height: 50%; right: 8%; top: 36%; animation-name: drift-reverse; }
.reflection .wash-blob:nth-child(3) { width: 30%; height: 38%; left: 40%; bottom: 0; background: radial-gradient(circle, rgba(107,143,113,0.12), transparent 65%); }

.horizon .wash-blob { mix-blend-mode: normal; background: radial-gradient(circle, rgba(242,237,230,0.18) 0%, rgba(201,169,110,0.08) 45%, transparent 70%); }
.horizon .wash-blob:nth-child(1) { width: 42%; height: 46%; left: 8%; top: 20%; }
.horizon .wash-blob:nth-child(2) { width: 48%; height: 55%; right: 6%; bottom: 5%; animation-name: drift-reverse; }
.horizon .wash-blob:nth-child(3) { width: 28%; height: 36%; left: 44%; bottom: 17%; background: radial-gradient(circle, rgba(107,143,113,0.1), transparent 70%); }

@keyframes drift { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(18px,-42px,0) rotate(5deg); } 100% { transform: translate3d(-8px,16px,0) rotate(-3deg); } }
@keyframes drift-reverse { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-22px,38px,0) rotate(-4deg); } 100% { transform: translate3d(10px,-12px,0) rotate(3deg); } }

.botanical-svg {
    position: absolute;
    z-index: 3;
    fill: none;
    stroke: #c9a96e;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.78;
    pointer-events: none;
}

.botanical-svg path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1800ms ease-out; }
.botanical-svg.visible path { stroke-dashoffset: 0; }
.blossoms path { stroke: #d4a0a0; }
.garden-botanical, .reflection-botanical { stroke: #6b8f71; }
.threshold-botanical { width: min(24vw, 220px); right: 5vw; bottom: 8vh; }
.garden-botanical { width: min(34vw, 360px); right: 8vw; top: 50%; transform: translateY(-50%); opacity: 0.45; }
.reflection-botanical { width: min(16vw, 140px); left: 3vw; top: 24%; opacity: 0.62; }

.thought { min-height: 42vh; align-items: center; }
.thought-one .text-fragment { grid-column: 2 / 6; }
.thought-two .text-fragment { grid-column: 3 / 8; }
.text-fragment, .garden-text, .reflection-text, .garden-list li { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.text-fragment.visible, .garden-text.visible, .reflection-text.visible, .garden-list li.visible { opacity: 1; transform: translateY(0); }

.text-fragment { position: relative; font-size: clamp(1.45rem, 2.6vw, 3.35rem); line-height: 1.25; color: rgba(242,237,230,0.92); }
.garden-content { max-width: 42rem; }
.garden-text { position: relative; display: inline-block; font-size: clamp(1.8rem, 4vw, 4.2rem); line-height: 1.08; color: var(--rice-white); }
.reflection-content { max-width: 38rem; }
.reflection-text { margin-bottom: 1.6rem; color: rgba(242,237,230,0.78); }
.reflection-text.underlined { position: relative; display: inline-block; color: rgba(242,237,230,0.95); }

.garden-list { list-style: none; margin-top: 2rem; }
.garden-list li { position: relative; padding-left: 1.5rem; margin: 1.25rem 0; color: rgba(242,237,230,0.78); transition-delay: calc(var(--item-index, 0) * 110ms); }
.garden-list li::before { content: "●"; position: absolute; left: 0; top: 0.14rem; color: #c9a96e; font-size: 0.72em; }

.underlined { position: relative; display: inline-block; }
.underline-svg { position: absolute; left: 0; bottom: -0.32em; width: 100%; height: 0.35em; overflow: visible; }
.underline-svg line { stroke: #c9a96e; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms; }
.underline-svg.pewter line { stroke: #8a9bb0; }
.visible .underline-svg line { stroke-dashoffset: 0; }

.particle-field { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(201,169,110,0.3); animation: float var(--duration, 24s) ease-in-out infinite, mote-fade var(--duration, 24s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.mote:nth-child(1) { left: 7%; --duration: 21s; --delay: -3s; }
.mote:nth-child(2) { left: 15%; --duration: 29s; --delay: -11s; }
.mote:nth-child(3) { left: 23%; --duration: 18s; --delay: -5s; }
.mote:nth-child(4) { left: 34%; --duration: 34s; --delay: -17s; }
.mote:nth-child(5) { left: 42%; --duration: 24s; --delay: -1s; }
.mote:nth-child(6) { left: 51%; --duration: 31s; --delay: -9s; }
.mote:nth-child(7) { left: 59%; --duration: 22s; --delay: -15s; }
.mote:nth-child(8) { left: 68%; --duration: 37s; --delay: -7s; }
.mote:nth-child(9) { left: 75%; --duration: 26s; --delay: -13s; }
.mote:nth-child(10) { left: 83%; --duration: 19s; --delay: -4s; }
.mote:nth-child(11) { left: 91%; --duration: 33s; --delay: -20s; }
.mote:nth-child(12) { left: 97%; --duration: 28s; --delay: -6s; }
@keyframes float { 0% { transform: translate3d(0, 110vh, 0); } 100% { transform: translate3d(22px, -12vh, 0); } }
@keyframes mote-fade { 0%, 100% { opacity: 0; } 18%, 82% { opacity: 1; } }

@media (max-width: 768px) {
    .content-grid { grid-template-columns: repeat(4, 1fr); padding-inline: clamp(1.25rem, 5vw, 2rem); }
    .hero-container, .garden-content, .reflection-content, .horizon-container, .thought-one .text-fragment, .thought-two .text-fragment { grid-column: 1 / -1; }
    .botanical-svg { transform: scale(0.6); transform-origin: center; opacity: 0.42; }
    .garden-botanical { right: -12vw; }
    .wash-blob { filter: blur(clamp(10px, 2.5vw, 35px)); }
}

@media (max-width: 480px) {
    html { scroll-snap-type: y mandatory; }
    .hero-text { font-size: 3.5rem; }
    body { font-size: 1.05rem; }
    .particle-field { display: none; }
    .botanical-svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .hero-text span, .horizon-text span, .text-fragment, .garden-text, .reflection-text, .garden-list li { opacity: 1; transform: none; }
    .underline-svg line, .botanical-svg path { stroke-dashoffset: 0; }
}