/* ==========================================================================
   777cx game — play777cx.pk
   animations.css — Scroll reveal, keyframes, micro-interactions
   Understated & premium: short travel, soft easing, no bounce-heavy motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL
   Elements carrying [data-reveal] start hidden and are unlocked by
   IntersectionObserver in main.js, which adds .is-revealed.
   A .no-js / .js-off fallback keeps everything visible without JavaScript.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="up"]     { transform: translate3d(0, 30px, 0); }
[data-reveal="down"]   { transform: translate3d(0, -26px, 0); }
[data-reveal="left"]   { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"]  { transform: translate3d(34px, 0, 0); }
[data-reveal="zoom"]   { transform: scale(.94); }
[data-reveal="fade"]   { transform: none; }
[data-reveal="tilt"]   { transform: translate3d(0, 26px, 0) rotate(-1.4deg); }
[data-reveal="clip"]   { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-out), opacity 500ms linear; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger helpers — applied inline or via [style="--reveal-delay:…"] */
.stagger > *:nth-child(1)  { --reveal-delay:  40ms; }
.stagger > *:nth-child(2)  { --reveal-delay: 100ms; }
.stagger > *:nth-child(3)  { --reveal-delay: 160ms; }
.stagger > *:nth-child(4)  { --reveal-delay: 220ms; }
.stagger > *:nth-child(5)  { --reveal-delay: 280ms; }
.stagger > *:nth-child(6)  { --reveal-delay: 340ms; }
.stagger > *:nth-child(7)  { --reveal-delay: 400ms; }
.stagger > *:nth-child(8)  { --reveal-delay: 460ms; }
.stagger > *:nth-child(9)  { --reveal-delay: 520ms; }
.stagger > *:nth-child(10) { --reveal-delay: 580ms; }
.stagger > *:nth-child(11) { --reveal-delay: 620ms; }
.stagger > *:nth-child(12) { --reveal-delay: 660ms; }

/* --------------------------------------------------------------------------
   2. KEYFRAMES
   -------------------------------------------------------------------------- */

/* Gentle vertical float — phone mockup, floating chips */
@keyframes float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

@keyframes float-y-sm {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}

/* Slow drift for decorative orbs */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(18px, -22px, 0) scale(1.05); }
  66%  { transform: translate3d(-14px, 14px, 0) scale(.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Gold sheen sweeping across CTA buttons */
@keyframes sheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  55%  { transform: translateX(230%)  skewX(-18deg); }
  100% { transform: translateX(230%)  skewX(-18deg); }
}

/* Soft breathing glow behind premium elements */
@keyframes glow-pulse {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.06); }
}

/* Rotating conic ring around the hero device */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* Fade + rise, used by JS-driven components (slider, drawer) */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

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

/* Left→right marquee for the keyword ticker */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pulsing halo on the floating Telegram button */
@keyframes halo {
  0%   { box-shadow: 0 0 0 0 rgba(4, 106, 56, .40); }
  70%  { box-shadow: 0 0 0 18px rgba(4, 106, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 106, 56, 0); }
}

/* Slot-reel style number roll used on the bonus badge */
@keyframes coin-flip {
  0%, 88%, 100% { transform: rotateY(0deg); }
  94%           { transform: rotateY(180deg); }
}

/* Underline wipe for nav links */
@keyframes wipe-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Accordion panel content fade */
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Shimmer placeholder while a game thumbnail decodes */
@keyframes shimmer {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}

/* --------------------------------------------------------------------------
   3. ANIMATION UTILITY CLASSES
   -------------------------------------------------------------------------- */
.anim-float      { animation: float-y 6.5s var(--ease-inout) infinite; }
.anim-float-sm   { animation: float-y-sm 5s var(--ease-inout) infinite; }
.anim-float-slow { animation: float-y 9s var(--ease-inout) infinite; }
.anim-drift      { animation: drift 22s var(--ease-inout) infinite; }
.anim-glow       { animation: glow-pulse 5.5s var(--ease-inout) infinite; }
.anim-spin-slow  { animation: spin-slow 26s linear infinite; }
.anim-halo       { animation: halo 2.8s var(--ease-out) infinite; }

.delay-1 { animation-delay: .4s; }
.delay-2 { animation-delay: .9s; }
.delay-3 { animation-delay: 1.4s; }
.delay-4 { animation-delay: 2s; }

/* --------------------------------------------------------------------------
   4. HOVER MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

/* Card lift — the site-wide hover language */
.hover-lift {
  transition:
    transform   var(--d-base) var(--ease-out),
    box-shadow  var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--e-4);
    border-color: var(--c-line-gold);
  }
}

/* Gold sheen sweep — attached to .btn--gold and .sheen */
.sheen { position: relative; overflow: hidden; isolation: isolate; }
.sheen::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: var(--g-sheen);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  animation: sheen 4.6s var(--ease-inout) infinite;
}
@media (hover: hover) and (pointer: fine) {
  .sheen:hover::after { animation-duration: 1.15s; }
}

/* Icon micro-float inside feature tiles */
@media (hover: hover) and (pointer: fine) {
  .icon-float { transition: transform var(--d-base) var(--ease-spring); }
  .hover-lift:hover .icon-float,
  .icon-float:hover { transform: translateY(-4px) rotate(-4deg); }
}

/* Image zoom inside a fixed frame */
.zoom-frame { overflow: hidden; }
.zoom-frame img { transition: transform 620ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .zoom-frame:hover img { transform: scale(1.07); }
}

/* --------------------------------------------------------------------------
   5. LOADING SHIMMER (thumbnails)
   -------------------------------------------------------------------------- */
.shimmer-bg {
  background-color: var(--c-emerald-050);
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 420px 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.5s linear infinite;
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION — hard stop on decorative motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .sheen::after { display: none; }
}