/* ==========================================
   PAGE TRANSITIONS
   ========================================== */
.screen {
    animation: screenFadeIn 0.3s ease-out;
}

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

/* ==========================================
   CARD ANIMATIONS
   ========================================== */
.stat-card,
.workout-card,
.exercise-card,
.template-card,
.history-card {
    animation: cardSlideIn 0.1s ease-out;
    animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

.exercise-card:nth-child(1) { animation-delay: 0.02s; }
.exercise-card:nth-child(2) { animation-delay: 0.04s; }
.exercise-card:nth-child(3) { animation-delay: 0.06s; }
.exercise-card:nth-child(4) { animation-delay: 0.08s; }
.exercise-card:nth-child(5) { animation-delay: 0.1s; }
.exercise-card:nth-child(6) { animation-delay: 0.12s; }
.exercise-card:nth-child(7) { animation-delay: 0.14s; }
.exercise-card:nth-child(8) { animation-delay: 0.16s; }
.exercise-card:nth-child(9) { animation-delay: 0.18s; }
.exercise-card:nth-child(10) { animation-delay: 0.2s; }

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

/* ==========================================
   WELCOME CARD ANIMATION
   ========================================== */
.welcome-card {
    animation: welcomePulse 0.6s ease-out;
}

@keyframes welcomePulse {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.welcome-icon i {
    animation: fireFlicker 2s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ==========================================
   BUTTON EFFECTS
   ========================================== */
.start-workout-btn {
    position: relative;
    overflow: hidden;
}

.start-workout-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.start-workout-btn:active::after {
    width: 300px;
    height: 300px;
}

/* Ripple effect for buttons */
.nav-item,
.filter-chip,
.set-check,
.add-set-btn,
.add-exercise-btn {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: rippleEffect 0.6s linear;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================
   MUSCLE MAP ANIMATIONS
   ========================================== */
.muscle-part {
    transition: fill 0.3s ease, filter 0.3s ease, transform 0.2s ease;
}

.muscle-part:hover {
    transform: scale(1.02);
}

.muscle-part.selected {
    animation: musclePulse 1.5s ease-in-out infinite;
}

@keyframes musclePulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--accent-primary));
    }
    50% {
        filter: drop-shadow(0 0 15px var(--accent-primary));
    }
}

/* Activity level animations */
.muscle-part.activity-light {
    animation: activityGlow 3s ease-in-out infinite;
}

.muscle-part.activity-medium {
    animation: activityGlow 2s ease-in-out infinite;
}

.muscle-part.activity-heavy {
    animation: activityGlow 1.5s ease-in-out infinite;
}

.muscle-part.activity-intense {
    animation: activityGlow 1s ease-in-out infinite;
}

@keyframes activityGlow {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* Body view transition */
.body-view {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.body-view:not(.active) {
    opacity: 0;
    transform: scale(0.95);
    position: absolute;
}

/* ==========================================
   PROGRESS BARS
   ========================================== */
.muscle-fill,
.activity-fill {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shimmer effect DISABLED */
.muscle-fill::after,
.activity-fill::after {
    display: none;
}


@keyframes setComplete {
    0% {
        background: rgba(74, 222, 128, 0.3);
    }
    100% {
        background: rgba(74, 222, 128, 0.1);
    }
}

.set-check.checked {
    animation: checkBounce 0.4s ease-out;
}

@keyframes checkBounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.set-check.checked i {
    animation: checkmarkDraw 0.3s ease-out;
}

@keyframes checkmarkDraw {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* ==========================================
   FLOATING WORKOUT BAR
   ========================================== */
.floating-workout {
    animation: floatUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes floatUp {
    0% {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.floating-timer {
    animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ==========================================
   MODAL ANIMATIONS
   ========================================== */
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    animation: modalFadeIn 0.3s ease-out;
}

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

.modal-content {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.active .modal-content {
    animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ==========================================
   REST TIMER ANIMATIONS
   ========================================== */
.timer-circle {
    animation: timerAppear 0.5s ease-out;
}

@keyframes timerAppear {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.timer-progress {
    transition: stroke-dashoffset 1s linear;
}

.timer-display {
    animation: numberPop 0.3s ease-out;
}

@keyframes numberPop {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ==========================================
   EXERCISE PICKER ANIMATION
   ========================================== */
.exercise-picker {
    animation: pickerSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pickerSlideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.picker-exercise {
    transition: all 0.2s ease;
}

.picker-exercise.selected {
    animation: selectPop 0.3s ease-out;
}

@keyframes selectPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================================
   TOAST ANIMATIONS
   ========================================== */
.toast {
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
               toastSlideOut 0.3s ease-in 2.7s forwards;
}

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

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

.toast-icon {
    animation: iconBounce 0.5s ease-out 0.2s;
}

@keyframes iconBounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================================
   CONFIRM MODAL ANIMATION
   ========================================== */
.confirm-modal.active .confirm-content {
    animation: confirmPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes confirmPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confirm-icon {
    animation: warningShake 0.5s ease-out 0.3s;
}

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

/* ==========================================
   NAV BAR ANIMATIONS
   ========================================== */
.nav-item {
    transition: all 0.2s ease;
}

.nav-item.active i {
    animation: navIconPop 0.3s ease-out;
}

@keyframes navIconPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 0 0 3px 3px;
    animation: navIndicator 0.3s ease-out;
}

@keyframes navIndicator {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 30px;
        opacity: 1;
    }
}

/* ==========================================
   FILTER CHIP ANIMATIONS
   ========================================== */
.filter-chip {
    transition: all 0.2s ease;
}

.filter-chip.active {
    animation: chipActivate 0.3s ease-out;
}

@keyframes chipActivate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================================
   SEARCH ANIMATIONS
   ========================================== */
.search-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.active .search-container {
    animation: searchDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.search-result-item {
    animation: resultFadeIn 0.3s ease-out;
    animation-fill-mode: both;
}

.search-result-item:nth-child(1) { animation-delay: 0.02s; }
.search-result-item:nth-child(2) { animation-delay: 0.04s; }
.search-result-item:nth-child(3) { animation-delay: 0.06s; }
.search-result-item:nth-child(4) { animation-delay: 0.08s; }
.search-result-item:nth-child(5) { animation-delay: 0.1s; }

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

/* ==========================================
   ACTIVE WORKOUT SCREEN
   ========================================== */
.screen.overlay.active {
    animation: workoutSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes workoutSlideUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.exercise-block {
    animation: blockSlideIn 0.4s ease-out;
    animation-fill-mode: both;
}

.exercise-block:nth-child(1) { animation-delay: 0.05s; }
.exercise-block:nth-child(2) { animation-delay: 0.1s; }
.exercise-block:nth-child(3) { animation-delay: 0.15s; }
.exercise-block:nth-child(4) { animation-delay: 0.2s; }
.exercise-block:nth-child(5) { animation-delay: 0.25s; }

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

/* ==========================================
   PROFILE ANIMATIONS
   ========================================== */
.profile-avatar {
    animation: avatarPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes avatarPop {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.profile-stat {
    animation: statCountUp 0.6s ease-out;
}

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

.profile-stat:nth-child(1) { animation-delay: 0.1s; }
.profile-stat:nth-child(2) { animation-delay: 0.2s; }
.profile-stat:nth-child(3) { animation-delay: 0.3s; }

.setting-item {
    animation: settingSlide 0.4s ease-out;
    animation-fill-mode: both;
}

.setting-item:nth-child(1) { animation-delay: 0.05s; }
.setting-item:nth-child(2) { animation-delay: 0.1s; }
.setting-item:nth-child(3) { animation-delay: 0.15s; }
.setting-item:nth-child(4) { animation-delay: 0.2s; }

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

/* ==========================================
   LOADING SKELETON
   ========================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

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

/* ==========================================
   MICRO-INTERACTIONS
   ========================================== */

/* Input focus glow */
input:focus,
select:focus {
    animation: inputFocus 0.3s ease-out;
}

@keyframes inputFocus {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(108, 92, 231, 0);
    }
}

/* Toggle switch animation */
.switch input:checked + .slider {
    animation: toggleOn 0.3s ease-out;
}

@keyframes toggleOn {
    0% {
        background: var(--bg-tertiary);
    }
    100% {
        background: var(--accent-primary);
    }
}

/* Hover lift effect */
.exercise-card:hover,
.template-card:hover,
.workout-card:hover,
.history-card:hover {
    transform: translateY(-2px) translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================
   EMPTY STATE ANIMATIONS
   ========================================== */
.empty-state i {
    animation: emptyBounce 2s ease-in-out infinite;
}

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

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */
@media (prefers-reduced-motion: no-preference) {
    .screen-content {
        scroll-behavior: smooth;
    }
}

/* ==========================================
   DARK MODE GLOW EFFECTS
   ========================================== */
.accent-glow {
    box-shadow: 0 0 30px rgba(108, 92, 231, 0.3);
}

.success-glow {
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

.warning-glow {
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
}

.error-glow {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}