/* =====================================================================
   Game Bell — Animations
   Keyframes, scroll-reveal utilities, micro-interactions.
   Respects prefers-reduced-motion at the bottom.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Keyframes                                                        */
/* ------------------------------------------------------------------ */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(3deg); }
}
@keyframes floatY-alt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-24px) rotate(-4deg); }
}

@keyframes blobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.08); }
  66%  { transform: translate(-30px, 20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scrollWheel {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  60%  { opacity: 1; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(14px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.06); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes bellSwing {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(11deg); }
  40%      { transform: rotate(-9deg); }
  60%      { transform: rotate(6deg); }
  80%      { transform: rotate(-3deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ */
/*  Applied ambient animations                                       */
/* ------------------------------------------------------------------ */
.bg-ambient .blob.b1 { animation: blobDrift 20s var(--ease) infinite; }
.bg-ambient .blob.b2 { animation: blobDrift 26s var(--ease) infinite reverse; }
.bg-ambient .blob.b3 { animation: blobDrift 23s var(--ease) infinite; }

.floaty            { animation: floatY 6s ease-in-out infinite; }
.floaty.f2         { animation: floatY-alt 7s ease-in-out infinite; }
.floaty.f3         { animation: floatY-alt 6.5s ease-in-out infinite; }
.floaty.f4         { animation: floatY 7.5s ease-in-out infinite; }
.floaty.f5         { animation: floatY 5.5s ease-in-out infinite; }
.floaty.f6         { animation: floatY-alt 8s ease-in-out infinite; }

.brand img.swing:hover { animation: bellSwing .8s var(--ease); transform-origin: 50% 15%; }

/* ------------------------------------------------------------------ */
/*  Scroll reveal system (toggled by IntersectionObserver -> .in)    */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(42px); }
[data-reveal="down"]  { transform: translateY(-42px); }
[data-reveal="left"]  { transform: translateX(48px); }
[data-reveal="right"] { transform: translateX(-48px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger children when the parent gets .in */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-stagger].in > * {
  opacity: 1;
  transform: translateY(0);
}
[data-stagger].in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .19s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .26s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .33s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .40s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .47s; }
[data-stagger].in > *:nth-child(8) { transition-delay: .54s; }
[data-stagger].in > *:nth-child(9) { transition-delay: .61s; }

/* ------------------------------------------------------------------ */
/*  Parallax (transform driven by JS via --py)                       */
/* ------------------------------------------------------------------ */
[data-parallax] {
  will-change: transform;
  transform: translateY(var(--py, 0));
}

/* ------------------------------------------------------------------ */
/*  Number count-up helper (JS toggles nothing; purely visual guard) */
/* ------------------------------------------------------------------ */
.count { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/*  Custom cursor (desktop, fine pointer only)                       */
/* ------------------------------------------------------------------ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--purple);
  transition: opacity .3s ease;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(139, 92, 246, 0.55);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), opacity .3s ease;
}
.cursor-ring.hovering {
  width: 56px; height: 56px;
  border-color: rgba(59, 130, 246, 0.8);
  background: rgba(139, 92, 246, 0.06);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ------------------------------------------------------------------ */
/*  Page load intro                                                  */
/* ------------------------------------------------------------------ */
.nav, .hero-inner > * { animation: fadeUp .9s var(--ease) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .15s; }
.hero-inner > *:nth-child(3) { animation-delay: .25s; }
.hero-inner > *:nth-child(4) { animation-delay: .35s; }
.hero-inner > *:nth-child(5) { animation-delay: .45s; }

/* Tilt hover — small scale + lift already on .card; add gloss follow */
.tilt { transition: transform .3s var(--ease); }

/* ------------------------------------------------------------------ */
/*  Reduced 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;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .scroll-cue { display: none; }
}