/* ===================================
   HEVELA - Animation System
   Cinematic transitions & effects
   =================================== */

/* ---- Reveal Animations ---- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Section Header cinematic entry ---- */
.section-header.reveal {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ---- Service Card cinematic entry ---- */
.service-card.reveal {
    opacity: 0;
    transform: translateY(80px) scale(0.92);
    filter: blur(6px);
    transform-origin: center bottom;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---- Stagger delays ---- */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

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

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

/* ---- Glow Pulse ---- */
@keyframes glowPulse {
    0%, 100% { 
        box-shadow: 0 0 20px var(--clr-primary-glow);
    }
    50% { 
        box-shadow: 0 0 40px var(--clr-primary-glow), 0 0 60px rgba(15, 166, 142, 0.15);
    }
}

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

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

/* ---- Text Reveal (Clip) ---- */
@keyframes textRevealClip {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

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

/* ---- Slide Down ---- */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Scale In ---- */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Rotate In ---- */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* ---- Line Grow ---- */
@keyframes lineGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* ---- Dot Bounce ---- */
@keyframes dotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ---- Counter Animation ---- */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Particle Float ---- */
@keyframes particleFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(360deg);
        opacity: 0;
    }
}

/* ---- Ripple Effect ---- */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

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

/* ---- Kenburns (Subtle zoom on hero) ---- */
@keyframes kenburns {
    0% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* ---- Page Transition Overlay ---- */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--clr-primary);
    z-index: var(--z-overlay);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}

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

/* ---- Magnetic Button Hover ---- */
.magnetic-btn {
    position: relative;
    transition: transform var(--transition-base);
}

/* ---- Smooth Section Transition ---- */
section {
    position: relative;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
    }
}