/* ================================================================
   HMWorkout — animations.css
   All Keyframes, Transitions & Animation Utility Classes
   ================================================================ */

/* ── Keyframes ───────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Floating animation — hero elements */
@keyframes float {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1deg); }
  66%       { transform: translateY(-6px)  rotate(-1deg); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}

/* Pulse glow — CTA buttons, timers */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(255,107,26,0.35); }
  50%       { box-shadow: 0 8px 60px rgba(255,107,26,0.70); }
}

@keyframes pulseGlowBlue {
  0%, 100% { box-shadow: 0 8px 32px rgba(21,87,255,0.35); }
  50%       { box-shadow: 0 8px 60px rgba(21,87,255,0.70); }
}

@keyframes pulseRing {
  0%   { transform: scale(1);    opacity: 1;   }
  100% { transform: scale(1.5);  opacity: 0;   }
}

/* Countdown ring */
@keyframes countdownShrink {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 502; }
}

/* Shimmer — skeleton loading */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* Counter — numbers counting up */
@keyframes counterPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

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

/* Confetti particles */
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg);    opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg);  opacity: 0; }
}
@keyframes confettiSway {
  0%, 100% { margin-left: 0; }
  25%       { margin-left: 30px; }
  75%       { margin-left: -30px; }
}

/* Hero gradient mesh animation */
@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 10px) scale(0.95); }
}

/* Streak flame */
@keyframes flamePulse {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.15) scaleX(0.95); }
}

/* Progress bar fill */
@keyframes progressFill {
  from { width: 0%; }
}

/* Toast in */
@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

/* Badge pop */
@keyframes badgePop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* Staggered nav items */
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animation Utility Classes ──────────────────────────────── */

.anim-fadeIn        { animation: fadeIn        0.6s ease forwards; }
.anim-fadeInUp      { animation: fadeInUp      0.7s cubic-bezier(0.4,0,0.2,1) forwards; }
.anim-fadeInDown    { animation: fadeInDown    0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
.anim-fadeInLeft    { animation: fadeInLeft    0.7s cubic-bezier(0.4,0,0.2,1) forwards; }
.anim-fadeInRight   { animation: fadeInRight   0.7s cubic-bezier(0.4,0,0.2,1) forwards; }
.anim-scaleIn       { animation: scaleIn       0.5s cubic-bezier(0.4,0,0.2,1) forwards; }
.anim-scaleInBounce { animation: scaleInBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.anim-float         { animation: float         5s ease-in-out infinite; }
.anim-floatSlow     { animation: floatSlow     7s ease-in-out infinite; }
.anim-spin          { animation: spin          1.2s linear infinite; }
.anim-pulseGlow     { animation: pulseGlow     2.5s ease-in-out infinite; }
.anim-pulseGlowBlue { animation: pulseGlowBlue 2.5s ease-in-out infinite; }
.anim-flame         { animation: flamePulse    1.5s ease-in-out infinite; }

/* Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Start hidden for JS-triggered animations */
.anim-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.anim-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Skeleton Loading ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-raised) 25%,
    var(--border)    50%,
    var(--bg-raised) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--r-sm);
}
html.dark .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 600px 100%;
}

/* ── Page Load Sequence ─────────────────────────────────────── */
.page-enter { animation: fadeIn 0.4s ease; }

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.19s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.26s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.33s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.40s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   LUXURY ANIMATION ENHANCEMENTS — v2.0
   Premium micro-interactions and effects
   ================================================================ */

/* ── Gradient Text Shimmer ───────────────────────────────────── */
@keyframes gradientShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-shimmer {
  background: linear-gradient(90deg, #1557FF, #FF6B1A, #F5B731, #1557FF);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShimmer 4s linear infinite;
}

/* ── Glow Border on hover ────────────────────────────────────── */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(21,87,255,0.3); }
  50%       { box-shadow: 0 0 30px rgba(21,87,255,0.7), 0 0 60px rgba(21,87,255,0.3); }
}
.glow-on-hover:hover { animation: borderGlow 2s ease-in-out infinite; }

/* ── Number Count Up Animation ───────────────────────────────── */
@keyframes numberPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); color: var(--c-orange); }
  100% { transform: scale(1); }
}
.number-pop { animation: numberPulse 0.4s ease; }

/* ── Floating Dots Background ────────────────────────────────── */
@keyframes dotFloat {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  25%       { transform: translateY(-15px) translateX(8px); opacity: 0.6; }
  50%       { transform: translateY(-8px) translateX(-5px); opacity: 0.4; }
  75%       { transform: translateY(-20px) translateX(10px); opacity: 0.7; }
}

/* ── Card Entrance from bottom ───────────────────────────────── */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.card-entrance { animation: cardEntrance 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
.card-entrance.d1 { animation-delay: 0.05s; }
.card-entrance.d2 { animation-delay: 0.12s; }
.card-entrance.d3 { animation-delay: 0.19s; }
.card-entrance.d4 { animation-delay: 0.26s; }

/* ── Luxury Page Transition ──────────────────────────────────── */
@keyframes luxuryPageIn {
  from { opacity: 0; filter: blur(4px); transform: scale(0.98); }
  to   { opacity: 1; filter: blur(0);   transform: scale(1);    }
}
.luxury-page-in { animation: luxuryPageIn 0.5s cubic-bezier(0.4,0,0.2,1); }

/* ── Pulse Ring (notification dots, online status) ───────────── */
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: pulseRing 1.5s ease-out infinite;
}

/* ── Typing Cursor ───────────────────────────────────────────── */
@keyframes typingCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  animation: typingCursor 1s step-end infinite;
  margin-left: 2px;
  color: var(--c-blue);
}

/* ── Button Press Depth Effect ───────────────────────────────── */
.btn-depth {
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.btn-depth:hover  { transform: translateY(-3px) !important; }
.btn-depth:active { transform: translateY(1px) scale(0.98) !important; box-shadow: none !important; }

/* ── Skeleton with shine ─────────────────────────────────────── */
@keyframes skeletonShine {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-luxury {
  background: linear-gradient(
    100deg,
    var(--bg-raised) 30%,
    rgba(255,255,255,0.1) 50%,
    var(--bg-raised) 70%
  );
  background-size: 800px 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

/* ── Hover Lift with Shadow ──────────────────────────────────── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1),
              box-shadow 0.3s ease !important;
}
.hover-lift:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(7,26,62,0.18) !important;
}
html.dark .hover-lift:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important;
}

/* ── Gradient Card Border ────────────────────────────────────── */
.gradient-border {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-lg);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--r-lg) + 1.5px);
  background: linear-gradient(135deg, var(--c-blue), var(--c-orange), var(--c-blue));
  background-size: 200% 200%;
  animation: gradientShimmer 4s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gradient-border:hover::before { opacity: 1; }

/* ── Stats Counter Large ─────────────────────────────────────── */
.stat-counter-lg {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--fw-black);
  line-height: 1;
  background: var(--grad-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Stagger on scroll reveal ────────────────────────────────── */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.stagger-reveal.revealed > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.stagger-reveal.revealed > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.stagger-reveal.revealed > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.16s; }
.stagger-reveal.revealed > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.24s; }
.stagger-reveal.revealed > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.32s; }
.stagger-reveal.revealed > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.40s; }

/* ── Input focus glow ────────────────────────────────────────── */
.form-input:focus {
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 4px rgba(21,87,255,0.12),
              0 2px 12px rgba(21,87,255,0.15) !important;
}

/* ── Hero title gradient animation ──────────────────────────── */
@keyframes heroGradient {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}
.hero-title-accent {
  background: linear-gradient(90deg, #FF6B1A, #F5B731, #FF6B1A) !important;
  background-size: 200% auto !important;
  animation: heroGradient 3s ease infinite !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Card glass effect luxury ────────────────────────────────── */
html.dark .card,
html.dark .card-feature,
html.dark .dash-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255,255,255,0.07);
}
html.dark .card:hover,
html.dark .card-feature:hover,
html.dark .dash-card:hover {
  border-color: rgba(21,87,255,0.3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(21,87,255,0.15);
}

/* ── Indian Flag Luxury Animations ── */
@keyframes float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}
}
@keyframes pulseGlow {
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,0,0.4)}
  50%{box-shadow:0 0 0 15px rgba(255,107,0,0)}
}
@keyframes shimmer {
  0%{background-position:-600px 0}
  100%{background-position:600px 0}
}
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleInBounce { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
@keyframes toastIn { from{opacity:0;transform:translateX(100px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(100px)} }
@keyframes counterPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes flamePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes gradientShimmer {
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
@keyframes saffronPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,0,0.5)}
  50%{box-shadow:0 0 0 20px rgba(255,107,0,0)}
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}
}

/* Scroll reveal */
.anim-on-scroll { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.anim-on-scroll.in-view { opacity:1; transform:translateY(0); }
.anim-on-scroll.delay-100{transition-delay:.1s}
.anim-on-scroll.delay-200{transition-delay:.2s}
.anim-on-scroll.delay-300{transition-delay:.3s}

/* Entry anims */
.anim-fadeInDown { animation:fadeInDown 0.6s cubic-bezier(0.4,0,0.2,1) both; }
.anim-fadeInUp   { animation:fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both; }
.anim-fadeIn     { animation:fadeIn 0.4s ease both; }
.anim-scaleIn    { animation:scaleInBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-spin       { animation:spin 1s linear infinite; }
.anim-pulseGlow  { animation:saffronPulse 2s ease-in-out infinite; }
.delay-100{animation-delay:.1s} .delay-200{animation-delay:.2s} .delay-300{animation-delay:.3s}

@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }

/* Stagger */
.stagger-children > *:nth-child(1){animation-delay:.05s}
.stagger-children > *:nth-child(2){animation-delay:.1s}
.stagger-children > *:nth-child(3){animation-delay:.15s}
.stagger-children > *:nth-child(4){animation-delay:.2s}
.stagger-children > *:nth-child(5){animation-delay:.25s}
.stagger-children > *:nth-child(6){animation-delay:.3s}

/* Hover lift for cards */
.hover-lift{transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1),box-shadow 0.3s ease!important}
.hover-lift:hover{transform:translateY(-6px)!important;box-shadow:0 16px 48px rgba(255,107,0,0.18)!important}