/* ═══════════════════════════════════════════════════════════════════════
   story-hero.css — full-page fixed hero for /stories/ standalone lesson
   pages, v3 (2026-09-07, same day as v2 — owner tried the pinned/release
   version live, liked the blurred-glass-over-image look enough to want it
   for the WHOLE page instead of just the reading passage: "make sure the
   image stays blurred behind the whole page instead of stopping in the
   question section").

   Mechanism, deliberately simpler than v2: .story-hero-pin is
   `position:fixed;inset:0` — it never moves, full stop, no sticky/release
   logic needed. Every real content section (header, reading passage,
   exercises, vocab recap, footer) is ordinary static-flow content that
   scrolls over it for the entire length of the page. The frosted-glass
   panel treatment that only applied to `.story` in v2 now applies to
   every "surface" element (.story, .ex-block, .recap-card) so the whole
   page reads as one continuous collection of glass cards floating over
   the same still image — that's the effect being asked for.

   Because the class names are unchanged from v2, NONE of the 107 lesson
   pages' own markup needs to change for this — same <div class=
   "story-hero-pin"><img id="storyHeroImg">...</div> structure, same
   media/story-hero.js (its selectors are unaffected by the position
   change). Only this stylesheet changed.

   Stacking note: every content section on these pages already carries
   its own `position:relative;z-index:1` in the page's own inline
   <style> (.lesson-header via this file, .story/.exercises/.verify-bar/
   .recap/.page-footer already had it before any of this work started —
   confirmed by reading the page source, not assumed). Giving
   .story-hero-pin z-index:-1 is therefore enough to sit it behind all of
   that in the shared root stacking context — no wrapper-level trickery
   needed, per the CSS painting-order spec (negative-z-index descendants
   paint below in-flow static content within the same stacking context).

   Requires --bg/--acc (every lesson page defines both already).
   ═══════════════════════════════════════════════════════════════════════ */

body{overflow-x:visible}
html{overflow-x:clip}

.story-scroller{position:relative}

/* The fixed layer: full-viewport, never scrolls, sits behind everything. */
.story-hero-pin{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:var(--bg);
}
.story-hero-img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;transform:scale(1.08);will-change:transform;
}
/* One page-wide wash, not scroll-position-dependent (the image itself
   never moves, so there's no "first viewport only" zone anymore) —
   slightly stronger at the very top where the title sits directly on the
   image with no card behind it; the rest stays lighter since every real
   content block now carries its own frosted-panel darkening on top of
   this. */
.story-hero-pin::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,8,13,.55) 0%,
    rgba(8,8,13,.32) 40%,
    rgba(8,8,13,.32) 100%);
}

.story-hero-scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:30px;height:46px;border:1.5px solid rgba(255,255,255,.55);border-radius:100px;
  display:flex;justify-content:center;padding-top:8px;pointer-events:none;
  opacity:.85;
}
.story-hero-scroll-cue::after{
  content:'';width:4px;height:8px;border-radius:100px;background:#fff;
  animation:story-hero-cue 1.6s ease-in-out infinite;
}
.story-hero-pin.story-hero-scrolled .story-hero-scroll-cue{opacity:0;transition:opacity .3s}
@keyframes story-hero-cue{0%{transform:translateY(0);opacity:1}70%{opacity:.3}100%{transform:translateY(14px);opacity:0}}

/* ── content layer — ordinary static flow, scrolls over the fixed image ── */
.story-hero-content{position:relative}

.lesson-header{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:56px !important;
}
.lesson-header > .crumb,.lesson-header > .lesson-cat,.lesson-header > .lesson-badge,.lesson-header > .prev-done,.lesson-header > .level-switch{
  align-self:flex-start;
}
.lesson-header .crumb,.lesson-header .lesson-cat,.lesson-header .lesson-badge{
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.lesson-header .lesson-title{
  text-shadow:0 2px 20px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.8);
}
.lesson-header .lesson-sub{
  color:#dde0e8;text-shadow:0 1px 10px rgba(0,0,0,.7);
}

/* ── frosted glass, applied to every real "surface" on the page ──
   Same recipe everywhere: translucent near-black + blur, so dense text
   stays legible regardless of what's behind it, while the fixed image
   still reads through at the edges/gaps between cards. */
.story,.ex-block,.recap-card{
  background:rgba(9,9,15,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
  border-color:rgba(255,255,255,.08) !important;
}
.story{
  position:relative;
  border-radius:26px 26px 0 0;
  box-shadow:0 -30px 70px rgba(0,0,0,.45);
  padding-top:44px !important;
  border-top:1px solid rgba(255,255,255,.08);
}
.ex-block,.recap-card{
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.ex-header h2,.recap-open h2,.page-footer-name{
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* ── quiz options / fill-in-blank inputs — idle & hover only ──
   The color-coded states (.sel/.correct/.wrong) already work: each uses a
   low-alpha accent/green/red that composites naturally onto the frosted
   card behind it and reads as tinted glass, not flat color — confirmed
   live, left exactly as each page's own inline CSS already defines it,
   not touched here. The actual mismatch was the IDLE resting state
   (solid var(--surface2), no transparency at all) and hover (border-only
   change, background stayed flat) — those two get the same dark-glass
   family as everything else on the page, one step more opaque than the
   card that holds them (.90 here vs the card's own .86) so options still
   read as distinct raised rows rather than a fully solid, unrelated
   color OR disappearing into the card. */
/* Deliberately NOT !important: .q-opt.correct/.wrong/.sel are more
   specific (two classes) than the plain .q-opt below, so they keep
   winning and stay untouched, exactly as confirmed live. This rule only
   needs to beat the inline .q-opt{background:var(--surface2)} base rule,
   which it does on source order alone (this file loads after the page's
   own <style>) at equal specificity — no !important required, and using
   it here would incorrectly clobber the more specific state rules. */
.q-opt,.us-input,.us-chip{
  background:rgba(9,9,15,.90);
  border-color:rgba(255,255,255,.10);
}
@media (hover:hover) and (pointer:fine){
  .q-opt:hover{background:color-mix(in srgb, var(--text) 5%, rgba(9,9,15,.90))}
}

/* Verify button — same complaint, same fix: it was a flat, fully solid
   var(--acc)/var(--surface2) fill (the one primary CTA on the page), now
   mixed into the same rgba(9,9,15,*) glass family instead of replacing it
   outright. Mixed at a high accent percentage (unlike the quiz rows)
   specifically because this is the one element that still needs to read
   as an unambiguous, high-contrast primary action, not a passive row —
   the dark--bg text stays legible because the mixed color stays close to
   the full accent brightness, just no longer a flat pasted-on block. */
.verify-btn{
  background:color-mix(in srgb, var(--acc) 82%, rgba(9,9,15,.90));
}
.verify-btn:disabled{
  background:rgba(9,9,15,.90);
}

/* ── Neon-circuit texture, Phase 5 (2026-09-10, button-identity pass) ──
   .q-opt is this page's own answer surface (direct equivalent of the main
   app's .quiz-opt, Phase 1), .verify-btn its own VERIFICAR CTA (equivalent
   of .scr-verify/.sg-verify, Phase 2). Same asset
   (media/pp-buttons/circuit-grain.png) and same screen-blend reasoning as
   both those passes — reused here rather than duplicated per-page, since
   this file is already every story page's single shared override layer.
   No dark-mode/skin gate needed here (unlike index.html) — every story
   page is unconditionally the dark photo-hero treatment, there's no light
   mode or Editorial-equivalent skin toggle on this page type.
   isolation:isolate + ::before at z-index:-1, same stacking fix as every
   other phase (a positioned pseudo-element with z-index:auto/0 otherwise
   paints ABOVE the button's own in-flow text per CSS2.1's stacking order,
   not below it). */
.q-opt,.verify-btn:not(:disabled){
  position:relative;isolation:isolate;overflow:hidden;
}
.q-opt::before,.verify-btn:not(:disabled)::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:url('pp-buttons/circuit-grain.png');
  background-size:120px 120px;background-repeat:repeat;
  filter:contrast(1.35) brightness(1.6);
  opacity:.3;mix-blend-mode:screen;
}
@media (hover:hover) and (pointer:fine){
  .q-opt:hover{box-shadow:0 0 10px -2px rgba(255,255,255,.3)}
  .verify-btn:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 0 16px -2px var(--acc)}
}

@media(max-width:768px){
  .lesson-header{padding-left:18px !important;padding-right:18px !important;padding-bottom:40px !important}
}

@media(prefers-reduced-motion:reduce){
  .story-hero-img{transition:none}
  .story-hero-scroll-cue::after{animation:none}
}