/* ============================================================
   NEPTUNE ELEVATORS v2.0 — ANIMATIONS
   Keyframe animations, scroll-trigger classes, transition utilities
   Every animation serves a UX purpose — no decorative fluff
   ============================================================ */

/* ----------------------------------------------------------
   1. KEYFRAME ANIMATIONS
   ---------------------------------------------------------- */

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

/* Fade In Down — for dropdowns, dropdowns */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left — for asymmetric layouts */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right — for asymmetric layouts */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In — for cards, modals */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide In from Bottom — for mobile menus, toasts */
@keyframes slideInBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Slide Out to Bottom */
@keyframes slideOutBottom {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

/* Reveal Line — gold accent line draw */
@keyframes revealLine {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }
    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Counter Tick — number count-up effect */
@keyframes counterTick {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* Pulse Gold — subtle glow pulse for CTAs */
@keyframes pulseGold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 147, 204, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 147, 204, 0);
    }
}

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

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

/* Hero Text Reveal — character by character feel */
@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(60px) rotateX(20deg);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        filter: blur(0);
    }
}

/* Parallax Float — subtle floating for decorative elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* ----------------------------------------------------------
   2. ANIMATION UTILITY CLASSES
   Apply these with JS (IntersectionObserver) or GSAP
   ---------------------------------------------------------- */

/* Base animated state — hidden until triggered */
.anim {
    opacity: 0;
}

.anim.is-visible {
    opacity: 1;
}

/* Fade In Up variants */
.anim-fade-up {
    animation: fadeInUp var(--duration-slower) var(--ease-expo-out) forwards;
}

.anim-fade-up-slow {
    animation: fadeInUp var(--duration-slowest) var(--ease-expo-out) forwards;
}

.anim-fade-up-fast {
    animation: fadeInUp var(--duration-normal) var(--ease-expo-out) forwards;
}

/* Fade In variants */
.anim-fade-in {
    animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
}

/* Scale In */
.anim-scale-in {
    animation: scaleIn var(--duration-slower) var(--ease-expo-out) forwards;
}

/* Slide variants */
.anim-slide-left {
    animation: fadeInLeft var(--duration-slower) var(--ease-expo-out) forwards;
}

.anim-slide-right {
    animation: fadeInRight var(--duration-slower) var(--ease-expo-out) forwards;
}

/* Hero Reveal */
.anim-hero-reveal {
    animation: heroReveal var(--duration-slowest) var(--ease-expo-out) forwards;
}

/* Reveal Line */
.anim-reveal-line {
    animation: revealLine var(--duration-slower) var(--ease-expo-out) forwards;
    transform: scaleX(0);
}

.anim-reveal-line.is-visible {
    animation-play-state: running;
}

/* Pulse Gold */
.anim-pulse-gold {
    animation: pulseGold 2s var(--ease-in-out) infinite;
}

/* Float */
.anim-float {
    animation: float 6s var(--ease-in-out) infinite;
}

/* Spin */
.anim-spin {
    animation: spin 1s linear infinite;
}

/* Gradient Shift */
.anim-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s var(--ease-in-out) infinite;
}

/* ----------------------------------------------------------
   3. STAGGER DELAYS
   For cascading entrance animations
   ---------------------------------------------------------- */

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }
.stagger-9 { animation-delay: 0.45s; }
.stagger-10 { animation-delay: 0.5s; }

/* ----------------------------------------------------------
   4. SCROLL-TRIGGERED CLASSES
   These classes are added by JS when element enters viewport
   ---------------------------------------------------------- */

/* Base: element starts hidden */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slower) var(--ease-expo-out),
                transform var(--duration-slower) var(--ease-expo-out);
}

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

/* Reveal from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--duration-slower) var(--ease-expo-out),
                transform var(--duration-slower) var(--ease-expo-out);
}

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

/* Reveal from right */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--duration-slower) var(--ease-expo-out),
                transform var(--duration-slower) var(--ease-expo-out);
}

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

/* Reveal scale */
.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--duration-slower) var(--ease-expo-out),
                transform var(--duration-slower) var(--ease-expo-out);
}

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

/* Reveal blur (hero text effect) */
.reveal-blur {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(30px);
    transition: opacity var(--duration-slowest) var(--ease-expo-out),
                filter var(--duration-slowest) var(--ease-expo-out),
                transform var(--duration-slowest) var(--ease-expo-out);
}

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

/* Line reveal */
.reveal-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slower) var(--ease-expo-out);
}

.reveal-line.is-visible {
    transform: scaleX(1);
}

.reveal-line-center {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-slower) var(--ease-expo-out);
}

.reveal-line-center.is-visible {
    transform: scaleX(1);
}

/* Image reveal (clip-path) */
.reveal-image {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--duration-slowest) var(--ease-expo-out);
}

.reveal-image.is-visible {
    clip-path: inset(0 0 0 0);
}

.reveal-image-right {
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--duration-slowest) var(--ease-expo-out);
}

.reveal-image-right.is-visible {
    clip-path: inset(0 0 0 0);
}

/* Counter reveal */
.reveal-counter {
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.reveal-counter.is-visible {
    opacity: 1;
}

/* ----------------------------------------------------------
   5. HOVER MICRO-INTERACTIONS
   Subtle, purposeful hover effects
   ---------------------------------------------------------- */

/* Lift on hover */
.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-gold);
}

/* Underline slide */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-primary);
    transition: width var(--duration-slow) var(--ease-expo-out);
}

.hover-underline:hover::after {
    width: 100%;
}

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

.hover-zoom img,
.hover-zoom .hover-zoom-target {
    transition: transform var(--duration-slow) var(--ease-out);
}

.hover-zoom:hover img,
.hover-zoom:hover .hover-zoom-target {
    transform: scale(1.05);
}

/* Border color shift */
.hover-border {
    transition: border-color var(--duration-normal) var(--ease-out);
}

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

/* Text color shift */
.hover-text {
    transition: color var(--duration-fast) var(--ease-out);
}

.hover-text:hover {
    color: var(--accent-primary);
}

/* Arrow slide (for links with arrows) */
.hover-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hover-arrow svg,
.hover-arrow .arrow-icon {
    transition: transform var(--duration-normal) var(--ease-expo-out);
}

.hover-arrow:hover svg,
.hover-arrow:hover .arrow-icon {
    transform: translateX(4px);
}

/* ----------------------------------------------------------
   6. LOADING STATES
   ---------------------------------------------------------- */

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-elevated) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* Spinner */
.spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 1.5px;
}

.spinner-lg {
    width: 2rem;
    height: 2rem;
    border-width: 2.5px;
}

/* ----------------------------------------------------------
   7. PAGE TRANSITION
   ---------------------------------------------------------- */

.page-transition {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp var(--duration-slower) var(--ease-expo-out) forwards;
}

/* ----------------------------------------------------------
   8. REDUCED MOTION
   Respect user preferences
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .anim,
    .anim-fade-up,
    .anim-fade-up-slow,
    .anim-fade-up-fast,
    .anim-fade-in,
    .anim-scale-in,
    .anim-slide-left,
    .anim-slide-right,
    .anim-hero-reveal,
    .anim-reveal-line,
    .anim-pulse-gold,
    .anim-float,
    .anim-spin,
    .anim-gradient {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-blur,
    .reveal-image,
    .reveal-image-right {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }

    .reveal-line,
    .reveal-line-center {
        transform: scaleX(1);
    }

    .hover-lift:hover,
    .hover-zoom:hover img,
    .hover-zoom:hover .hover-zoom-target {
        transform: none;
    }

    .hover-arrow:hover svg,
    .hover-arrow:hover .arrow-icon {
        transform: none;
    }

    .skeleton {
        animation: none;
        background: var(--bg-tertiary);
    }
}