/* =========================================
   Animation Utility Styles
   ========================================= */

:root {
    --reveal-duration: 0.8s;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Faster animations on mobile for better performance */
@media (max-width: 768px) {
    :root {
        --reveal-duration: 0.5s;
    }
}

body.reveal-init [data-animate] {
    --animate-delay: 0ms;
    --animate-from: translate3d(0, 32px, 0);
    opacity: 0;
    transform: var(--animate-from);
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--animate-delay);
    will-change: opacity, transform;
    /* Force GPU acceleration for smoother animations */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Remove will-change after animation to save resources */
body.reveal-init [data-animate].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto; /* Remove will-change after animation completes */
}

body.reveal-init [data-animate="fade-up"] {
    --animate-from: translate3d(0, 44px, 0);
}

body.reveal-init [data-animate="fade-down"] {
    --animate-from: translate3d(0, -44px, 0);
}

body.reveal-init [data-animate="fade-left"] {
    --animate-from: translate3d(42px, 0, 0);
}

body.reveal-init [data-animate="fade-right"] {
    --animate-from: translate3d(-42px, 0, 0);
}

body.reveal-init [data-animate="tilt-up"] {
    --animate-from: perspective(900px) rotateX(12deg) translate3d(0, 60px, 0);
}

/* Simplify tilt-up animation on mobile for better performance */
@media (max-width: 768px) {
    body.reveal-init [data-animate="tilt-up"] {
        --animate-from: translate3d(0, 40px, 0); /* Simpler animation, no 3D transform */
    }
}

body.reveal-init [data-animate="rise"] {
    --animate-from: translate3d(0, 60px, 0) scale(0.96);
}

body.reveal-init [data-animate="slide-up"] {
    --animate-from: translate3d(0, 52px, 0);
}

body.reveal-init [data-animate="drift-in"] {
    --animate-from: translate3d(-40px, -40px, 0) rotate(-4deg) scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Hover embellishments that can be reused */
.hover-glow {
    position: relative;
    z-index: 0;
}

.hover-glow::before {
    content: "";
    position: absolute;
    inset: -40%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 200, 120, 0.22), rgba(255, 120, 0, 0));
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 0.45s ease, transform 0.45s ease;
    z-index: -1;
}

.hover-glow:hover::before,
.hover-glow:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 850;
}

.nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}