/* rational.today — Chrome Metallic Glitch Design */

:root {
    --chrome-highlight: #e0e0e0;
    --chrome-midtone: #9e9e9e;
    --chrome-shadow: #424242;
    --obsidian: #0d0d0d;
    --signal-cyan: #00e5ff;
    --glitch-red: #ff1744;
    --glitch-magenta: #d500f9;
    --noise-floor: #1a1a1a;
    --chrome-gradient: linear-gradient(135deg, #e8e8e8 0%, #b0b0b0 15%, #e0e0e0 30%, #9e9e9e 45%, #f0f0f0 55%, #909090 70%, #424242 85%, #9e9e9e 100%);
    --mouse-x: 50%;
    --mouse-y: 50%;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--obsidian);
    color: var(--chrome-highlight);
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Noise Canvas */
#noise-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
}

/* Chrome Reflection Bars */
#chrome-bars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.chrome-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--chrome-highlight) 50%, transparent 100%);
    opacity: 0.12;
}

.chrome-bar-1 { top: 20%; animation: drift-bar 40s linear infinite; }
.chrome-bar-2 { top: 55%; animation: drift-bar 28s linear infinite; }
.chrome-bar-3 { top: 80%; animation: drift-bar 34s linear infinite; }

@keyframes drift-bar {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100vh); }
}

/* Signal Wave SVG */
#signal-wave {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

#signal-wave.visible {
    opacity: 1;
}

.wave-path {
    fill: none;
    stroke: var(--signal-cyan);
    stroke-width: 2;
    filter: drop-shadow(0 0 8px var(--signal-cyan));
}

.wave-echo {
    stroke: var(--glitch-magenta);
    stroke-width: 1.5;
    opacity: 0.3;
    filter: drop-shadow(0 0 6px var(--glitch-magenta));
}

/* Scan Line */
#scan-line {
    position: fixed;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: white;
    opacity: 0;
    z-index: 50;
    pointer-events: none;
}

#scan-line.active {
    animation: scan-sweep 0.3s linear forwards;
}

@keyframes scan-sweep {
    0% { top: -2px; opacity: 0.15; }
    100% { top: 100vh; opacity: 0.15; }
}

/* Diagonal Sections */
.diagonal-section {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.section-inner {
    width: 100%;
    padding: 6rem 4rem;
    position: relative;
}

/* Section 1: Hero */
#hero {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    background: linear-gradient(170deg, var(--obsidian) 0%, var(--noise-floor) 100%);
    min-height: 100vh;
    z-index: 15;
}

#hero .section-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 8vw;
    min-height: 100vh;
}

.hero-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Chrome Text Effect */
.chrome-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 10vw, 9rem);
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--chrome-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chrome-shift 8s ease infinite;
    position: relative;
}

@keyframes chrome-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Glitch Effect on Text */
.glitch-target {
    position: relative;
    display: inline-block;
}

.glitch-target::before,
.glitch-target::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--chrome-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chrome-shift 8s ease infinite;
    opacity: 0;
    pointer-events: none;
}

.glitch-target::before {
    color: var(--signal-cyan);
    -webkit-text-fill-color: var(--signal-cyan);
    background: none;
}

.glitch-target::after {
    color: var(--glitch-magenta);
    -webkit-text-fill-color: var(--glitch-magenta);
    background: none;
}

.glitch-target.glitching::before {
    animation: glitch-cyan 0.15s steps(2) forwards;
    opacity: 0.8;
}

.glitch-target.glitching::after {
    animation: glitch-magenta 0.15s steps(2) forwards;
    opacity: 0.5;
}

@keyframes glitch-cyan {
    0% { clip-path: inset(10% 0 80% 0); transform: translateX(4px); opacity: 0.8; }
    25% { clip-path: inset(40% 0 30% 0); transform: translateX(-6px); opacity: 0.8; }
    50% { clip-path: inset(60% 0 10% 0); transform: translateX(3px); opacity: 0.8; }
    75% { clip-path: inset(20% 0 50% 0); transform: translateX(-4px); opacity: 0.8; }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
}

@keyframes glitch-magenta {
    0% { clip-path: inset(50% 0 20% 0); transform: translateX(-3px); opacity: 0.5; }
    25% { clip-path: inset(10% 0 60% 0); transform: translateX(5px); opacity: 0.5; }
    50% { clip-path: inset(70% 0 5% 0); transform: translateX(-4px); opacity: 0.5; }
    75% { clip-path: inset(30% 0 40% 0); transform: translateX(6px); opacity: 0.5; }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
}

/* Hero entrance glitch */
@keyframes hero-glitch-in {
    0% { clip-path: inset(0 100% 0 0); transform: translateX(-20px) skewX(5deg); }
    10% { clip-path: inset(20% 60% 30% 0); transform: translateX(10px) skewX(-2deg); }
    20% { clip-path: inset(0 40% 50% 0); transform: translateX(-8px) skewX(3deg); }
    40% { clip-path: inset(30% 20% 10% 0); transform: translateX(5px) skewX(-1deg); }
    60% { clip-path: inset(10% 10% 20% 0); transform: translateX(-3px) skewX(0.5deg); }
    80% { clip-path: inset(5% 5% 5% 0); transform: translateX(1px) skewX(0); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0) skewX(0); }
}

.hero-content.glitch-enter .chrome-text {
    animation: hero-glitch-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards, chrome-shift 8s ease infinite;
}

/* Tagline */
.tagline {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--chrome-midtone);
    margin-top: 1.5rem;
    overflow: hidden;
}

.tagline .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.05s ease;
}

.tagline .char.visible {
    opacity: 1;
}

/* Timestamp */
.timestamp {
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--signal-cyan);
    opacity: 0.6;
    margin-top: 1.5rem;
    display: block;
}

/* Section 2: Interference */
#interference {
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
    background: linear-gradient(190deg, var(--noise-floor) 0%, #111111 50%, var(--obsidian) 100%);
    margin-top: -80px;
    z-index: 14;
    min-height: 100vh;
}

#interference .section-inner {
    padding: 10rem 6vw 10rem 15vw;
}

.data-fragments {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.fragment {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--chrome-highlight);
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fragment:nth-child(odd) {
    margin-left: 0;
}

.fragment:nth-child(even) {
    margin-left: 8vw;
}

.fragment:nth-child(3) {
    margin-left: 4vw;
}

.fragment:nth-child(5) {
    margin-left: 12vw;
}

.fragment.visible {
    opacity: 1;
    transform: translateX(0);
}

.fragment::before,
.fragment::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.fragment::before {
    color: var(--signal-cyan);
}

.fragment::after {
    color: var(--glitch-magenta);
}

.fragment.glitching::before {
    animation: glitch-cyan 0.2s steps(3) forwards;
    opacity: 0.7;
}

.fragment.glitching::after {
    animation: glitch-magenta 0.2s steps(3) forwards;
    opacity: 0.4;
}

.fragment-text {
    position: relative;
    z-index: 1;
}

/* Section 3: Resolution */
#resolution {
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    background: linear-gradient(175deg, #161616 0%, var(--noise-floor) 40%, #141414 100%);
    margin-top: -80px;
    z-index: 13;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#resolution .section-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rem 8vw;
}

.resolution-content {
    text-align: center;
    max-width: 900px;
}

.resolution-statement {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* Chrome interactive text with mouse-following light */
.chrome-text-interactive {
    background: radial-gradient(
        ellipse 600px 400px at var(--mouse-x) var(--mouse-y),
        #f5f5f5 0%,
        var(--chrome-highlight) 20%,
        var(--chrome-midtone) 50%,
        var(--chrome-shadow) 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Section 4: Transmission */
#transmission {
    clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
    background: linear-gradient(185deg, var(--obsidian) 0%, var(--noise-floor) 100%);
    margin-top: -80px;
    z-index: 12;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

#transmission .section-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8rem 8vw 6rem;
}

.transmission-content {
    text-align: right;
}

.transmission-mark {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.04em;
    display: block;
}

.transmission-status {
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--signal-cyan);
    opacity: 0.6;
    margin-top: 1rem;
    display: block;
    animation: blink-status 2s step-end infinite;
}

@keyframes blink-status {
    0%, 80% { opacity: 0.6; }
    81%, 100% { opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-inner {
        padding: 4rem 2rem;
    }

    #hero .section-inner {
        padding-left: 5vw;
    }

    #interference .section-inner {
        padding: 8rem 4vw 8rem 6vw;
    }

    .fragment:nth-child(even) {
        margin-left: 4vw;
    }

    .fragment:nth-child(5) {
        margin-left: 6vw;
    }

    #resolution .section-inner {
        padding: 8rem 4vw;
    }

    #transmission .section-inner {
        padding: 6rem 4vw 4rem;
    }
}