/**
 * Fins Abroad Services - Smooth Homyz-Style Animation Design System
 * Native Vanilla CSS Keyframes & Smooth Transitions
 */

/* ==========================================================================
   1. Scroll Reveal Initial States & Smooth Cubic-Bezier Transitions
   ========================================================================== */

[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-down"] {
    transform: translateY(-40px);
}

[data-animate="fade-right"] {
    transform: translateX(-50px);
}

[data-animate="fade-left"] {
    transform: translateX(50px);
}

[data-animate="zoom-in"] {
    transform: scale(0.92);
}

[data-animate="zoom-out"] {
    transform: scale(1.08);
}

/* Revealed State */
[data-animate].reveal-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Stagger Delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* ==========================================================================
   2. Floating & Pulsing Keyframes
   ========================================================================== */

@keyframes floatSubtle {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

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

.pulse-glow {
    animation: pulseGlow 2.5s infinite;
}

/* ==========================================================================
   3. Interactive Card Elevation & Micro-Interactions
   ========================================================================== */

.feature-box-card,
.card,
.legal-section-block,
.service-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.feature-box-card:hover,
.card:hover,
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 36px rgba(0, 61, 130, 0.12) !important;
}

/* Smooth Button Hover Effects */
.btn-cta,
.btn-primary,
.btn-warning {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-cta:hover,
.btn-primary:hover,
.btn-warning:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 61, 130, 0.25);
}

.btn-cta:active,
.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Icon Pulse on Hover */
.feature-box-card:hover .feature-box-icon i,
.card:hover i {
    transform: scale(1.15) rotate(4deg);
    transition: transform 0.3s ease;
}

.feature-box-icon i {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   4. Navbar Scroll Glassmorphism Transition
   ========================================================================== */

.top-header, .header-bottom-bar, header {
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

.header-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Smooth Accordion Expansion */
.accordion-item {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

.accordion-button {
    transition: background-color 0.3s ease, color 0.3s ease;
}