/* ============================================================
   PARALLAX HERO & IMMERSIVE DEPTH SHOWCASE
   Multi-Plane Differentiated Scroll & 3D Pointer Parallax Engine
   Inherits design tokens from ./home.css
   ============================================================ */

/* ============================================================
   LetterFlood component styles (see js/letterflood.js for the choreography)
   LITE MODE (.lf-lite, auto on weak devices): kill infinite/raster-heavy
   paint — glow pulse, glitch stack, particle canvas.
   ============================================================ */
.lf-lite .px-volumetric_glow {
    animation: none;
    opacity: 0.35;
}

.lf-lite .px-glitch {
    display: none;
}

/* Page Setup */
body.is-parallax-page {
    background: #030303;
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header in Parallax Mode */
.is-parallax-page .o-header {
    mix-blend-mode: normal;
    background: rgba(6, 6, 6, 0.78);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    z-index: 100;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* ============================================================
   HERO STAGE (PINNED MULTI-PLANE SCROLL CONTAINER)
   ============================================================ */
.px-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #030303;
}

.px-hero_stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: center center;
    transform-style: preserve-3d;
}

/* Common Layer Geometry */
.px-layer {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    pointer-events: none;
    will-change: transform;
    transform-style: preserve-3d;
}

/* Transparent wrapper so <picture> WebP swaps never disturb layer layout */
.px-layer picture {
    display: contents;
}

/* ============================================================
   LAYER 1: DEEP BACKGROUND (Slowest Velocity: 0.20x)
   ============================================================ */
.px-layer--bg {
    z-index: 1;
    transform: translateZ(-180px);
}

.px-layer--bg .px-layer_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    filter: brightness(1.02) contrast(1.06) saturate(0.72);
    will-change: transform, filter;
    transform: scale(1.05);
}

/* Layer 1.5 (glitch) lives in ./glitch.css — loaded alongside this file. */


/* ============================================================
   LAYER 2: VOLUMETRIC CRIMSON BACKLIGHT GLOW
   ============================================================ */
.px-layer--glow {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateZ(-90px);
}

.px-volumetric_glow {
    width: 72vw;
    height: 55vh;
    max-width: 1050px;
    max-height: 620px;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.28) 0%, rgba(225, 29, 72, 0.10) 42%, rgba(120, 10, 20, 0.04) 62%, transparent 78%);
    mix-blend-mode: screen;
    filter: blur(46px);
    border-radius: 50%;
    will-change: transform, opacity;
    animation: glowPulse 5s ease-in-out infinite alternate;
    opacity: 0.55;
}

@keyframes glowPulse {
    0%   { transform: scale(0.96); opacity: 0.82; }
    100% { transform: scale(1.06); opacity: 1; }
}

/* ============================================================
   LAYER 3: CRIMSON TYPOGRAPHY "FOCUS" (Fastest Velocity: 1.80x)
   ============================================================ */
.px-layer--text {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: visible;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.px-title_wrap {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    position: relative;
    /* Lift type into upper-third like icex.png reference */
    transform: translateY(-11vh);
}

/* Grand Crimson Text — one flat solid colour, zero gradient, zero shadow.
   Pure #e50914 paint so the flooded end-frame is a single solid field. */
.px-title_crimson {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(8rem, 24vw, 32rem);
    line-height: 0.85;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #e50914;
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: #e50914;
    /* No text-shadow: at flood-scale any shadow becomes a fake gradient edge */
    text-shadow: none;
    will-change: transform, opacity;
    transform-origin: 50% 42%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
    white-space: nowrap;
}

/* Stroke / Outline layer behind the fill — hidden for clean reference look */
.px-title_wireframe {
    display: none;
}

/* Per-letter spans: split by JS for the Act III pile-up. Inherits fill/shadow. */
.px-title_crimson .px-char {
    display: inline-block;
    will-change: transform;
}

/* Long words (e.g. JOURNEY, 7 letters): tighter scale so the word fits the frame.
   Pile-up math is runtime-measured, so any length floods correctly. */
.px-title_crimson--long {
    font-size: clamp(5rem, 13.5vw, 17rem);
}

@media (max-width: 768px) {
    .px-title_crimson--long {
        font-size: clamp(3rem, 15.5vw, 7rem);
    }
}

/* Journey hero: PROJECTS-ref proportions — ~80vw width, word centered ~38vh
   so the lower half sits behind the figure's head/shoulders */
.px-hero--journey .px-title_wrap {
    transform: translateY(-22vh);
}

.px-hero--journey .px-title_crimson--long {
    font-size: clamp(12rem, 24.5vw, 40rem);
}

@media (max-width: 768px) {
    .px-hero--journey .px-title_wrap {
        transform: translateY(-12vh);
    }
    .px-hero--journey .px-title_crimson--long {
        font-size: clamp(3.5rem, 18vw, 8rem);
    }
}

/* ============================================================
   LAYER 5: FOREGROUND MAN CUTOUT (Medium Velocity: 0.75x)
   icex.png comp: small grounded figure, sofa sits on lower-third
   ============================================================ */
.px-layer--fg {
    z-index: 5;
    transform: translateZ(90px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 6vw 3vh 3vw;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.px-layer--fg::after {
    /* soft contact shadow to ground the sofa */
    content: "";
    position: absolute;
    bottom: 4vh;
    left: 0;
    transform: none;
    width: min(70vw, 820px);
    height: 70px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, transparent 70%);
    filter: blur(18px);
    z-index: -1;
    pointer-events: none;
}

.px-layer--fg .px-layer_img {
    width: min(88vw, 1100px);
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    object-position: bottom left;
    display: block;
    flex-shrink: 0;
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    box-sizing: border-box;
    filter: contrast(1.06) brightness(1.0) saturate(1.08) drop-shadow(0 24px 60px rgba(0,0,0,0.45));
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: scale(1);
    transform-origin: bottom left;
}

@media (max-width: 768px) {
    .px-layer--fg {
        padding: 0 4vw 2vh 2vw;
    }
    .px-layer--fg .px-layer_img {
        width: 94vw;
        max-width: 94vw;
        max-height: 55vh;
        padding: 0;
    }
    .px-title_wrap {
        transform: translateY(-14vh);
    }
    .px-title_crimson {
        font-size: clamp(5rem, 26vw, 12rem);
    }
}

/* ============================================================
   LAYER 6: CINEMATIC ATMOSPHERE & ANAMORPHIC FLARE
   ============================================================ */
.px-layer--atmosphere {
    z-index: 6;
}

.px-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 48%, transparent 52%, rgba(0, 0, 0, 0.22) 78%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.px-edge_top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14vh;
    background: linear-gradient(180deg, rgba(3, 3, 3, 0.65) 0%, rgba(3, 3, 3, 0.18) 60%, transparent 100%);
}

.px-edge_bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 20vh;
    background: linear-gradient(0deg, rgba(3,3,3,0.9) 0%, rgba(3, 3, 3, 0.45) 45%, transparent 100%);
}

.px-crimson_flare {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 32%, rgba(255,255,255,0.10) 0%, rgba(225, 29, 72, 0.06) 42%, transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ============================================================

/* Viewfinder Framing Brackets (4 corners) */
.px-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.25);
    border-style: solid;
}

.px-corner--tl {
    top: calc(var(--header-height, 80px) + 1.5rem);
    left: 2rem;
    border-width: 2px 0 0 2px;
}

.px-corner--tr {
    top: calc(var(--header-height, 80px) + 1.5rem);
    right: 2rem;
    border-width: 2px 2px 0 0;
}

.px-corner--bl {
    bottom: 2rem;
    left: 2rem;
    border-width: 0 0 2px 2px;
}

.px-corner--br {
    bottom: 2rem;
    right: 2rem;
    border-width: 0 2px 2px 0;
}

@media (max-width: 640px) {
    .px-corner { display: none; }
}