/* =========================================================
   WINNGOO INDIA — SHARED ANIMATIONS
   File: assets/css/animations.css
   ========================================================= */

/* Entrance animations */

@keyframes wg-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes wg-slide-left {
  from {
    opacity: 0;
    transform: translateX(35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wg-slide-right {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wg-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes wg-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(215, 255, 100, .28);
  }
  50% {
    opacity: .85;
    box-shadow: 0 0 0 8px rgba(215, 255, 100, 0);
  }
}

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

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

/* Optional entrance helpers */

.wg-animate-fade {
  animation: wg-fade-in .8s ease both;
}

.wg-animate-up {
  animation: wg-fade-up .75s cubic-bezier(.2, .7, .2, 1) both;
}

.wg-animate-left {
  animation: wg-slide-left .75s ease both;
}

.wg-animate-right {
  animation: wg-slide-right .75s ease both;
}

.wg-animate-float {
  animation: wg-float 4s ease-in-out infinite;
}

.wg-animate-pulse {
  animation: wg-pulse 2.5s ease-in-out infinite;
}

/* Staggered entrance delays */

.wg-delay-1 { animation-delay: .1s; }
.wg-delay-2 { animation-delay: .2s; }
.wg-delay-3 { animation-delay: .3s; }
.wg-delay-4 { animation-delay: .4s; }
.wg-delay-5 { animation-delay: .5s; }

/* JavaScript scroll reveal */

.wg-reveal,
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2, .7, .2, 1);
}

.wg-reveal.wg-revealed,
[data-reveal].wg-revealed {
  opacity: 1;
  transform: translateY(0);
}

.wg-reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .7s ease, transform .7s ease;
}

.wg-reveal-left.wg-revealed {
  opacity: 1;
  transform: translateX(0);
}

.wg-reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.wg-reveal-right.wg-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered cards */

.wg-stagger > *:nth-child(1) { transition-delay: .05s; }
.wg-stagger > *:nth-child(2) { transition-delay: .12s; }
.wg-stagger > *:nth-child(3) { transition-delay: .19s; }
.wg-stagger > *:nth-child(4) { transition-delay: .26s; }
.wg-stagger > *:nth-child(5) { transition-delay: .33s; }
.wg-stagger > *:nth-child(6) { transition-delay: .40s; }

/* Hover interactions */

.wg-hover-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}

.wg-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

.wg-hover-glow {
  transition: box-shadow .3s ease, border-color .3s ease;
}

.wg-hover-glow:hover {
  border-color: rgba(215, 255, 100, .7);
  box-shadow: 0 0 24px rgba(215, 255, 100, .09);
}

/* Infinite marquee
   Duplicate the content inside .wg-marquee-track to create
   a seamless loop. */

.wg-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.wg-marquee-track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  animation: wg-marquee 28s linear infinite;
}

.wg-marquee:hover .wg-marquee-track {
  animation-play-state: paused;
}

.wg-marquee-track > * {
  flex-shrink: 0;
}

/* Animated underline */

.wg-link-underline {
  position: relative;
  display: inline-block;
}

.wg-link-underline::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

.wg-link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Loading indicator */

.wg-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wg-spin .7s linear infinite;
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .wg-animate-fade,
  .wg-animate-up,
  .wg-animate-left,
  .wg-animate-right,
  .wg-animate-float,
  .wg-animate-pulse,
  .wg-marquee-track,
  .wg-spinner {
    animation: none !important;
  }

  .wg-reveal,
  [data-reveal],
  .wg-reveal-left,
  .wg-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================
   WINNGOO INDIA — SHARED HERO ANIMATIONS
   Smooth bottom-to-top entrance
   ========================================= */

.wg-hero-rise {
  opacity: 0;
  transform: translateY(30px);
  animation: wgHeroRiseIn 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--wg-hero-delay, 0ms);
  will-change: opacity, transform;
}

@keyframes wgHeroRiseIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced-motion accessibility settings */
@media (prefers-reduced-motion: reduce) {
  .wg-hero-rise {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}