/* =========================================
   GAMD - animations.css
   Keyframes + scroll-reveal hooks
   ========================================= */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes float-bubble {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,102,255,0.4); }
  50%      { box-shadow: 0 0 0 16px rgba(0,102,255,0); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes blink {
  0%, 95%, 100% { transform: scaleY(1); }
  97%            { transform: scaleY(0.1); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.06); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes gradient-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Scroll-reveal targets */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal-left.in  { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal-right.in { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: scale(1); }

[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

/* Decorative shine text */
.shine-text {
  background: linear-gradient(90deg, #ffb800 0%, #fff 50%, #ffb800 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shine 4s linear infinite;
}

/* Hover lift utility */
.hover-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Animate on load (page hero) */
.hero-anim > * { opacity: 0; animation: fadeUp 900ms var(--ease-out) forwards; }
.hero-anim > *:nth-child(1) { animation-delay: 100ms; }
.hero-anim > *:nth-child(2) { animation-delay: 250ms; }
.hero-anim > *:nth-child(3) { animation-delay: 400ms; }
.hero-anim > *:nth-child(4) { animation-delay: 550ms; }
.hero-anim > *:nth-child(5) { animation-delay: 700ms; }
.hero-anim > *:nth-child(6) { animation-delay: 850ms; }

/* Floating elements */
.float-slow { animation: float 6s ease-in-out infinite; }
.float-med  { animation: float 4.5s ease-in-out infinite; }
.float-fast { animation: float 3s ease-in-out infinite; }
.wiggle     { animation: wiggle 2.5s ease-in-out infinite; }
.bounce-in  { animation: bounce-in 800ms var(--ease-out) both; }
.pulse      { animation: pulse-glow 2.4s ease-out infinite; }
.spin-slow  { animation: spin-slow 18s linear infinite; }

/* Hero background gradient pan */
.hero-gradient {
  background: linear-gradient(120deg, #061327 0%, #0a2540 35%, #0066ff 100%);
  background-size: 200% 200%;
  animation: gradient-pan 16s ease-in-out infinite;
}