/* Shifty site: the hero stage and its rota, scroll reveals, the scroll-progress bar and the cursor aura.
   Progressive enhancement: html.js is set when scripts run, html.motion when there is no reduced-motion
   preference. Without either, the page is complete and still. */

/* ── Hero stage ───────────────────────────────────────── */
.hero { position: relative; z-index: 1; }
.hero-stage {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(660px, calc(100svh - var(--nav-h))); padding-bottom: clamp(56px, 9vh, 104px); overflow: hidden;
}
.hero-sky {
  position: absolute; left: 0; right: 0; top: 0; height: 52%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%);
}
.hero-sky::after { /* cyan light rising behind the planner */
  content: ""; position: absolute; inset: 20% 10% -10%; z-index: -1;
  background: radial-gradient(50% 60% at 50% 70%, rgba(var(--accent-rgb), .16), transparent 70%);
}
html:not(.js) .hero-sky { background: url("img/rota-still.webp?v=20261015") center bottom / cover no-repeat; } /* no JS: a still of the rota */
.rota-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy::before { /* keeps the type readable over the planner */
  content: ""; position: absolute; inset: -18% -12% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(18, 18, 30, .92), rgba(18, 18, 30, .55) 60%, transparent);
}
.hero-key {
  position: absolute; right: var(--gutter); bottom: 26px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px;
  max-width: 300px; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted);
}
.hero-key .k-label { flex-basis: 100%; text-align: right; text-transform: uppercase; letter-spacing: .12em; }
.hero-key span[class^="k-"]:not(.k-label)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.k-days::before { background: var(--days); }
.k-nights::before { background: var(--nights); }
.k-off::before { background: var(--off); }

/* ── Scroll reveals (IntersectionObserver adds .in) ───────────────────────── */
html.motion .reveal { opacity: 0; translate: 0 34px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
html.motion .reveal.in { opacity: 1; translate: none; }
html.motion .reveal.d1 { transition-delay: .08s; }
html.motion .reveal.d2 { transition-delay: .16s; }

/* hero entrance */
html.motion .hero-copy > * { animation: rise 1s var(--ease) both; }
html.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.motion .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.motion .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.motion .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: none; } }
html.motion .dot { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .05), 0 0 18px rgba(var(--accent-rgb), .6); } }

/* ── Scroll progress under the nav ────────────────────── */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--accent), var(--nights)); box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
}
html:not(.js) .progress { display: none; }

/* ── Cursor aura (desktop mouse only, set by site.js) ─────────────────────── */
.aura {
  position: fixed; left: 0; top: 0; z-index: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .07), transparent); opacity: 0; transition: opacity .6s;
}
html.pointer .aura { opacity: 1; }

/* ── Small screens ────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-stage { min-height: max(600px, calc(100svh - var(--nav-h))); }
  .hero-sky { height: 40%; }
  .hero-key { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aura, .progress { display: none; }
  .reveal { opacity: 1 !important; translate: none !important; }
}