/* ========================================================================
   Animations — Logo Intro, Scroll Reveal, Hover Effects
   ======================================================================== */

/* Initial state for layers (logo intro + scroll-reveal) */
[data-intro-layer],
[data-scroll-animation] {
    will-change: transform, opacity;
}

/* Logo intro layer defaults (before JS kicks in) */
[data-intro-layer] {
    opacity: 0;
    transform: translateY(20px);
}

/* Scroll-revealed elements: initial state */
[data-scroll-animation="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-scroll-animation="slide-in"] {
    opacity: 0;
    transform: translateX(-30px);
}

body.lang-ar [data-scroll-animation="slide-in"] {
    transform: translateX(30px);
}

[data-scroll-animation="scale-in"] {
    opacity: 0;
    transform: scale(0.9);
}

[data-scroll-animation="rotate-in"] {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
}

[data-scroll-animation="fade-down"] {
    opacity: 0;
    transform: translateY(-20px);
}

/* Scroll-revealed elements: visible state (set by JS) */
.bg-scroll-revealed {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) rotate(0) !important;
}

/* Hover Animations */
[data-hover-animation="lift"]:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-xl);
}

[data-hover-animation="scale"]:hover {
    transform: scale(1.05) !important;
}

[data-hover-animation="glow"]:hover {
    box-shadow: 0 0 40px rgba(63, 189, 209, 0.4) !important;
}

[data-hover-animation="tilt"]:hover {
    transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(1.02) !important;
}

body.lang-ar [data-hover-animation="tilt"]:hover {
    transform: perspective(1000px) rotateY(3deg) rotateX(2deg) scale(1.02) !important;
}

/* Section transition between sections (for color flow) */
.section {
    position: relative;
}

/* Hero particles float animation */
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -30px); }
    66% { transform: translate(-20px, 20px); }
}

.hero-particles::before,
.hero-particles::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(60px);
    animation: float 8s var(--ease-in-out) infinite;
}

.hero-particles::before {
    top: 10%;
    left: 15%;
    background: var(--bg-cyan);
    opacity: 0.2;
}

.hero-particles::after {
    bottom: 20%;
    right: 15%;
    background: var(--bg-deep-blue);
    opacity: 0.3;
    animation-delay: -4s;
}

/* Service icon pulse on hover */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 189, 209, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(63, 189, 209, 0); }
}

.service-icon {
    animation: none;
}

.service-card:hover .service-icon {
    animation: pulse-glow 1.5s var(--ease-in-out) infinite;
}

/* Loading skeleton (used during contact form submit) */
@keyframes skeleton-shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-elevated) 0%,
        var(--border-default) 50%,
        var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

/* Smooth scroll for browsers that don't respect html { scroll-behavior: smooth } */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Logo intro complete state (set by JS) */
.hero-logo-stack.complete [data-intro-layer] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Header background blur fallback for older browsers */
@supports not (backdrop-filter: blur(10px)) {
    .site-header {
        background: var(--bg-page);
    }
}