/* Hero film (index.html, ja.html): the approved seven-beat storyboard, rendered by film.js and
   driven by film-seq.js. ARA family palette from ara-family.css. */

/* ---------- Base = no-JS fallback: headline, CTA and the photo, in normal flow ---------- */
.imm { background: #05061e; color: var(--on-dark); }
.imm__stage { position: relative; }
.imm__canvas, .imm__arcs, .imm__labels, .imm__card, .imm__shade, .imm__grain,
.imm__stat, .imm__lede, .imm__note, .imm__bali, .imm__credit { display: none; }
.imm__intro { padding-block: clamp(2.5rem, 7vw, 5rem) 2rem; }
.imm__intro h1 { color: #fff; font-size: clamp(2.3rem, 4.7vw, 4.25rem); max-width: 10.5em; }
html[lang="ja"] .imm__intro h1 { font-size: clamp(1.9rem, 3.5vw, 3.15rem); max-width: 13em; }
.imm__intro h1 em { font-style: italic; color: var(--cyan-soft); }
html[lang="ja"] .imm__intro h1 em { font-style: normal; }
.imm .eyebrow { color: var(--cyan-soft); }
.imm__acts { margin-top: 1.8rem; }
.imm__photo { margin: 0; position: relative; overflow: hidden; }
.imm__photo img { display: block; width: 100%; height: auto; }
.imm__photo figcaption {
  padding: 0.8rem var(--gutter) 1rem; background: #0b0c33;
  font-size: 0.8rem; line-height: 1.55; color: var(--on-dark);
}
.imm__photo figcaption b { display: block; font-family: var(--label); font-weight: 600; color: #fff; }
.imm img[data-src]:not([src]) { visibility: hidden; }
html:not(.imm-live):not(.imm-still) .imm img[data-src]:not([src]) { display: none; }

/* Editorial type shared by the beats. */
.imm__big { font-family: var(--display); color: #fff; line-height: 1.08; letter-spacing: -0.012em; }
html[lang="ja"] .imm__big { font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; }
.imm__src { margin-top: 0.9rem; font: 600 0.72rem/1.3 var(--label); letter-spacing: 0.06em; color: #fff; }

/* ---------- Live film: native scroll, sticky stage, scrubbed by progress ---------- */
.imm-live .imm { height: 520vh; height: 520svh; }
.imm-live .imm__stage {
  position: sticky; top: var(--hh, 60px); overflow: hidden;
  height: calc(100vh - var(--hh, 60px)); height: calc(100svh - var(--hh, 60px));
  background: #05061e;
}
.imm-live .imm__map { position: absolute; inset: 0; }
.imm-live :is(.imm__canvas, .imm__arcs, .imm__labels, .imm__shade, .imm__grain) {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.imm__shade { background: #05061e; opacity: 0; }
/* Static grain: dithers the dark gradients so they never band. */
.imm__grain {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Light arcs (beat 4): a soft wide stroke under a thin warm-to-cyan line. */
.imm__arcs path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.imm__arcs .glow { stroke: rgba(255, 214, 160, 0.22); stroke-width: 7; }
.imm__arcs .line { stroke: #ffe3bd; stroke-width: 1.8; }
.imm__arcs .leads line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.imm__dot, .imm__name { position: absolute; left: 0; top: 0; will-change: transform, opacity; opacity: 0; }
.imm__dot {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 214, 160, 0.28), 0 0 18px 5px rgba(255, 214, 160, 0.55);
}
.imm__name {
  white-space: nowrap; font: 400 1.5rem/1.1 var(--display); letter-spacing: -0.01em; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 18px rgba(5, 6, 30, 0.95);
}
/* A soft local shadow under each name, so it holds AA over bright land or cloud. */
.imm__name::before { content: ""; position: absolute; z-index: -1; inset: -35% -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 6, 30, 0.6), rgba(5, 6, 30, 0)); }
html[lang="ja"] .imm__name { font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; }

/* The Jakarta print (beat 4). */
.imm-live .imm__card {
  display: block; position: absolute; left: 0; top: 0; margin: 0; width: clamp(170px, 17.5vw, 250px);
  transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: none; opacity: 0;
}
.imm__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; display: block;
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.85); }
.imm__card figcaption { margin-top: 0.7rem; white-space: nowrap; font: 600 0.66rem/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: #ffd6a0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
html[lang="ja"] .imm__card figcaption { letter-spacing: 0.08em; font-size: 0.74rem; white-space: nowrap; }

/* Type beats. Each block carries its own soft scrim, which fades with it. */
.imm-live :is(.imm__intro, .imm__stat, .imm__lede, .imm__note, .imm__bali) {
  display: block; position: absolute; z-index: 3; will-change: transform, opacity;
}
.imm-live :is(.imm__intro, .imm__stat, .imm__lede, .imm__note, .imm__bali)::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 6, 30, 0.74), rgba(5, 6, 30, 0.5) 60%, rgba(5, 6, 30, 0));
}
.imm-live :is(.imm__stat, .imm__lede)::before { inset: -45% -25% -60% -20%; }
.imm-live .imm__intro { left: 0; right: 0; top: 0; padding-block: clamp(2.5rem, 16vh, 11rem) 0; transform-origin: 20% 40%; }
.imm-live .imm__intro::before { inset: 0 40% -10% -10%; }
.imm-live .imm__intro .wrap { max-width: var(--container); }
.imm-live .imm__intro h1 { max-width: 9.6em; }
html[lang="ja"].imm-live .imm__intro h1 { max-width: 12.5em; }
.imm-live :is(.imm__stat, .imm__lede) { left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: clamp(5rem, 12vh, 7.5rem); opacity: 0; visibility: hidden; }
.imm-live .imm__stat { max-width: 36rem; }
.imm-live .imm__stat .imm__big { font-size: clamp(2rem, 3.5vw, 3.1rem); }
.imm-live .imm__lede { max-width: 40rem; }
.imm-live .imm__lede .eyebrow { color: #e1f2f6; }
.imm-live .imm__lede .imm__big { font-size: clamp(1.55rem, 2.65vw, 2.4rem); line-height: 1.14; }
html[lang="ja"].imm-live .imm__lede .imm__big { font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.55; }
.imm-live .imm__note { left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); top: clamp(2rem, 6vh, 4.5rem); max-width: 35rem; opacity: 0; visibility: hidden; }
.imm-live .imm__note .imm__big { font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.15; }
html[lang="ja"].imm-live .imm__note .imm__big { font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.55; }
.imm-live .imm__bali { left: 0; top: 0; max-width: 34rem; opacity: 0; visibility: hidden; }
.imm-live .imm__bali .eyebrow { color: #ffd6a0; }
.imm-live .imm__bali .imm__big { font-size: clamp(2rem, 3.6vw, 3.25rem); }
html[lang="ja"].imm-live .imm__bali .imm__big { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }

/* NASA asks for credit: plain text while the globe is on screen. */
.imm-live .imm__credit, .imm-still .imm__credit {
  display: block; position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 0.8rem; margin: 0; text-align: right;
  font: 500 0.66rem/1.3 var(--label); color: #c9d0ea; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Beat 6 and 7: the Bali print grows, straightens and becomes the full-bleed header. */
.imm-live .imm__photo {
  position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; border-radius: var(--r, 0px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); will-change: transform, opacity; transform-origin: 50% 50%;
}
.imm-live .imm__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 34%; }
.imm-live .imm__photo figcaption {
  position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); right: var(--gutter);
  bottom: calc(var(--handover, 16vh) + 1.1rem); max-width: 40rem; padding: 0; background: none; opacity: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); font-size: 0.86rem; color: #eef2fb;
}
.imm-live .imm__photo::after {
  content: ""; position: absolute; inset: 40% 0 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 6, 30, 0.85), rgba(5, 6, 30, 0));
}

@media (max-width: 700px) {
  .imm-live .imm { height: 345vh; height: 345svh; }
  .imm__intro h1 { font-size: 2.3rem; }
  html[lang="ja"] .imm__intro h1 { font-size: 1.85rem; }
  .imm-live .imm__intro { padding-top: 1.8rem; }
  .imm-live .imm__intro::before { inset: -10% -10% -20% -10%; }
  .imm__acts .btn { width: 100%; }
  .imm__name { font-size: 1.1rem; }
  html[lang="ja"] .imm__name { font-size: 0.95rem; }
  .imm-live :is(.imm__stat, .imm__lede) { right: var(--gutter); bottom: 4.5rem; }
  .imm-live :is(.imm__stat, .imm__lede)::before { inset: -40% -15% -70% -15%; background: radial-gradient(closest-side, rgba(5, 6, 30, 0.8), rgba(5, 6, 30, 0.6) 60%, rgba(5, 6, 30, 0)); }
  .imm-live .imm__stat .imm__big { font-size: 2rem; }
  .imm-live .imm__lede .imm__big { font-size: 1.5rem; }
  html[lang="ja"].imm-live .imm__lede .imm__big { font-size: 1.2rem; }
  .imm-live .imm__note { right: var(--gutter); top: 1.4rem; }
  .imm-live .imm__note .imm__big { font-size: 1.3rem; }
  html[lang="ja"].imm-live .imm__note .imm__big { font-size: 1.1rem; }
  .imm-live .imm__bali { right: var(--gutter); }
  .imm-live .imm__bali .imm__big { font-size: 2rem; }
  html[lang="ja"].imm-live .imm__bali .imm__big { font-size: 1.55rem; }
  .imm-live .imm__photo figcaption { font-size: 0.8rem; }
}

/* ---------- Reduced motion: one composed still (the seven places), then the photo in flow ---------- */
.imm-still .imm__stage { height: auto; display: flex; flex-direction: column; }
.imm-still .imm__intro { order: -1; }
.imm-still .imm__map { position: relative; height: 64vh; min-height: 380px; overflow: hidden; background: #05061e; }
.imm-still :is(.imm__canvas, .imm__arcs, .imm__labels) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.imm-still .imm__dot, .imm-still .imm__name { opacity: 1; }
.imm-still .imm__card { display: block; position: absolute; left: 0; top: 0; width: clamp(150px, 17vw, 230px); margin: 0; }
.imm-still .imm__note { display: block; order: 0; padding: 1.2rem var(--gutter) 0; }
.imm-still .imm__note .imm__big { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.imm-still .imm__credit { position: absolute; }

/* ---------- Japanese: never split a word ---------- */
html[lang="ja"] :is(.imm__big, .imm__photo figcaption, .imm__src) { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] :is(.imm__name, .imm__src) { white-space: nowrap; }