/* ==========================================================================
   Hero — "Harbour of Worlds": a layered blue-hour scene with the Lucky Portal
   as its focal point. Layers move on transforms only (pointer parallax).
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(660px, 100svh);
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 24px) 0 72px;
}

/* ---------- Scene ---------- */
.scene {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 100%, rgb(4 13 16 / 0.9), transparent 70%),
    linear-gradient(180deg, #02090c 0%, #041318 26%, #082830 52%, #11434a 66%, #1d5a5b 71%, #0a2a30 73%, #041115 100%);
}
.scene__layer {
  position: absolute; inset: -2% -3% 0;
  transform: translate3d(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * 1px), 0);
  transition: transform 900ms var(--ease-out);
}
.scene__layer svg { width: 100%; height: 100%; }
.scene__sky { --d: 6; }
.scene__far { --d: 12; }
.scene__sea { --d: 18; }
.scene__near { --d: 34; inset: -2% -5% -2%; }

.scene__stars .twinkle { animation: twinkle 5s ease-in-out infinite; }
.scene__stars .twinkle--1 { animation-delay: -1.7s; animation-duration: 6.5s; }
.scene__stars .twinkle--2 { animation-delay: -3.1s; animation-duration: 4.2s; }
@keyframes twinkle { 50% { opacity: 0.1; } }

.scene__aurora {
  position: absolute; border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.scene__aurora--a { width: 70%; height: 22%; left: 8%; top: 10%; background: linear-gradient(90deg, transparent, rgb(111 220 191 / 0.55), rgb(156 236 213 / 0.25), transparent); transform: rotate(-8deg); animation: aurora 26s var(--ease-in-out) infinite alternate; }
.scene__aurora--b { width: 55%; height: 16%; right: -6%; top: 22%; background: linear-gradient(90deg, transparent, rgb(255 138 110 / 0.35), rgb(111 220 191 / 0.3), transparent); transform: rotate(6deg); animation: aurora 32s var(--ease-in-out) -9s infinite alternate-reverse; }
@keyframes aurora { to { transform: translate3d(8%, 3%, 0) rotate(-2deg) scaleX(1.15); } }

.scene__moon {
  position: absolute; top: 14%; right: 12%;
  width: clamp(40px, 5vw, 76px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffaf0, #f4e5c8 45%, #d9c29a 80%);
  box-shadow: 0 0 40px 10px rgb(255 240 204 / 0.18), 0 0 120px 40px rgb(255 240 204 / 0.08);
  opacity: 0.9;
}
.scene__moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 30%, transparent 55%, rgb(4 13 16 / 0.55) 56%); }

.scene__beam { transform-box: view-box; transform-origin: 478px 454px; animation: beam 12s var(--ease-in-out) infinite alternate; opacity: 0.7; }
@keyframes beam { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
.scene__glints { animation: glints 14s var(--ease-in-out) infinite alternate; }
@keyframes glints { to { transform: translateX(-26px); opacity: 0.7; } }
.scene__town rect { animation: twinkle 7s ease-in-out infinite; }
.scene__town rect:nth-child(3n) { animation-delay: -2s; }
.scene__town rect:nth-child(4n) { animation: none; }

.scene__lanterns, .scene__motes { position: absolute; inset: 0; pointer-events: none; }
.lantern {
  position: absolute; bottom: -40px;
  width: 14px; height: 18px; border-radius: 5px 5px 7px 7px;
  background: linear-gradient(180deg, #ffd6a0, #ff8a6e 60%, #e9502f);
  box-shadow: 0 0 18px 6px rgb(255 138 110 / 0.35), 0 0 60px 16px rgb(255 106 77 / 0.12);
  opacity: 0;
  animation: lantern 26s linear infinite;
  will-change: transform, opacity;
}
.lantern::before { content: ""; position: absolute; left: 3px; right: 3px; top: -3px; height: 3px; border-radius: 2px; background: #6b2b1c; }
.lantern--0 { left: 9%; animation-delay: -3s; transform: scale(0.8); }
.lantern--1 { left: 21%; animation-delay: -14s; animation-duration: 31s; }
.lantern--2 { left: 38%; animation-delay: -8s; animation-duration: 29s; }
.lantern--3 { left: 57%; animation-delay: -20s; animation-duration: 24s; }
.lantern--4 { left: 74%; animation-delay: -5s; animation-duration: 33s; }
.lantern--5 { left: 88%; animation-delay: -17s; }
.lantern--6 { left: 48%; animation-delay: -25s; animation-duration: 36s; }
@keyframes lantern {
  0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  8% { opacity: 0.95; }
  50% { transform: translate3d(28px, -52vh, 0) scale(0.55) rotate(4deg); }
  85% { opacity: 0.6; }
  100% { transform: translate3d(-10px, -105vh, 0) scale(0.35) rotate(-3deg); opacity: 0; }
}
.mote { position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%; background: var(--sea-200); opacity: 0; animation: mote 12s linear infinite; }
.mote:nth-child(odd) { background: var(--butter-300); }
.mote--0 { left: 12%; animation-delay: -1s; } .mote--1 { left: 24%; animation-delay: -6s; } .mote--2 { left: 33%; animation-delay: -3s; }
.mote--3 { left: 47%; animation-delay: -9s; } .mote--4 { left: 55%; animation-delay: -2s; } .mote--5 { left: 63%; animation-delay: -7s; }
.mote--6 { left: 71%; animation-delay: -4s; } .mote--7 { left: 79%; animation-delay: -10s; } .mote--8 { left: 86%; animation-delay: -5s; }
.mote--9 { left: 92%; animation-delay: -8s; } .mote--10 { left: 6%; animation-delay: -11s; } .mote--11 { left: 41%; animation-delay: -0.5s; }
@keyframes mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translate3d(20px, -60vh, 0); opacity: 0; } }

.scene__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 18% 55%, rgb(3 11 14 / 0.72), transparent 70%),
    linear-gradient(180deg, rgb(4 13 16 / 0.55), transparent 22%, transparent 78%, var(--bg) 100%);
}

/* ---------- Layout ---------- */
.hero__inner {
  width: min(100% - 2 * var(--gutter), 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.hero__copy { max-width: 620px; }
.hero h1 {
  margin: 22px 0 22px;
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero h1 span {
  display: block;
  margin-top: 0.08em;
  font-style: normal;
  font-weight: 450;
  font-size: 0.62em;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--coral-300);
  background: linear-gradient(90deg, var(--coral-300), var(--butter-300) 55%, var(--sea-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lede { font-size: var(--fs-lg); color: var(--text-soft); max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-muted); }
.hero__facts strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 1.1; font-variation-settings: "opsz" 72; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid var(--line-strong); border-radius: 14px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--sea-300); animation: scroll-cue 2.2s var(--ease-in-out) infinite; }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ==========================================================================
   Lucky Portal
   ========================================================================== */
.portal { --portal: clamp(300px, 36vw, 540px); display: grid; justify-items: center; gap: 18px; position: relative; }
.portal__stage { position: relative; width: var(--portal); aspect-ratio: 1; }
.portal__stage::after {
  /* reflection on the sea below */
  content: ""; position: absolute; left: 22%; right: 22%; top: 96%; height: 46%;
  background: radial-gradient(50% 50% at 50% 0%, rgb(255 138 110 / 0.35), rgb(111 220 191 / 0.08) 55%, transparent 75%);
  filter: blur(10px);
  transform: scaleY(1.2);
  opacity: 0.8;
  pointer-events: none;
}
.portal__halo {
  position: absolute; inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(255 106 77 / 0.42), rgb(255 106 77 / 0.12) 55%, transparent 72%),
    radial-gradient(closest-side, rgb(111 220 191 / 0.18), transparent 80%);
  animation: breathe 7s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes breathe { 50% { transform: scale(1.06); opacity: 0.82; } }
.portal.is-spinning .portal__halo { animation-duration: 1.2s; }

.portal__rings { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.portal__rings svg { width: 100%; height: 100%; animation: spin 120s linear infinite; }
.portal__ticks { fill: rgb(156 236 213 / 0.55); }
.portal__band { transform-box: fill-box; transform-origin: center; animation: spin 50s linear infinite reverse; filter: drop-shadow(0 0 6px rgb(255 106 77 / 0.5)); }
.portal__jewels circle { filter: drop-shadow(0 0 5px currentColor); }

/* Orbiting worlds — two clipped planes so orbs pass behind and in front of the core. */
.portal__orbit { position: absolute; inset: 0; pointer-events: none; transform: rotate(-14deg) scaleY(0.34); }
.portal__orbit--back { clip-path: inset(-120% -120% 50% -120%); z-index: 0; opacity: 0.75; }
.portal__orbit--front { clip-path: inset(50% -120% -120% -120%); z-index: 3; }
.portal__orbit-spin { position: absolute; inset: 0; animation: spin 64s linear infinite; }
.orb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.orb__body { position: absolute; transform: translateX(calc(var(--portal) * 0.6)); }
.orb__scale {
  position: absolute;
  width: calc(var(--portal) * 0.17); aspect-ratio: 1;
  margin: calc(var(--portal) * -0.085) 0 0 calc(var(--portal) * -0.085);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgb(255 224 166 / 0.55), 0 8px 18px rgb(0 0 0 / 0.5);
  animation: orb-counter 64s linear infinite;
}
.orb__scale img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.portal__orbit--back .orb__scale::after { content: ""; position: absolute; inset: 0; background: rgb(4 13 16 / 0.45); }
@keyframes orb-counter {
  from { transform: rotate(calc(-1 * var(--a))) scaleY(2.941) rotate(14deg); }
  to { transform: rotate(calc(-1 * var(--a) - 360deg)) scaleY(2.941) rotate(14deg); }
}

/* The core — an arched doorway set in the ring. */
.portal__core {
  position: absolute; inset: 21%;
  z-index: 2;
  padding: 0; border: 0;
  border-radius: 50% 50% 16% 16% / 44% 44% 12% 12%;
  overflow: hidden;
  background: var(--ink-950);
  box-shadow:
    0 0 0 2px rgb(255 224 166 / 0.7),
    0 0 0 9px rgb(4 13 16 / 0.7),
    0 0 0 10px rgb(156 236 213 / 0.25),
    0 30px 70px -10px var(--glow);
  transition: transform var(--t-slow) var(--ease-spring), box-shadow var(--t-med);
  -webkit-tap-highlight-color: transparent;
}
.portal__core:hover { transform: scale(1.025); }
.portal__core:focus-visible { outline: 3px solid var(--focus); outline-offset: 14px; }
.portal__art, .portal__art img, .portal__flash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portal__flash { z-index: 1; }
.portal__glass {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(155deg, rgb(255 255 255 / 0.22), transparent 32%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(4 13 16 / 0.55));
  pointer-events: none;
}
.portal__burst {
  position: absolute; inset: -20%; z-index: 3;
  background: radial-gradient(closest-side, rgb(255 240 204 / 0.95), rgb(255 138 110 / 0.5) 45%, transparent 70%);
  opacity: 0; transform: scale(0.4);
  pointer-events: none;
}
.portal.is-landed .portal__burst { animation: burst 900ms var(--ease-out); }
.portal.is-landed .portal__core { animation: land 800ms var(--ease-spring); }
@keyframes burst { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes land { 0% { transform: scale(0.92); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.portal.is-spinning .portal__core { transform: scale(0.96); cursor: progress; }
.portal.is-spinning .portal__flash { filter: saturate(1.2) contrast(1.05); }

.portal__cue {
  position: absolute; z-index: 4; left: 50%; top: 79%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--ink-900);
  border: 1px solid rgb(255 224 166 / 0.45);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.45);
  color: var(--butter-200);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
}
.portal__cue .icon { width: 14px; height: 14px; }
.portal__stage:hover .portal__cue { transform: translate(-50%, -50%) scale(1.05); }
.portal.is-spinning .portal__cue { opacity: 0; }

.mood-picker { position: relative; z-index: 4; display: inline-flex; gap: 2px; margin: 8px 0 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgb(4 13 16 / 0.7); backdrop-filter: blur(10px); }
.mood-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mood-picker label { position: relative; }
.mood-picker input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mood-picker span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); transition: all var(--t-fast); }
.mood-picker input:checked + span { background: var(--text); color: var(--ink-900); font-weight: 600; }
.mood-picker input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.portal__hint { position: relative; z-index: 4; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- Reveal dialog ---------- */
.reveal {
  width: min(880px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid rgb(255 224 166 / 0.3);
  border-radius: var(--r-xl);
  background: radial-gradient(100% 80% at 30% 20%, rgb(255 106 77 / 0.18), transparent 60%), var(--ink-850);
  box-shadow: 0 40px 120px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(0 0 0 / 0.5);
  overflow: hidden auto;
}
.reveal[open] { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
.reveal::backdrop { background: radial-gradient(circle at 50% 45%, rgb(255 106 77 / 0.18), rgb(2 8 10 / 0.88) 60%); backdrop-filter: blur(8px); }
.reveal__rays {
  position: absolute; left: 25%; top: 45%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(from 0deg, rgb(255 224 166 / 0.08) 0 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000 10%, transparent 60%);
  animation: spin 40s linear infinite;
  pointer-events: none;
}
.reveal__close { position: absolute; top: 14px; right: 14px; z-index: 3; }
.reveal__art { position: relative; padding: 32px; display: grid; place-items: center; }
.reveal__art img {
  width: 100%; max-width: 380px; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgb(255 224 166 / 0.4), 0 30px 60px -12px rgb(0 0 0 / 0.7), 0 0 80px -10px var(--glow);
}
.reveal[open] .reveal__art img { animation: reveal-art 900ms var(--ease-out) both; }
.reveal__body { position: relative; padding: 48px 40px 36px 8px; display: grid; align-content: center; gap: 14px; }
.reveal__body h2 { font-size: var(--fs-3xl); }
.reveal__desc { color: var(--text-soft); }
.reveal[open] .reveal__body > * { animation: rise 700ms var(--ease-out) both; }
.reveal[open] .reveal__body > :nth-child(2) { animation-delay: 80ms; }
.reveal[open] .reveal__body > :nth-child(3) { animation-delay: 160ms; }
.reveal[open] .reveal__body > :nth-child(4) { animation-delay: 220ms; }
.reveal[open] .reveal__body > :nth-child(5) { animation-delay: 280ms; }
.reveal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
@keyframes reveal-art { from { opacity: 0; transform: scale(0.7) rotate(-4deg); filter: blur(12px) brightness(1.8); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 4.2rem); }
}
@media (max-width: 860px) {
  .hero { min-height: auto; padding: calc(var(--header-h) + 8px) 0 48px; align-items: start; }
  .hero__inner { grid-template-columns: 1fr; gap: 8px; }
  .hero__inner { gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy .eyebrow--pill { order: 1; justify-self: center; }
  .hero h1 { order: 2; }
  .portal { order: 3; --portal: min(76vw, 340px); margin: 4px 0 8px; }
  .hero__lede { order: 4; }
  .hero__actions { order: 5; }
  .hero__facts { order: 6; }
  .hero h1, .hero__lede, .hero__facts { text-align: center; }
  .scene__moon { display: none; }
    .hero h1 { margin: 16px 0 14px; }
  .hero__lede { margin-inline: auto; font-size: var(--fs-md); }
  .hero__actions { justify-content: center; margin-top: 24px; }
  .hero__facts { justify-content: center; margin-top: 24px; }
  .hero__scroll { display: none; }
  .scene__scrim { background: radial-gradient(80% 50% at 50% 78%, rgb(3 11 14 / 0.8), transparent 75%), linear-gradient(180deg, rgb(4 13 16 / 0.5), transparent 20%, transparent 70%, var(--bg) 100%); }
  .reveal[open] { grid-template-columns: 1fr; }
  .reveal__art { padding: 28px 28px 0; }
  .reveal__art img { max-width: min(62vw, 300px); }
  .reveal__body { padding: 20px 24px 28px; text-align: center; justify-items: center; }
  .reveal__body h2 { font-size: var(--fs-2xl); }
  .reveal__actions { justify-content: center; }
  .reveal .chips { justify-content: center; }
}
@media (max-width: 430px) {
  .hero__actions .button { width: 100%; }
  .hero__actions .button--lg { min-height: 52px; font-size: var(--fs-md); }
  .hero__facts { gap: 8px 20px; }
  .hero__facts strong { font-size: 1.3rem; }
  .mood-picker span { padding: 0 11px; font-size: 13px; }
  .reveal__actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lantern, .mote { display: none; }
  .orb__scale { animation: none; transform: rotate(calc(-1 * var(--a))) scaleY(2.941) rotate(14deg); }
}

/* Pause ambient scene motion while the hero is off-screen. */
.hero.is-offscreen *, .hero.is-offscreen *::before, .hero.is-offscreen *::after { animation-play-state: paused !important; }