/* ================================================
   RRIDDL.com - Gold-Black Luxury Puzzle Box
   ================================================ */

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

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #C0C0C0 #0A0A0A;
}

html::-webkit-scrollbar {
    width: 6px;
}
html::-webkit-scrollbar-track {
    background: #0A0A0A;
}
html::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border-radius: 3px;
}

body {
    background: #000000;
    color: #D4AF37;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

/* --- Chamber Base --- */
.chamber {
    position: relative;
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111111;
    background-image:
        radial-gradient(ellipse at 50% 50%, #1A1200 0%, transparent 70%),
        linear-gradient(180deg, #0A0A0A 0%, rgba(26, 18, 0, 0.15) 50%, #0A0A0A 100%);
}

.chamber-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.chamber-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 90vw;
}

/* --- Void Channel --- */
.void-channel {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 12.5%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

/* --- Circuit Trace Lines --- */
.circuit-line {
    position: absolute;
    background: rgba(212, 175, 55, 0.4);
}

.circuit-v {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
}

.circuit-h {
    height: 1px;
    width: 80px;
}

.circuit-branch-1 {
    top: 30%;
    left: 50%;
}

.circuit-branch-2 {
    top: 25%;
    right: 50%;
    left: auto;
}

.circuit-branch-3 {
    top: 65%;
    left: 50%;
}

.circuit-branch-4 {
    top: 20%;
    right: 50%;
    left: auto;
}

.circuit-branch-5 {
    top: 50%;
    left: 50%;
}

.circuit-branch-6 {
    top: 75%;
    right: 50%;
    left: auto;
}

/* --- Typography --- */
.hero-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: 12vw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4AF37;
    line-height: 1;
    display: flex;
    justify-content: center;
    gap: 0.02em;
}

.hero-title .letter {
    display: inline-block;
    filter: blur(12px);
    opacity: 0;
    transition: filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-title .letter.focused {
    filter: blur(0px);
    opacity: 1;
}

.chamber-headline {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: 6vw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4AF37;
    line-height: 1.15;
    margin-bottom: 0.5em;
}

.body-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: rgba(212, 175, 55, 0.7);
    max-width: 480px;
}

.mono-clue {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: #D4AF37;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
    margin-top: 1.5em;
}

.immersion-text {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: 3vw;
    color: #F7E7CE;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

/* --- Chrome Text Effect (Act III) --- */
.chrome-text {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: 14vw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFF8DC 0%, #D4AF37 40%, #B8962E 60%, #D4AF37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    position: relative;
    line-height: 1;
}

.chrome-text::after {
    content: 'RRIDDL';
    position: absolute;
    left: 0;
    top: 0;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: transparent;
    text-shadow: 0 2px 40px rgba(212, 175, 55, 0.5);
    z-index: -1;
}

.revelation-headline {
    margin-bottom: 0.3em;
}

.revelation-sub {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    color: rgba(247, 231, 206, 0.8);
    line-height: 1.8;
}

/* --- Final Chamber --- */
.final-chamber {
    background: #000000;
    background-image: none;
}

.final-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: #F7E7CE;
    letter-spacing: 0.02em;
}

.golden-period {
    display: inline-block;
    color: #FFBF00;
    font-size: 1.5em;
    animation: pulse-period 3s ease-in-out infinite;
}

@keyframes pulse-period {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
    50% { opacity: 0.4; text-shadow: 0 0 3px rgba(212, 175, 55, 0.2); }
}

/* --- Blur-Focus Animation --- */
.blur-focus {
    filter: blur(12px);
    opacity: 0.3;
    transition: filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blur-focus.in-focus {
    filter: blur(0px);
    opacity: 1;
}

/* --- Split Chamber Layout --- */
.split-chamber {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    align-items: center;
    padding: 0 5vw;
    gap: 0;
}

.split-left {
    grid-column: 1;
    z-index: 2;
    padding: 2rem;
}

.split-right {
    grid-column: 3;
    z-index: 2;
    padding: 2rem;
}

.split-chamber .void-channel {
    grid-column: 2;
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
    min-height: 100vh;
}

.split-chamber .chamber-bg {
    grid-column: 1 / -1;
    grid-row: 1;
    position: absolute;
    inset: 0;
}

.split-left,
.split-right,
.split-chamber .void-channel {
    grid-row: 1;
}

/* --- Anamorphic Streaks --- */
.anamorphic-streak {
    position: absolute;
    height: 2px;
    width: 60vw;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 30%, rgba(255, 248, 220, 0.15) 50%, rgba(212, 175, 55, 0.3) 70%, transparent 100%);
    pointer-events: none;
    will-change: transform, opacity;
}

.streak-1 { top: 35%; left: -10vw; animation: streak-pulse 6s ease-in-out infinite; }
.streak-2 { top: 55%; left: 5vw; width: 50vw; animation: streak-pulse 8s ease-in-out infinite 2s; }
.streak-3 { top: 70%; left: -5vw; width: 70vw; animation: streak-pulse 7s ease-in-out infinite 1s; opacity: 0.5; }
.streak-4 { top: 40%; left: 10vw; width: 55vw; animation: streak-pulse 9s ease-in-out infinite; }
.streak-5 { top: 60%; left: -5vw; width: 65vw; animation: streak-pulse 7s ease-in-out infinite 3s; }
.streak-6 { top: 30%; left: 0; width: 80vw; animation: streak-pulse 5s ease-in-out infinite; }
.streak-7 { top: 70%; left: 10vw; width: 50vw; animation: streak-pulse 6s ease-in-out infinite 1.5s; }
.streak-8 { top: 25%; left: -10vw; width: 90vw; animation: streak-pulse 4s ease-in-out infinite; }
.streak-9 { top: 50%; left: 0; width: 100vw; animation: streak-pulse 5s ease-in-out infinite 1s; }
.streak-10 { top: 75%; left: 5vw; width: 70vw; animation: streak-pulse 7s ease-in-out infinite 2s; }

@keyframes streak-pulse {
    0%, 100% { opacity: 0.15; transform: scaleX(0.8); }
    50% { opacity: 0.5; transform: scaleX(1.1); }
}

/* --- Hexagonal Bokeh --- */
.hex-bokeh {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    will-change: transform;
}

.hex-1 { width: 80px; height: 80px; background: rgba(212, 175, 55, 0.15); top: 15%; left: 20%; }
.hex-2 { width: 40px; height: 40px; background: rgba(255, 248, 220, 0.1); top: 30%; left: 60%; }
.hex-3 { width: 120px; height: 120px; background: rgba(212, 175, 55, 0.08); top: 50%; left: 10%; }
.hex-4 { width: 25px; height: 25px; background: rgba(255, 191, 0, 0.2); top: 20%; left: 80%; }
.hex-5 { width: 60px; height: 60px; background: rgba(212, 175, 55, 0.12); top: 70%; left: 50%; }
.hex-6 { width: 35px; height: 35px; background: rgba(255, 248, 220, 0.15); top: 45%; left: 75%; }
.hex-7 { width: 90px; height: 90px; background: rgba(212, 175, 55, 0.06); top: 60%; left: 30%; }
.hex-8 { width: 20px; height: 20px; background: rgba(255, 191, 0, 0.25); top: 80%; left: 70%; }

.hex-9 { width: 70px; height: 70px; background: rgba(212, 175, 55, 0.18); top: 10%; left: 25%; }
.hex-10 { width: 50px; height: 50px; background: rgba(255, 248, 220, 0.12); top: 35%; left: 65%; }
.hex-11 { width: 100px; height: 100px; background: rgba(212, 175, 55, 0.07); top: 55%; left: 15%; }
.hex-12 { width: 30px; height: 30px; background: rgba(255, 191, 0, 0.22); top: 25%; left: 85%; }
.hex-13 { width: 55px; height: 55px; background: rgba(212, 175, 55, 0.14); top: 65%; left: 45%; }
.hex-14 { width: 45px; height: 45px; background: rgba(255, 248, 220, 0.1); top: 40%; left: 70%; }

/* --- Flare Compositions --- */
.flare-composition {
    position: relative;
    width: 100%;
    height: 60vh;
}

.central-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 248, 220, 0.4) 0%, rgba(212, 175, 55, 0.15) 40%, transparent 70%);
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.3), 0 0 120px rgba(255, 191, 0, 0.1);
}

/* --- Starburst --- */
.starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 248, 220, 0.15) 5deg, transparent 10deg,
        transparent 22.5deg, rgba(212, 175, 55, 0.1) 27.5deg, transparent 32.5deg,
        transparent 45deg, rgba(255, 248, 220, 0.12) 50deg, transparent 55deg,
        transparent 67.5deg, rgba(212, 175, 55, 0.08) 72.5deg, transparent 77.5deg,
        transparent 90deg, rgba(255, 248, 220, 0.15) 95deg, transparent 100deg,
        transparent 112.5deg, rgba(212, 175, 55, 0.1) 117.5deg, transparent 122.5deg,
        transparent 135deg, rgba(255, 248, 220, 0.12) 140deg, transparent 145deg,
        transparent 157.5deg, rgba(212, 175, 55, 0.08) 162.5deg, transparent 167.5deg,
        transparent 180deg, rgba(255, 248, 220, 0.15) 185deg, transparent 190deg,
        transparent 202.5deg, rgba(212, 175, 55, 0.1) 207.5deg, transparent 212.5deg,
        transparent 225deg, rgba(255, 248, 220, 0.12) 230deg, transparent 235deg,
        transparent 247.5deg, rgba(212, 175, 55, 0.08) 252.5deg, transparent 257.5deg,
        transparent 270deg, rgba(255, 248, 220, 0.15) 275deg, transparent 280deg,
        transparent 292.5deg, rgba(212, 175, 55, 0.1) 297.5deg, transparent 302.5deg,
        transparent 315deg, rgba(255, 248, 220, 0.12) 320deg, transparent 325deg,
        transparent 337.5deg, rgba(212, 175, 55, 0.08) 342.5deg, transparent 347.5deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: starburst-rotate 20s linear infinite;
}

@keyframes starburst-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Mega Starburst (Act III) --- */
.mega-starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 248, 220, 0.2) 3deg, transparent 6deg,
        transparent 22.5deg, rgba(212, 175, 55, 0.15) 25.5deg, transparent 28.5deg,
        transparent 45deg, rgba(255, 248, 220, 0.18) 48deg, transparent 51deg,
        transparent 67.5deg, rgba(212, 175, 55, 0.12) 70.5deg, transparent 73.5deg,
        transparent 90deg, rgba(255, 248, 220, 0.2) 93deg, transparent 96deg,
        transparent 112.5deg, rgba(212, 175, 55, 0.15) 115.5deg, transparent 118.5deg,
        transparent 135deg, rgba(255, 248, 220, 0.18) 138deg, transparent 141deg,
        transparent 157.5deg, rgba(212, 175, 55, 0.12) 160.5deg, transparent 163.5deg,
        transparent 180deg, rgba(255, 248, 220, 0.2) 183deg, transparent 186deg,
        transparent 202.5deg, rgba(212, 175, 55, 0.15) 205.5deg, transparent 208.5deg,
        transparent 225deg, rgba(255, 248, 220, 0.18) 228deg, transparent 231deg,
        transparent 247.5deg, rgba(212, 175, 55, 0.12) 250.5deg, transparent 253.5deg,
        transparent 270deg, rgba(255, 248, 220, 0.2) 273deg, transparent 276deg,
        transparent 292.5deg, rgba(212, 175, 55, 0.15) 295.5deg, transparent 298.5deg,
        transparent 315deg, rgba(255, 248, 220, 0.18) 318deg, transparent 321deg,
        transparent 337.5deg, rgba(212, 175, 55, 0.12) 340.5deg, transparent 343.5deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: starburst-rotate 30s linear infinite;
    opacity: 0.8;
}

/* --- Golden Fog --- */
.golden-fog {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
}

.intense-fog {
    background: radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.15) 0%, rgba(255, 191, 0, 0.05) 30%, transparent 60%);
}

/* --- Glyph Watermarks --- */
.glyph-watermark {
    position: absolute;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10vw;
    color: rgba(212, 175, 55, 0.06);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.diamond-glyph {
    font-size: 15vw;
}

/* --- Rhinestone Grids --- */
.rhinestone-grid {
    display: inline-grid;
    gap: 12px;
    margin-top: 2rem;
}

.rhinestone-3x3 {
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
}

.rhinestone-5x5 {
    grid-template-columns: repeat(5, 4px);
    grid-template-rows: repeat(5, 4px);
}

.rhinestone-grid::before,
.rhinestone-grid::after {
    display: none;
}

.rhinestone-3x3 > *,
.rhinestone-5x5 > * {
    display: none;
}

/* Generated rhinestone dots via box-shadow */
.rhinestone-3x3 {
    width: 4px;
    height: 4px;
    background: #D4AF37;
    border-radius: 50%;
    box-shadow:
        0 0 6px #D4AF37,
        16px 0 0 #D4AF37, 16px 0 6px #D4AF37,
        32px 0 0 #D4AF37, 32px 0 6px #D4AF37,
        0 16px 0 #D4AF37, 0 16px 6px #D4AF37,
        16px 16px 0 #D4AF37, 16px 16px 6px #D4AF37,
        32px 16px 0 #D4AF37, 32px 16px 6px #D4AF37,
        0 32px 0 #D4AF37, 0 32px 6px #D4AF37,
        16px 32px 0 #D4AF37, 16px 32px 6px #D4AF37,
        32px 32px 0 #D4AF37, 32px 32px 6px #D4AF37;
    display: block;
}

.rhinestone-5x5 {
    width: 4px;
    height: 4px;
    background: #D4AF37;
    border-radius: 50%;
    box-shadow:
        0 0 6px #D4AF37,
        16px 0 0 #D4AF37, 16px 0 6px #D4AF37,
        32px 0 0 #D4AF37, 32px 0 6px #D4AF37,
        48px 0 0 #D4AF37, 48px 0 6px #D4AF37,
        64px 0 0 #D4AF37, 64px 0 6px #D4AF37,
        0 16px 0 #D4AF37, 0 16px 6px #D4AF37,
        16px 16px 0 #D4AF37, 16px 16px 6px #D4AF37,
        32px 16px 0 #D4AF37, 32px 16px 6px #D4AF37,
        48px 16px 0 #D4AF37, 48px 16px 6px #D4AF37,
        64px 16px 0 #D4AF37, 64px 16px 6px #D4AF37,
        0 32px 0 #D4AF37, 0 32px 6px #D4AF37,
        16px 32px 0 #D4AF37, 16px 32px 6px #D4AF37,
        32px 32px 0 #D4AF37, 32px 32px 6px #D4AF37,
        48px 32px 0 #D4AF37, 48px 32px 6px #D4AF37,
        64px 32px 0 #D4AF37, 64px 32px 6px #D4AF37,
        0 48px 0 #D4AF37, 0 48px 6px #D4AF37,
        16px 48px 0 #D4AF37, 16px 48px 6px #D4AF37,
        32px 48px 0 #D4AF37, 32px 48px 6px #D4AF37,
        48px 48px 0 #D4AF37, 48px 48px 6px #D4AF37,
        64px 48px 0 #D4AF37, 64px 48px 6px #D4AF37,
        0 64px 0 #D4AF37, 0 64px 6px #D4AF37,
        16px 64px 0 #D4AF37, 16px 64px 6px #D4AF37,
        32px 64px 0 #D4AF37, 32px 64px 6px #D4AF37,
        48px 64px 0 #D4AF37, 48px 64px 6px #D4AF37,
        64px 64px 0 #D4AF37, 64px 64px 6px #D4AF37;
    display: block;
}

/* --- Transition Corridors --- */
.transition-corridor {
    position: relative;
    height: 20vh;
    background: #0A0A0A;
    overflow: hidden;
    scroll-snap-align: none;
}

.chrome-strip {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    background: linear-gradient(90deg, transparent, #C0C0C0, transparent);
    animation: chrome-sweep 4s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes chrome-sweep {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 0.3; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* --- Star Scatter --- */
.star-scatter {
    position: absolute;
    inset: 0;
}

.star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FFF8DC;
    clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
    opacity: 0.15;
    animation: star-drift 8s ease-in-out infinite;
}

.star:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; width: 6px; height: 6px; }
.star:nth-child(2) { top: 60%; left: 30%; animation-delay: 1s; width: 10px; height: 10px; }
.star:nth-child(3) { top: 40%; left: 55%; animation-delay: 2s; width: 5px; height: 5px; }
.star:nth-child(4) { top: 70%; left: 75%; animation-delay: 0.5s; width: 8px; height: 8px; }
.star:nth-child(5) { top: 30%; left: 90%; animation-delay: 3s; width: 7px; height: 7px; }
.star:nth-child(6) { top: 80%; left: 50%; animation-delay: 1.5s; width: 6px; height: 6px; }
.star:nth-child(7) { top: 15%; left: 70%; animation-delay: 2.5s; width: 9px; height: 9px; }
.star:nth-child(8) { top: 50%; left: 20%; animation-delay: 4s; width: 5px; height: 5px; }

@keyframes star-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
    50% { transform: translateY(-10px) rotate(45deg); opacity: 0.25; }
}

/* --- Bokeh Field (Dense, generated dynamically) --- */
.bokeh-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* --- Immersion Chamber --- */
.immersion-chamber {
    display: flex;
    align-items: center;
    justify-content: center;
}

.immersion-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 16vw;
    }

    .chamber-headline {
        font-size: 8vw;
    }

    .split-chamber {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 5vh 5vw;
    }

    .split-left,
    .split-right {
        grid-column: 1;
        grid-row: auto;
    }

    .split-chamber .void-channel {
        display: none;
    }

    .chrome-text {
        font-size: 18vw;
    }

    .immersion-text {
        font-size: 5vw;
    }

    .flare-composition {
        height: 40vh;
    }
}