/* ============================================
   cbdc.bar - Chrome-Metallic Numismatic Monograph
   Evolved-Minimal Aesthetic | Scholarly-Intellectual Tone
   ============================================ */

/* --- CSS Custom Property for Counter Animation --- */
@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #0F0F12;
    color: #9BA1AE;
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 400;
    line-height: 1.72;
    overflow: hidden;
}

/* --- SVG Defs Hidden --- */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Hide Scrollbar --- */
#scroll-container::-webkit-scrollbar {
    display: none;
}

#scroll-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* --- Progress Bar --- */
#progress-bar {
    position: fixed;
    top: 2vh;
    left: 0;
    height: 1px;
    width: 0%;
    background: #4A7C9B;
    z-index: 1000;
    transition: width 0.3s ease;
    pointer-events: none;
}

/* --- Scroll Container --- */
#scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

/* --- Plate Base --- */
.plate {
    height: 100vh;
    width: 100%;
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   PLATE TYPE A: Text Plate
   ============================================ */
.plate-text {
    background-color: #0F0F12;
}

/* Ledger Lines Background */
.plate-bg-ledger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 23px,
        rgba(180, 185, 195, 0.15) 23px,
        rgba(180, 185, 195, 0.15) 24px
    );
    pointer-events: none;
    z-index: 0;
}

.text-plate-content {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    padding: 12vh 1.5rem 16vh 1.5rem;
    text-align: left;
}

/* Gold Rule Above */
.gold-rule-above {
    width: 48px;
    height: 2px;
    background: #C2A462;
    margin-bottom: 2.5rem;
}

/* Headlines */
.headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.01em;
    color: #E8EAEF;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* Character stagger animation */
.headline .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
}

/* Whitespace chars should not have transform applied visually */
.headline .char-space {
    width: 0.3em;
}

.headline[data-animated="true"] .char {
    animation: charReveal 0.6s ease both;
    animation-delay: calc(var(--char-index) * 30ms);
}

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

/* Body Text */
.body-text {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    color: #9BA1AE;
}

.body-text-coda {
    margin-top: 2rem;
    font-style: italic;
    font-weight: 500;
    color: #B4B9C3;
}

/* ============================================
   PLATE TYPE B: Image Plate
   ============================================ */
.plate-image {
    background-color: #0F0F12;
}

.image-plate-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Placeholder for vintage photography (CSS-generated abstract representation) */
.image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1A1A1F;
    filter: grayscale(100%) brightness(0.92) contrast(1.15);
}

.image-placeholder-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(180, 185, 195, 0.04) 3px,
            rgba(180, 185, 195, 0.04) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 7px,
            rgba(180, 185, 195, 0.02) 7px,
            rgba(180, 185, 195, 0.02) 8px
        );
}

/* Specific image plates get distinct abstract backgrounds */
#image-plate-1 .image-placeholder {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(180,185,195,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(74,124,155,0.06) 0%, transparent 50%),
        linear-gradient(135deg, #1A1A1F 0%, #0F0F12 50%, #1A1A1F 100%);
}

#image-plate-2 .image-placeholder {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(180,185,195,0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 70%, rgba(99,107,122,0.08) 0%, transparent 45%),
        linear-gradient(180deg, #1A1A1F 0%, #0F0F12 60%, #1A1A1F 100%);
}

#image-plate-3 .image-placeholder {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(180,185,195,0.03) 0px,
            rgba(180,185,195,0.03) 2px,
            transparent 2px,
            transparent 40px
        ),
        radial-gradient(ellipse at 50% 50%, rgba(180,185,195,0.07) 0%, transparent 50%),
        linear-gradient(45deg, #0F0F12 0%, #1A1A1F 50%, #0F0F12 100%);
}

#image-plate-4 .image-placeholder {
    background:
        radial-gradient(circle at 60% 45%, rgba(74,124,155,0.07) 0%, transparent 40%),
        radial-gradient(circle at 30% 65%, rgba(180,185,195,0.05) 0%, transparent 35%),
        linear-gradient(200deg, #1A1A1F 0%, #0F0F12 40%, #1A1A1F 100%);
}

#image-plate-5 .image-placeholder {
    background:
        radial-gradient(ellipse at 45% 55%, rgba(194,164,98,0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 65% 35%, rgba(180,185,195,0.06) 0%, transparent 50%),
        linear-gradient(160deg, #1A1A1F 0%, #0F0F12 45%, #1A1A1F 100%);
}

/* Silver-gelatin tone overlay */
.image-plate-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #B4B9C3;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

/* Grain overlay */
.image-grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    filter: url(#grain);
    background: rgba(180, 185, 195, 0.04);
    pointer-events: none;
    z-index: 2;
}

/* Vignette */
.image-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(15, 15, 18, 0.5) 100%
    );
    pointer-events: none;
    z-index: 3;
}

/* Chrome gradient overlay (darkens lower third) */
.image-chrome-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(180, 185, 195, 0.08) 0%,
        rgba(15, 15, 18, 0.92) 100%
    );
    pointer-events: none;
    z-index: 4;
}

/* Image Caption */
.image-caption {
    position: absolute;
    bottom: 3rem;
    left: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.65rem, 1vw, 0.78rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #636B7A;
    z-index: 10;
}

/* ============================================
   PLATE TYPE C: Data Plate
   ============================================ */
.plate-data {
    background-color: #0F0F12;
}

.data-plate-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Gold Accent Numeral (Roman numeral) */
.gold-accent-numeral {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    letter-spacing: 0.2em;
    color: #C2A462;
    margin-bottom: 1.5rem;
}

/* Counter Display */
.counter-display {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #E8EAEF;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.counter-value {
    display: inline-block;
    min-width: 1ch;
}

/* Counter Label */
.counter-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.65rem, 1vw, 0.78rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #636B7A;
    max-width: 30rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   PLATE TYPE D: Transition Plate
   ============================================ */
.plate-transition {
    background-color: #1A1A1F;
}

/* Chrome rule */
.transition-rule {
    width: 60%;
    height: 1px;
    background: rgba(180, 185, 195, 0.4);
    position: relative;
    z-index: 1;
}

/* Isometric Grid Ghost */
.isometric-grid-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image:
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 39px,
            #B4B9C3 39px,
            #B4B9C3 40px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 39px,
            #B4B9C3 39px,
            #B4B9C3 40px
        );
    pointer-events: none;
}

/* ============================================
   SHARED DECORATIVE ELEMENTS
   ============================================ */

/* Hash Fragments */
.hash-fragment {
    position: absolute;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    color: rgba(99, 107, 122, 0.3);
    letter-spacing: 0.05em;
    z-index: 10;
    pointer-events: none;
    user-select: none;
}

.hash-top-right {
    top: 2rem;
    right: 2rem;
}

.hash-bottom-left {
    bottom: 2rem;
    left: 2rem;
}

/* Metallic Gradient Bars */
.metallic-bar {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #B4B9C3 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 8s ease-in-out infinite;
    z-index: 2;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    50% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .text-plate-content {
        padding: 8vh 1.25rem 12vh 1.25rem;
    }

    .image-caption {
        bottom: 2rem;
        left: 1.25rem;
        right: 1.25rem;
    }

    .hash-fragment {
        font-size: 0.55rem;
    }

    .hash-top-right {
        top: 1.25rem;
        right: 1.25rem;
    }

    .hash-bottom-left {
        bottom: 1.25rem;
        left: 1.25rem;
    }

    .metallic-bar {
        width: 60%;
    }

    .counter-label {
        padding: 0 1.5rem;
    }

    .gold-rule-above {
        width: 36px;
    }
}

@media (max-width: 480px) {
    .text-plate-content {
        padding: 6vh 1rem 10vh 1rem;
    }

    .headline {
        font-size: clamp(1.4rem, 6vw, 2rem);
        margin-bottom: 1.25rem;
    }

    .body-text {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    }

    .counter-display {
        font-size: clamp(3rem, 18vw, 6rem);
    }

    .counter-label {
        padding: 0 1rem;
        font-size: clamp(0.6rem, 2.5vw, 0.7rem);
    }

    .image-caption {
        bottom: 1.5rem;
        left: 1rem;
        right: 1rem;
        font-size: 0.6rem;
    }

    .metallic-bar {
        width: 70%;
    }
}

/* ============================================
   SELECTION STYLING
   ============================================ */
::selection {
    background: rgba(74, 124, 155, 0.3);
    color: #E8EAEF;
}