/* ============================================================
   Gym SaaS — Animations & Micro-interactions
   White/Red theme compatible
   ============================================================ */

/* ── Fade-in Page Transitions ── */
.fade-in { animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

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

/* ── Slide-in ── */
.slide-in { animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

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

/* ── Card Hover 3D Lift ── */
.lift-hover {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease, border-color 0.35s ease;
}
.lift-hover:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 48px rgba(225, 29, 72, 0.14),
                0 4px 12px rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.30) !important;
}

/* ── Shimmer Skeleton ── */
.shimmer {
    background: linear-gradient(90deg,
        rgba(225,29,72,0) 0%,
        rgba(225,29,72,0.06) 50%,
        rgba(225,29,72,0) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ── Red Pulsing CTA Button ── */
.gym-pulse { animation: gymPulse 2s infinite alternate; }

@keyframes gymPulse {
    0%   { box-shadow: 0 0 6px  rgba(225,29,72,0.25), 0 0 12px rgba(225,29,72,0.12); }
    100% { box-shadow: 0 0 22px rgba(225,29,72,0.55), 0 0 40px rgba(249,115,22,0.25); }
}

/* ── Rest Timer Pulse ── */
.timer-pulse { animation: timerPulse 1s infinite alternate; }

@keyframes timerPulse {
    0%   { transform: scale(1);    text-shadow: 0 0 5px  rgba(225,29,72,0.3); }
    100% { transform: scale(1.06); text-shadow: 0 0 22px rgba(225,29,72,0.8); }
}

/* ── Ripple Button Effect ── */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn .ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    background-color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ── Progress Bar Fill ── */
.progress-fill { animation: progressFill 1.2s ease-out forwards; }
@keyframes progressFill { from { width: 0%; } }

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* ================================================================
   🏋️ GYM MOTIVATIONAL CARTOON ANIMATIONS
   ================================================================ */

/* ── Floating/Levitate base ── */
@keyframes floatAnim {
    0%   { transform: translateY(0px) rotate(0deg);   }
    50%  { transform: translateY(-12px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg);   }
}

/* ── Muscle Flex Arm ── */
.cartoon-flex {
    display: inline-block;
    animation: flexArm 1.4s ease-in-out infinite alternate;
    transform-origin: bottom center;
}
@keyframes flexArm {
    0%   { transform: scaleY(1) rotate(-5deg); }
    40%  { transform: scaleY(1.08) rotate(3deg); }
    70%  { transform: scaleY(0.95) rotate(-2deg); }
    100% { transform: scaleY(1.05) rotate(5deg); }
}

/* ── Dumbbell Bounce & Rotate ── */
.cartoon-dumbbell {
    display: inline-block;
    animation: dumbbellBounce 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
@keyframes dumbbellBounce {
    0%, 100% { transform: translateY(0) rotate(0deg);   }
    25%       { transform: translateY(-18px) rotate(12deg);  }
    50%       { transform: translateY(0) rotate(0deg);   }
    75%       { transform: translateY(-10px) rotate(-8deg); }
}

/* ── Heart / Energy Pulse ── */
.cartoon-heart {
    display: inline-block;
    animation: heartPump 0.9s ease-in-out infinite alternate;
}
@keyframes heartPump {
    0%   { transform: scale(1);    }
    100% { transform: scale(1.18); }
}

/* ── Running Figure ── */
.cartoon-runner {
    display: inline-block;
    animation: runnerBounce 0.6s linear infinite alternate;
}
@keyframes runnerBounce {
    0%   { transform: translateY(0) skewX(-2deg);  }
    100% { transform: translateY(-6px) skewX(2deg); }
}

/* ── BMI Calculator Scale Pulse ── */
.calc-pulse {
    animation: calcPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes calcPop {
    0%   { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Quote Text Typewriter fade ── */
.quote-fade {
    animation: quoteFade 0.5s ease forwards;
}
@keyframes quoteFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Spinning ring loader ── */
.spin-loader {
    width: 28px; height: 28px;
    border: 3px solid rgba(225,29,72,0.15);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── SVG Cartoon Gym Figure styles ── */
.svg-gym-hero {
    animation: floatAnim 4s ease-in-out infinite;
    filter: drop-shadow(0 12px 24px rgba(225,29,72,0.18));
}

/* ── Stagger fade-in children ── */
.stagger-children > * {
    opacity: 0;
    animation: fadeIn 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* ── Number count-up shimmer ── */
.count-up-num {
    display: inline-block;
    animation: countPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes countPop {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Badge ping indicator ── */
.ping-dot {
    position: relative;
}
.ping-dot::after {
    content: '';
    position: absolute;
    top: -2px; right: -2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--primary);
    animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}