/* =====================================================================
   LANDING.CSS — the three-way prism entrance
   ---------------------------------------------------------------------
   THE AESTHETIC RISK:
   The screen is cut by two luminous seams into three wedges with a clear
   pecking order. SPORTS is the hero — a full-width top band (~60% of the
   screen) whose bottom edge is a tilted diagonal. Beneath it, a second
   steep diagonal splits the remaining band into WILDLIFE (the larger,
   left wedge, serif and earthy) and MORE WORK (the right wedge, a dark
   cosmic starfield leading to the astro portfolio). The two seams meet
   in a prism junction marked by the "/" wordmark. Hovering (or tapping)
   a wedge makes it surge across its seam and reveals its "Enter".

   GEOMETRY NOTES (why the units look odd):
   - The hero seam's rise is ±var(--tiltY) = 3vw over a 100vw run, so its
     on-screen angle is atan(6/100) ≈ 3.43deg at EVERY viewport size —
     the glowing seam element can use a fixed rotation and still match
     the clip-path edge.
   - The bottom seam's skew is in vh against a vh-based drop for the same
     reason: constant ≈7deg lean regardless of aspect ratio.
   ===================================================================== */

.landing {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
}

.split {
    position: relative;
    height: 100%;
    width: 100%;
    /* --cutY: where the hero's bottom seam crosses mid-screen (its height).
       --cutB: where the wildlife/astro seam crosses (its horizontal position).
       Hover/focus/tap shift these to let a wedge take over. */
    --cutY: 60%;
    --tiltY: 3vw;    /* half-rise of the hero seam across the full width */
    --cutB: 58%;
    --skewB: 5vh;    /* half horizontal drift of the bottom seam, top→bottom */
}

/* ---- The three wedges ----------------------------------------------- */
.panel {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
    background-color: #111;
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    transition: clip-path 720ms var(--ease), filter 720ms var(--ease);
    will-change: clip-path;
}

/* HERO — sports owns everything above the tilted seam. Highest z, so the
   two supporting wedges can extend up underneath it without gaps. */
.panel--sports {
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(var(--cutY) + var(--tiltY)),
        0    calc(var(--cutY) - var(--tiltY))
    );
    z-index: 3;
    align-items: flex-start;
    justify-content: center;
}

/* SECONDARY — wildlife: bottom band, left of the steep seam. Its top edge
   hides at 18% height, safely underneath the hero. */
.panel--wildlife {
    clip-path: polygon(
        0 18%,
        calc(var(--cutB) + var(--skewB)) 18%,
        calc(var(--cutB) - var(--skewB)) 100%,
        0 100%
    );
    z-index: 2;
    align-items: flex-end;
    justify-content: flex-start;
}

/* TERTIARY — more work (astro): the remaining bottom-right wedge. Lowest z;
   it simply fills the whole screen and shows wherever the others don't. */
.panel--astro {
    z-index: 1;
    align-items: flex-end;
    justify-content: flex-end;
    background-color: #070812;
}

/* Darkening veils keep the type legible over any photo. */
.panel-veil {
    position: absolute;
    inset: 0;
    transition: background 720ms var(--ease);
}
.panel--sports .panel-veil {
    background:
        linear-gradient(180deg, rgba(8,10,14,0.72), rgba(4,6,9,0.45) 55%, rgba(4,6,9,0.85));
}
.panel--wildlife .panel-veil {
    background:
        linear-gradient(115deg, rgba(30,42,32,0.55), rgba(20,28,22,0.85));
}
/* Astro's veil carries its own tiny CSS starfield, so the wedge reads as
   night sky even before any photo is uploaded (and adds stars over one). */
.panel--astro .panel-veil {
    background-image:
        radial-gradient(1.5px 1.5px at 12% 28%, rgba(255,255,255,0.9), transparent 100%),
        radial-gradient(1px 1px   at 28% 64%, rgba(255,255,255,0.7), transparent 100%),
        radial-gradient(1px 1px   at 44% 38%, rgba(255,255,255,0.5), transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 72%, rgba(255,255,255,0.8), transparent 100%),
        radial-gradient(1px 1px   at 66% 22%, rgba(255,255,255,0.6), transparent 100%),
        radial-gradient(2px 2px   at 78% 52%, rgba(200,190,255,0.9), transparent 100%),
        radial-gradient(1px 1px   at 86% 80%, rgba(255,255,255,0.7), transparent 100%),
        radial-gradient(1px 1px   at 94% 34%, rgba(255,255,255,0.5), transparent 100%),
        linear-gradient(215deg, rgba(38,30,80,0.55), rgba(6,7,20,0.92) 70%);
}

/* ---- Wedge content --------------------------------------------------- */
.panel-content {
    position: relative;
    z-index: 3;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 34rem;
    color: #fff;
    transition: transform 720ms var(--ease), opacity 720ms var(--ease);
}

.panel-kicker {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.7rem;
    margin: 0 0 0.9rem;
    opacity: 0.85;
}

.panel-sub {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    line-height: 1.5;
    opacity: 0.9;
    margin: 0 0 1.4rem;
    max-width: 22rem;
}

/* Each wedge's type uses ITS OWN identity — visible before you enter. */

/* Sports hero: huge, centered, condensed broadcast type. */
.panel--sports .panel-content {
    text-align: center;
    max-width: 46rem;
    padding-top: clamp(2.5rem, 9vh, 6rem);
}
.panel--sports .panel-title {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(3.5rem, 10vw, 9rem);
    line-height: 0.84;
    letter-spacing: 0.01em;
    margin: 0 0 1rem;
}
.panel--sports .panel-kicker { font-family: "Archivo", sans-serif; color: #7fb0ff; }
.panel--sports .panel-sub    { font-family: "Archivo", sans-serif; margin-inline: auto; }

/* Wildlife: calm optical serif, anchored bottom-left. */
.panel--wildlife .panel-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 4.5vw, 3.9rem);
    line-height: 0.95;
    margin: 0 0 0.9rem;
}
.panel--wildlife .panel-kicker { font-family: "Spectral", serif; color: #cfe0c4; }
.panel--wildlife .panel-sub    { font-family: "Spectral", serif; font-weight: 300; }

/* More Work: cosmic — geometric grotesk, violet cast, bottom-right. */
.panel--astro .panel-content {
    text-align: right;
    max-width: 26rem;
    /* This wedge sits on the right, where the tilted hero seam dips lowest,
       so its top (the kicker) can run into the line on short/wide screens.
       Trimming the bottom padding drops the whole block clear of the seam. */
    padding-bottom: clamp(0.75rem, 1.4vw, 1.4rem);
}
.panel--astro .panel-title {
    font-family: "Space Grotesk", "Archivo", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    line-height: 1.02;
    letter-spacing: 0.02em;
    margin: 0 0 0.9rem;
    color: #eceafd;
}
.panel--astro .panel-kicker { font-family: "Space Grotesk", sans-serif; color: #a99bff; }
.panel--astro .panel-sub {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    color: #c0c2de;
    margin-left: auto;
    max-width: 18rem;
}

/* "Enter" control: hidden at rest, revealed when a wedge is active. */
.panel-enter {
    display: inline-block;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.7rem 1.15rem;
    border: 1px solid rgba(255,255,255,0.55);
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 400ms var(--ease) 120ms, transform 400ms var(--ease) 120ms,
                background 300ms var(--ease), color 300ms var(--ease);
}
.panel--wildlife .panel-enter { font-family: "Spectral", serif; }
.panel--sports   .panel-enter { font-family: "Archivo", sans-serif; }
.panel--astro    .panel-enter { font-family: "Space Grotesk", sans-serif; border-color: rgba(169,155,255,0.65); }
.panel-enter:hover,
.panel:hover .panel-enter { background: #fff; color: #111; }
.panel--astro:hover .panel-enter { background: #a99bff; border-color: #a99bff; color: #0a0820; }

/* ---- The two lit seams ----------------------------------------------- */
.seam {
    position: absolute;
    width: 2px;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: screen;
}
/* Hero seam: near-horizontal, tilted to match the hero's clip edge
   (constant ≈3.43deg — see geometry notes at the top). */
.seam--hero {
    left: -20%;
    width: 140%;
    height: 2px;
    top: var(--cutY);
    background: linear-gradient(to right, #ffd76a, #ff2e3f 45%, #2f7bff);
    transform: translateY(-50%) rotate(3.43deg);
    box-shadow: 0 0 22px rgba(255,120,60,0.6);
    transition: top 720ms var(--ease);
}
/* Bottom seam: steep, splitting wildlife from the night sky (≈7deg lean). */
.seam--split {
    left: calc(var(--cutB) - var(--skewB) * 0.5);
    top: var(--cutY);
    bottom: -4%;
    /* Fades out well before the viewport's bottom edge so it never runs
       through the hint line sitting down there. */
    background: linear-gradient(to bottom, #ff8a5c, #cfe0c4 40%, #7f6bff 55%, transparent 76%);
    transform: translateX(-50%) rotate(7deg);
    box-shadow: 0 0 22px rgba(160,140,255,0.55);
    transition: left 720ms var(--ease), top 720ms var(--ease);
}

/* "/" wordmark sitting on the prism junction where the seams meet. */
.brand {
    position: absolute;
    top: var(--cutY);
    left: var(--cutB);
    transform: translate(-50%, -50%);
    z-index: 6;
    pointer-events: none;
    transition: left 720ms var(--ease), top 720ms var(--ease), opacity 400ms var(--ease);
    mix-blend-mode: difference;
}
.brand-slash {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    color: #fff;
    line-height: 1;
}

/* ---- Hover / active states (desktop + two-step tap on tablets) ------- */
/* Hero grows downward… */
.split:has(.panel--sports:hover),
.split.is-sports { --cutY: 72%; }
/* …or a supporting wedge lifts the seam and pushes the other aside. */
.split:has(.panel--wildlife:hover),
.split.is-wildlife { --cutY: 46%; --cutB: 70%; }
.split:has(.panel--astro:hover),
.split.is-astro { --cutY: 46%; --cutB: 36%; }

/* Dim the wedges that are NOT the active one. (Must be :not(:hover) in one
   rule — a separate "restore" rule loses the specificity fight against the
   :has() selector and everything dims, hovered wedge included.) */
.split:has(.panel:hover) .panel:not(:hover) { filter: grayscale(0.6) brightness(0.55); }
.split.is-sports   .panel:not(.panel--sports),
.split.is-wildlife .panel:not(.panel--wildlife),
.split.is-astro    .panel:not(.panel--astro) { filter: grayscale(0.6) brightness(0.55); }

/* When a bottom wedge takes over, tuck the hero's content up out of the
   rising seam's way so no text gets sliced mid-line. */
.split:has(.panel--wildlife:hover) .panel--sports .panel-content,
.split:has(.panel--astro:hover)    .panel--sports .panel-content,
.split.is-wildlife .panel--sports .panel-content,
.split.is-astro    .panel--sports .panel-content {
    transform: translateY(-9vh) scale(0.9);
    opacity: 0.75;
}

/* And when the hero takes over, shrink the two supporting wedges' content
   into their bottom corners so the descending seam never slices their text. */
.split:has(.panel--sports:hover) .panel--wildlife .panel-content,
.split.is-sports .panel--wildlife .panel-content {
    transform-origin: bottom left;
    transform: scale(0.85);
    opacity: 0.8;
}
.split:has(.panel--sports:hover) .panel--astro .panel-content,
.split.is-sports .panel--astro .panel-content {
    transform-origin: bottom right;
    transform: scale(0.85);
    opacity: 0.8;
}

/* Reveal the active wedge's Enter control. */
.panel:hover .panel-enter,
.split.is-sports   .panel--sports   .panel-enter,
.split.is-wildlife .panel--wildlife .panel-enter,
.split.is-astro    .panel--astro    .panel-enter { opacity: 1; transform: translateY(0); }

/* Fade the brand slash a touch when a wedge takes over. */
.split:has(.panel:hover) .brand,
.split.is-sports .brand,
.split.is-wildlife .brand,
.split.is-astro .brand { opacity: 0.5; }

/* ---- Hint line -------------------------------------------------------- */
.landing-hint {
    position: fixed;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    margin: 0;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
/* Wording follows the INPUT, not the screen width: hover wording only for
   devices that can actually hover; touch devices are told to choose/tap. */
.hint-touch { display: none; }
@media (hover: none) {
    .hint-desktop { display: none; }
    .hint-touch   { display: inline; }
}

/* =====================================================================
   MOBILE (< 768px): drop the diagonals entirely. The three portfolios
   become a clean vertical stack of full-width tappable panels in priority
   order — SPORTS tall on top, then WILDLIFE, then MORE WORK — each with
   its own title + theme and a single tap straight into that portfolio.
   No clip-paths, so nothing can overlap or slip off-screen.
   ===================================================================== */
@media (max-width: 767px) {
    /* Let the page be its natural stacked height instead of a locked viewport. */
    .landing { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }

    .split {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
    }

    /* Each panel: normal flow, full width, a big tap target.
       (DOM order is already the priority order: sports, wildlife, astro.) */
    .panel {
        position: relative;
        inset: auto;
        clip-path: none !important;   /* remove the diagonal cuts */
        flex: 1 0 auto;
        display: flex;
        align-items: flex-end;        /* content anchored to the bottom */
        justify-content: flex-start;
        filter: none !important;      /* never dim a panel on mobile */
        transition: none;
    }
    /* The hierarchy survives as height: hero tallest, tertiary shortest. */
    .panel--sports   { min-height: 48vh; }
    .panel--wildlife { min-height: 36vh; }
    .panel--astro    { min-height: 30vh; }

    /* The diagonal-only decorations have no place in a clean stack. */
    .seam,
    .brand { display: none; }

    /* Content stays fully inside its own panel — left-aligned, padded,
       never clipped at the screen edges. */
    .panel-content,
    .panel--sports .panel-content,
    .panel--astro .panel-content {
        position: relative;
        z-index: 3;
        max-width: 100%;
        width: 100%;
        padding: clamp(1.5rem, 6vw, 2.5rem);
        text-align: left;
        transform: none !important;
        opacity: 1 !important;
    }
    .panel--sports .panel-sub,
    .panel--astro .panel-sub { margin-left: 0; margin-right: 0; }

    /* Titles sized to fit 375–390px screens without clipping; the hero
       still shouts loudest. */
    .panel--sports   .panel-title { font-size: clamp(3.25rem, 17vw, 4.5rem); }
    .panel--wildlife .panel-title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    .panel--astro    .panel-title { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }

    /* No hover on touch, so the "Enter" control is always shown. */
    .panel-enter { opacity: 1; transform: none; }

    /* Instruction line: sits below the stack, wraps, stays padded on-screen. */
    .landing-hint {
        position: static;
        transform: none;
        white-space: normal;
        text-align: center;
        padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
        background: #0b0b0b;
        color: rgba(255,255,255,0.6);
        text-shadow: none;
    }
    /* Stacked layout is tap-first regardless of pointer. */
    .hint-desktop { display: none; }
    .hint-touch   { display: inline; }
}

/* Desktop keyboard focus: reveal Enter and grow, mirroring hover. */
.panel:focus-visible { outline: none; }
.split:has(.panel--sports:focus-visible)   { --cutY: 72%; }
.split:has(.panel--wildlife:focus-visible) { --cutY: 46%; --cutB: 70%; }
.split:has(.panel--astro:focus-visible)    { --cutY: 46%; --cutB: 36%; }
.panel:focus-visible .panel-enter { opacity: 1; transform: translateY(0); }