/* ==========================================================================
   ANIMATIONS.CSS - UI/UX Motion Design & Keyframes
   ========================================================================== */

/* --- Loading Screen / Spinner --- */
.loading-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #010204 !important; /* Deeper obsidian to match logo blend */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s;
    pointer-events: none; /* Make entire screen non-clickable */
    user-select: none;
}

.loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.loader-logo-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.65);
    animation: logoIntro 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.loader-logo-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 40px rgba(127, 90, 240, 0.35));
    pointer-events: none;
    user-select: none;
}

.loader-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(15px);
    animation: textIntro 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    pointer-events: none;
}

.loader-quote {
    margin: 1.5rem 0 1.5rem 0;
    padding: 0.8rem 1.2rem;
    border-left: 3px solid var(--primary);
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 0 8px 8px 0;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    animation: quoteIntro 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
    pointer-events: none;
}

.loader-quote p.quote-text {
    color: #e2e8f0 !important;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

.loader-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    margin: 2.5rem auto 0 auto;
    opacity: 0;
    animation: 
        trackFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards,
        spin 1s linear infinite;
    box-shadow: 0 0 12px rgba(127, 90, 240, 0.2);
}

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

@keyframes logoIntro {
    0% {
        transform: scale(0.65);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes textIntro {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quoteIntro {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes trackFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes runnerFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes progressFill {
    0% { background-position: 100% 0; }
    100% { background-position: 10% 0; }
}

@keyframes runProgress {
    0% {
        left: 0;
    }
    100% {
        left: calc(100% - 24px);
    }
}

@keyframes runBobbing {
    0%, 100% {
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }
    50% {
        transform: scaleX(-1) translateY(-3px) rotate(-10deg); /* Bob up and lean forward */
    }
}

@keyframes bounceGoal {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.1); }
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(127, 90, 240, 0.15));
    }
    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 30px rgba(127, 90, 240, 0.35));
    }
}


/* --- Skeleton Loading Template --- */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--border-color) !important;
    border-color: transparent !important;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.15) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.6s infinite;
}

/* For Dark mode light sheen Adjustment */
[data-theme="dark"] .skeleton::after {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 0.03) 20%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* --- Entrance & Transitions --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

.scale-in {
    opacity: 0;
    transform: scale(0.92);
    animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Streak Fire Glow --- */
.streak-active-glow {
    position: relative;
}

.streak-active-glow::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,152,0,0.4) 0%, transparent 70%);
    z-index: -1;
    animation: pulseFire 1.5s ease-in-out infinite alternate;
}

/* --- Background Ambient Glows --- */
.ambient-glow-1 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    top: -150px;
    left: -150px;
    z-index: -2;
    pointer-events: none;
    animation: floatGlow 15s ease-in-out infinite alternate;
}

.ambient-glow-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--secondary-glow) 0%, transparent 70%);
    bottom: -200px;
    right: -200px;
    z-index: -2;
    pointer-events: none;
    animation: floatGlow 18s ease-in-out infinite alternate-reverse;
}

/* --- Animation Keyframes --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

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

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

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

@keyframes pulseGlow {
    from {
        text-shadow: 0 0 10px hsla(var(--primary-hue), 85%, 60%, 0.2);
    }
    to {
        text-shadow: 0 0 25px hsla(var(--primary-hue), 85%, 60%, 0.6);
    }
}

@keyframes pulseFire {
    from {
        transform: scale(1);
        opacity: 0.7;
    }
    to {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes floatGlow {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(40px, -50px) scale(1.1);
    }
    100% {
        transform: translate(-20px, 30px) scale(0.9);
    }
}

/* --- Micro-Interactions (Hovers) --- */
.pulse-on-hover:hover {
    animation: microPulse 0.4s ease-in-out infinite alternate;
}

@keyframes microPulse {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}

/* ==========================================================================
   3D ENHANCEMENTS, HARDWARE ACCELERATION & SPECULAR SHEEN
   ========================================================================== */

.glass-card, 
.glass-panel, 
.topic-hub-card, 
.stat-card, 
.formula-card, 
.option-btn, 
.roadmap-day-card, 
.difficulty-selector button, 
.timer-box, 
.score-box {
    transform-style: preserve-3d;
    perspective: 1000px;
    backface-visibility: hidden;
    position: relative;
}

/* Enable child elements to float inside 3D space */
.glass-card *, 
.glass-panel *, 
.topic-hub-card *, 
.stat-card *, 
.formula-card *, 
.option-btn *, 
.roadmap-day-card * {
    transform-style: preserve-3d;
}

/* SPECULAR GLASS SHEEN OVERLAY EFFECT */
.glass-card::after, 
.glass-panel::after, 
.topic-hub-card::after, 
.stat-card::after, 
.formula-card::after, 
.option-btn::after, 
.roadmap-day-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* White specular reflection sheen aligned to custom properties --mouse-x and --mouse-y */
    background: radial-gradient(
        circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.03) 45%, 
        transparent 70%
    );
}

[data-theme="dark"] .glass-card::after,
[data-theme="dark"] .glass-panel::after,
[data-theme="dark"] .topic-hub-card::after,
[data-theme="dark"] .stat-card::after,
[data-theme="dark"] .formula-card::after,
[data-theme="dark"] .option-btn::after,
[data-theme="dark"] .roadmap-day-card::after {
    /* Glowing violet/blue sheen in dark theme */
    background: radial-gradient(
        circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(99, 102, 241, 0.03) 40%, 
        transparent 70%
    );
}

.glass-card:hover::after, 
.glass-panel:hover::after, 
.topic-hub-card:hover::after, 
.stat-card:hover::after, 
.formula-card:hover::after, 
.option-btn:hover::after, 
.roadmap-day-card:hover::after {
    opacity: 1;
}

/* Smooth 3D scale-in entrance animation for content */
.scale-in-3d {
    opacity: 0;
    transform: perspective(1200px) rotateX(-5deg) scale(0.96) translateY(8px);
    animation: scaleIn3D 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleIn3D {
    to {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
    }
}

/* 3D Tab/Panel Flip transition (Forward pitch tilt) */
.flip-panel-3d {
    opacity: 0;
    transform: perspective(1200px) rotateX(-12deg) translateZ(-35px);
    animation: flipPanelIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flipPanelIn {
    to {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg) translateZ(0px);
    }
}