/* === cbdc.study - Chrome Metallic + Pastoral Warmth === */
/* Palette: #C8CDD0, #E8ECF0, #5A6068, #14161A, #D4A843, #F0E4C8, #A8B8C8, #5B8C7A, #C0C0C0, #E8E8E8 */
/* Fonts: Poiret One (display), Josefin Sans (secondary), Cormorant Garamond (body) */
/* Intersection Observer watches each section with threshold: [0, 0.1, 0.5, 0.9, 1] */
/* counter-animate pattern: each digit change triggers a CSS transition where the */
/* outgoing number slides up and fades out while the incoming number slides up from */
/* below and fades in, using cubic-bezier(0.33, 1, 0.68, 1). No abrupt cuts -- every */
/* transition is a slow fade. numerals animate using the **counter-animate** pattern: */
/* `threshold: [0, 0.1, 0.5, 0.9, 1] -- observed via IntersectionObserver */
/* **counter-animate** [0 -- */

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #14161A;
    color: #F0E4C8;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.75;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1, 'kern' 1;
    hyphens: auto;
    overflow-x: hidden;
}

/* === Letterbox Chrome Bars === */
/* Chrome bars: #C0C0C0 to #E8E8E8 gradient, framing cinematic 2.39:1 aspect */
.letterbox-bar {
    position: fixed;
    left: 0;
    width: 100%;
    height: 8vh;
    z-index: 100;
    background: linear-gradient(90deg, #5A6068, #C0C0C0, #E8E8E8, #E8ECF0, #E8E8E8, #C0C0C0, #5A6068);
    pointer-events: none;
}

.letterbox-top {
    top: 0;
}

.letterbox-bottom {
    bottom: 0;
}

/* === Frame Counter === */
.frame-counter {
    position: fixed;
    bottom: calc(8vh + 20px);
    right: 40px;
    z-index: 101;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 22px);
    color: #A8B8C8;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.frame-current {
    display: inline-flex;
    overflow: hidden;
    height: 1.4em;
}

.digit-wrapper {
    display: inline-block;
    width: 0.7em;
    height: 1.4em;
    overflow: hidden;
    position: relative;
}

.digit {
    display: block;
    text-align: center;
    transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1), opacity 600ms cubic-bezier(0.33, 1, 0.68, 1);
}

.digit.exit-up {
    transform: translateY(-100%);
    opacity: 0;
}

.digit.enter-from-below {
    transform: translateY(100%);
    opacity: 0;
}

.frame-separator {
    opacity: 0.6;
}

/* === Scroll Container === */
.scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
    scroll-behavior: smooth;
}

/* === Frames (Sections) === */
.frame {
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.frame.visible {
    opacity: 1;
}

/* First frame visible by default */
.frame-1 {
    opacity: 1;
}

/* === Parallax Wrapper === */
.parallax-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    perspective: 1px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* === Layers === */
.bg-layer, .mid-layer, .content-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg-layer {
    z-index: 1;
    transform: translateZ(-2px) scale(3);
}

.mid-layer {
    z-index: 2;
    transform: translateZ(-1px) scale(2);
    pointer-events: none;
}

.content-layer {
    z-index: 3;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8vh 64px;
    min-height: 100vh;
}

/* === Background Gradients per Section === */

/* Section 1 - Opening: Chrome + Pastoral terrain */
.frame-1 .bg-layer {
    background:
        radial-gradient(ellipse at 30% 70%, rgba(91, 140, 122, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(212, 168, 67, 0.13) 0%, transparent 50%),
        conic-gradient(from 180deg at 50% 100%, #14161A 0deg, #5A6068 120deg, #C8CDD0 240deg, #14161A 360deg);
}

/* Section 2 - The Field: Golden pastoral warmth */
.frame-2 .bg-layer {
    background:
        radial-gradient(ellipse at 60% 80%, rgba(212, 168, 67, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 40%, rgba(91, 140, 122, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(240, 228, 200, 0.1) 0%, transparent 40%),
        conic-gradient(from 220deg at 40% 90%, #14161A 0deg, #5A6068 100deg, #D4A843 180deg, #5A6068 280deg, #14161A 360deg);
}

/* Section 3 - The Forge: Industrial chrome heat */
.frame-3 .bg-layer {
    background:
        radial-gradient(ellipse at 40% 50%, rgba(212, 168, 67, 0.25) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 70%, rgba(90, 96, 104, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, #14161A 0%, #5A6068 50%, #14161A 100%);
}

/* Section 4 - The Ledger: Deep systematic grid */
.frame-4 .bg-layer {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(168, 184, 200, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(91, 140, 122, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #14161A 0%, #1a1d22 50%, #14161A 100%);
}

/* Section 5 - The Commons: Open sky, spacious */
.frame-5 .bg-layer {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(168, 184, 200, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse at 30% 60%, rgba(91, 140, 122, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(212, 168, 67, 0.08) 0%, transparent 40%),
        conic-gradient(from 0deg at 50% 50%, #14161A 0deg, #5A6068 90deg, #A8B8C8 180deg, #5A6068 270deg, #14161A 360deg);
}

/* Section 6 - The Question: Dramatic, contemplative */
.frame-6 .bg-layer {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 168, 67, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(91, 140, 122, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #14161A 0%, #5A6068 100%);
}

/* Section 7 - The Horizon: Chrome to amber fade */
.frame-7 .bg-layer {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(212, 168, 67, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(240, 228, 200, 0.15) 0%, transparent 40%),
        linear-gradient(180deg, #C8CDD0 0%, #D4A843 40%, #F0E4C8 70%, #14161A 100%);
}

/* === Content Layout === */
.frame-content {
    max-width: 38em;
    position: relative;
    z-index: 4;
}

/* Left-aligned content (odd sections): columns 2-6 */
.frame-1 .frame-content,
.frame-3 .frame-content,
.frame-5 .frame-content {
    margin-left: calc((100% / 12) * 1 + 32px);
    margin-right: auto;
}

/* Right-aligned content (even sections): columns 7-11 */
.content-right {
    margin-left: auto;
    margin-right: calc((100% / 12) * 1 + 32px);
}

/* Opening section centered */
.opening-content {
    text-align: center;
    margin: 0 auto;
}

/* === Typography === */

/* Display Title - Poiret One */
.display-title {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(48px, 10vw, 144px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.0;
    color: #F0E4C8;
    margin-bottom: 0.3em;
}

/* Section Titles */
.section-title {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(36px, 6vw, 80px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #F0E4C8;
    margin-bottom: 0.3em;
}

/* Section Labels - Josefin Sans */
.section-label {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 22px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #A8B8C8;
    margin-bottom: 1em;
}

/* Body Text - Cormorant Garamond */
.body-text p {
    margin-bottom: 1.75em;
    max-width: 38em;
    color: #F0E4C8;
}

/* Drop Cap */
.body-text p:first-of-type::first-letter {
    font-family: 'Poiret One', cursive;
    font-size: 3.5em;
    float: left;
    margin-right: 0.1em;
    line-height: 0.8;
    color: #D4A843;
}

/* Opening line */
.opening-line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.6;
    color: #A8B8C8;
    max-width: 30em;
    margin: 0 auto;
}

/* Question Display */
.question-display {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(36px, 7vw, 100px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #D4A843;
}

.question-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84vh;
}

.question-text {
    max-width: 18em;
}

/* === Geometric Rule === */
/* Diamond-flanked horizontal rule: central line + rotated squares in #C8CDD0 */
.geometric-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 1.5em 0;
    width: 60%;
}

.content-right .geometric-rule,
.opening-content .geometric-rule {
    margin-left: auto;
    margin-right: auto;
}

.geometric-rule .line {
    flex: 1;
    height: 1px;
    background: #C8CDD0;
}

.geometric-rule .diamond {
    width: 8px;
    height: 8px;
    background: #C8CDD0;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* === Chevron Dividers === */
/* Stacked V-shapes pointing downward between sections */
.chevron-divider {
    position: absolute;
    bottom: calc(8vh + 30px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    opacity: 0.5;
}

.chevron-divider svg {
    width: 60px;
    height: 40px;
}

/* === Sunburst Corners === */
/* Art-deco radiating lines: odd sections top-left, even sections bottom-right */
.sunburst-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 4;
    opacity: 0.3;
}

.sunburst-top-left {
    top: calc(8vh + 20px);
    left: 40px;
    background: repeating-conic-gradient(
        from 0deg at 0% 0%,
        transparent 0deg 3deg,
        rgba(212, 168, 67, 0.3) 3deg 5deg,
        transparent 5deg 10deg
    );
    mask: radial-gradient(circle at 0% 0%, black 0%, transparent 70%);
    -webkit-mask: radial-gradient(circle at 0% 0%, black 0%, transparent 70%);
}

.sunburst-bottom-right {
    bottom: calc(8vh + 20px);
    right: 40px;
    background: repeating-conic-gradient(
        from 180deg at 100% 100%,
        transparent 0deg 3deg,
        rgba(212, 168, 67, 0.3) 3deg 5deg,
        transparent 5deg 10deg
    );
    mask: radial-gradient(circle at 100% 100%, black 0%, transparent 70%);
    -webkit-mask: radial-gradient(circle at 100% 100%, black 0%, transparent 70%);
}

/* === Node Constellations === */
/* Small circles connected by hairline strokes, drifting slowly */
.node-constellation {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.node-constellation svg {
    width: 100%;
    height: 100%;
    animation: drift 30s linear infinite;
}

@keyframes drift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(10px, -5px); }
    50% { transform: translate(-5px, 10px); }
    75% { transform: translate(-10px, -3px); }
    100% { transform: translate(0, 0); }
}

/* === Atmospheric Meshes === */
/* Large soft radial gradients suggesting light sources at 10% opacity */
.atmospheric-mesh {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.atmospheric-1 {
    background: radial-gradient(ellipse at 40% 60%, rgba(240, 228, 200, 0.1) 0%, transparent 60%);
}

.atmospheric-2 {
    background: radial-gradient(ellipse at 70% 40%, rgba(240, 228, 200, 0.1) 0%, transparent 55%);
}

.atmospheric-3 {
    background: radial-gradient(ellipse at 50% 30%, rgba(240, 228, 200, 0.1) 0%, transparent 65%);
}

.atmospheric-4 {
    background: radial-gradient(ellipse at 60% 50%, rgba(212, 168, 67, 0.08) 0%, transparent 50%);
}

.atmospheric-5 {
    background: radial-gradient(ellipse at 50% 70%, rgba(240, 228, 200, 0.12) 0%, transparent 50%);
}

/* === Chrome Reflections === */
/* Sharp-angle linear gradients suggesting polished metal surfaces */
.chrome-reflection {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.15;
}

.chrome-reflection-1 {
    background: linear-gradient(45deg, transparent 30%, #E8ECF0 50%, #5A6068 70%, transparent 90%);
}

.chrome-reflection-2 {
    background: linear-gradient(135deg, transparent 20%, #5A6068 45%, #E8ECF0 55%, transparent 80%);
}

/* === Ledger Lines === */
/* Thin 1px horizontal rules at 32px intervals: financial ledger / CRT scan lines */
.ledger-lines {
    position: absolute;
    top: 8vh;
    left: 0;
    width: 100%;
    height: calc(100% - 16vh);
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 31px,
        #C8CDD0 31px,
        #C8CDD0 32px
    );
    opacity: 0.08;
}

/* === Counter Display === */
.counter-display {
    text-align: center;
    margin: 2em 0;
}

.counter-number {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(64px, 12vw, 180px);
    color: #D4A843;
    letter-spacing: 0.05em;
    line-height: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.counter-number .counter-digit {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    position: relative;
    width: 0.65em;
}

.counter-number .counter-digit-inner {
    display: block;
    transition: transform 400ms cubic-bezier(0.33, 1, 0.68, 1), opacity 400ms ease;
}

.counter-number .counter-comma {
    width: 0.3em;
    text-align: center;
}

.counter-caption {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 1.2vw, 16px);
    color: #A8B8C8;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 1em;
}

/* === Hash Pattern Background === */
/* 8px x 8px repeating geometric grids in #5A6068 at 15% opacity */
.frame-3 .content-layer::before,
.frame-4 .content-layer::before {
    content: '';
    position: absolute;
    top: 8vh;
    left: 0;
    width: 100%;
    height: calc(100% - 16vh);
    background-image:
        repeating-linear-gradient(
            to right,
            #5A6068 0px, #5A6068 8px, transparent 8px, transparent 10px
        ),
        repeating-linear-gradient(
            to bottom,
            #5A6068 0px, #5A6068 8px, transparent 8px, transparent 10px
        );
    background-size: 10px 10px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* === Responsive === */
@media (max-width: 768px) {
    .content-layer {
        padding: 8vh 24px;
    }

    .frame-1 .frame-content,
    .frame-3 .frame-content,
    .frame-5 .frame-content {
        margin-left: 24px;
    }

    .content-right {
        margin-right: 24px;
    }

    .frame-counter {
        right: 20px;
    }

    .sunburst-corner {
        display: none;
    }

    .geometric-rule {
        width: 80%;
    }

    .question-display {
        font-size: clamp(28px, 6vw, 60px);
    }
}