@import './variables.css';

/* Global Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  color: var(--neutral-body);
  background-color: var(--neutral-light);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--neutral-dark);
  font-weight: 800;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-heading);
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography Utilities */
.text-gradient-green {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, var(--secondary-gold) 0%, #e5b016 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hidden-mobile {
  display: inline-block;
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-green {
  background-color: var(--primary-green-soft);
  color: var(--primary-green-dark);
  border: 1px solid rgba(40, 120, 68, 0.2);
}

.badge-gold {
  background-color: var(--secondary-gold-soft);
  color: var(--accent-brown);
  border: 1px solid rgba(249, 202, 43, 0.4);
}

.badge-red {
  background-color: var(--accent-red-soft);
  color: var(--accent-red-dark);
  border: 1px solid rgba(199, 46, 49, 0.2);
}

/* Keyframe Animations */
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 202, 43, 0.5); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 16px rgba(249, 202, 43, 0); }
}

@keyframes floatLeaf {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(8px, -15px) rotate(5deg); }
  50% { transform: translate(-5px, -25px) rotate(-3deg); }
  75% { transform: translate(-12px, -10px) rotate(4deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

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

@keyframes loadingBar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(50%); }
  100% { transform: translateX(200%); }
}

.anim-bounce {
  animation: bounceSlow 4s ease-in-out infinite;
}

.anim-pulse {
  animation: pulseGlow 2.5s infinite;
}

.anim-wiggle:hover {
  animation: wiggle 0.5s ease-in-out;
}

/* Character Motion Keyframes */
@keyframes squadSprintDash {
  0% { transform: translateX(-40px) scale(0.9) skewX(-10deg); opacity: 0; }
  30% { transform: translateX(15px) scale(1.1) skewX(5deg); opacity: 1; }
  60% { transform: translateX(-5px) scale(1) skewX(0); }
  100% { transform: translateX(0) scale(1) skewX(0); }
}

@keyframes somersaultFlip360 {
  0% { transform: rotate(0deg) scale(0.8) translateY(0); }
  50% { transform: rotate(180deg) scale(1.25) translateY(-30px); }
  100% { transform: rotate(360deg) scale(1) translateY(0); }
}

@keyframes powerStomp {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.2) translateY(-20px); }
  60% { transform: scale(0.95) translateY(5px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes tigerPounce {
  0% { transform: scale(0.9) rotate(-5deg); }
  40% { transform: scale(1.2) rotate(10deg) translateY(-25px); }
  70% { transform: scale(1.05) rotate(-2deg) translateY(0); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes floatMascot {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes squadParadeLoop {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulseFocusRing {
  0% { box-shadow: 0 0 0 0 rgba(40, 120, 68, 0.7); }
  50% { box-shadow: 0 0 0 14px rgba(40, 120, 68, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(40, 120, 68, 0); }
}

@keyframes anchorTravelToSearch {
  0% {
    transform: translateY(-140px) scale(1.6) rotate(-20deg);
    opacity: 0;
  }
  30% {
    transform: translateY(-80px) scale(1.5) rotate(15deg);
    opacity: 1;
  }
  70% {
    transform: translateY(-20px) scale(1.2) rotate(-8deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes oneLegHopAnimation {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-16px) rotate(-12deg); }
  50% { transform: translateY(-32px) rotate(10deg); }
  75% { transform: translateY(-12px) rotate(-5deg); }
}

/* ==========================================================================
   MASCOT INTERACTIVE ANIMATIONS & KEYFRAMES (GPU HARDWARE ACCELERATED 60FPS)
   ========================================================================== */

.hero-mascot-img,
.section-header img,
.program-mascot-img {
  will-change: transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
}

@keyframes floatMascot {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceSlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

@keyframes squadParadeLoop {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Rollo 5X Somersault Flip - 60fps GPU Hardware Accelerated */
@keyframes somersaultPopOut5X {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 99999;
  }
  25% {
    transform: translate3d(0, -60px, 0) scale3d(2.8, 2.8, 1) rotate3d(0, 0, 1, 90deg);
    filter: drop-shadow(0 15px 25px rgba(40, 120, 68, 0.35));
    z-index: 99999;
  }
  50% {
    transform: translate3d(0, -120px, 0) scale3d(4.5, 4.5, 1) rotate3d(0, 0, 1, 180deg);
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
    z-index: 99999;
  }
  75% {
    transform: translate3d(0, -60px, 0) scale3d(2.8, 2.8, 1) rotate3d(0, 0, 1, 270deg);
    filter: drop-shadow(0 15px 25px rgba(40, 120, 68, 0.35));
    z-index: 99999;
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 360deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 1;
  }
}

/* Sprinty 5X Sprint Dash - 60fps GPU Hardware Accelerated */
@keyframes sprintPopOut5X {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 99999;
  }
  30% {
    transform: translate3d(-30px, 30px, 0) scale3d(3.2, 3.2, 1);
    filter: drop-shadow(0 12px 20px rgba(234, 179, 8, 0.4));
    z-index: 99999;
  }
  65% {
    transform: translate3d(0, 65px, 0) scale3d(4.2, 4.2, 1);
    filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.5));
    z-index: 99999;
  }
  85% {
    transform: translate3d(20px, 30px, 0) scale3d(2.5, 2.5, 1);
    filter: drop-shadow(0 12px 20px rgba(234, 179, 8, 0.35));
    z-index: 99999;
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 1;
  }
}

/* Anchor 5X Power Stomp Travel - 60fps GPU Hardware Accelerated */
@keyframes anchorTravelPopOut5X {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 99999;
  }
  35% {
    transform: translate3d(-40px, 50px, 0) scale3d(4.5, 4.5, 1) rotate3d(0, 0, 1, -10deg);
    filter: drop-shadow(0 25px 40px rgba(2, 132, 199, 0.5));
    z-index: 99999;
  }
  70% {
    transform: translate3d(-70px, 100px, 0) scale3d(3, 3, 1) rotate3d(0, 0, 1, 5deg);
    filter: drop-shadow(0 20px 30px rgba(2, 132, 199, 0.4));
    z-index: 99999;
  }
  100% {
    transform: translate3d(-85px, 140px, 0) scale3d(1.2, 1.2, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 6px 14px rgba(2, 132, 199, 0.4));
    z-index: 99999;
  }
}

/* Stryker 5X Power Pounce - 60fps GPU Hardware Accelerated */
@keyframes tigerPouncePopOut5X {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 99999;
  }
  30% {
    transform: translate3d(-30px, 60px, 0) scale3d(4.5, 4.5, 1) rotate3d(0, 0, 1, 8deg);
    filter: drop-shadow(0 25px 40px rgba(220, 38, 38, 0.5));
    z-index: 99999;
  }
  70% {
    transform: translate3d(30px, 110px, 0) scale3d(2.8, 2.8, 1) rotate3d(0, 0, 1, -5deg);
    filter: drop-shadow(0 20px 30px rgba(220, 38, 38, 0.4));
    z-index: 99999;
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 1;
  }
}

/* Hero Grand Appearance - 60fps GPU Hardware Accelerated */
@keyframes grandAppearanceHero {
  0% {
    transform: translate3d(0, -60px, 0) scale3d(5.5, 5.5, 1) rotate3d(0, 0, 1, -8deg);
    filter: drop-shadow(0 35px 70px rgba(0, 0, 0, 0.6));
    opacity: 0;
    z-index: 99999;
  }
  40% {
    transform: translate3d(0, -35px, 0) scale3d(4.8, 4.8, 1) rotate3d(0, 0, 1, 5deg);
    filter: drop-shadow(0 40px 75px rgba(40, 120, 68, 0.45));
    opacity: 1;
    z-index: 99999;
  }
  75% {
    transform: translate3d(0, -15px, 0) scale3d(2.2, 2.2, 1) rotate3d(0, 0, 1, -2deg);
    filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.3));
    opacity: 1;
    z-index: 99999;
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.15));
    opacity: 1;
    z-index: 1;
  }
}

/* Stryker Fly-In From Left - 60fps GPU Hardware Accelerated */
@keyframes strykerFlyInFromLeft {
  0% {
    transform: translate3d(-100vw, -30px, 0) scale3d(3.2, 3.2, 1) rotate3d(0, 0, 1, -12deg);
    filter: drop-shadow(-25px 20px 45px rgba(220, 38, 38, 0.55));
    opacity: 0;
    z-index: 99999;
  }
  40% {
    transform: translate3d(-120px, -15px, 0) scale3d(2.0, 2.0, 1) rotate3d(0, 0, 1, 6deg);
    filter: drop-shadow(-15px 15px 35px rgba(220, 38, 38, 0.45));
    opacity: 1;
    z-index: 99999;
  }
  75% {
    transform: translate3d(15px, -4px, 0) scale3d(1.08, 1.08, 1) rotate3d(0, 0, 1, -2deg);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
    opacity: 1;
    z-index: 99999;
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.15));
    opacity: 1;
    z-index: 1;
  }
}

/* 3D Card Flip Effect for Founders (No Hover Loop Glitch) */
.founder-flip-card {
  perspective: 1000px;
  cursor: pointer;
  min-height: 420px;
  user-select: none;
}

.founder-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
}

.founder-flip-card.flipped .founder-card-inner {
  transform: rotateY(180deg);
}

.founder-card-front, .founder-card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
}

.founder-card-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  overflow: hidden;
  background: var(--neutral-dark);
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Glass Card Helper */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
  }
}

/* =========================================================================
   Interactive Mascot Helper Keyframes (Step 2)
   ========================================================================= */
@keyframes mascotHappyBounce {
  0% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(-18px) scale(0.95, 1.08); }
  40% { transform: translateY(0) scale(1.08, 0.92); }
  60% { transform: translateY(-12px) scale(0.98, 1.04); }
  80% { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes pointingArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes glowRingPulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 120, 68, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(40, 120, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 120, 68, 0); }
}

.anim-happy-bounce {
  animation: mascotHappyBounce 0.8s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

.anim-pointing-arrow {
  animation: pointingArrowBounce 1.2s ease-in-out infinite;
}

.anim-selected-program-ring {
  border-color: var(--primary-green) !important;
  animation: glowRingPulse 2s infinite;
}