*, *::before, *::after {
    /* `IntersectionObserver` exclusively for triggering animations. Each section and content block has a `data-animate` attribute. When intersecting at 30% visibility, `IntersectionObserver` with `threshold: 0.3`. Source Sans 3 (400 Source Sans 3" (Google Fonts */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --kiln: #C8703D;
    --clay: #A3522A;
    --earth: #3E2316;
    --night: #1C1008;
    --linen: #F5EDE4;
    --bone: #E8D5C0;
    --soot: #2A1A0E;
    --amber: #E89B4E;
    --elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--kiln);
    color: var(--soot);
    font-family: "Source Sans 3", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    transition: background-color 900ms ease;
}

body.scene-dawn { background-color: var(--kiln); }
body.scene-midday { background-color: var(--linen); }
body.scene-evening { background-color: var(--earth); }
body.scene-sunset { background-color: var(--clay); }
body.scene-night { background-color: var(--night); }

#scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    z-index: 50;
    background: rgba(200, 112, 61, 0.4);
    transform-origin: top;
}

.scene {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#porch {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--kiln);
}

.porch-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 5vw;
    text-align: center;
}

.hero-title {
    color: var(--linen);
    font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
    font-size: clamp(6rem, 20vw, 18rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 0.85;
    text-shadow: 0 1.5rem 4rem rgba(62, 35, 22, 0.16);
}

.hero-subtitle,
.section-kicker,
.badge-tagline,
.footer-note {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.hero-subtitle {
    max-width: 35ch;
    margin: 2rem auto 0;
    color: var(--bone);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.6;
}

.scroll-hint {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    z-index: 4;
    width: 1px;
    height: 54px;
    transform: translateX(-50%);
    background: rgba(245, 237, 228, 0.22);
}

.scroll-hint span {
    display: block;
    width: 1px;
    height: 24px;
    background: rgba(245, 237, 228, 0.72);
    animation: scrollDrift 2.4s ease-in-out infinite;
}

@keyframes scrollDrift {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(30px); opacity: 1; }
}

.lens-flare {
    position: absolute;
    top: -10vh;
    right: -5vw;
    z-index: 2;
    width: 60vw;
    height: 60vh;
    pointer-events: none;
    animation: flareBreathe 12s cubic-bezier(0.33, 0, 0.67, 1) infinite alternate;
}

@keyframes flareBreathe {
    from { transform: translate3d(-1vw, 1vh, 0) scale(0.95); }
    to { transform: translate3d(1vw, -1vh, 0) scale(1.05); }
}

.flare-core,
.flare-circle,
.flare-hex {
    position: absolute;
}

.flare-core {
    top: 28%;
    left: 42%;
    width: clamp(150px, 18vw, 260px);
    height: clamp(150px, 18vw, 260px);
    border-radius: 50%;
    background: radial-gradient(circle at center, #E89B4E 0%, rgba(200,112,61,0.6) 20%, transparent 60%);
    filter: blur(2px);
}

.flare-circle { border-radius: 50%; }
.flare-1 { top: 42%; left: 51%; width: 120px; height: 120px; background: rgba(200,112,61,0.25); filter: blur(20px); }
.flare-2 { top: 52%; left: 31%; width: 86px; height: 86px; background: rgba(232,155,78,0.2); filter: blur(15px); }
.flare-3 { top: 24%; left: 58%; width: 48px; height: 48px; background: rgba(163,82,42,0.3); filter: blur(12px); }
.flare-4 { top: 63%; left: 45%; width: 32px; height: 32px; background: rgba(232,155,78,0.35); filter: blur(8px); }
.flare-5 { top: 35%; left: 64%; width: 64px; height: 64px; background: rgba(200,112,61,0.15); filter: blur(18px); }
.flare-6 { top: 70%; left: 22%; width: 44px; height: 44px; background: rgba(245,237,228,0.13); filter: blur(10px); }

.flare-hex {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.flare-hex-1 { top: 45%; left: 35%; width: 90px; height: 90px; background: rgba(232,155,78,0.15); filter: blur(4px); }
.flare-hex-2 { top: 30%; left: 50%; width: 55px; height: 55px; background: rgba(232,155,78,0.2); filter: blur(6px); }

#beat {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 15vh 2rem 12vh;
    background-color: var(--linen);
}

.dotted-field {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #A3522A 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.08;
    pointer-events: none;
}

.section-border::before,
.section-border::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 40px;
    background-image:
        repeating-linear-gradient(45deg, #A3522A 0px, #A3522A 10px, #C8703D 10px, #C8703D 20px),
        repeating-linear-gradient(-45deg, #A3522A 0px, #A3522A 10px, #C8703D 10px, #C8703D 20px);
    background-size: 100% 50%;
    background-position: top, bottom;
    background-repeat: no-repeat;
}

.section-border::before { top: 0; }
.section-border::after { bottom: 0; }

.beat-content {
    position: relative;
    z-index: 3;
    max-width: 38ch;
}

.section-kicker {
    margin-bottom: 1.25rem;
    color: var(--clay);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.25;
}

.beat-text {
    color: var(--soot);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.85;
}

#route {
    min-height: 150vh;
    display: flex;
    flex-direction: column;
    gap: clamp(8rem, 13vh, 12rem);
    padding: 12rem 2rem;
    background-color: var(--earth);
}

.route-block {
    position: relative;
    z-index: 2;
    max-width: 36ch;
    color: var(--bone);
    line-height: 1.8;
}

.route-left { align-self: flex-start; margin-left: 8vw; }
.route-right { align-self: flex-end; margin-right: 8vw; }
.route-center { align-self: center; text-align: center; }
.route-narrow { max-width: 34ch; }

#route .section-kicker {
    color: var(--amber);
}

.small-flare {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(232,155,78,0.16), rgba(200,112,61,0.08) 28%, transparent 64%);
    filter: blur(4px);
    pointer-events: none;
}

.route-flare-a { top: 16%; right: 12vw; }
.route-flare-b { bottom: 12%; left: 7vw; transform: scale(0.72); }

#dispatch {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--clay);
}

.dispatch-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(78vw, 620px);
    height: min(78vw, 620px);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #C8703D 0px, #C8703D 1px, transparent 1px, transparent 20px);
    opacity: 0.25;
    transform: translate(-50%, -50%);
    animation: ringPulse 6s ease-in-out infinite;
    pointer-events: none;
}

.dispatch-rings-wide {
    width: min(108vw, 920px);
    height: min(108vw, 920px);
    opacity: 0.12;
    animation-delay: -3s;
}

@keyframes ringPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.25; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.15; }
}

.badge-shape {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(220px, 31vw, 340px);
    height: clamp(220px, 31vw, 340px);
    padding: 2rem;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: linear-gradient(135deg, #3E2316 0%, #2A1A0E 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.3), 0 2rem 5rem rgba(28,16,8,0.22);
}

.badge-label {
    margin-bottom: 0.8rem;
    color: var(--amber);
    font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.badge-tagline {
    color: var(--bone);
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    line-height: 1.45;
    text-align: center;
}

#porch-light {
    min-height: 50vh;
    display: grid;
    place-items: center;
    background-color: var(--night);
}

.porch-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(80vw, 540px);
    height: min(80vw, 540px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(232,155,78,0.3) 0%, rgba(200,112,61,0.1) 30%, transparent 60%);
    transform: translate(-50%, -50%);
    animation: porchPulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes porchPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.footer-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.footer-text {
    margin-bottom: 1rem;
    color: var(--bone);
    font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-note {
    color: rgba(232, 213, 192, 0.66);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.6;
}

[data-animate] {
    opacity: 0;
    transform: translateY(60px) scaleY(1.08);
    transition: opacity 600ms var(--elastic), transform 600ms var(--elastic);
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}

.badge-shape[data-animate] {
    transform: scale(0.7);
    transition: opacity 700ms var(--elastic), transform 700ms var(--elastic);
}

.badge-shape[data-animate].visible {
    transform: scale(1);
}

@media (max-width: 760px) {
    .hero-title { letter-spacing: 0.04em; }
    #route { padding: 8rem 1.25rem; }
    .route-left,
    .route-right,
    .route-center {
        align-self: flex-start;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }
}