/* ============================================================
   Moonpath — single-screen splash
   Navy night sky, Moony front and center, store badges below.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 600;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #0f1c4a;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

/* ── Splash container ── */
.splash {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  text-align: center;
  background:
    linear-gradient(180deg, #0f1c4a 0%, #1c2a5e 30%, #1a2855 70%, #0f1c4a 100%);
}
.splash__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(max(env(safe-area-inset-top, 0px), 16px) + 48px) 24px 0;
}
.splash__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px 24px;
}

/* ── Starfield ── */
.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 9px rgba(255, 255, 255, 0.5);
  animation: twinkle 4s ease-in-out var(--d, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  background: radial-gradient(ellipse, rgba(220, 225, 255, 0.10) 0%, rgba(220, 225, 255, 0) 70%);
  animation: drift 110s ease-in-out infinite alternate;
}
.cloud--1 { top: 14%; left: -5%; width: 380px; height: 160px; animation-duration: 100s; }
.cloud--2 { top: 32%; left: 55%; width: 320px; height: 140px; animation-duration: 130s; animation-delay: -25s; }
.cloud--3 { top: 60%; left: 20%; width: 420px; height: 170px; animation-duration: 150s; animation-delay: -55s; }
@keyframes drift {
  0%   { transform: translateX(-12%); }
  100% { transform: translateX(12%); }
}

/* Shooting star — rotated wrapper that translates along its own
   local x-axis so the tapered tail always trails the head. The
   `rotate(angle) translateX(...)` order matters: rotate first,
   then translate in the rotated frame. */
.shoot {
  position: absolute;
  left: -25%;
  width: 220px;
  height: 2px;
  border-radius: 999px;
  transform-origin: 0% 50%;
  transform: rotate(var(--angle, 14deg)) translateX(0);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 247, 220, 0) 55%,
    rgba(255, 247, 220, 0.45) 78%,
    rgba(255, 255, 255, 0.95) 96%,
    #ffffff 100%
  );
  opacity: 0;
  animation: shoot var(--dur, 22s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes shoot {
  0%   { transform: rotate(var(--angle, 14deg)) translateX(0);     opacity: 0; }
  1%   { opacity: 0; }
  3%   { opacity: 1; }
  9%   { opacity: 1; }
  12%  { transform: rotate(var(--angle, 14deg)) translateX(150vw); opacity: 0; }
  100% { transform: rotate(var(--angle, 14deg)) translateX(150vw); opacity: 0; }
}

/* All foreground content sits above the sky */
.wordmark, .hero, .tagline, .badges { position: relative; z-index: 1; }

/* ── Wordmark ── */
.wordmark {
  width: 220px;
  max-width: 50vw;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(255, 246, 205, 0.18));
}

/* ── Moony hero ── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.bubble {
  position: relative;
  background: #ffffff;
  color: #1f2937;
  padding: 12px 18px;
  border-radius: 18px;
  border: 2px solid #EFE9E0;
  border-bottom-width: 4px;
  font-size: 14px;
  font-weight: 700;
  max-width: 280px;
  line-height: 1.4;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
  /* Hidden until JS adds .is-popped — keeps the visual pop in
     sync with the bubble.mp3 sfx that's gated on user gesture. */
  opacity: 0;
}
.bubble.is-popped {
  animation:
    reveal-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    bob 4s ease-in-out 540ms infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.bubble__tail {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-right: 2px solid #EFE9E0;
  border-bottom: 2px solid #EFE9E0;
}

.moon {
  position: relative;
  width: 200px;
  height: 200px;
}
.moon__halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 246, 205, 0.40) 0%, rgba(255, 246, 205, 0) 60%);
  filter: blur(8px);
  animation: halo 6s ease-in-out infinite;
}
.moon__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes halo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── Tagline ── */
.tagline {
  margin: 0;
  max-width: 28ch;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}
@media (min-width: 600px) { .tagline { font-size: 26px; } }

/* ── Store badges ── */
.badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  height: 60px;
  border-radius: 16px;
  background: #000000;
  /* Matches the sparks / streak chip border on the Home feed
     while it's over the navy night sky (the unscrolled state):
     a slightly-lighter navy that reads as quiet trim on the
     dark backdrop. 4 px shelf on the bottom for the raised look. */
  border: 2px solid #3a4a85;
  border-bottom-width: 4px;
  text-decoration: none;
  cursor: not-allowed;
  opacity: 0.92;
  transition:
    transform 90ms cubic-bezier(0.2, 0, 0, 1),
    border-bottom-width 90ms cubic-bezier(0.2, 0, 0, 1),
    opacity 200ms ease-out;
}
.badge:hover { opacity: 1; }
.badge:active { transform: translateY(2px); border-bottom-width: 2px; }
.badge__img {
  display: block;
  height: 38px;
  width: auto;
}

/* ── In-viewport legals (sit at the bottom of the splash) ── */
.splash__legals {
  position: relative;
  z-index: 1;
  padding: 16px 24px max(env(safe-area-inset-bottom, 16px), 22px);
  text-align: center;
  font-size: 13px;
}
.splash__legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 8px;
}
.splash__legal-links a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.splash__legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.splash__legal-copy {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Page entrance reveal ──
   Each `.reveal` element starts hidden and fades in on its own
   delay (set per-element via inline `--d`). Overlapping easings
   produce a smooth orchestrated load: wordmark → moony → bubble →
   tagline → badges → legals. Pure CSS, no GSAP needed. */
.reveal {
  opacity: 0;
  animation: reveal-up 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) forwards;
}
.reveal--down {
  animation-name: reveal-down;
}
.reveal--up {
  animation-name: reveal-up;
}
.reveal--scale {
  animation-name: reveal-scale;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1);
}
.reveal--pop {
  animation-name: reveal-pop;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reveal-up {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-down {
  0%   { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-scale {
  0%   { opacity: 0; transform: scale(0.55) translateY(18px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes reveal-pop {
  0%   { opacity: 0; transform: scale(0.6) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* The moon entrance and its continuous float live on different
   layers (wrapper handles entrance, .moon__img keeps floating).
   The bubble's pop entrance replaces the standalone pop+bob it had
   before; the bob continues via a delayed second animation. */
.bubble.reveal--pop {
  animation:
    reveal-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms) forwards,
    bob 4s ease-in-out calc(var(--d, 0ms) + 540ms) infinite;
}

/* ── Small-screen tuning so the splash fits in 100dvh on
       short/narrow phones (iPhone SE 375×667, mini, etc.) ── */
@media (max-height: 760px), (max-width: 420px) {
  .splash__top { padding-top: calc(max(env(safe-area-inset-top, 0px), 12px) + 28px); }
  .splash__content { gap: 20px; padding: 18px 20px 14px; }
  .wordmark { width: 180px; }
  .moon { width: 160px; height: 160px; }
  .hero { gap: 14px; }
  .bubble { font-size: 13px; padding: 10px 14px; max-width: 240px; }
  .tagline { font-size: 19px; }
  .badges { gap: 10px; }
  .badge { height: 54px; padding: 5px 8px; }
  .badge__img { height: 34px; }
  .splash__legal-links { gap: 6px 16px; }
  .splash__legal-links a { font-size: 12px; }
  .splash__legal-copy { font-size: 11px; }
}
@media (max-height: 640px) {
  .splash__content { gap: 14px; padding: 24px 20px 12px; }
  .moon { width: 140px; height: 140px; }
  .hero { gap: 10px; }
  .tagline { font-size: 17px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .star, .cloud, .shoot, .moon__img, .moon__halo, .bubble,
  .reveal, .reveal--down, .reveal--up, .reveal--scale, .reveal--pop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}