/* ============================================
   chrono.games - Temporal Arcade System
   Design Language: Retro-Futuristic Excess
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Palette */
    --color-temporal-void: #0A0014;
    --color-nebula-indigo: #1A0A3E;
    --color-plasma-magenta: #FF2D7B;
    --color-chrono-cyan: #00F0FF;
    --color-warp-yellow: #FFD600;
    --color-temporal-lime: #AAFF00;
    --color-phosphor-white: #F0E6FF;
    --color-faded-signal: #8B7FA8;
    --color-dopamine-purple: #7B2DFF;

    /* Diagonal angles */
    --angle-aggressive: -14deg;
    --angle-counter: 14deg;
    --angle-vault: 8deg;
    --angle-mobile: 0deg;

    /* Noise */
    --noise-opacity: 0.08;

    /* Typography */
    --font-display: 'Orbitron', sans-serif;
    --font-secondary: 'Exo 2', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --grid-gap: clamp(1rem, 2.5vw, 3rem);
}

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

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

body {
    background-color: var(--color-temporal-void);
    color: var(--color-phosphor-white);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Noise Overlay --- */
.section-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: var(--noise-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    background-repeat: repeat;
}

/* --- Chronofilament SVGs --- */
.chronofilaments {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.filament {
    fill: none;
    stroke: var(--color-chrono-cyan);
    stroke-width: 1;
    opacity: 0.4;
    stroke-dasharray: 12 8;
    stroke-dashoffset: 0;
    animation: filamentFlow 12s linear infinite;
}

.filament-2 {
    stroke: var(--color-chrono-cyan);
    opacity: 0.25;
    animation-duration: 16s;
    animation-direction: reverse;
}

.filament-3 {
    stroke: var(--color-chrono-cyan);
    opacity: 0.3;
    animation-duration: 20s;
}

.temporal-ribbon {
    fill: none;
    stroke-width: 4;
    opacity: 0.3;
    stroke-linecap: round;
    filter: blur(2px);
}

.ribbon-1 {
    stroke: var(--color-plasma-magenta);
}

.ribbon-2 {
    stroke: var(--color-warp-yellow);
}

@keyframes filamentFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* --- Section Base --- */
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

/* --- Typography --- */
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw + 1rem, 7rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.05;
    text-transform: uppercase;
    text-shadow: 0 0 30px currentColor;
    transition: font-weight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--color-phosphor-white);
}

.section-heading.in-view {
    font-weight: 900;
}

.section-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    max-width: 65ch;
    color: var(--color-phosphor-white);
    margin-bottom: 1.5em;
}

/* ============================================
   SECTION 1: THE CHRONOMETER
   ============================================ */
.section-chronometer {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.chronometer-split {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.split-void {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-temporal-void);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}

.split-magenta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-plasma-magenta);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.chronometer-content {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.chronometer-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw + 1rem, 12rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--color-phosphor-white);
    text-shadow:
        0 0 40px var(--color-plasma-magenta),
        0 0 80px rgba(255, 45, 123, 0.4),
        0 0 120px rgba(255, 45, 123, 0.2);
    position: relative;
}

.title-line {
    display: block;
}

.title-line-2 {
    color: var(--color-chrono-cyan);
    text-shadow:
        0 0 40px var(--color-chrono-cyan),
        0 0 80px rgba(0, 240, 255, 0.4),
        0 0 120px rgba(0, 240, 255, 0.2);
    font-size: 0.6em;
    letter-spacing: 0.3em;
}

.clock-hand-container {
    width: clamp(120px, 20vw, 200px);
    height: clamp(120px, 20vw, 200px);
}

.clock-svg {
    width: 100%;
    height: 100%;
}

.clock-ring {
    fill: none;
    stroke: var(--color-phosphor-white);
    stroke-width: 1;
    opacity: 0.3;
}

.clock-ring-inner {
    fill: none;
    stroke: var(--color-chrono-cyan);
    stroke-width: 0.5;
    opacity: 0.5;
}

.clock-hand {
    stroke: var(--color-chrono-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: 100px 100px;
    animation: clockSweep 8s linear infinite;
}

.clock-hand-ghost {
    stroke: var(--color-chrono-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.2;
    transform-origin: 100px 100px;
    animation: clockSweep 8s linear infinite;
    animation-delay: -0.5s;
    filter: blur(3px);
}

@keyframes clockSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.clock-center {
    fill: var(--color-chrono-cyan);
}

.chronometer-subtitle {
    font-family: var(--font-secondary);
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    color: var(--color-faded-signal);
    text-transform: uppercase;
}

/* ============================================
   SECTION 2: THE ARCADE CORRIDOR
   ============================================ */
.section-arcade {
    min-height: 150vh;
    padding: 10vh 0;
    position: relative;
    z-index: 2;
}

.parallelogram {
    position: relative;
    margin: -4rem 0;
    padding: 6rem 0;
    transform: skewY(var(--angle-aggressive));
    overflow: hidden;
}

.para-1 {
    background: var(--color-nebula-indigo);
    z-index: 3;
}

.para-2 {
    background: var(--color-temporal-void);
    z-index: 2;
}

.para-3 {
    background: var(--color-nebula-indigo);
    z-index: 1;
}

.para-inner {
    transform: skewY(var(--angle-counter));
    padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 5vw, 8rem);
    position: relative;
}

.para-content-grid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: var(--grid-gap);
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.para-text {
    position: relative;
    z-index: 2;
}

.para-text .section-heading {
    font-size: clamp(1.8rem, 5vw + 0.5rem, 4.5rem);
    margin-bottom: 1.5rem;
}

.para-1 .section-heading {
    color: var(--color-chrono-cyan);
    text-shadow: 0 0 30px var(--color-chrono-cyan);
}

.para-2 .section-heading {
    color: var(--color-plasma-magenta);
    text-shadow: 0 0 30px var(--color-plasma-magenta);
}

.para-3 .section-heading {
    color: var(--color-warp-yellow);
    text-shadow: 0 0 30px var(--color-warp-yellow);
}

.para-instrument {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- Neon Edge Lines --- */
.neon-edge {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 10;
}

.neon-edge-cyan {
    background: var(--color-chrono-cyan);
    box-shadow: 0 0 15px var(--color-chrono-cyan), 0 0 30px var(--color-chrono-cyan);
}

.neon-edge-magenta {
    background: var(--color-plasma-magenta);
    box-shadow: 0 0 15px var(--color-plasma-magenta), 0 0 30px var(--color-plasma-magenta);
}

.neon-edge-yellow {
    background: var(--color-warp-yellow);
    box-shadow: 0 0 15px var(--color-warp-yellow), 0 0 30px var(--color-warp-yellow);
}

/* --- Instrument Dials --- */
.instrument-dial {
    width: clamp(120px, 15vw, 160px);
    height: clamp(120px, 15vw, 160px);
    position: relative;
}

.dial-svg {
    width: 100%;
    height: 100%;
}

.dial-ring {
    fill: none;
    stroke: var(--color-faded-signal);
    stroke-width: 1;
    opacity: 0.5;
}

.dial-hand {
    stroke: var(--color-chrono-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: 80px 80px;
}

.dial-1 .dial-hand {
    stroke: var(--color-chrono-cyan);
}

.dial-2 .dial-hand {
    stroke: var(--color-plasma-magenta);
}

.dial-3 .dial-hand {
    stroke: var(--color-warp-yellow);
}

.dial-center {
    fill: var(--color-phosphor-white);
}

.dial-readout {
    font-family: var(--font-display);
    font-size: 14px;
    fill: var(--color-faded-signal);
    text-anchor: middle;
    letter-spacing: 0.1em;
}

/* ============================================
   SECTION 3: THE TIME VAULT
   ============================================ */
.section-vault {
    min-height: 200vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: var(--color-temporal-void);
    transform: skewY(var(--angle-vault));
    padding: 15vh 0;
}

.vault-iris {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 6rem);
    transform: skewY(calc(var(--angle-vault) * -1));
    clip-path: circle(5% at 50% 50%);
    transition: clip-path 0.1s linear;
}

.vault-content {
    text-align: center;
}

.vault-title {
    font-size: clamp(3rem, 10vw, 8rem);
    color: var(--color-dopamine-purple);
    text-shadow:
        0 0 40px var(--color-dopamine-purple),
        0 0 80px rgba(123, 45, 255, 0.4);
    margin-bottom: 2rem;
}

.vault-description {
    max-width: 800px;
    margin: 0 auto 3rem;
}

.vault-description .section-body {
    color: var(--color-phosphor-white);
    opacity: 0.9;
}

/* --- Pixel Patterns --- */
.vault-motif-grid {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.pixel-pattern {
    width: 80px;
    height: 80px;
    opacity: 0.12;
    background-size: 10px 10px;
}

.pattern-1 {
    background-image:
        linear-gradient(45deg, var(--color-chrono-cyan) 25%, transparent 25%),
        linear-gradient(-45deg, var(--color-chrono-cyan) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--color-chrono-cyan) 75%),
        linear-gradient(-45deg, transparent 75%, var(--color-chrono-cyan) 75%);
}

.pattern-2 {
    background-image:
        linear-gradient(0deg, var(--color-plasma-magenta) 50%, transparent 50%);
    background-size: 10px 10px;
}

.pattern-3 {
    background-image:
        linear-gradient(90deg, var(--color-warp-yellow) 25%, transparent 25%),
        linear-gradient(90deg, transparent 75%, var(--color-warp-yellow) 75%);
    background-size: 10px 10px;
}

/* --- Oscilloscope --- */
.oscilloscope {
    background: rgba(10, 0, 20, 0.8);
    border: 1px solid var(--color-temporal-lime);
    border-radius: 4px;
    padding: 1rem;
    margin: 0 auto 2rem;
    max-width: 400px;
    position: relative;
}

.oscilloscope-svg {
    width: 100%;
    height: 100px;
    display: block;
}

.oscilloscope-trace {
    fill: none;
    stroke: var(--color-temporal-lime);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px var(--color-temporal-lime));
}

.oscilloscope-label {
    display: block;
    font-family: var(--font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-temporal-lime);
    text-align: center;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

/* --- Vault Stats --- */
.vault-stats {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 5vw, 5rem);
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-warp-yellow);
    text-shadow: 0 0 20px var(--color-warp-yellow);
}

.stat-label {
    display: block;
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-faded-signal);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* ============================================
   SECTION 4: THE GRAND FINALE
   ============================================ */
.section-finale {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: var(--color-temporal-void);
    padding: 10vh 0;
}

.finale-chevron {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 5vw, 6rem);
    text-align: center;
    clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%);
    background: linear-gradient(180deg, var(--color-nebula-indigo), var(--color-temporal-void));
}

.finale-content {
    position: relative;
    z-index: 2;
}

.finale-title {
    font-size: clamp(3rem, 10vw, 8rem);
    background: linear-gradient(135deg, var(--color-plasma-magenta), var(--color-dopamine-purple), var(--color-chrono-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(123, 45, 255, 0.5));
    margin-bottom: 2rem;
}

/* --- Convergence Lines --- */
.finale-convergence {
    position: relative;
    height: 120px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.convergence-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    transform-origin: bottom center;
}

.line-magenta {
    left: 20%;
    background: var(--color-plasma-magenta);
    box-shadow: 0 0 10px var(--color-plasma-magenta);
    transform: rotate(-15deg);
}

.line-cyan {
    left: 40%;
    background: var(--color-chrono-cyan);
    box-shadow: 0 0 10px var(--color-chrono-cyan);
    transform: rotate(-5deg);
}

.line-yellow {
    left: 60%;
    background: var(--color-warp-yellow);
    box-shadow: 0 0 10px var(--color-warp-yellow);
    transform: rotate(5deg);
}

.line-lime {
    left: 80%;
    background: var(--color-temporal-lime);
    box-shadow: 0 0 10px var(--color-temporal-lime);
    transform: rotate(15deg);
}

.finale-text {
    font-family: var(--font-secondary);
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--color-phosphor-white);
    max-width: 60ch;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

/* --- Finale Chronometer --- */
.finale-chronometer {
    width: clamp(160px, 25vw, 240px);
    height: clamp(160px, 25vw, 240px);
    margin: 0 auto 2rem;
}

.finale-clock-svg {
    width: 100%;
    height: 100%;
}

.finale-ring {
    fill: none;
    stroke: var(--color-dopamine-purple);
    stroke-width: 1.5;
    opacity: 0.6;
}

.finale-ring-inner {
    fill: none;
    stroke: var(--color-chrono-cyan);
    stroke-width: 0.5;
    opacity: 0.4;
}

.finale-hand {
    stroke-linecap: round;
    transform-origin: 120px 120px;
}

.finale-hand-hour {
    stroke: var(--color-plasma-magenta);
    stroke-width: 3;
}

.finale-hand-minute {
    stroke: var(--color-chrono-cyan);
    stroke-width: 2;
}

.finale-hand-second {
    stroke: var(--color-warp-yellow);
    stroke-width: 1;
}

.finale-center {
    fill: var(--color-phosphor-white);
}

.finale-time-text {
    font-family: var(--font-display);
    font-size: 16px;
    fill: var(--color-faded-signal);
    text-anchor: middle;
    letter-spacing: 0.1em;
}

.finale-credit {
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--color-faded-signal);
    text-transform: uppercase;
    opacity: 0.6;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    :root {
        --angle-aggressive: -8deg;
        --angle-counter: 8deg;
        --angle-vault: 4deg;
    }

    .para-content-grid {
        grid-template-columns: 1fr;
    }

    .para-instrument {
        justify-content: flex-start;
        margin-top: 2rem;
    }

    .vault-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .finale-chevron {
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    }

    .vault-motif-grid {
        gap: 1.5rem;
    }

    .pixel-pattern {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    :root {
        --angle-aggressive: 0deg;
        --angle-counter: 0deg;
        --angle-vault: 0deg;
    }

    .parallelogram {
        margin: 0;
        padding: 3rem 0;
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
        transform: none;
    }

    .para-inner {
        transform: none;
    }

    .section-vault {
        transform: none;
    }

    .vault-iris {
        transform: none;
    }

    .chronometer-title {
        font-size: clamp(2.5rem, 15vw, 5rem);
    }

    .finale-convergence {
        height: 80px;
    }
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

/* Gradient dopamine wash on decorative pseudo-elements */
.section-chronometer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(135deg, var(--color-plasma-magenta), var(--color-dopamine-purple), var(--color-chrono-cyan));
    z-index: 10;
}

/* Glow pulse on section edges */
@keyframes glowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.neon-edge {
    animation: glowPulse 3s ease-in-out infinite;
}

.neon-edge-magenta {
    animation-delay: 1s;
}

.neon-edge-yellow {
    animation-delay: 2s;
}

/* Oscilloscope trace animation */
@keyframes oscilloscopeWave {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -600; }
}

.oscilloscope-trace {
    stroke-dasharray: 4 2;
    animation: oscilloscopeWave 3s linear infinite;
}

/* Convergence line animation */
@keyframes lineGlow {
    0%, 100% { opacity: 0.4; height: 100%; }
    50% { opacity: 1; height: 110%; }
}

.convergence-line {
    animation: lineGlow 2s ease-in-out infinite;
}

.line-cyan { animation-delay: 0.5s; }
.line-yellow { animation-delay: 1s; }
.line-lime { animation-delay: 1.5s; }

/* Section reveal animations */
.section-heading {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease, font-weight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-heading.in-view {
    opacity: 1;
    transform: translateY(0);
    font-weight: 900;
}

.section-body {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-body.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stat counter animations */
.stat-value {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-value.in-view {
    opacity: 1;
    transform: scale(1);
}