/* ============================================================
   1JJ GAME — ANIMATIONS & KEYFRAMES
   Pure CSS · transform/opacity only for performance
   ============================================================ */

/* ---------- Page fade-in on load ---------- */
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.is-loaded { animation: pageFade var(--dur-slow) var(--ease) both; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.94); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible { transform: none; }

/* stagger helper */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* ---------- Animated gradient text ---------- */
@keyframes textShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.grad-text {
  background: var(--grad-text);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textShimmer 6s linear infinite alternate;
}

/* ---------- Gold shimmer sweep (CTA buttons) ---------- */
@keyframes shimmerSweep {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  60%,
  100% { transform: translateX(240%)  skewX(-18deg); }
}

/* ---------- Pulsing gold ring (download button) ---------- */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(240,201,75,0.55); }
  70%  { box-shadow: 0 0 0 22px rgba(240,201,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,201,75,0); }
}
.pulse-ring { animation: pulseRing 2.4s var(--ease-out) infinite; }

/* ---------- Floating (hero mockup + particles) ---------- */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-16px); }
}
@keyframes floatYslow {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-22px) rotate(1deg); }
}
.floating      { animation: floatY 5.5s var(--ease) infinite; }
.floating-slow { animation: floatYslow 8s var(--ease) infinite; }

/* ---------- Particle drift ---------- */
@keyframes particleDrift {
  0%   { transform: translate(0,0) scale(1);   opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translate(var(--dx,20px), -120px) scale(0.4); opacity: 0; }
}

/* ---------- Gold divider shimmer ---------- */
@keyframes dividerShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.gold-divider {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,0.15) 20%,
    var(--gold-bright) 50%,
    rgba(201,168,76,0.15) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: dividerShimmer 5s linear infinite;
}

/* ---------- Sliding gold underline (tabs/nav) ---------- */
@keyframes slideUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Badge shine ---------- */
@keyframes badgeGlow {
  0%,100% { box-shadow: var(--shadow-gold-sm); }
  50%     { box-shadow: 0 8px 26px rgba(240,201,75,0.45); }
}

/* ---------- Spin (decorative rings) ---------- */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 26s linear infinite; }

/* ---------- Count-up pop ---------- */
@keyframes countPop {
  0%   { transform: scale(0.9); opacity: 0.4; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ---------- Marquee (trust logos / ticker) ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Screenshot slider fade ---------- */
@keyframes slideFade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Bounce arrow (scroll hint) ---------- */
@keyframes bounceDown {
  0%,100% { transform: translateY(0); opacity: 0.7; }
  50%     { transform: translateY(8px); opacity: 1; }
}
.scroll-hint__arrow { animation: bounceDown 1.8s var(--ease) infinite; }

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}