/* Lucky Lots landing — candy palette lifted from the game UI */
:root {
  --blue-deep: #12233b;
  --blue-panel: #1b3354;
  --gold: #f6b93b;
  --gold-bright: #ffd35c;
  --cream: #fdf3dd;
  --red: #d63c3c;
  --text: #fdf6e8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  background: var(--blue-deep);
  color: var(--text);
  overflow-x: hidden; overflow-x: clip; /* clip: no scroll container, keeps view() timelines on the root scroller */
}

img { max-width: 100%; height: auto; display: block; }

/* ============ HERO SHELL ============ */
.scrub-track { height: 560vh; position: relative; }

.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #7ec6f5 0%, #bfe6ff 45%, #f3ead0 100%);
}

/* ---- full-bleed scrub canvas (desktop movie / mobile promo) ---- */
#scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- shared hero UI ---- */
.hero-hud {
  position: absolute;
  left: 0; right: 0; bottom: 5vh;
  display: flex; justify-content: center;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.hero-hud.hidden { opacity: 0; }

.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 0.8rem; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.scroll-hint .chev { animation: bounce 1.4s infinite; font-size: 1.2rem; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

.hero-endcap {
  position: absolute;
  left: 0; right: 0; bottom: 12vh;
  display: flex; justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hero-endcap.shown { opacity: 1; pointer-events: auto; }

.cta-button {
  pointer-events: auto;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #4a2c00; font-weight: 700; font-size: 1.1rem;
  text-decoration: none; padding: 14px 34px; border-radius: 999px;
  border: 3px solid #fff3cf;
  box-shadow: 0 6px 0 #a06a10, 0 12px 24px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a06a10, 0 16px 28px rgba(0,0,0,0.5); }

/* ============ STRIPS ============ */
.strip { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.strip-dark { background: var(--blue-deep); }
.strip-suburb { background: url("../art/scene/street.webp") center/cover no-repeat fixed; }
@media (max-width: 820px) { .strip-suburb { background-attachment: scroll; } }
.strip-suburb::before { content: ""; position: absolute; inset: 0; background: rgba(14, 26, 44, 0.72); }
.strip > .wrap { position: relative; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

h2 {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 700; color: var(--gold-bright);
  text-shadow: 0 3px 0 rgba(0,0,0,0.35); margin-bottom: 18px;
}
.lede {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.6; max-width: 640px; margin: 0 auto 12px; color: var(--cream);
}

/* card fan */
.card-fan { position: relative; height: 190px; margin-top: 36px; }
.fan-card {
  position: absolute; left: 50%; bottom: 0; width: 110px;
  border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  transform-origin: 50% 120%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.1);
  transform: translateX(-50%) rotate(0deg) translateY(40px);
  opacity: 0;
}
.reveal.in .fan-card { opacity: 1; }
.reveal.in .f1 { transform: translateX(-50%) rotate(-24deg); }
.reveal.in .f2 { transform: translateX(-50%) rotate(-12deg) translateY(-8px); }
.reveal.in .f3 { transform: translateX(-50%) rotate(0deg) translateY(-14px); }
.reveal.in .f4 { transform: translateX(-50%) rotate(12deg) translateY(-8px); }
.reveal.in .f5 { transform: translateX(-50%) rotate(24deg); }

/* feature rows */
.feature-row {
  display: flex; align-items: center; gap: clamp(28px, 6vw, 72px);
  padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px);
}
.feature-row.flip { flex-direction: row-reverse; }
.phone {
  flex: 0 0 min(300px, 42vw);
  border-radius: 26px; overflow: hidden; overflow: clip; border: 6px solid #0d1a2c;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 2px rgba(246,185,59,0.55);
}
.feature-copy { flex: 1; }
.feature-copy h3 {
  font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--gold-bright);
  letter-spacing: 0.04em; margin-bottom: 10px; text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.feature-copy p { font-size: clamp(0.98rem, 2.1vw, 1.15rem); line-height: 1.65; color: var(--cream); }
@media (max-width: 700px) {
  .feature-row, .feature-row.flip { flex-direction: column; text-align: center; }
  .phone { flex-basis: auto; width: min(280px, 74vw); }
}

/* rivals */
.rival-row { display: flex; justify-content: center; gap: clamp(18px, 4vw, 48px); margin-top: 44px; flex-wrap: wrap; }
.rival {
  width: min(240px, 78vw); background: var(--blue-panel);
  border: 3px solid var(--gold); border-radius: 20px; padding: 20px 18px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.rival img { width: 150px; margin: 0 auto 12px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); }
.rival strong { display: block; color: var(--gold-bright); font-size: 1.15rem; margin-bottom: 6px; }
.rival span { font-size: 0.92rem; line-height: 1.45; color: var(--cream); font-style: italic; }

/* CTA strip */
.cta-strip {
  background: linear-gradient(180deg, rgba(14,26,44,0.25), rgba(14,26,44,0.88)),
    url("../art/feature.webp") center/cover no-repeat;
}
.cta-logo { width: min(360px, 70vw); margin: 0 auto 18px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)); }
.play-badge {
  display: inline-flex; flex-direction: column; margin-top: 22px; padding: 14px 42px;
  border-radius: 16px; background: #000; border: 2px solid #6f6f6f; color: #fff;
}
.badge-soon { font-size: 0.7rem; letter-spacing: 0.22em; color: #cfcfcf; }
.badge-store { font-size: 1.5rem; font-weight: 600; }

/* footer */
footer { background: #0b1626; padding: 26px 0; font-size: 0.9rem; color: #9db0c9; text-align: center; }
footer a { color: var(--gold-bright); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ============ SCROLL REVEALS ============ */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal-left { transform: translateX(-52px); }
.reveal-right { transform: translateX(52px); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ============ SCROLL PARALLAX (progressive enhancement) ============ */
/* Layered speeds as things cross the viewport: strip backgrounds are the slow
   layer (fixed street bg), content wraps drift faster, inner imgs faster
   still. Pure view() timelines, no JS. Drift is applied to inner imgs where
   the parent animates its transform via .reveal, so the two never fight. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes plx-drift {
      from { transform: translateY(var(--plx)) rotate(var(--plx-rot, 0deg)) scale(var(--plx-s0, var(--plx-s, 1))); }
      to   { transform: translateY(calc(-1 * var(--plx))) rotate(calc(-1 * var(--plx-rot, 0deg))) scale(var(--plx-s1, var(--plx-s, 1))); }
    }
    .feature-row, .strip-dark > .wrap, .cta-strip > .wrap,
    .card-fan, .phone, .rival img, .cta-logo {
      animation: plx-drift linear both;
      animation-timeline: view();
    }
    /* content layer — outruns the strip backgrounds */
    .feature-row        { --plx: 64px; }
    .strip-dark > .wrap { --plx: 36px; }
    .cta-strip > .wrap  { --plx: 12px; }
    /* inner layer — rides on top of the content layer */
    .card-fan  { --plx: 40px; }
    .phone     { --plx: 26px; --plx-rot: 1.2deg; } /* whole frame drifts+rocks; rides on the row's drift */
    .rival img { --plx: 16px; }
    .rival:nth-child(2) img { --plx: -16px; } /* middle rival drifts against the outer two */
    .cta-logo  { --plx: 20px; --plx-s0: 0.92; --plx-s1: 1.08; }   /* swells as it rises */
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .fan-card { transition: none !important; transform: none !important; opacity: 1 !important; }
  .scroll-hint .chev { animation: none !important; }
}

/* ============ LEGAL PAGES ============ */
.legal { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; line-height: 1.7; }
.legal h1 { color: var(--gold-bright); margin: 18px 0 6px; font-size: 1.9rem; }
.legal h2 { font-size: 1.25rem; margin: 28px 0 8px; text-align: left; }
.legal p, .legal li { color: var(--cream); margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.legal em { color: #9db0c9; font-size: 0.9rem; }
.legal a { color: var(--gold-bright); }
.legal .home-link { display: inline-block; margin-bottom: 8px; text-decoration: none; font-weight: 600; }