/* ==== ROOT + GLOBAL ======================================================= */
:root{
  --header-bg: #0e1822;
  --page-bg:   #0a0f15;
  --text:      #eaf2ff;

  --accent:    #22d3ee;      /* legacy cyan (kept if needed) */
  --accent-2:  #60a5fa;

  --gold-1:    #fffc00;      /* hero/title gold */
  --gold-2:    #f29e27;

  --cta-1:     #ffcc00;      /* CTA gold/orange */
  --cta-2:     #f29e27;

  --shadow:    0 6px 14px rgba(0,0,0,.25);
}

*{ box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: hidden; max-width: 100%; }
body{
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.55;
}

/* generic container */
.wrap{
  width: min(1080px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 60px);
  display: flex; align-items: center; gap: 12px;
}

/* ==== HEADER ============================================================= */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  height: 64px; display: flex; align-items: center;
  box-shadow: var(--shadow);
  border-bottom-left-radius: 22px; border-bottom-right-radius: 22px;
  overflow: hidden;
}
.gift{ display:inline-flex; color:#ff6a3d; }
.headline{
  font-weight: 600; letter-spacing: .2px; line-height: 1.05;
  font-size: clamp(16px, 2.6vw, 26px);
  white-space: nowrap;
}
.verified{ display:inline-flex; filter: drop-shadow(0 0 6px rgba(29,161,255,.75)); transform: translateY(1px); }

@media (max-width: 480px){
  .site-header{ height: 56px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
  .wrap{ padding-inline: 16px; }
}

/* ==== HERO SECTION ======================================================== */
.hero{
  position: relative; overflow: hidden;
  text-align: center; color: #fff;
  padding: 80px 20px 56px;
  font-family: "Poppins", system-ui, sans-serif;
}
@media (max-width: 480px){ .hero{ padding: 44px 16px 36px; } }

.hero-headline{
  font-weight: 600;
  font-size: clamp(16px, 5vw, 18px);
  line-height: 1.1; margin: 0 0 14px; white-space: nowrap;
}
.hero-title{
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 16vw, 160px);
  line-height: .95; letter-spacing: -0.5px; margin: 0; white-space: nowrap;

  /* gold gradient + subtle white stroke */
  background-image: linear-gradient(to bottom, var(--gold-1) 10%, var(--gold-2) 60%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #ffffff;
}
.hero-sub{
  font-weight: 600;
  font-size: clamp(14px, 4vw, 22px);
  letter-spacing: clamp(0.08em, 0.6vw, 0.22em);
  margin: 16px 0 10px; white-space: nowrap;
}
.hero-highlight{
  font-weight: 600; font-size: clamp(18px, 6vw, 22px); margin: 8px 0 0;
  background: linear-gradient(to bottom, var(--gold-1) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
  white-space: nowrap;
}


/* ==== COUNTDOWN - MODERN DIGITAL CLOCK =================================== */
.countdown{
  margin-top: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.countdown-label{
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.countdown-time{
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 6px);
  padding: clamp(6px, 1.8vw, 10px) clamp(12px, 2.5vw, 16px);
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.countdown-time .digit,
.countdown-time .cd-sep{
  font-family: "Roboto Mono", monospace;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(20px, 5.5vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cd-sep{
  opacity: 0.8;
  margin: 0 clamp(1px, 0.5vw, 2px);
}

.countdown.is-expired .countdown-time{
  opacity: 0.4;
  border-color: rgba(255, 255, 255, 0.06);
}

.countdown.is-expired .countdown-label{
  opacity: 0.4;
}

/* ==== WINNERS TICKER ====================================================== */
.ticker-container {
  position: relative;
  width: min(600px, 90vw);
  margin: 20px auto 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 0;
  backdrop-filter: blur(4px);
  z-index: 3;
}

.winners-ticker {
  display: flex;
  width: max-content;
  position: relative;
}

.ticker-track {
  display: flex;
  gap: 24px;
  animation: tickerScroll 180s linear infinite;
  will-change: transform;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: clamp(11px, 2.8vw, 13px);
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.ticker-user {
  font-weight: 700;
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
}

.ticker-won {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92em;
}

.ticker-prize {
  font-weight: 800;
  font-family: "Roboto Mono", monospace;
  color: #fbbf24;
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

/* Pause animation on hover for better readability */
.ticker-container:hover .ticker-track {
  animation-play-state: paused;
}

/* ==== CTA BUTTON ========================================================== */
.btn.btn-primary, #start-bonus{
  appearance:none; border:0; cursor:pointer;
  border-radius: 14px; padding: 14px 18px;
  font-weight: 800; letter-spacing: .3px; font-size: 16px;
  background: linear-gradient(90deg, var(--cta-1), var(--cta-2));
  color: #1a1002;
  box-shadow: 0 10px 30px rgba(242,158,39,.35);
  transition: transform .06s ease, filter .2s ease;
  animation: breatheCTA 2.2s ease-in-out infinite;
}
#start-bonus:hover{ filter: brightness(1.05); }
#start-bonus:active{ transform: translateY(1px); }

@keyframes breatheCTA {
  0% { transform: scale(1);   box-shadow: 0 10px 30px rgba(242,158,39,.35); }
  50%{ transform: scale(1.04);box-shadow: 0 16px 42px rgba(242,158,39,.50); }
  100%{ transform: scale(1);  box-shadow: 0 10px 30px rgba(242,158,39,.35); }
}
@media (prefers-reduced-motion: reduce){ #start-bonus{ animation: none; } }

/* ==== “Kesempatan 10JT Setiap Bulan” ===================================== */
.tc-section{ padding: 10px 0 18px; } /* tighter so note sits closer */
.simple-tc .tc-title{
  margin: 0; text-align: center;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 5.4vw, 36px);
  letter-spacing: .02em;

  /* match hero-title gold */
  background: linear-gradient(to bottom, var(--gold-1) 10%, var(--gold-2) 60%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.6px rgba(255,255,255,.85);

  position: relative;
  filter: drop-shadow(0 6px 16px rgba(242,158,39,.22));
}
.simple-tc .tc-title::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: -10px; width: min(320px, 60%); height: 3px;
  background: linear-gradient(90deg, rgba(242,158,39,0), rgba(242,158,39,.9), rgba(242,158,39,0));
  border-radius: 2px;
}

/* ==== PROGRESSIVE FLOW (dots + slider) =================================== */
.flow{ padding: 8px 16px 48px; }
.flow-note{
  width:min(720px,92vw);
  margin: 0 auto 8px; /* close to the gold line */
  text-align: center;
  font: 700 14px/1.25 "Inter", system-ui, sans-serif;
  color: #ffe7b8;
  opacity: .95;
}

/* reveal control + dramatic entrance */
.flow[hidden]{ display:none !important; }
/* REMOVE the old opacity clamp that hid pane 1 */
.flow.is-revealing{ /* no opacity clamp */ }
@keyframes flowEnterWrap{
  0%   { opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px); }
  60%  { opacity:1; transform: translateY(-2px) scale(1.005); filter: blur(0); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes flowEnterDots{
  0%   { opacity:0; transform: translateY(6px); }
  100% { opacity:1; transform: translateY(0); }
}
.flow.is-revealing .flow-viewport{
  animation: flowEnterWrap .78s cubic-bezier(.2,.8,.2,1) both;
}
.flow.is-revealing .flow-dots{
  animation: flowEnterDots .55s ease-out .15s both;
}

/* --- Progressive Flow (viewport + track + panes) --- */
.flow-viewport{
  position: relative;
  width: min(720px, 92vw);
  margin: 12px auto 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Track spans ALL panes: 3 panes => 300% */
.flow-track{
  position: relative;
  display: flex;
  width: 300%;                                /* <- keep this */
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* Each pane is exactly 1/3 of the track (so it fills the viewport) */
.flow-pane{
  flex: 0 0 calc(100% / 3);                   /* <- one-third */
  min-width: calc(100% / 3);
  min-height: 200px;
  display: grid;
  place-items: center;
  transition: opacity .18s linear;
}

/* Hide inactive panes without overlaying */
.flow-pane[aria-hidden="true"]  { opacity: 0; pointer-events: none; }
.flow-pane[aria-hidden="false"] { opacity: 1; pointer-events: auto; }



.placeholder{
  opacity:.85;
  font: 800 clamp(18px,4.8vw,26px)/1.1 "Poppins",system-ui,sans-serif;
  letter-spacing:.2px;
  color:#cfe7ff;
}

/* dots */
.flow-dots{
  width:min(720px,92vw);
  margin: 0 auto;
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 10%;
}
.flow-dots::before{
  content:"";
  position:absolute; left:10%; right:10%; height:8px; border-radius:4px;
  background:#0b0f14; box-shadow: inset 0 0 0 2px rgba(0,0,0,.6);
}
.dot{
  position:relative; z-index:1;
  width:22px; height:22px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  box-shadow: 0 0 0 3px rgba(255,204,0,1) inset, 0 0 16px rgba(242,158,39,.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.dot:hover{ filter: brightness(1.1); transform: scale(1.04); }
.dot.is-active{
  box-shadow: 0 0 0 11px rgba(242,158,39,.22) inset, 0 0 18px rgba(242,158,39,.55);
}

/* accessibility helper */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* === Step 1: contact card === */
.contact-card{
  width:min(720px,92vw);
  margin: 6px auto 0;
  background: radial-gradient(120% 140% at 0% 0%, rgba(242,158,39,.15) 0%, rgba(242,158,39,0) 40%),
              linear-gradient(180deg, #0e1420 0%, #0a0f18 100%);
  border: 1px solid rgba(242,158,39,.28);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(242,158,39,.08), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 16px;
}

.contact-head{ display:grid; gap:8px; text-align:center; margin-bottom: 8px; }
.step-chip{
  display:inline-block; justify-self:center;
  font: 800 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing:.06em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
  color:#1a1002;
  background: linear-gradient(90deg, var(--cta-1), var(--cta-2));
  box-shadow: 0 6px 16px rgba(242,158,39,.35);
}
.contact-title{
  margin: 0;
  font: 800 clamp(16px,4.6vw,20px)/1.2 "Poppins", system-ui, sans-serif;
}

.contact-body{ display:grid; gap:14px; }
.contact-lines{ display:grid; gap:8px; }
.line{ display:flex; justify-content:space-between; gap:12px; }
.line .k{ color:#cfe7ff; opacity:.85; font-weight:700; }
.line .v{ color:#fff; font-weight:800; }
.monospace{ font-family: "Roboto Mono", monospace; letter-spacing:.02em; }

.note{
  margin-top: 2px;
  color:#ffe7b8; font-weight:700; font-size: 13px;
  background: rgba(242,158,39,.08);
  border: 1px dashed rgba(242,158,39,.5);
  padding: 8px 10px; border-radius: 10px;
}

.contact-btn{ justify-self:center; min-width: 220px; }
/* --- Step 2: Wheel card, cohesive with Step 1 --- */
.wheel-card{
  width:min(720px,92vw);
  margin: 6px auto 0;
  background: radial-gradient(120% 140% at 0% 0%, rgba(242,158,39,.15) 0%, rgba(242,158,39,0) 40%),
              linear-gradient(180deg, #0e1420 0%, #0a0f18 100%);
  border: 1px solid rgba(242,158,39,.28);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(242,158,39,.08), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 16px;
}

.confirm-row{
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 6px;
}
.confirm-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #eaf2ff;
}
.confirm-check input{
  width: 18px; height: 18px;
  accent-color: #f29e27; /* orange */
}
#confirm-hint.tiny{
  color: #ffe7b8;
  min-height: 1.2em; /* reserve space to avoid layout shift */
}

/* --- Step 2: Wheel card + layout --- */
.wheel-card {
  width: min(720px, 92vw);
  margin: 6px auto 0;
  background: linear-gradient(180deg, #101826 0%, #0b111b 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: none; /* no shadows */
  padding: 14px 14px 16px;
}

.wheel-area {
  position: relative;
  display: grid;
  place-items: center;
  margin: 8px 0 10px;
  isolation: isolate;
  background: radial-gradient(circle at 50% 60%, rgba(0,110,255,0.15), transparent 70%);
  border-radius: 50%;
}

.wheel-canvas {
  width: min(520px, 86vw);
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}

/* Flat pointer (no glow) */
.wheel-pointer {
  position: absolute;
  top: -18px;
  left: 48%;
  transform: translateX(-50%);
  filter: none;
  z-index: 3;
}
.wheel-pointer svg path { fill: #ffffff; } /* crisp white */

/* HUD layout remains */
.wheel-hud { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
.wheel-result { color: #cfe7ff; font-size: 13px; text-align: center; }

/* Reuse step badge + title */
.wheel-card .contact-head { display: grid; gap: 8px; text-align: center; margin-bottom: 6px; }
.wheel-card .step-chip {
  display:inline-block; justify-self:center;
  font: 800 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing:.06em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
  color:#1a1002;
  background: linear-gradient(90deg, var(--cta-1), var(--cta-2));
}

.wheel-card .contact-title { margin: 0; font: 800 clamp(16px,4.6vw,20px)/1.2 "Poppins", system-ui, sans-serif; }

/* --- Step 3: Final / WhatsApp card --- */
.final-card{
  width:min(720px,92vw);
  margin: 6px auto 0;
  background: radial-gradient(120% 140% at 0% 0%, rgba(242,158,39,.15) 0%, rgba(242,158,39,0) 40%),
              linear-gradient(180deg, #0e1420 0%, #0a0f18 100%);
  border: 1px solid rgba(242,158,39,.28);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(242,158,39,.08), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 16px;
}

.wa-preview { margin: 8px 0 10px; }
.wa-bubble{
  background: linear-gradient(180deg, #0e1420, #0a0f18);
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(16,185,129,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.wa-bubble .label{
  color: #a7b7cd; font-size: 12px; margin-bottom: 6px;
}
.wa-pre{
  color: #e8f0ff; margin: 0; font-size: 13px; line-height: 1.4; white-space: pre-wrap;
}
.final-actions{
  display: grid; justify-items: center; gap: 8px; margin-top: 10px;
}
.wa-btn{ min-width: 240px; }
.contact-actions{
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.btn.btn-ghost{
  border: 1px solid rgba(148,163,184,.3);
  background: transparent;
  color: #e8f0ff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
/* Dots are now display-only */
.flow-dots .dot{
  pointer-events: none;   /* no clicks */
  cursor: default;
}
/* ============================================================
   DECORATIVE ELEMENTS & ANIMATIONS (CLEANED & CONSOLIDATED)
   ============================================================ */

/* Step wrappers become positioning context */
#step1, #step2 { position: relative; overflow: hidden; }

/* Hero Background: static gradient + spotlight */
.hero {
  background: radial-gradient(circle at 50% 20%, rgba(25,75,160,0.45), transparent 70%),
              linear-gradient(to bottom, #02163a 0%, #030b20 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle glow around center */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0,110,255,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero texts and buttons stay above decorations */
.hero > *:not(.decor-hero) { position: relative; z-index: 3; }

/* Decoration container - fills hero section */
.decor-hero {
  position: absolute;
  inset: 0;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Base styles for all decorative images */
.decor-hero img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
  opacity: 0.92;
}

/* Original chests - hidden, JavaScript will position them */
.chest-1, .chest-2, .chest-3 {
  display: none;
}

/* Coins with spinning animation */
.coin-1 {
  width: clamp(28px, 7vw, 42px);
  right: 8vw;
  top: 45%;
  animation: coinFlip 8s linear infinite;
}
.coin-2 {
  width: clamp(24px, 6.5vw, 38px);
  left: 9vw;
  top: 55%;
  animation: coinFlip 10s linear infinite reverse;
}

/* Sparks - subtle twinkling */
.spark {
  width: 8px;
  opacity: 0.35;
  animation: drift 10s ease-in-out infinite;
}
.spark.s2 { animation-duration: 12s; animation-delay: 0.5s; }
.spark.s3 { animation-duration: 14s; animation-delay: 1s; }

/* Extra chests (added by JavaScript) */
.extra-chest {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}

/* Wheel stage background image */
#wheel-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  opacity: 0.85;
}

/* Stage beams behind the wheel */
.stage-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stage-lights .beam {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 24vw;
  max-width: 360px;
  aspect-ratio: 1/2.2;
  transform-origin: bottom center;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,225,255,0.35), rgba(0,225,255,0.12) 45%, transparent 70%);
  filter: blur(1px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: beamSway 6s ease-in-out infinite;
}
.stage-lights .beam.b1 { transform: translateX(-220%) rotate(-18deg); animation-delay: 0s; }
.stage-lights .beam.b2 { transform: translateX(-50%) rotate(0deg); animation-delay: 0.8s; }
.stage-lights .beam.b3 { transform: translateX(120%) rotate(16deg); animation-delay: 1.6s; }

/* Flying gifts container */
#flying-gifts {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
#flying-gifts .flying {
  position: absolute;
  left: var(--start-x);
  bottom: -120px;
  width: clamp(44px, 6vw, 78px);
  transform: translateY(0) translateX(0) scale(var(--fly-scale, 1));
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  animation: flyUp var(--fly-dur, 10s) linear var(--fly-delay, 0s) forwards, gentleTilt 3.8s ease-in-out infinite;
  opacity: 0.92;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes coinFlip {
  0% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-8px) rotateY(180deg); }
  100% { transform: translateY(0) rotateY(360deg); }
}

@keyframes drift {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
  50% { transform: translateY(-14px) translateX(6px); opacity: 0.5; }
}

@keyframes beamSway {
  0%, 100% { transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg)); opacity: 0.6; }
  50% { transform: translateX(calc(var(--x, -50%) + 4%)) rotate(calc(var(--r, 0deg) + 4deg)); opacity: 0.85; }
}

@keyframes flyUp {
  0% { transform: translateY(0) translateX(0) scale(var(--fly-scale, 1)); opacity: 0; }
  6% { opacity: 0.95; }
  50% { transform: translateY(-50vh) translateX(calc(var(--drift-x, 0px) * 0.6)) scale(var(--fly-scale, 1)); }
  100% { transform: translateY(-110vh) translateX(var(--drift-x, 0px)) scale(var(--fly-scale, 1)); opacity: 0; }
}

@keyframes gentleTilt {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-4px); }
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .stage-lights .beam,
  #flying-gifts .flying,
  .decor-hero img {
    animation: none !important;
  }
}

/* Touch targets */
button, .btn, a.button { touch-action: manipulation; }

.wheel-popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.wheel-popup[hidden] {
  display: none;
}

.wheel-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
  pointer-events: all;
}

.wheel-popup-content {
  position: relative;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 90%;
  width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: all;
}

.wheel-popup-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 16px;
  animation: celebration 0.6s ease-out;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.4));
}

.wheel-popup-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #fff;
  margin: 0 0 12px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wheel-popup-prize {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #fbbf24;
  margin: 0 0 28px 0;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

.wheel-popup-btn {
  width: 100%;
  font-size: 18px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  transition: all 0.2s ease;
}

.wheel-popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.6);
}

.wheel-popup-btn:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes celebration {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-10deg);
  }
  50% {
    transform: scale(1.3) rotate(10deg);
  }
  75% {
    transform: scale(1.2) rotate(-5deg);
  }
}