/* ============================================
   ELITE FITNESS GYM - ANIMATIONS
   ============================================ */

/* ---- Power-Up Entry Flash ---- */
@keyframes powerUpFlash {
  0% {
    opacity: 1;
    background: radial-gradient(circle, rgba(240, 138, 36, 0.9) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(240, 138, 36, 0.8) 60%, rgba(5, 5, 5, 1) 100%);
  }
  30% {
    opacity: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(240, 138, 36, 0.7) 40%, rgba(5, 5, 5, 1) 100%);
  }
  60% {
    opacity: 0.6;
    background: radial-gradient(circle, rgba(240, 138, 36, 0.5) 0%, rgba(5, 5, 5, 1) 70%);
  }
  100% {
    opacity: 0;
    background: transparent;
    pointer-events: none;
  }
}

.power-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: var(--z-powerup);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: powerUpFlash 1.8s ease-out forwards;
  pointer-events: all;
}

.power-up-overlay.done {
  display: none;
}

.power-up-logo {
  width: 200px;
  height: auto;
  animation: logoReveal 1.8s ease-out forwards;
  filter: drop-shadow(0 0 30px rgba(240, 138, 36, 0.8));
}

@keyframes logoReveal {
  0% {
    transform: scale(0.3);
    opacity: 0;
    filter: drop-shadow(0 0 60px rgba(240, 138, 36, 1)) brightness(3);
  }
  30% {
    transform: scale(1.3);
    opacity: 1;
    filter: drop-shadow(0 0 80px rgba(240, 138, 36, 1)) brightness(2);
  }
  60% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 40px rgba(240, 138, 36, 0.8)) brightness(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    filter: drop-shadow(0 0 0px transparent) brightness(1);
  }
}

/* ---- Pulse Glow ---- */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px var(--primary-glow), 0 0 30px rgba(240, 138, 36, 0.2);
  }
  50% {
    box-shadow: 0 0 30px var(--primary-glow), 0 0 60px rgba(240, 138, 36, 0.4);
  }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ---- Float Animation ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* ---- Gradient Shift ---- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

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

.shimmer {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(240, 138, 36, 0.15) 50%, 
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* ---- Spin ---- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- X-Shape Crossing ---- */
@keyframes crossLeft {
  0% {
    transform: translateX(-120%) rotate(-15deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%) rotate(15deg);
    opacity: 0;
  }
}

@keyframes crossRight {
  0% {
    transform: translateX(120%) rotate(15deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(-120%) rotate(-15deg);
    opacity: 0;
  }
}

.x-cross-section {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) 0;
  min-height: 200px;
}

.x-line {
  position: absolute;
  width: 150%;
  height: 3px;
  background: var(--gradient-primary);
  top: 50%;
  left: -25%;
  box-shadow: var(--glow-md);
}

.x-line--left {
  animation: crossLeftLine 4s ease-in-out infinite;
}

.x-line--right {
  animation: crossRightLine 4s ease-in-out infinite;
}

@keyframes crossLeftLine {
  0%, 100% { transform: rotate(-12deg) scaleX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: rotate(-12deg) scaleX(1); opacity: 1; }
  90% { opacity: 1; }
}

@keyframes crossRightLine {
  0%, 100% { transform: rotate(12deg) scaleX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: rotate(12deg) scaleX(1); opacity: 1; }
  90% { opacity: 1; }
}

.x-text {
  position: absolute;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 5rem);
  color: var(--text-primary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
}

.x-text--left {
  animation: crossLeft 6s ease-in-out infinite;
}

.x-text--right {
  animation: crossRight 6s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* ---- Hero Slide Transitions ---- */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ---- Badge Float Orbit ---- */
@keyframes orbitFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -15px) rotate(2deg); }
  50% { transform: translate(-5px, -25px) rotate(-1deg); }
  75% { transform: translate(-15px, -10px) rotate(1deg); }
}

@keyframes orbitFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-15px, -10px) rotate(-2deg); }
  50% { transform: translate(10px, -20px) rotate(1deg); }
  75% { transform: translate(5px, 5px) rotate(-1deg); }
}

@keyframes orbitFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, 5px) rotate(1deg); }
  50% { transform: translate(5px, -15px) rotate(-2deg); }
  75% { transform: translate(-10px, -5px) rotate(1deg); }
}

/* ---- Card Glow Border ---- */
@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(240, 138, 36, 0.2);
  }
  50% {
    border-color: rgba(240, 138, 36, 0.6);
  }
}

/* ---- Energy Ripple ---- */
@keyframes energyRipple {
  0% {
    transform: scale(0.8);
    opacity: 1;
    box-shadow: 0 0 0 0 var(--primary-glow);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    box-shadow: 0 0 0 30px transparent;
  }
}

/* ---- Slide Up Stagger (for lists) ---- */
@keyframes slideUpStagger {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Title Glitch (Anime Style) ---- */
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

/* ---- Background Particles Drift ---- */
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -50px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* ---- Neon Button Glow Pulse ---- */
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--primary-glow),
                0 0 10px var(--primary-glow),
                0 0 20px rgba(240, 138, 36, 0.3);
  }
  50% {
    box-shadow: 0 0 10px var(--primary-glow),
                0 0 20px var(--primary-glow),
                0 0 40px rgba(240, 138, 36, 0.5),
                0 0 80px rgba(240, 138, 36, 0.2);
  }
}

/* ---- Scale In ---- */
@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---- Count Up Effect (via JS) ---- */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ---- Hero Image Ken Burns ---- */
@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* ============================================
   ELITE CURSOR - Dot + Ring Follower
   ============================================ */
.elite-cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  box-shadow: 0 0 6px var(--primary-glow);
  mix-blend-mode: screen;
}

.elite-cursor-dot.hovering {
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.elite-cursor-ring {
  position: fixed;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(240, 138, 36, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s,
              border-width 0.3s,
              background 0.3s;
  mix-blend-mode: screen;
}

.elite-cursor-ring.hovering {
  width: 70px;
  height: 70px;
  border-color: rgba(240, 138, 36, 0.8);
  border-width: 2px;
  background: rgba(240, 138, 36, 0.06);
  box-shadow: 0 0 25px rgba(240, 138, 36, 0.15), inset 0 0 15px rgba(240, 138, 36, 0.05);
}

/* Logo Ghost inside cursor ring */
.elite-cursor-logo {
  position: fixed;
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(240, 138, 36, 0.6));
}

.elite-cursor-logo.visible {
  opacity: 0.7;
  animation: cursorLogoSpin 3s linear infinite;
}

@keyframes cursorLogoSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* ============================================
   CLICK BURST - Logo Particles
   ============================================ */
.click-burst-particle {
  position: fixed;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
  z-index: 99996;
  transform: translate(-50%, -50%);
  animation: burstOut 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 4px rgba(240, 138, 36, 0.8));
}

@keyframes burstOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(var(--scale, 0.5));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 180deg)) scale(0);
  }
}

/* ============================================
   LOGO WATERMARK - Background Parallax
   ============================================ */
.logo-watermark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  will-change: transform;
  filter: grayscale(0.5);
}

.logo-watermark--lg {
  width: 400px;
  height: auto;
}

.logo-watermark--md {
  width: 200px;
  height: auto;
}

.logo-watermark--sm {
  width: 100px;
  height: auto;
}

/* ============================================
   LOGO SECTION DIVIDER
   ============================================ */
.logo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  overflow: hidden;
}

.logo-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 138, 36, 0.3), transparent);
}

.logo-divider__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.4;
  animation: dividerPulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(240, 138, 36, 0.4));
}

@keyframes dividerPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
    filter: drop-shadow(0 0 5px rgba(240, 138, 36, 0.2));
  }
  50% {
    transform: scale(1.15) rotate(10deg);
    opacity: 0.6;
    filter: drop-shadow(0 0 20px rgba(240, 138, 36, 0.6));
  }
}

/* Scroll-triggered spin for divider */
.logo-divider__icon.revealed {
  animation: dividerRevealSpin 1s cubic-bezier(0.22, 1, 0.36, 1) forwards, dividerPulse 3s ease-in-out 1s infinite;
}

@keyframes dividerRevealSpin {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.4;
  }
}

/* ============================================
   FLOATING LOGO PARTICLES (Background Drift)
   ============================================ */
.logo-float-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.logo-float {
  position: absolute;
  width: var(--size, 30px);
  height: var(--size, 30px);
  object-fit: contain;
  opacity: 0.035;
  pointer-events: none;
  animation: logoDrift var(--duration, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 5px rgba(240, 138, 36, 0.2));
}

@keyframes logoDrift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(var(--drift-x, 40px), var(--drift-y, -30px)) rotate(90deg) scale(1.1);
  }
  50% {
    transform: translate(calc(var(--drift-x, 40px) * -0.5), calc(var(--drift-y, -30px) * -1.5)) rotate(180deg) scale(0.9);
  }
  75% {
    transform: translate(calc(var(--drift-x, 40px) * -1), calc(var(--drift-y, -30px) * 0.5)) rotate(270deg) scale(1.05);
  }
}

/* ============================================
   NAVBAR LOGO EFFECTS
   ============================================ */
.navbar__logo img {
  transition: filter 0.3s ease, transform 0.3s ease;
  animation: logoBreathing 4s ease-in-out infinite;
}

@keyframes logoBreathing {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(240, 138, 36, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(240, 138, 36, 0.7));
  }
}

.navbar__logo img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 20px rgba(240, 138, 36, 0.9)) !important;
}

.navbar__logo img.logo-burst {
  animation: logoBurstFlash 0.6s ease-out forwards;
}

@keyframes logoBurstFlash {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(240, 138, 36, 0.5));
  }
  30% {
    transform: scale(1.4);
    filter: drop-shadow(0 0 40px rgba(240, 138, 36, 1)) brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 3px rgba(240, 138, 36, 0.3));
  }
}

/* ============================================
   FOOTER LOGO ORBITING GLOW
   ============================================ */
.footer__logo img {
  animation: logoBreathing 4s ease-in-out infinite;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.footer__logo img:hover {
  animation: footerLogoSpin 0.8s ease-out forwards;
}

@keyframes footerLogoSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(15deg) scale(1.15); filter: drop-shadow(0 0 25px rgba(240, 138, 36, 0.9)); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ============================================
   HERO LOGO BADGE (background brand stamp)
   ============================================ */
.hero__logo-stamp {
  position: absolute;
  right: 5%;
  bottom: 15%;
  width: 200px;
  height: 200px;
  object-fit: contain;
  opacity: 0.06;
  animation: stampRotate 30s linear infinite;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 15px rgba(240, 138, 36, 0.3));
}

@keyframes stampRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   SECTION LOGO CORNER MARKS
   ============================================ */
.logo-corner {
  position: absolute;
  width: 50px;
  height: 50px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.05;
  z-index: 0;
}

.logo-corner--tl { top: 2rem; left: 2rem; }
.logo-corner--tr { top: 2rem; right: 2rem; transform: scaleX(-1); }
.logo-corner--bl { bottom: 2rem; left: 2rem; transform: scaleY(-1); }
.logo-corner--br { bottom: 2rem; right: 2rem; transform: scale(-1, -1); }

/* ============================================
   LOADING SHIMMER ON CARDS (with logo pattern)
   ============================================ */
/* Pre-existing rotating border effect - no override needed */

/* Hide old canvas cursor */
#cursor-canvas {
  display: none !important;
}

/* Desktop only for custom cursor */
@media (max-width: 900px) {
  .elite-cursor-dot,
  .elite-cursor-ring,
  .elite-cursor-logo {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }
}