/* ============================================
   KRANTHI HIGH SCHOOL - ANIMATIONS
   ============================================
   Custom keyframe animations and transitions
   ============================================ */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Pulse Animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Float Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Float Gentle */
@keyframes floatGentle {
    0% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Up */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In Down */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zoom In Rotate */
@keyframes zoomInRotate {
    from {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-8px); }
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

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

/* Scale Up Down */
@keyframes scaleUpDown {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Gradient Shift */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glow Pulse */
@keyframes glowPulse {
    0% { box-shadow: 0 0 10px rgba(11, 61, 145, 0.3); }
    50% { box-shadow: 0 0 30px rgba(11, 61, 145, 0.6); }
    100% { box-shadow: 0 0 10px rgba(11, 61, 145, 0.3); }
}

/* Ripple Effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Wave Animation */
@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Typing Dots */
@keyframes typingDots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

/* Blink */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Slide Right */
@keyframes slideRight {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Border Glow */
@keyframes borderGlow {
    0% { border-color: rgba(11, 61, 145, 0.3); }
    50% { border-color: rgba(30, 136, 229, 0.8); }
    100% { border-color: rgba(11, 61, 145, 0.3); }
}

/* Counter Tick */
@keyframes counterTick {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Text Reveal */
@keyframes textReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Marquee */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ============================================
   ANIMATION UTILITY CLASSES
   ============================================ */

/* Animate on load */
.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease forwards;
}

.animate-zoom-in {
    animation: zoomIn 0.6s ease forwards;
}

.animate-bounce {
    animation: bounce 1s ease infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.animate-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.animate-wave {
    animation: wave 2s ease-in-out infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}

/* Delay classes */
.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; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* Duration classes */
.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-700 { animation-duration: 0.7s; }
.duration-1000 { animation-duration: 1s; }
.duration-1500 { animation-duration: 1.5s; }
.duration-2000 { animation-duration: 2s; }

/* ============================================
   HOVER ANIMATIONS
   ============================================ */

/* Lift on hover */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* Scale on hover */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Rotate on hover */
.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(11, 61, 145, 0.4);
}

/* Border Color on hover */
.hover-border {
    transition: border-color 0.3s ease;
    border: 2px solid transparent;
}

.hover-border:hover {
    border-color: var(--secondary);
}

/* Image zoom on hover */
.hover-zoom-img {
    overflow: hidden;
}

.hover-zoom-img img {
    transition: transform 0.5s ease;
}

.hover-zoom-img:hover img {
    transform: scale(1.1);
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS (CSS Fallback)
   ============================================ */

/* These classes can be toggled via JavaScript */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   LOADING SKELETON
   ============================================ */
.skeleton {
    background: linear-gradient(90deg, var(--light-gray) 25%, #e0e0e0 50%, var(--light-gray) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 15px;
    border-radius: 4px;
}

.skeleton-image {
    height: 200px;
    border-radius: var(--radius-md);
}

.skeleton-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* ============================================
   PAGE TRANSITION
   ============================================ */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    z-index: 999999;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.page-transition.active {
    transform: scaleY(1);
    transform-origin: top;
}

/* ============================================
   PARALLAX EFFECT (CSS only)
   ============================================ */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============================================
   STAGGER CHILDREN ANIMATIONS
   ============================================ */
.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; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.9s; }
.stagger-children > *:nth-child(10) { animation-delay: 1s; }