/* DESKTOP hero ring: what is inside the window. See
   lantern-hero-ring-layout.css for the map. A different site on every page
   (header text swapped by lantern-hero-articles.js, its paint here), the page
   text, the Shelves page and its traps (lantern-hero-traps.js), and the scene
   cues: Simplify's beckoning dot and the "phenomenon" ripple. */
#hero .sh-page { display: none; }

  /* ── site headers: one photo strip per site, same box on every page ────── */
  #hero .browser[data-site="guardian"] .hh-hero-photo { background: #2a1a0e url('hero-dune-photo.jpg') center 4% / cover no-repeat; }
  #hero .browser[data-site="its"] .hh-hero-photo { background: #2b2f24 url('hero-stalker-zone.jpg') center 50% / cover no-repeat; }
  /* Immerse opens on the Ukrainian face and stays there — no ⇄ swap */
  #hero-imm-fab { display: none !important; }
  #hero .browser[data-site="screenrant"] .hh-hero-photo { background: #3a4a6a url('hero-breakingbad-rv.jpg') center 45% / cover no-repeat; }
  #hero .browser[data-site="athletic"] .hh-hero-photo { background: #14140f url('hero-wrexham-photo.jpg') center 32% / cover no-repeat; }
  /* the header photo is 15px taller than its ratio; the kicker label goes */
  #hero .browser .hh-hero-photo { aspect-ratio: auto; height: calc(var(--car-w) * 2.6 / 16 + 15px); }
  #hero .browser .hh-hp-kicker { display: none; }

  /* ── the page text: type sized by the window's width, left-aligned; the
     page area runs to the window's bottom edge ─────────────────────────── */
  #hero .browser .page { font-size: clamp(16px, calc(var(--car-w) * .035), 24px); line-height: 1.55; }
  #hero .browser .page,
  #hero .browser .page p { text-align: left; }
  #hero .browser > .page { flex: 1 1 auto; height: auto !important; min-height: 0 !important; }
  /* Practice carries the longest text AND the exercise bar under it */
  #hero .browser .ex-page { padding-top: 18px !important; }
  /* the answer options read close to the text they sit in — the fixed px
     sizes came from the old, smaller page and looked tiny here */
  #hero .browser .ex-page .inqgap .menu { min-width: 0; padding: .2em; }
  #hero .browser .ex-page .inqgap .menu button { font-size: .72em; padding: .3em .7em; }
  #hero .browser .ex-page .art-pill { font-size: .8em; padding: .05em .4em; line-height: 1.3; }
  #hero .browser .ex-page .ex-bubble { font-size: .6em; padding: .35em .75em; }
  /* the visitor's own gap (lantern-exercises.js yourTurn): an amber sticker
     ABOVE the word — below it would cover the last line and the bar */
  #hero .browser .ex-page .inqgap .ex-bubble.turn { top: auto; bottom: calc(100% + 8px); color: var(--amber-deep); }
  #hero .browser .ex-page .inqgap .ex-bubble.turn::after {
    top: auto; bottom: -6px;
    border-left: none; border-top: none;
    border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  }

  /* Simplify is ONE paragraph (the Home article above it belongs to Home);
     its reveal animation is off — the page arrives by the slide */
  body.hero-p2:not(.hero-p3) #hero .page-en > p { display: none; }
  body.hero-p2 #hero .hero-extra { transition: none; }
  body.hero-p2 #hero #hero-simp-para { margin-top: 0 !important; }
  /* before the cursor comes, the orange dot beckons — the visitor sees what is
     about to be pressed (lantern-simplify-dot.js _heroSimpAutoPlay) */
  #hero-simp-dot.sd-beckon { animation: sd-beckon .7s ease-in-out 2 !important; }
  /* after the rewrite the dot stays softly alive — a slow halo, no scale —
     so the visitor knows it still flips the text */
  #hero-simp-dot.sd-live { animation: dotbeckon 2.4s ease-in-out infinite !important; }
  @media (prefers-reduced-motion: reduce) { #hero-simp-dot.sd-live { animation: none !important; } }

  /* ── Shelves: a page layer over a settled Practice, on body.hero-shelves
     (lantern-hero-ring.js) — the same pattern as .ex-page on hero-p5 ─────── */
  #hero .sh-page {
    display: block; position: absolute; top: 0; left: 0; right: 0;
    padding: 26px 32px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  body.hero-shelves #hero .sh-page {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .34s ease;
  }
  body.hero-shelves #hero .ex-page,
  body.hero-shelves #hero .hx-hud { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

  /* a tip may overflow the page layer and the window; the emptied strip takes
     the radius. While a tip is open the page sits over the still frame (its
     hairline would cross the tip), see-through so the frame's dots show. */
  body.hero-shelves #hero .browser .page { overflow: visible; }
  body.hero-shelves #hero .floatwrap > .browser { overflow: visible; }
  body.hero-shelves #hero .browser .hh-tabstrip { border-radius: var(--r-lg) var(--r-lg) 0 0; background: transparent; }
  body.hero-shelves #hero .floatwrap > .browser:has(.shelf-mark:hover) { z-index: 3; background: transparent; }

  /* the traps on a light page (#shelves paints them for its dark ground); the
     fill starts 3px lower with the bottom edge and underline kept in place */
  #hero .sh-page .shelf-mark-word { color: var(--ink); font-weight: 600; padding: 0 2px 4px; line-height: calc(1.55em - 6px); }
  #hero .sh-page .sh-caught .shelf-mark-word { background: transparent; box-shadow: inset 0 -1.5px 0 rgba(var(--amber-rgb), .7); }

  /* the tip: opens down, or up (.sh-up; lantern-hero-traps.js place()). The
     stage is scaled by --car-z — sizes divide it back out to read at real size */
  #hero .sh-page .shelf-tip {
    z-index: 20; bottom: auto; top: calc(100% + 11px);
    transform: translateX(-50%) translateY(-4px);
    width: calc(272px / var(--car-z));
    padding: calc(12px / var(--car-z)) calc(14px / var(--car-z));
    box-shadow: 0 14px 34px -10px rgba(var(--ink-rgb), .28), 0 0 0 1px rgba(var(--ink-rgb), .08);
  }
  #hero .sh-page .shelf-mark:hover .shelf-tip { transform: translateX(-50%) translateY(0); }
  /* demo auto-open (lantern-hero-traps.js): same open state as :hover, on a
     class instead — the tip used to be invisible until someone thought to
     hover a trap, so the slide's own point never showed itself (27.09) */
  #hero .sh-page .shelf-mark.sh-auto .shelf-tip { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  #hero .sh-page .shelf-tip::before { bottom: auto; top: -11px; }
  #hero .sh-page .shelf-tip::after { top: auto; bottom: 100%; margin: 0 0 -5px calc(-5px + var(--tip-ax, 0px)); }
  #hero .sh-page .sh-up .shelf-tip { top: auto; bottom: calc(100% + 11px); transform: translateX(-50%) translateY(4px); }
  #hero .sh-page .sh-up:hover .shelf-tip { transform: translateX(-50%) translateY(0); }
  #hero .sh-page .sh-up .shelf-tip::before { top: auto; bottom: -11px; }
  #hero .sh-page .sh-up .shelf-tip::after { bottom: auto; top: 100%; margin: -5px 0 0 calc(-5px + var(--tip-ax, 0px)); }
  #hero .sh-page .shelf-tip-shelf { font-size: calc(10.5px / var(--car-z)); margin-bottom: calc(5px / var(--car-z)); }
  #hero .sh-page .shelf-tip-def { font-size: calc(15px / var(--car-z)); }

  /* collecting a trap: the extension's two answers, then the count and the
     product's bonus line (origin, or the example on secret negatives) */
  #hero .sh-page .sh-acts { display: flex; gap: 6px; margin-top: calc(8px / var(--car-z)); }
  #hero .sh-page .sh-btn {
    font: 600 var(--fs-sm) var(--sans); font-size: calc(13px / var(--car-z));
    padding: calc(5px / var(--car-z)) calc(11px / var(--car-z)); border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
  }
  #hero .sh-page .sh-btn:hover { border-color: rgba(var(--ink-rgb), .35); }
  #hero .sh-page .sh-btn-got { background: var(--ink); border-color: var(--ink); color: var(--card); }
  #hero .sh-page .sh-btn-got:hover { background: rgba(var(--ink-rgb), .85); }
  #hero .sh-page .sh-count {
    display: none; margin-top: calc(7px / var(--car-z));
    font-family: var(--mono); font-size: calc(11.5px / var(--car-z)); letter-spacing: .06em; color: var(--amber-deep);
  }
  #hero .sh-page .sh-origin {
    display: none; margin-top: calc(6px / var(--car-z)); padding-top: calc(6px / var(--car-z));
    border-top: 1px solid var(--line-soft);
    font-size: calc(13px / var(--car-z)); line-height: 1.45; color: var(--ink-70); font-weight: 400;
  }
  #hero .sh-page .sh-caught .sh-acts { display: none; }
  #hero .sh-page .sh-caught .sh-count,
  #hero .sh-page .sh-caught .sh-origin { display: block; }

  /* ── no MY VOCAB rail on desktop, but it stays in the DOM, laid out and
     unseen: lantern-page.js keeps each word's progress on its card, and the
     Mastered reveal clones the "phenomenon" card. Nothing in it animates. ── */
  #worddeck,
  body.at-hero.vocab-on #worddeck,
  body.hero-p2 #worddeck {
    visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
  }
  #worddeck *, #worddeck *::before, #worddeck *::after { animation: none !important; transition: none !important; }
  /* the Mastered card is a clone of that rail card appended to <body>
     (lantern-phases.js masteryReveal) — give it the rail's sizes back */
  body > .wd-card { padding: 7px 9px; gap: 6px; border-radius: var(--r-md); }
  body > .wd-card .wd-w { font-size: 14px; }
  body > .wd-card .wd-tr { font-size: var(--fs-micro); }
  body > .wd-card .wd-prog { width: 17px; height: 17px; }
  body > .wd-card .cefr-b { font-size: 8px; padding: 1px 4px; }

  /* ── "phenomenon" glows once the ring is full (lantern-hero-ring.js
     ringWords); clicking it runs the Mastered reveal ───────────────────── */
  #hero .browser .rw-layer {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    opacity: 0; transition: opacity .25s ease;
  }
  #hero .browser .rw-layer.on { opacity: 1; }
  #hero .rw-hit {
    position: absolute; left: 0; top: 0; border-radius: 6px;
    pointer-events: none; opacity: 0; cursor: pointer;
    transition: opacity .3s ease;
  }
  #hero .rw-hit.on { pointer-events: auto; opacity: 1; }
  /* rings on water: each ripple leaves the word's rounded box and spreads
     outward; ::after is a fainter echo just behind */
  #hero .rw-hit::before, #hero .rw-hit::after {
    content: ""; position: absolute; inset: 0; border-radius: 6px;
    border: 1px solid rgba(var(--amber-rgb), .75);
    box-shadow: inset 0 0 7px rgba(var(--amber-rgb), .22), 0 0 3px rgba(var(--amber-rgb), .12);
    opacity: 0; pointer-events: none;
  }
  #hero .rw-hit.on::before { animation: rw-ripple 2.8s cubic-bezier(.22, .61, .36, 1) .5s infinite; }
  #hero .rw-hit.on::after { animation: rw-ripple-echo 2.8s cubic-bezier(.22, .61, .36, 1) .72s infinite; }
  #hero .rw-hit.on:hover, #hero .rw-hit.on:focus-visible { outline: none; }
  #hero .rw-hit.on:hover::before, #hero .rw-hit.on:hover::after,
  #hero .rw-hit.on:focus-visible::before, #hero .rw-hit.on:focus-visible::after { animation-play-state: paused; }
  /* the tag hangs BELOW the word: above it, it hid a saved word on the line before */
  #hero .rw-tag {
    position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
    white-space: nowrap; padding: 3px 9px; border-radius: 999px;
    background: var(--ink); color: var(--card);
    font: 600 calc(11px / var(--car-z)) / 1.3 var(--mono); letter-spacing: .04em;
    box-shadow: 0 6px 16px -8px rgba(var(--ink-rgb), .5);
  }
  #hero .rw-tag::after {
    content: ""; position: absolute; left: 50%; bottom: 100%; margin-left: -4px;
    border: 4px solid transparent; border-bottom-color: var(--ink);
  }
  @media (prefers-reduced-motion: reduce) {
    #hero .rw-hit.on::before, #hero .rw-hit.on::after { animation: none; }
  }

  /* Install: the six feature cards read 7.5% larger. `scale` stacks on the
     translate and the idle float; the wires measure the live rect. */
  @media (min-width: 921px) { #ev-close .dk-card { scale: 1.075; } }
@keyframes sd-beckon {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--amber-rgb), .55); }
  50% { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 0 12px rgba(var(--amber-rgb), 0); }
}
@keyframes rw-ripple {
  0% { inset: 0; border-radius: 6px; opacity: 0; }
  8% { opacity: .9; }
  100% { inset: -18px -24px; border-radius: 30px; opacity: 0; }
}
@keyframes rw-ripple-echo {
  0% { inset: 0; border-radius: 6px; opacity: 0; }
  8% { opacity: .45; }
  100% { inset: -14px -19px; border-radius: 26px; opacity: 0; }
}