/* =========================================================
   Minimal custom overlay for Tailwind — only for effects
   Tailwind can't easily do (text gradient, video overlay).
   ========================================================= */

html, body { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Gold "3D" text (used on landing and eyebrows) */
.text-gold-3d {
  background: linear-gradient(180deg, #fff4c9 0%, #f2c451 45%, #b3781d 78%, #6b4210 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 6px 18px rgba(212,162,76,.35));
}

/* Reveal-in animation */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Success emblem halo */
.emblem-halo { position: relative; }
.emblem-halo::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,75,255,.4), transparent 70%);
  animation: emblemPulse 2.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes emblemPulse {
  0%,100% { transform: scale(1);    opacity: .55; }
  50%     { transform: scale(1.15); opacity: 1;   }
}

/* Video: hide native controls entirely */
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-enclosure { display: none !important; }

/* Watch-status pulse dot */
@keyframes pulseDot {
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.4); }
}
.pulse-dot { animation: pulseDot 1.4s ease-in-out infinite; }

/* Radio card selected state — the "peer-checked" utility needs an actual peer,
   but for simplicity we mirror the styling here in JS-free CSS as well. */
.option-card {
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.option-card:active { transform: scale(0.97); }
input:checked ~ .option-card,
input:checked + .option-card {
  border-color: #2f4bff !important;
  box-shadow: 0 12px 28px rgba(47,75,255,.35), 0 0 0 3px rgba(47,75,255,.18) !important;
}
input:checked ~ .option-card .option-emoji,
input:checked + .option-card .option-emoji {
  transform: scale(1.05);
}

/* Bar shimmer for the progress fill */
.progress-fill { transition: width .12s linear; }

/* Ensure iOS Safari doesn't zoom on input focus */
input, select, textarea { font-size: 16px; }