/* immersive.css — night-sky layer, snap paging, full-bleed hero, tilt cards.
   Loads after components.css on every public page (EN and zh/). */

/* --- Snap paging: proximity so prose scrolls free, pages land clean --- */
html { scroll-snap-type: y proximity; }
main > section { scroll-snap-align: start; scroll-margin-top: 88px; }
.hero-banner { scroll-snap-align: start; scroll-margin-top: 12px; }
/* mid-page art snaps to viewport center so paging lands it whole */
main figure, .brand-emblem-band, .split > img { scroll-snap-align: center; }
/* big artworks are full-screen moments: the element owns ~one viewport,
   the art letterboxes inside it (object-fit), so paging shows it whole */
.split { min-height: 100dvh; align-items: center; }
.split > img, .poster-figure img {
  height: 92dvh; width: 100%; object-fit: contain;
}
.poster-figure { min-height: 100dvh; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Full-bleed plumbing: bands may escape the column, page never scrolls sideways --- */
html, body { overflow-x: clip; }
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
body {
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* --- Starfield + moon-glow live between the page ground and the content.
   body goes transparent; html carries the ground color so the fixed canvas
   (z-index:-1) shows through without covering any content. --- */
html { background: var(--color-bg, #0e1224); }
body { background: transparent; }
.starfield {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; display: none;
}
html[data-theme="dark"] .starfield { display: block; }

.moon-glow {
  position: fixed; left: 0; top: 0; z-index: 1;
  width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 210, 160, 0.10) 0%,
    rgba(120, 140, 210, 0.05) 38.2%,
    transparent 61.8%);
  mix-blend-mode: screen;
  pointer-events: none; display: none;
}
html[data-theme="dark"] .moon-glow { display: block; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .moon-glow { display: none !important; }
}

/* --- Hero band: the wide banner art, edge to edge, one clean viewport ---
   Golden split: the text block sits on the lower 38.2% of the band. */
.hero-banner {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
  min-height: 88dvh;
  display: flex; align-items: flex-end;
  /* pages set background-image inline (url() in a custom property resolves
     against this stylesheet, which breaks from zh/) */
  background-size: cover;
  background-position: center 38.2%;
}
.hero-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 30, 0.10) 38.2%, rgba(10, 12, 30, 0.82) 100%);
}
.hero-banner .hero-inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(2rem, 8dvh, 5rem);
  padding-bottom: calc(clamp(2rem, 8dvh, 5rem) + env(safe-area-inset-bottom));
}
/* phi type steps for the hero only: 16 → 26 → 42 → 68, grid-snapped */
.hero-banner h1 {
  font-size: clamp(2.625rem, 6vw, 4.25rem);
  line-height: 1.1;
  color: #f2ead7;
  text-wrap: balance;
  margin: 0 0 0.75rem;
}
.hero-banner .hero-tagline {
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  color: rgba(242, 234, 215, 0.86);
  max-width: 34em;
  margin: 0 0 1.75rem;
}
@media (max-width: 700px) {
  .hero-banner { min-height: 92dvh; background-position: 61.8% 38.2%; }
}

/* --- Tilt cards: JS drives --rx/--ry/--mx/--my; CSS renders the gold rim --- */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    will-change: transform;
    position: relative;
  }
  .tilt::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%),
      rgba(212, 175, 55, 0.22), transparent 61.8%);
    opacity: 0; transition: opacity 0.4s ease-out;
    pointer-events: none; mix-blend-mode: screen;
  }
  .tilt:hover::after { opacity: 1; transition-duration: 0.15s; }
}

/* --- Brand emblem + poster figures --- */
.brand-emblem-band {
  display: flex; justify-content: center;
  padding: clamp(2rem, 8dvh, 5rem) 0;
}
.brand-emblem-band img {
  width: clamp(8rem, 21vw, 13rem); height: auto;
  filter: drop-shadow(0 0 2.5rem rgba(212, 175, 55, 0.18));
}
.poster-figure { margin: 0; }
.poster-figure img {
  filter: drop-shadow(0 1.25rem 3.25rem rgba(5, 6, 18, 0.45));
}
img { max-width: 100%; height: auto; }