/* ── Float (hero icon) ────────────────────────────── */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0px); }
}

/* ── Fade-bob (scroll indicator) ─────────────────── */
@keyframes fade-bob {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 1;   transform: translateX(-50%) translateY(6px); }
}

/* ── Scroll-reveal base state ─────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

/* ── Gold button pulse on hover ───────────────────── */
@keyframes gold-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

.btn-appstore:focus-visible,
.btn-appstore--large:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__icon { animation: none; }
  .scroll-indicator { animation: none; }
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}