/* ==========================================
   FRAMER-MOTION STYLE ANIMATIONS (Pure CSS)
   Spring physics, smooth easing, GPU-accelerated
   ========================================== */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ REVEAL ANIMATIONS ============ */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Fade left */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Fade right */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Scale in (spring-like) */
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}

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

/* ============ HOVER INTERACTIONS ============ */

/* Cards - smooth lift with spring feel */
.product-card,
.feature-card,
.value-card,
.office-card,
.country-card-pro,
.export-range-card,
.testimonial-card,
.why-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease !important;
    will-change: transform;
}

/* Buttons - snappy hover */
.btn {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease !important;
    will-change: transform;
}

.btn:active {
    transform: scale(0.97) !important;
}

/* Nav links - smooth underline */
.nav > a::after,
.nav > .dropdown > a::after {
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ============ FLOATING BUTTONS ============ */

.float-btn {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease !important;
}

.float-btn:hover {
    transform: scale(1.12) rotate(-5deg) !important;
}

.float-btn:active {
    transform: scale(0.95) !important;
}

/* ============ TOP BAR SOCIAL ============ */

.top-bar-right a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.top-bar-right a:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px) scale(1.05);
}

/* ============ FOOTER SOCIAL ============ */

.footer-social a {
    transition: background 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.footer-social a:hover {
    transform: translateY(-3px) scale(1.08) !important;
}

/* ============ HEADER LOGO ============ */

.logo img {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.logo:hover img {
    transform: scale(1.05) !important;
}

/* ============ SARA CHAT LAUNCHER ============ */

#sara-chat-launcher .sara-launcher-btn {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease !important;
}

#sara-chat-launcher:hover .sara-launcher-btn {
    transform: scale(1.1) rotate(3deg) !important;
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.6) !important;
}

/* ============ INPUT FIELDS ============ */

.form-group input,
.form-group textarea,
.form-group select {
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.15s ease !important;
}

.form-group input:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
}

/* ============ CHECKBOX HOVER ============ */

.checkbox-grid label {
    transition: background 0.2s ease, transform 0.2s ease !important;
    padding: 4px 8px !important;
    border-radius: 6px;
}

.checkbox-grid label:hover {
    background: var(--sky) !important;
}

/* ============ COUNTRY CARDS ============ */

.country-card-pro {
    transform-origin: center bottom;
}

.country-card-pro:hover .country-flag-img {
    transform: scale(1.08);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.country-flag-img {
    transition: transform 0.3s ease;
}

/* ============ EXPORT RANGE NUMBERS ============ */

.export-num {
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.export-range-card:hover .export-num {
    transform: scale(1.1) rotate(-5deg);
}

/* ============ PRODUCT CARD ICONS ============ */

.product-icon,
.feature-icon,
.value-icon,
.why-card-icon,
.category-header-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                color 0.3s ease !important;
}

/* ============ MAP MARKERS HOVER ============ */

.map-marker {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    transform-box: fill-box;
}

.map-marker:hover {
    transform: scale(1.3);
}

.map-marker text {
    transition: font-size 0.2s ease, fill 0.2s ease;
}

/* ============ STAGGERED REVEAL DELAYS ============ */

.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal:nth-child(8) { transition-delay: 0.56s; }

/* ============ HERO ENTRANCE ============ */

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-visual {
    animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* ============ PAGE ENTRANCE ============ */

@keyframes pageEnter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    animation: pageEnter 0.4s ease-out;
}

/* ============ SMOOTH SCROLL FOR PAGE ============ */

html {
    scroll-behavior: smooth;
}

/* ============ MOBILE ADAPTATIONS ============ */

@media (max-width: 768px) {
    .reveal {
        transform: translateY(20px);
    }
    
    .product-card:hover,
    .feature-card:hover,
    .value-card:hover,
    .office-card:hover,
    .country-card-pro:hover,
    .export-range-card:hover,
    .why-card:hover,
    .testimonial-card:hover {
        transform: translateY(-3px) !important;
    }
}

/* ============ PERFORMANCE OPTIMIZATIONS ============ */

.hero-globe,
.hero-card,
.floating-badge,
.about-logo-image,
.map-marker circle {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================
   BRANDED SOCIAL MEDIA BUTTONS
   ========================================== */

/* Top Bar Social */
.top-bar-social-label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-right: 8px;
    letter-spacing: 0.5px;
}

.top-bar-right .social-btn {
    position: relative;
    color: rgba(255,255,255,0.85);
}

.top-bar-right .social-facebook:hover {
    background: #1877f2 !important;
    color: white !important;
}

.top-bar-right .social-linkedin:hover {
    background: #0a66c2 !important;
    color: white !important;
}

.top-bar-right .social-wechat:hover {
    background: #07c160 !important;
    color: white !important;
}

/* Footer Social - Branded Colors on Hover */
.footer-social a {
    background: rgba(255,255,255,0.08) !important;
    position: relative;
    overflow: hidden;
}

.footer-social a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.footer-social a.fs-facebook:hover {
    background: #1877f2 !important;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4) !important;
}

.footer-social a.fs-linkedin:hover {
    background: #0a66c2 !important;
    box-shadow: 0 8px 20px rgba(10, 102, 194, 0.4) !important;
}

.footer-social a.fs-wechat:hover {
    background: #07c160 !important;
    box-shadow: 0 8px 20px rgba(7, 193, 96, 0.4) !important;
}

/* Coming Soon Badge */
.social-btn[title*="Coming Soon"]::after,
.footer-social a[title*="Coming Soon"]::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    border: 1.5px solid var(--navy-dark);
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
    animation: comingSoonPulse 2s infinite;
}

@keyframes comingSoonPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(251, 191, 36, 0);
    }
}

/* Mobile - hide "Follow us" label */
@media (max-width: 768px) {
    .top-bar-social-label {
        display: none;
    }
    
    .top-bar-inner {
        justify-content: center !important;
    }
}