/* ═══════════════════════════════════════════════════════════════════════════
   V3 — key-art hero, speed-rule motif, retro-pulp grain.
   Loads AFTER tftb-theme.css. Everything here is additive; the V2 palette,
   fonts and components are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Parallax hero (§5.2) ─────────────────────────────────────────────── */
.tftb-hero {
    position: relative;
    min-height: 66vh;
    max-height: 820px;
    border-radius: var(--rounded-box, .75rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
    background: #0B0413;
    border: 1px solid rgba(250, 221, 20, .18);
}
.tftb-hero__layers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tftb-hero__layer {
    position: absolute;
    inset: -12% -4%;                 /* bleed, so parallax never exposes an edge */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform;
    backface-visibility: hidden;
}
.tftb-hero__layer--screen { mix-blend-mode: screen; }
.tftb-hero__astronaut {
    position: absolute;
    right: -2%;
    bottom: -6%;
    width: min(46%, 520px);
    height: auto;
    will-change: transform;
    backface-visibility: hidden;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}

/* Scrim: the content column must always sit on darkness. Without this the
   tagline and the outline CTA land on the nebula's brightest area and become
   unreadable. Angled so the astronaut on the right stays fully exposed. */
.tftb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(11,4,19,.94) 0%,
        rgba(11,4,19,.84) 26%,
        rgba(11,4,19,.50) 44%,
        rgba(11,4,19,.20) 60%,
        rgba(11,4,19,.10) 100%);
}

/* ver4: hero is a two-column row — branding left, arcade card layered over the
   astronaut on the right. */
.tftb-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}
.tftb-hero__content {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 40rem;
}
.tftb-hero__arcade {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    width: min(34%, 22.5rem);
    /* Nudged left and down so the card overlaps the astronaut's torso and legs
       but leaves the helmet and the book clear — the book is the whole point of
       the brand's artwork and shouldn't disappear behind a table. */
    margin-right: clamp(0px, 7vw, 120px);
    margin-top: clamp(0px, 4vw, 64px);
}
/* The card sits ON the artwork, so it needs its own ground — translucent enough
   that the astronaut reads through it, opaque enough for the 8-bit type. */
.tftb-arcade-card {
    background: rgba(29, 17, 56, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(250, 221, 20, .75);
    box-shadow:
        0 0 0 1px rgba(11, 4, 19, .6),
        0 18px 48px rgba(0, 0, 0, .55),
        0 0 34px rgba(250, 221, 20, .18);
}
.tftb-hero__wordmark {
    width: min(100%, 34rem);
    filter: drop-shadow(0 0 34px rgba(250, 221, 20, .30));
}
.tftb-hero__tagline {
    font-family: 'Chakra Petch', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: clamp(.8rem, 1.6vw, 1rem);
    color: #E4F7EA;
    margin: 1rem 0 1.75rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.tftb-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.tftb-hero__cta .btn-outline {
    background: rgba(11, 4, 19, .55);
    backdrop-filter: blur(3px);
}
.tftb-hero__cta .btn-outline:hover { background: #32AE5A; }
.tftb-hero__quote {
    margin-top: 2rem;
    max-width: 32rem;
    padding: 1rem;
    border-radius: .75rem;
    background: rgba(20, 11, 36, .78);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(155, 44, 182, .35);
}

/* Tablet: stack the card under the branding rather than squeezing both. */
@media (max-width: 1023px) {
    .tftb-hero { max-height: none; }
    .tftb-hero__inner { flex-direction: column; align-items: stretch; }
    .tftb-hero__content { max-width: none; }
    .tftb-hero__arcade { width: 100%; max-width: 28rem; margin-right: 0; margin-top: 0; }
}

/* Mobile: no parallax, no five-plane compositing — one static composite. */
@media (max-width: 767px) {
    .tftb-hero::before { display: none; }   /* content block carries its own scrim */
    .tftb-hero {
        min-height: 0;
        /* keyart_wide.webp has the wordmark baked in — using it here doubled the
           logo against .tftb-hero__wordmark. This composite is the same layer
           stack as desktop, minus the wordmark. */
        background: #0B0413 url('../img/brand/keyart_mobile.webp') center top / cover no-repeat;
        display: block;
    }
    .tftb-hero__layers { display: none; }
    .tftb-hero__content {
        background: linear-gradient(rgba(11, 4, 19, .18) 0%, rgba(11, 4, 19, .72) 38%, rgba(11, 4, 19, .95) 62%);
        padding-top: 48vw;                /* let the art breathe above the type */
    }
    .tftb-hero__wordmark { width: 100%; }
}

/* Motion sickness is an accessibility failure, not a nicety. */
@media (prefers-reduced-motion: reduce) {
    .tftb-hero__layer,
    .tftb-hero__astronaut { transform: none !important; transition: none !important; }
}

/* ── 2. Speed-rule motif (§5.3) ──────────────────────────────────────────────
   The wordmark's signature is a gold->red rule pair, the lower one shorter.
   Promoted here to a reusable divider. Pure CSS, no images. */
.tftb-rule { position: relative; height: 3px; width: 100%; }
.tftb-rule::before, .tftb-rule::after {
    content: ""; position: absolute; left: 0; height: 1px;
    background: linear-gradient(90deg, #FADD14 0%, #F5A623 45%, #F2512E 100%);
}
.tftb-rule::before { top: 0; width: 100%; }
.tftb-rule::after  { top: 2px; width: 62%; }
.tftb-rule--bottom { position: absolute; bottom: 0; left: 0; z-index: 3; }

.section-head {
    font-family: 'Chakra Petch', system-ui, sans-serif;
    font-weight: 700;                     /* Chakra Petch tops out at 700 (§2.4.3) */
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #FADD14;
}
.section-head + .tftb-rule { margin: .35rem 0 1.25rem; }

/* ── 3. Retro-pulp grain (§5.4) ──────────────────────────────────────────────
   Tuned at .045. Above ~.07 it starts to mush transcript body copy. */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background-image: url('../img/brand/grain_tile.png');
    background-size: 256px 256px;
    opacity: .045;
    mix-blend-mode: overlay;
}
#app { position: relative; z-index: 2; }

/* ── 4. Navbar: transparent over the hero, solid once scrolled (§5.6) ─────── */
.navbar {
    transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
body.at-top .navbar {
    background-color: rgba(26, 15, 46, .35) !important;
    border-bottom-color: rgba(250, 221, 20, .10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cohost feedback round — shared across ver5 / ver6 / ver7
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The singularity was MISSING, not blurred ──────────────────────────────
   ver3/ver4 built the hero on Relativistic-Jets-ONLY, which is the artwork with
   the black hole deleted — leaving only the soft yellow-green glow where it had
   been. The isolated event horizon is restored here as its own sharp plane, so
   it parallaxes at its own depth and keeps its hard vector edges. */
.tftb-hero__singularity {
    position: absolute;
    left: 6%;
    top: 46%;
    width: min(42%, 460px);
    height: auto;
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
    filter: drop-shadow(0 0 46px rgba(250, 221, 20, .38));
    pointer-events: none;
}

/* ── 2. Latest Transmission in the hero (replaces the High Scores card) ────── */
.tftb-hero-card {
    background: rgba(29, 17, 56, .84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 221, 20, .55);
    box-shadow: 0 0 0 1px rgba(11,4,19,.6), 0 18px 48px rgba(0,0,0,.55), 0 0 30px rgba(250,221,20,.14);
}
.tftb-hero-card__body { display: flex; gap: 1rem; align-items: flex-start; }
.tftb-hero-card__art {
    width: 84px; height: 84px; flex: 0 0 auto;
    border-radius: .5rem; object-fit: contain;
    background: rgba(11,4,19,.5);
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.tftb-hero-card__title {
    font-family: 'Chakra Petch', system-ui, sans-serif;
    font-weight: 700; font-size: 1rem; line-height: 1.25;
    cursor: pointer;
}
.tftb-hero-card__title:hover { color: #FADD14; }

/* ── 3. Button life (cohost request) ─────────────────────────────────────────
   "Enter Arcade" gets the Space-Invaders DOS face and a subtle pulsing glow —
   deliberately softer than the games' own "PRESS FIRE TO START". "Explore
   Archives" gets a matching gold counterpart so the pair stays balanced. */
.btn-arcade {
    font-family: 'Press Start 2P', monospace;
    font-size: .68rem;
    letter-spacing: .04em;
    line-height: 1.6;
    color: #3ED96F;
    border-color: #3ED96F;
    animation: arcadePulse 2.4s ease-in-out infinite;
}
.btn-arcade:hover {
    background: #3ED96F;
    border-color: #3ED96F;
    color: #0B0413;
    animation: none;
    box-shadow: 0 0 26px rgba(62, 217, 111, .65);
}
@keyframes arcadePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(62,217,111,.22), inset 0 0 4px rgba(62,217,111,.10); }
    50%      { box-shadow: 0 0 20px rgba(62,217,111,.55), inset 0 0 9px rgba(62,217,111,.22); }
}

.btn-archives { position: relative; overflow: hidden; animation: archivesPulse 2.4s ease-in-out infinite; }
.btn-archives::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 38%;
    left: -50%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    transform: skewX(-18deg);
    animation: archivesSheen 4.6s ease-in-out infinite;
}
.btn-archives:hover { animation: none; box-shadow: 0 0 28px rgba(250,221,20,.6); }
.btn-archives:hover::after { animation: none; opacity: 0; }
@keyframes archivesPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(250,221,20,.20); }
    50%      { box-shadow: 0 0 20px rgba(250,221,20,.48); }
}
@keyframes archivesSheen {
    0%, 62% { left: -50%; }
    88%,100% { left: 118%; }
}

/* Nobody should get a pulsing button they didn't ask for. */
@media (prefers-reduced-motion: reduce) {
    .btn-arcade, .btn-archives { animation: none; }
    .btn-archives::after { animation: none; opacity: 0; }
}

/* ── 4. Per-page brand elements ──────────────────────────────────────────────
   Archives/Episodes gets the purple-and-blue deep space plate — no green
   squiggles, as asked. Crew gets a giant singularity bleeding off the page. */
.page-episodes, .page-crew, .page-community, .page-blog { position: relative; }

.page-episodes::before {
    /* fixed, not absolute — an absolutely-positioned full-bleed plate widens the
       document and gives the whole page a horizontal scrollbar. */
    content: ""; position: fixed; inset: 0;
    z-index: -1; pointer-events: none;
    background: url('../img/brand/bg_deep_space.webp') center / cover no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 65% 70% at 50% 40%, #000 38%, transparent 78%);
            mask-image: radial-gradient(ellipse 65% 70% at 50% 40%, #000 38%, transparent 78%);
    opacity: .55;
}

.page-crew::before {
    /* Anchored on the DISC CENTRE, a little left of page centre, and sized so the
       accretion disk's upper-right crest clears into the top-right corner — the
       cohosts flagged that it read as an anonymous gold band without one of the
       distinguishing features visible.
       The art has transparent padding (opaque bounds are 2013x979 of 2400x1546),
       so the box aspect matches the file and the offsets are taken from the disc
       centre at 48.42% / 50.78%. */
    content: ""; position: fixed;
    z-index: -1; pointer-events: none;
    left: 42%; top: 56%;
    translate: -48.42% -50.78%;
    width: 116vw; height: 74.7vw;
    background: url('../img/brand/singularity_giant.webp') center / 100% 100% no-repeat;
    opacity: .58;
    filter: drop-shadow(0 0 90px rgba(250,221,20,.30));
}
@media (max-width: 900px) {
    /* on narrow viewports the vw/vh mix drifts — pull it back up and shrink */
    .page-crew::before { left: 46%; top: 46%; width: 150vw; height: 96.6vw; }
}

/* Content must stay above the plates. */
.page-episodes > *, .page-crew > *, .page-community > *, .page-blog > * { position: relative; z-index: 1; }

/* ── Singularity above the scrim ─────────────────────────────────────────────
   It lived inside .tftb-hero__layers (z-index 0) and the scrim (z-index 1) sat
   on top of it, which is what made it read as a soft glow rather than a black
   hole. Now a direct child of .tftb-hero at z-index 2. */
.tftb-hero__singularity {
    z-index: 2;
    left: 41%;
    top: 50%;
    width: min(30%, 340px);
}

/* ── Arcade button: Press Start 2P needs room to breathe ─────────────────── */
.btn-arcade {
    font-size: .8rem;
    padding-left: 1.6rem; padding-right: 1.6rem;
    height: auto; min-height: 3.6rem;
}
.btn-archives { min-height: 3.6rem; }

@media (max-width: 520px) {
    .btn-arcade { font-size: .62rem; padding-left: 1rem; padding-right: 1rem; }
}

/* ═══ ver7 "Compact" ═════════════════════════════════════════════════════════
   No panel on the artwork at all. The hero is cropped tight to kill the empty
   foreground the cohosts flagged, the astronaut reads in full, and Latest
   Transmission butts directly underneath so the two read as one block. */
.tftb-hero { min-height: 52vh; max-height: 620px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tftb-hero__inner { align-items: center; padding-bottom: clamp(1.25rem, 3vw, 2.5rem); }
.tftb-hero__content { max-width: 36rem; }
.tftb-hero__quote { display: none; }

/* Astronaut larger and fully exposed — nothing overlaps him */
.tftb-hero__astronaut { right: -2%; bottom: -8%; width: min(50%, 580px); }
.tftb-hero__singularity { left: 40%; top: 46%; width: min(26%, 300px); }

/* Join the hero to the card beneath it */
.home-hero-stack { display: flex; flex-direction: column; }
.home-hero-stack .tftb-hero { margin-bottom: 0; }
.tftb-latest-joined {
    border-top-left-radius: 0; border-top-right-radius: 0;
    border-top: 2px solid rgba(250, 221, 20, .55);
    margin-top: 0;
}
@media (max-width: 767px) {
    .tftb-hero { max-height: none; }
}

/* ver7: plates at middle intensity */
.page-episodes::before { opacity: .62; }
.page-crew::before     { opacity: .48; }

/* ── Specificity fix ─────────────────────────────────────────────────────────
   `[data-theme="tftb"] .btn { font-family: Chakra Petch }` in tftb-theme.css
   (0,2,0) was beating plain `.btn-arcade` (0,1,0), so the Space-Invaders face
   and the green never applied. Raised to (0,3,0). */
[data-theme="tftb"] .btn.btn-arcade {
    font-family: 'Press Start 2P', monospace;
    font-weight: 400;
    color: #3ED96F;
    border-color: #3ED96F;
    font-size: .8rem;
    letter-spacing: .04em;
    line-height: 1.7;
}
[data-theme="tftb"] .btn.btn-arcade:hover {
    background: #3ED96F;
    border-color: #3ED96F;
    color: #0B0413;
}
@media (max-width: 520px) {
    [data-theme="tftb"] .btn.btn-arcade { font-size: .6rem; }
}

/* Mobile already gets its black hole from keyart_mobile.webp, which is built on
   EventHorizon-Background (singularity intact). The separate plane would be a
   second, tiny one stranded behind the CTAs — same class of mistake as the
   doubled wordmark in V3. */
@media (max-width: 767px) {
    .tftb-hero__singularity { display: none; }
}

/* ═══ ver8 ═══════════════════════════════════════════════════════════════════
   Cohost round 2. Base is ver7 — they said the hole sitting partly under the
   Arcade button "is OK" there, whereas ver6 would need the whole background
   moved to expose the spot.

   1. THE HOLE GOES ON THE NEXUS.
   The jets converge at 40.25% x / 60.4% y of layer_nebula.webp (found by
   blurring the plate and taking its brightest point) — that's the soft patch
   the eye is being led to. The disc centre sits at 48.42% / 50.78% of the
   singularity art, so the element is anchored at the nexus and pulled back by
   those fractions.

   `translate` (the independent property) rather than `transform`: the parallax
   JS writes `transform` every scroll frame and would overwrite an offset put
   there. The two compose. */
.tftb-hero__singularity {
    left: 39.5%;
    top: 66%;
    translate: -48.42% -50.78%;
    width: min(30%, 350px);
}
@media (max-width: 1199px) {
    .tftb-hero__singularity { top: 64%; }
}

/* With the hole on the nexus it lands under the CTA row (intended) but was also
   cutting through the tagline. Content shifts up so only the buttons overlap,
   and the tagline gets a harder shadow for the stretch that crosses the disc. */
.tftb-hero__inner { align-items: flex-start; padding-top: clamp(1.25rem, 3.2vw, 2.5rem); }
.tftb-hero__tagline { text-shadow: 0 2px 4px #0B0413, 0 2px 16px rgba(11,4,19,.95); }


/* ═══ ver9 ═══════════════════════════════════════════════════════════════════
   Round three. The cohosts clarified that the spacey plate was meant for the
   Arcade Sector PAGE — filling the blank space between the game windows — not
   inside the game overlay. ver8's modal treatment is reverted; the plate now
   sits behind the arcade grid. */
.page-arcade { position: relative; }
.page-arcade::before {
    content: ""; position: fixed; inset: 0;
    z-index: -1; pointer-events: none;
    background: url('../img/brand/bg_blue_flare.webp') center / cover no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 46%, #000 40%, transparent 80%);
            mask-image: radial-gradient(ellipse 78% 80% at 50% 46%, #000 40%, transparent 80%);
    opacity: .50;
}
.page-arcade > * { position: relative; z-index: 1; }

/* Let the background read through: cards lose their flat fill and pick up a
   slight blur, so the space *between* the windows is what's jazzed up rather
   than the windows themselves. Applied across every view, not just the arcade —
   the body starfield shows through where a page has no plate of its own.

   Deliberately NOT applied to episode_detail or blog_detail: those carry long
   transcripts and article bodies, and translucent reading surfaces over a busy
   starfield is exactly where this stops being decoration and starts costing
   legibility. They have no .page-* hook, so they are excluded by construction.

   The arcade HALL OF FAME panels and the High Scores cabinet keep their solid
   black fill on purpose — they're meant to read as hardware, not glass. */
.page-arcade   .card.bg-base-100,
.page-episodes .card.bg-base-100,
.page-crew     .card.bg-base-100,
.page-community .card.bg-base-100,
.page-blog     .card.bg-base-100,
.page-home     .card.bg-base-100 {
    background: rgba(26, 15, 46, .78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* The episodes filter bar and themes rail are bg-base-100 panels rather than
   .card, so they need the same treatment or they float as opaque slabs. */
.page-episodes .bg-base-100:not(.card) {
    background: rgba(26, 15, 46, .78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* ── Hero background shifted right + down, Astro stays put ───────────────────
   "…if the whole BG image (squiggles, black hole) was moved to the right a wee
   bit and down, leaving Astro where he is."
   The three background planes get an asymmetric inset — same box size, offset
   by +6% of hero width and +7% of hero height. The astronaut is positioned off
   .tftb-hero__layers by right/bottom, so it is untouched by this. The
   singularity's anchor is re-measured to match (see below). */
.tftb-hero__layer { inset: -5% -10% -19% 2%; }
/* Singularity re-anchored to the shifted nexus (measured, not assumed). */
.tftb-hero__singularity { left: 45.48%; top: 74.3%; }
/* The hero's width follows Tailwind's container, which steps at 1280px (xl) —
   below that the aspect (and so the nexus) is constant. Breakpoint matches. */
@media (max-width: 1279px) { .tftb-hero__singularity { top: 70.75%; } }

/* ── Enter Arcade: more vibrant, more obvious ────────────────────────────────
   "…if the glow-pulse could be just a bit more vibrant and visible."
   Deeper trough-to-peak swing, a second wider halo, a lit border and a text
   glow that pulses with it, and slightly quicker so it reads as alive. Still
   fully off under prefers-reduced-motion. */
[data-theme="tftb"] .btn.btn-arcade {
    animation: arcadePulseHot 1.9s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(62,217,111,.55);
}
@keyframes arcadePulseHot {
    0%, 100% {
        box-shadow: 0 0 8px rgba(62,217,111,.40), 0 0 22px rgba(62,217,111,.16),
                    inset 0 0 8px rgba(62,217,111,.16);
        border-color: #3ED96F;
        text-shadow: 0 0 6px rgba(62,217,111,.45);
    }
    50% {
        box-shadow: 0 0 22px rgba(62,217,111,.95), 0 0 52px rgba(62,217,111,.55),
                    inset 0 0 16px rgba(62,217,111,.40);
        border-color: #8CFFB4;
        text-shadow: 0 0 14px rgba(140,255,180,.95), 0 0 26px rgba(62,217,111,.6);
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="tftb"] .btn.btn-arcade {
        animation: none;
        box-shadow: 0 0 18px rgba(62,217,111,.55);
        text-shadow: 0 0 8px rgba(62,217,111,.5);
    }
}

/* ── "Shall we play a game?" — 80s terminal green, pulsing with the CTA ──────
   WarGames line, so it gets the WarGames treatment: the same Press Start 2P
   pixel face as the Enter Arcade button, phosphor green, and a glow pulse on
   the identical 1.9s ease-in-out cycle so the two read as the same system.
   `opacity-70` was dropped from the markup — it would have dulled the glow. */
.arcade-tagline {
    font-family: 'Press Start 2P', monospace;
    font-weight: 400;
    font-size: clamp(.6rem, 1.45vw, .95rem);
    letter-spacing: .04em;
    line-height: 1.9;
    color: #3ED96F;
    animation: arcadeTextPulse 1.9s ease-in-out infinite;
}
@keyframes arcadeTextPulse {
    0%, 100% { color: #3ED96F; text-shadow: 0 0 6px rgba(62,217,111,.45); }
    50%      { color: #8CFFB4; text-shadow: 0 0 14px rgba(140,255,180,.95), 0 0 26px rgba(62,217,111,.6); }
}
@media (prefers-reduced-motion: reduce) {
    .arcade-tagline { animation: none; color: #3ED96F; text-shadow: 0 0 8px rgba(62,217,111,.5); }
}