/* Hero stage (preview 2026-09-29): one large stage that cycles the four views, with
   thumbnail tabs underneath. Markup in hero-preview.html, behaviour in js/hero-stage.js. */
.hv { margin: 4px 0 0; }
.hv-stage { position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #07090f; isolation: isolate; }
.hv-stage:hover { border-color: rgba(255,179,71,.55); }
.hv-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.hv-layer.on { opacity: 1; pointer-events: auto; }
.hv-layer a { position: absolute; inset: 0; z-index: 2; }

/* the live map: the embed's own 22 px caption bar is cropped off below the stage edge */
.hv-live iframe { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 22px); border: 0; background: #07090f; pointer-events: none; }

/* captured views: framed per view (crop out panels and stray text), then a slow push-in while showing */
.hv-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--s, 1)); will-change: transform; }
.hv-shot.on img { animation: hv-push var(--dwell, 7s) linear forwards; }
@keyframes hv-push { from { transform: scale(var(--s, 1)); } to { transform: scale(calc(var(--s, 1) * 1.07)); } }
.hv-shot[data-view="3d"]   img { --s: 1.12; --ox: 50%; --oy: 44%; }
.hv-shot[data-view="atmo"] img { --s: 1.36; --ox: 10%; --oy: 40%; }   /* visible x ≈ 3..76%: the density panel (from 79%) stays off, Earth (37%) sits centred */
.hv-shot[data-view="mag"]  img { --s: 1.28; --ox: 56%; --oy: 52%; }   /* the caption fragment at the top edge falls off */

/* soft vignette so the caption reads over any view */
.hv-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(5,7,12,.88) 0%, rgba(5,7,12,.35) 22%, rgba(5,7,12,0) 42%), radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); }
.hv-cap { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; pointer-events: none; }
.hv-cap-text { max-width: 620px; }
.hv-tag { display: inline-block; font-size: 11.5px; font-weight: 700;   padding: 3px 8px; border-radius: 5px; margin-bottom: 8px; background: rgba(255,255,255,.08); color: #b9c4d8; }
.hv-tag.live { background: var(--green); color: #07130d; }
.hv-title { display: block; font-size: 20px; font-weight: 700; color: #eef2fa; letter-spacing: -.3px; }
.hv-line { display: block; font-size: 13.5px; line-height: 1.5; color: #c3cde0; margin-top: 4px; }
.hv-open { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.hv-cap-text, .hv-open { transition: opacity .35s ease; }
.hv-cap.swap .hv-cap-text, .hv-cap.swap .hv-open { opacity: 0; }

/* tabs: thumbnail + name, a progress line on the active one */
.hv-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.hv-tab { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #0c111c; color: #b9c4d8; font: inherit; font-size: 13px; text-align: left; cursor: pointer; overflow: hidden; }
.hv-tab:hover { border-color: rgba(255,179,71,.45); color: var(--text); }
.hv-tab img { width: 56px; height: 36px; object-fit: cover; border-radius: 6px; flex-shrink: 0; opacity: .7; transition: opacity .3s ease; }
.hv-tab img[data-shot="atmo"] { object-position: 30% 45%; }
.hv-tab img[data-shot="mag"] { object-position: 56% 45%; }
.hv-tab b { overflow-wrap: anywhere; hyphens: manual; }
.hv-tab b { display: block; font-size: 13.5px; color: var(--text); }
.hv-tab small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.hv-tab[aria-selected="true"] { border-color: rgba(255,179,71,.6); background: #111827; }
.hv-tab[aria-selected="true"] img { opacity: 1; }
.hv-tab .hv-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.hv.playing .hv-tab[aria-selected="true"] .hv-prog { animation: hv-prog var(--dwell, 7s) linear forwards; }
@keyframes hv-prog { from { width: 0; } to { width: 100%; } }
.hv-note { margin: 8px 0 0; font-size: 12px; color: #8f9eb5; }

@media (max-width: 640px) {
  .hv-stage { aspect-ratio: 4 / 3.3; border-radius: 12px; }
  /* phones: tag + title only, so the caption never covers the Sun or Earth */
  .hv-cap { left: 12px; right: 12px; bottom: 10px; }
  .hv-tag { margin-bottom: 4px; }
  .hv-title { font-size: 16px; }
  .hv-line, .hv-open { display: none; }
  .hv-stage::after { background: linear-gradient(to top, rgba(5,7,12,.8) 0%, rgba(5,7,12,0) 26%); }
  .hv-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .hv-tab { flex-direction: column; gap: 5px; padding: 6px 4px 8px; text-align: center; }
  .hv-tab img { width: 100%; height: 38px; }
  .hv-tab b { font-size: 12px; }
  .hv-tab small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-layer { transition: none; }
  .hv-shot.on img { animation: none; }
  .hv.playing .hv-tab[aria-selected="true"] .hv-prog { animation: none; }
}