/* ==========================================================================
   ix7 game — motion layer
   Keyframes + scroll-reveal utilities. Everything animates transform/opacity
   only, so the compositor can keep it at 60fps.
   ========================================================================== */

/* --- Keyframes ----------------------------------------------------------- */

@keyframes ix7-fade-up {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes ix7-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero background: a slow, non-looping-feeling gradient drift. */
@keyframes ix7-gradient-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.14) rotate(6deg); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(0deg); }
}

/* Floating chips/coins in the hero. */
@keyframes ix7-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--float-rot, 0deg)); }
  50%      { transform: translate3d(0, calc(var(--float-dist, 14px) * -1), 0) rotate(calc(var(--float-rot, 0deg) + 3deg)); }
}

/* Primary CTA breathing glow. */
@keyframes ix7-pulse-glow {
  0%, 100% { box-shadow: 0 10px 28px rgba(216, 0, 39, .34), 0 0 0 0 rgba(255, 30, 60, .40); }
  50%      { box-shadow: 0 14px 34px rgba(216, 0, 39, .44), 0 0 0 14px rgba(255, 30, 60, 0); }
}

/* Floating Telegram button ping. */
@keyframes ix7-ping {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes ix7-spin { to { transform: rotate(360deg); } }

/* Screenshots carousel autoplay progress bar. */
@keyframes ix7-shots-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Sheen sweeping across CTAs / promo blocks. */
@keyframes ix7-sheen {
  0%   { transform: translate3d(-120%, 0, 0); }
  60%, 100% { transform: translate3d(220%, 0, 0); }
}

/* Age gate + lightbox entrance. */
@keyframes ix7-modal-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes ix7-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile drawer link stagger. */
@keyframes ix7-slide-in-right {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* Step-timeline connector draw. */
@keyframes ix7-draw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Page load ----------------------------------------------------------- */

.page-fade {
  animation: ix7-fade-in var(--dur-med) var(--ease-out) both;
}

/* --- Scroll reveal -------------------------------------------------------
   `.reveal` elements start hidden ONLY once JS has flagged support, so the
   content stays visible if JS fails or is disabled (progressive enhancement). */

.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.985);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Directional variants */
.js-reveal .reveal--left  { transform: translate3d(-32px, 0, 0); }
.js-reveal .reveal--right { transform: translate3d(32px, 0, 0); }
.js-reveal .reveal--left.is-visible,
.js-reveal .reveal--right.is-visible { transform: none; }

/* Stagger children: set by animations.js via --reveal-delay. */

/* --- Motion utilities ----------------------------------------------------- */

.anim-float {
  animation: ix7-float var(--float-dur, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.anim-pulse-glow { animation: ix7-pulse-glow 2.8s var(--ease-out) infinite; }

/* --- Reduced motion -------------------------------------------------------
   Users who ask for less motion get an instant, fully-visible page: no
   transforms, no infinite loops, no reveal gating. */

@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;
  }

  .js-reveal .reveal,
  .js-reveal .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .anim-float,
  .anim-pulse-glow,
  .hero__orb,
  .tg-float__ping,
  .btn--primary::after {
    animation: none !important;
  }
}