/**
 * IntelliLearn Page Loading Animations
 * Unique animations for different pages
 */

/* ========== BASE LOADER CONTAINER ========== */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-text {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ========== 1. BOOK ANIMATION (Homepage) ========== */
.loader-book {
    position: relative;
    width: 120px;
    height: 90px;
    perspective: 1000px;
}

.book {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.book-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0B3C5D 0%, #00A8E8 100%);
    border-radius: 4px 12px 12px 4px;
    box-shadow: 0 10px 30px rgba(11, 60, 93, 0.3);
    transform-origin: left;
    animation: bookOpen 2s ease-in-out infinite;
}

.book-page {
    position: absolute;
    width: 90%;
    height: 95%;
    background: #fff;
    right: 5%;
    top: 2.5%;
    border-radius: 2px 8px 8px 2px;
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.05);
}

.book-page::before,
.book-page::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
}

.book-page::before { top: 30%; }
.book-page::after { top: 50%; }

@keyframes bookOpen {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(-25deg); }
}

.loader-book .sparkles {
    position: absolute;
    top: -20px;
    right: -20px;
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FFD966;
    border-radius: 50%;
    animation: sparkle 1.5s ease-in-out infinite;
}

.sparkle:nth-child(1) { animation-delay: 0s; top: 0; left: 0; }
.sparkle:nth-child(2) { animation-delay: 0.3s; top: 20px; left: 15px; }
.sparkle:nth-child(3) { animation-delay: 0.6s; top: -10px; left: 25px; }

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

/* ========== 2. CUP FILLING ANIMATION (Games) ========== */
.loader-cup {
    position: relative;
    width: 100px;
    height: 120px;
}

.cup-container {
    position: relative;
    width: 80px;
    height: 100px;
    margin: 0 auto;
}

.cup {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
    border: 4px solid rgba(255,255,255,0.8);
    border-radius: 0 0 40px 40px;
    overflow: hidden;
}

.cup-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, #00A8E8 0%, #0B3C5D 100%);
    border-radius: 0 0 36px 36px;
    animation: fillCup 2.5s ease-in-out infinite;
}

.cup-liquid::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: wave 2s ease-in-out infinite;
}

@keyframes fillCup {
    0% { height: 0%; }
    50% { height: 85%; }
    100% { height: 0%; }
}

@keyframes wave {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(-5px) scaleX(0.95); }
}

.cup-bubbles {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.bubble {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: bubbleRise 1.5s ease-in-out infinite;
}

.bubble:nth-child(1) { left: -15px; animation-delay: 0s; }
.bubble:nth-child(2) { left: 0; animation-delay: 0.3s; width: 6px; height: 6px; }
.bubble:nth-child(3) { left: 15px; animation-delay: 0.6s; width: 10px; height: 10px; }

@keyframes bubbleRise {
    0% { bottom: 0; opacity: 0; transform: translateX(-50%) scale(0); }
    50% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { bottom: 60px; opacity: 0; transform: translateX(-50%) scale(0.5); }
}

.cup-score {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFD966;
    animation: scoreCount 2.5s ease-in-out infinite;
}

@keyframes scoreCount {
    0%, 100% { content: '0'; opacity: 0; }
    25% { content: '25'; opacity: 1; }
    50% { content: '50'; opacity: 1; }
    75% { content: '75'; opacity: 1; }
}

/* ========== 3. COUNTDOWN ANIMATION (Teachers/Quiz) ========== */
.loader-countdown {
    position: relative;
    width: 120px;
    height: 120px;
}

.countdown-circle {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #00A8E8 0%,
        #0B3C5D var(--progress, 0%),
        rgba(255,255,255,0.1) var(--progress, 0%)
    );
    animation: countdownProgress 3s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes countdownProgress {
    0% { --progress: 0%; }
    100% { --progress: 100%; }
}

.countdown-inner {
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0B3C5D;
    animation: countdownNumber 3s steps(3) infinite;
}

@keyframes countdownNumber {
    0% { content: '3'; }
    33% { content: '2'; }
    66% { content: '1'; }
    100% { content: 'GO'; color: #8CC63F; }
}

.countdown-number {
    animation: numberPulse 1s ease-in-out infinite;
}

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

/* Alternative Countdown - Digital Flip */
.loader-flip {
    display: flex;
    gap: 10px;
    perspective: 400px;
}

.flip-card {
    width: 60px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
}

.flip-card-top,
.flip-card-bottom {
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, #0B3C5D 0%, #00A8E8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    overflow: hidden;
    backface-visibility: hidden;
}

.flip-card-top {
    top: 0;
    border-radius: 8px 8px 0 0;
    transform-origin: bottom;
    animation: flipTop 1s ease-in-out infinite;
}

.flip-card-bottom {
    bottom: 0;
    border-radius: 0 0 8px 8px;
    transform-origin: top;
    animation: flipBottom 1s ease-in-out infinite;
}

@keyframes flipTop {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(-90deg); }
    100% { transform: rotateX(-90deg); }
}

@keyframes flipBottom {
    0% { transform: rotateX(90deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

/* ========== 4. GEARS ANIMATION (Admin/Login) ========== */
.loader-gears {
    position: relative;
    width: 150px;
    height: 150px;
}

.gear {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(145deg, #0B3C5D 0%, #00A8E8 100%);
    box-shadow: 
        inset 0 5px 15px rgba(255,255,255,0.2),
        inset 0 -5px 15px rgba(0,0,0,0.2),
        0 5px 15px rgba(11, 60, 93, 0.3);
}

.gear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
}

.gear::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 100%;
    background: inherit;
    border-radius: 4px;
    box-shadow: inherit;
}

.gear-1 {
    width: 80px;
    height: 80px;
    top: 20px;
    left: 10px;
    animation: rotateGear 3s linear infinite;
}

.gear-1::after {
    box-shadow: 
        0 0 0 4px inherit,
        0 0 0 8px inherit;
    transform: translateX(-50%) rotate(0deg);
}

.gear-2 {
    width: 60px;
    height: 60px;
    top: 60px;
    right: 20px;
    animation: rotateGear 2.25s linear infinite reverse;
}

.gear-2::after {
    transform: translateX(-50%) rotate(45deg);
}

.gear-3 {
    width: 40px;
    height: 40px;
    bottom: 20px;
    left: 50%;
    animation: rotateGear 1.5s linear infinite;
}

.gear-3::after {
    transform: translateX(-50%) rotate(22.5deg);
}

@keyframes rotateGear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.gear-teeth {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: inherit;
}

.gear-teeth::before,
.gear-teeth::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 20%;
    background: inherit;
    border-radius: 4px;
    transform: translate(-50%, -50%);
}

.gear-teeth::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ========== 5. ROCKET ANIMATION (Student Dashboard) ========== */
.loader-rocket {
    position: relative;
    width: 120px;
    height: 150px;
}

.rocket {
    position: absolute;
    width: 60px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: rocketFloat 1.5s ease-in-out infinite;
}

.rocket-body {
    position: absolute;
    width: 100%;
    height: 70%;
    bottom: 0;
    background: linear-gradient(90deg, #E94F37 0%, #ff6b6b 50%, #E94F37 100%);
    border-radius: 50% 50% 10% 10%;
    box-shadow: inset -10px 0 20px rgba(0,0,0,0.2);
}

.rocket-nose {
    position: absolute;
    width: 100%;
    height: 35%;
    top: 0;
    background: linear-gradient(90deg, #0B3C5D 0%, #00A8E8 50%, #0B3C5D 100%);
    border-radius: 50% 50% 0 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.rocket-window {
    position: absolute;
    width: 30%;
    height: 20%;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(145deg, #87CEEB 0%, #E0F6FF 100%);
    border-radius: 50%;
    border: 4px solid #0B3C5D;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.2);
}

.rocket-fin {
    position: absolute;
    width: 30%;
    height: 30%;
    bottom: 0;
    background: #0B3C5D;
}

.rocket-fin.left {
    left: -20%;
    border-radius: 100% 0 0 0;
    transform: skewY(-20deg);
}

.rocket-fin.right {
    right: -20%;
    border-radius: 0 100% 0 0;
    transform: skewY(20deg);
}

.rocket-flame {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 40px;
    background: linear-gradient(180deg, #FFD966 0%, #E94F37 50%, transparent 100%);
    border-radius: 0 0 50% 50%;
    animation: flameFlicker 0.3s ease-in-out infinite;
}

.rocket-flame::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 60%;
    background: #87CEEB;
    border-radius: 0 0 50% 50%;
}

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

@keyframes flameFlicker {
    0%, 100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
    50% { transform: translateX(-50%) scaleY(0.8); opacity: 0.8; }
}

.rocket-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: twinkle 1s ease-in-out infinite;
}

.star:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.star:nth-child(2) { top: 30%; left: 80%; animation-delay: 0.2s; }
.star:nth-child(3) { top: 60%; left: 10%; animation-delay: 0.4s; }
.star:nth-child(4) { top: 80%; left: 70%; animation-delay: 0.6s; }
.star:nth-child(5) { top: 15%; left: 60%; animation-delay: 0.8s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ========== 6. BRAIN/IDEA ANIMATION (Learning) ========== */
.loader-brain {
    position: relative;
    width: 100px;
    height: 100px;
}

.brain {
    width: 100%;
    height: 100%;
    position: relative;
}

.brain-bulb {
    position: absolute;
    width: 60px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #FFD966 0%, #E94F37 100%);
    border-radius: 50% 50% 45% 45%;
    animation: bulbPulse 1.5s ease-in-out infinite;
}

.brain-bulb::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    background: #8B4513;
    border-radius: 0 0 5px 5px;
}

.brain-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: raysRotate 4s linear infinite;
}

.ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, #FFD966, transparent);
    transform-origin: left center;
    border-radius: 2px;
}

.ray:nth-child(1) { transform: translate(30px, -50%) rotate(0deg); }
.ray:nth-child(2) { transform: translate(30px, -50%) rotate(45deg); }
.ray:nth-child(3) { transform: translate(30px, -50%) rotate(90deg); }
.ray:nth-child(4) { transform: translate(30px, -50%) rotate(135deg); }
.ray:nth-child(5) { transform: translate(30px, -50%) rotate(180deg); }
.ray:nth-child(6) { transform: translate(30px, -50%) rotate(225deg); }
.ray:nth-child(7) { transform: translate(30px, -50%) rotate(270deg); }
.ray:nth-child(8) { transform: translate(30px, -50%) rotate(315deg); }

@keyframes bulbPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(242, 177, 52, 0.5); }
    50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 40px rgba(242, 177, 52, 0.8); }
}

@keyframes raysRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== 7. QUANTUM ATOM ANIMATION (STEM/AI) ========== */
.loader-quantum {
    position: relative;
    width: 120px;
    height: 120px;
    perspective: 600px;
}

.quantum-nucleus {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 35%, #5EE7FF, #00A8E8, #0B3C5D);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 168, 232, 0.6), 0 0 40px rgba(0, 168, 232, 0.3);
    animation: nucleusPulse 1.8s ease-in-out infinite;
    z-index: 10;
}

.quantum-nucleus::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0, 217, 255, 0.3);
    animation: nucleusRipple 1.8s ease-in-out infinite;
}

.quantum-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 168, 232, 0.25);
    transform-style: preserve-3d;
}

.quantum-orbit-1 {
    animation: orbitTilt1 3s linear infinite;
}

.quantum-orbit-2 {
    animation: orbitTilt2 3s linear infinite;
}

.quantum-orbit-3 {
    animation: orbitTilt3 3s linear infinite;
}

.quantum-electron {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD700, #FF6B35);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 0 24px rgba(255, 107, 53, 0.4);
    animation: electronTravel 1.5s linear infinite;
}

.quantum-orbit-2 .quantum-electron {
    animation-duration: 2s;
    animation-delay: -0.5s;
    background: radial-gradient(circle at 30% 30%, #5EE7FF, #00A8E8);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.7), 0 0 24px rgba(0, 168, 232, 0.4);
}

.quantum-orbit-3 .quantum-electron {
    animation-duration: 2.5s;
    animation-delay: -1s;
    background: radial-gradient(circle at 30% 30%, #C084FC, #8B5CF6);
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.7), 0 0 24px rgba(139, 92, 246, 0.4);
}

.quantum-glow {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 1px solid rgba(0, 168, 232, 0.1);
    animation: glowSpin 8s linear infinite;
}

.quantum-glow::before,
.quantum-glow::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 168, 232, 0.08);
}

.quantum-glow::before {
    inset: -10px;
    animation: glowSpin 12s linear infinite reverse;
}

.quantum-glow::after {
    inset: 5px;
    animation: glowSpin 6s linear infinite;
}

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

@keyframes nucleusRipple {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0; }
}

@keyframes orbitTilt1 {
    from { transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg); }
    to   { transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg); }
}

@keyframes orbitTilt2 {
    from { transform: rotateX(60deg) rotateY(60deg) rotateZ(0deg); }
    to   { transform: rotateX(60deg) rotateY(60deg) rotateZ(360deg); }
}

@keyframes orbitTilt3 {
    from { transform: rotateX(60deg) rotateY(-60deg) rotateZ(0deg); }
    to   { transform: rotateX(60deg) rotateY(-60deg) rotateZ(360deg); }
}

@keyframes electronTravel {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

@keyframes glowSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ========== LOADER BACKGROUNDS ========== */
.loader-gradient-navy {
    background: linear-gradient(135deg, #0B3C5D 0%, #082a42 100%);
    color: white;
}

.loader-gradient-cyan {
    background: linear-gradient(135deg, #00A8E8 0%, #0B3C5D 100%);
    color: white;
}

.loader-gradient-warm {
    background: linear-gradient(135deg, #E94F37 0%, #FFD966 100%);
    color: white;
}

.loader-dark {
    background: #0B3C5D;
    color: white;
}

/* Progress Bar Loader */
.loader-progress-container {
    width: 200px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 20px;
}

.loader-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00A8E8, #FFD966);
    border-radius: 3px;
    animation: progressBar 2s ease-in-out infinite;
}

@keyframes progressBar {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Loading Dots */
.loader-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.loader-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    animation: dotBounce 0.6s ease-in-out infinite;
}

.loader-dot:nth-child(1) { animation-delay: 0s; }
.loader-dot:nth-child(2) { animation-delay: 0.1s; }
.loader-dot:nth-child(3) { animation-delay: 0.2s; }

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