/* ===================================
   PREMIUM REDESIGN - ANIMATIONS & INTERACTIONS
   =================================== */

/* === SCROLL-REVEAL ANIMATIONS === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* MOBILE FIX: Ensure content is always visible on mobile devices */
/* Animations are progressive-enhancement - content must be readable without JS */
@media (max-width: 768px) {

    .animate-on-scroll,
    .service-detail,
    .service-detail-header,
    .service-detail-content,
    .service-detail-block,
    .navy-strip-item,
    .circle-item,
    .overlap-card,
    .page-header,
    section {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        animation: none !important;
    }
}

/* Stagger animations for list items */
.navy-strip-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.navy-strip-item:nth-child(1) {
    transition-delay: 0ms;
}

.navy-strip-item:nth-child(2) {
    transition-delay: 100ms;
}

.navy-strip-item:nth-child(3) {
    transition-delay: 200ms;
}

.navy-strip-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* === HOVER MICRO-INTERACTIONS === */

/* Button hover effects */
.btn-primary,
.btn-secondary {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(66, 101, 244, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Card hover effects */
.overlap-card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.overlap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}

.service-detail {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-detail:hover {
    transform: translateY(-2px);
}

/* === REDUCED MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {

    .animate-on-scroll,
    .navy-strip-item,
    .btn-primary,
    .btn-secondary,
    .overlap-card,
    .service-detail {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Disable all animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === SMOOTH SCROLLING === */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* === LOADING STATE === */
body.loading {
    overflow: hidden;
}

body.loading * {
    animation-play-state: paused !important;
    transition: none !important;
}