@charset "UTF-8";
/* Dystopamine Dream: styles for index.html */

:root {
    --bg: #030303;
    --text-main: #f0f0f0;
    --accent-cyan: #00ffff;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

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

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Film Grain Overlay --- */
.noise {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.04;
}

/* overflow: clip, not hidden: hidden would make this the scroll container and stop the
   horizontal section's position: sticky from sticking to the screen */
#smooth-wrapper {
    position: relative;
    width: 100vw;
    overflow: clip;
}

#smooth-content {
    position: relative;
    width: 100%;
    background: var(--bg);
}

/* Tall wrapper for the horizontal section: js/script.js sets its height to one screen plus the
   scroll length of the hold, the sideways travel and the hold. z-index 11 keeps the section
   above the previous panel's content (z-index 10) while the soft landing slides it up over it. */
#horizontal-landing {
    position: relative;
    z-index: 11;
}

/* The horizontal panels. position: sticky keeps this one screen tall section glued to the top
   of the screen while the wrapper above scrolls past; will-change keeps it a stable layer
   for the soft landing's transform (js/script.js section 2.8). */
#horizontal-section {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    will-change: transform;
}

#horizontal-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* Expands to fit panels 3-5 */
    height: 100vh;
    will-change: transform;
}

/* The Void zooms into The Epidemic. #void-zoom is a tall wrapper (js/script.js sets its height to
   one screen plus the zoom's scroll length) and #void-stage, one screen tall, stays stuck to the
   top inside it while the scroll plays the zoom (js/script.js section 2.9). Stacking, back to
   front: The Void (its eye canvas, the blue glow, then its title block), then The Epidemic. */
#void-zoom {
    position: relative;
}

#void-stage {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
}

#void-stage .slide-panel {
    position: absolute;
    top: 0;
    left: 0;
}

#panel-void {
    z-index: 1;
}

/* The eye: photo, shading and particles. With the zoom on, js/script.js adds .void-scene-on to the
   stage, draws all of it into one canvas (.void-scene), and hides these layers, which then only
   serve as that canvas's source pictures. A canvas is a finished picture the graphics card just
   scales, so zooming it never makes the browser repaint a huge layer, which is what made scrolling
   back out glitch (missing patches, cropped title) on big screens. Without the zoom (reduced
   motion) these layers simply show as an ordinary panel background. */
.void-eye {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.void-scene-on .void-eye {
    display: none;
}

.void-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* The title's soft glow. Each line carries its own shadow, painted just before that line's text, so a
   line's shadow also falls over the bottom of the line above it (the slight white-to-grey shading on
   "THE" and "DIGITAL"). With the zoom on, the glow is instead a pre-drawn picture behind each line
   (.void-title-glow, made in js/script.js) painted in the same order, because a big blur is very costly
   for the browser to redraw while the title scales up. The pictures are drawn to match this shadow. */
.void-title span {
    display: block;
    position: relative;
    isolation: isolate;
    text-shadow: 0 0 80px rgba(26, 91, 114, 0.6), 0 2px 40px rgba(0, 0, 0, 0.95);
}

.void-scene-on .void-title span {
    text-shadow: none;
}

.void-title-glow {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

/* The copy block (title, tagline and button) zooms separately from the eye, because it sits much
   closer to the camera. */
.void-copy {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}

/* The blue light at the far end of the pupil: a small canvas (made in js/script.js) that is scaled
   and faded. Sized and centred on the screen by the script. */
.void-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

/* The Epidemic panel itself is empty, see-through and click-through: only its content zooms out of
   the glow (js/script.js section 2.9), so nothing frames it. The content is three separate pieces,
   the text, the button and the baby, and each zooms on its own at its own depth. The pieces (not
   the empty box around them) take the pointer, so that box never covers The Void's button. */
#panel-epidemic {
    z-index: 3;
    pointer-events: none;
}

.epidemic-text,
.epidemic-action,
.epidemic-image {
    pointer-events: auto;
    will-change: transform, opacity;
}

/* Container for the normal (non-sticky) vertical scroll flow */
#vertical-top,
#vertical-section {
    position: relative;
    width: 100%;
    display: block; /* Normal stacking flow */
}

.slide-panel {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

/* Engineered Addiction, the middle panel of the sideways travel, is 50px wider on each side than the
   screen: more black between it and the two video panels around it, a moment of calm while they slide
   past. The padding keeps its content exactly screen-wide and centred, so only the black grows.
   js/script.js measures the real panel widths, so the travel, the triggers and the menu links follow. */
#panel-architecture {
    width: calc(100vw + 100px);
    padding: 0 50px;
}

/* The Breaking Point: pure black instead of the page's --bg */
#panel-breaking {
    background: #000000;
}

.panel-bg {
    position: absolute;
    top: -40vh;
    left: -40vw;
    width: 180vw;
    height: 180vh;
    object-fit: cover;
    z-index: 0;
    opacity: 0.6;
    will-change: transform;
}

.overlay-dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(3,3,3,0.3) 0%, rgba(3,3,3,0.9) 100%);
    z-index: 1;
}

.panel-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1600px;
    padding: 0 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.split-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
    text-align: left;
}

.split-content.reverse {
    grid-template-columns: 1fr 1fr;
    direction: rtl;
}

.split-content.reverse > * {
    direction: ltr;
}

.img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    will-change: transform;
}

/* Add .img-contain to an .img-wrapper to show its image whole: no cover-crop,
   no zoom, and sized to the panel's height as well as the column's width. */
.img-wrapper.img-contain {
    aspect-ratio: auto;
    overflow: visible;
}

.img-wrapper.img-contain img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    margin: 0 auto;
    object-fit: contain;
    transform: none;
}

/* The Breaking Point image is trimmed to 544 of its original 900px width (the empty black
   sides), so on desktop it is shown at 60.44% of the column: the same size the woman had
   before the trim. The phone rules below let her use the free height instead. */
#panel-breaking .img-wrapper.img-contain img {
    width: 60.44%;
}

h1, h2, h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 1.1;
}

.title-huge {
    font-size: clamp(3rem, 6vw, 8rem);
    font-weight: 700;
    color: white;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
    margin-bottom: 1rem;
}

/* Title words that slide in on scroll (The Attention Collapse, js/script.js section 2.7) */
.slide-word {
    display: inline-block;
    will-change: transform;
}

.subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    color: var(--accent-cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: block;
}

p {
    font-size: clamp(0.65rem, 1.0vw, 1.0rem);
    line-height: 1.4;
    color: #cccccc;
    max-width: 600px;
}

.text-centered {
    margin: 0 auto;
    text-align: center;
    max-width: 700px;
    text-shadow: 0 4px 12px rgba(0,0,0,0.8);
    color: #fff;
}

/* --- The Grand Illusion: human + robot hands (animated by GSAP, js/script.js section 2.6) ---
   Both PNGs share one px -> vw scale (--hand-s). Each hand is placed by its
   fingertip pixel (human 2541,419 / robot 63,421) so the tips meet exactly at
   --tip-x / --tip-y when the animation is at rest. */
.illusion-hands {
    --hand-w: 51.5vw;
    --hand-s: calc(var(--hand-w) / 2616);
    --tip-x: 50%;
    --tip-y: 33%;
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.illusion-hand {
    position: absolute;
    will-change: transform;
}

.illusion-hand img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}

.hand-human {
    width: calc(var(--hand-s) * 2616);
    left: calc(var(--tip-x) - var(--hand-s) * 2541);
    top: calc(var(--tip-y) - var(--hand-s) * 419);
}

.hand-robot {
    width: calc(var(--hand-s) * 2594);
    left: calc(var(--tip-x) - var(--hand-s) * 63);
    top: calc(var(--tip-y) - var(--hand-s) * 421);
    z-index: 1;
}

.btn {
    display: inline-block;
    margin-top: 2rem;
    padding: 1.2rem 3rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: white;
    text-decoration: none;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    transition: color 0.3s, border-color 0.3s;
    cursor: pointer;
    z-index: 100;
    will-change: transform;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn:hover { color: black; border-color: white; }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.lightbox-overlay.active { opacity: 1; pointer-events: auto; }
.lightbox-content {
    width: 90%; max-width: 1100px; aspect-ratio: 16 / 9;
    position: relative; transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-overlay.active .lightbox-content { transform: scale(1); }

.lightbox-close {
    position: absolute; top: -50px; right: 0;
    background: none; border: none; color: white;
    font-size: 2.5rem; line-height: 1; font-family: var(--font-display);
    cursor: pointer; opacity: 0.6; transition: opacity 0.3s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-content video {
    width: 100%; height: 100%;
    background: #000; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    outline: none;
}

.hamburger-btn {
    position: fixed; top: 2.5rem; right: 5vw;
    z-index: 10001; background: transparent; border: none;
    cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 10px;
    mix-blend-mode: difference;
}
.hamburger-btn .bar {
    width: 35px; height: 2px; background-color: #fff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hamburger-btn.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.active .bar:nth-child(2) { opacity: 0; transform: translateX(20px); }
.hamburger-btn.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-overlay {
    position: fixed; inset: 0;
    background: rgba(3, 3, 3, 0.98); backdrop-filter: blur(15px);
    z-index: 10000; display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.menu-overlay.active { opacity: 1; pointer-events: auto; }
.menu-nav ul { list-style: none; text-align: center; }
.menu-nav li { margin: 1.5rem 0; overflow: hidden; }

.menu-link {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3vw, 2rem);
    color: var(--text-main); text-decoration: none; text-transform: uppercase;
    font-weight: 500; letter-spacing: 0.05em; display: inline-block;
    transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}

.menu-overlay.active .menu-link { transform: translateY(0); }
.menu-overlay.active li:nth-child(1) .menu-link { transition-delay: 0.1s; }
.menu-overlay.active li:nth-child(2) .menu-link { transition-delay: 0.15s; }
.menu-overlay.active li:nth-child(3) .menu-link { transition-delay: 0.2s; }
.menu-overlay.active li:nth-child(4) .menu-link { transition-delay: 0.25s; }
.menu-overlay.active li:nth-child(5) .menu-link { transition-delay: 0.3s; }
.menu-overlay.active li:nth-child(6) .menu-link { transition-delay: 0.35s; }
.menu-overlay.active li:nth-child(7) .menu-link { transition-delay: 0.4s; }
.menu-overlay.active li:nth-child(8) .menu-link { transition-delay: 0.45s; }
.menu-overlay.active li:nth-child(9) .menu-link { transition-delay: 0.5s; }
.menu-link:hover { color: var(--accent-cyan); }

/* Media Queries */
@media (max-width: 900px) {
    .split-content, .split-content.reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    .split-content.reverse > * {
        direction: ltr;
    }
    .split-content p { margin: 0 auto; }
    .img-wrapper { max-height: 40vh; }
    .img-wrapper.img-contain { max-height: none; }
    .img-wrapper.img-contain img { max-height: 40vh; }
    /* The Breaking Point's subject is tall and narrow, so on a phone it is limited by height:
       let it use the free height (the text above takes about 420px, margins included), never
       less than the standard 32vh and never more than 55vh. */
    #panel-breaking .img-wrapper.img-contain img { width: auto; max-height: clamp(32vh, calc(100vh - 420px), 55vh); }
    .split-content .btn { margin-top: 1.25rem; padding: 0.85rem 2rem; }
    .illusion-hands { --hand-w: 88vw; --tip-y: 27%; }
}

/* Short phones (iPhone SE and similar): text, button and image all stack in one screen */
@media (max-width: 900px) and (max-height: 700px) {
    .img-wrapper.img-contain img { max-height: 32vh; }
}

/* Reduced motion: no zoom. The Void and The Epidemic are plain stacked panels, as in the
   rest of the page (js/script.js leaves the stage alone, so #void-zoom keeps its natural height). */
@media (prefers-reduced-motion: reduce) {
    #void-stage {
        position: relative;
        height: auto;
        overflow: visible;
        background: none;
    }
    #void-stage .slide-panel { position: relative; }
}