/* ============================================
   AL-QAND EXCHANGE — ANIMATIONS & REDUCED MOTION
   ============================================ */

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .footer-wordmark.wave span {
        animation: none !important;
        transform: none !important;
    }
    
    .back-to-top,
    .back-to-top::before,
    .back-to-top svg {
        transition: none !important;
    }
}

/* ============================================
   ANIMATION STYLES
   ============================================ */

/* ---------- Text Reveal Animations ---------- */
.reveal-text {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

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

/* Stagger children */
.reveal-text .stagger-1 { transition-delay: 0.05s; }
.reveal-text .stagger-2 { transition-delay: 0.12s; }
.reveal-text .stagger-3 { transition-delay: 0.19s; }
.reveal-text .stagger-4 { transition-delay: 0.26s; }
.reveal-text .stagger-5 { transition-delay: 0.33s; }
.reveal-text .stagger-6 { transition-delay: 0.40s; }
.reveal-text .stagger-7 { transition-delay: 0.47s; }
.reveal-text .stagger-8 { transition-delay: 0.54s; }

/* ---------- Mask Reveal ---------- */
.mask-reveal {
    display: inline-block;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: clip-path;
}

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

.mask-reveal .stagger-1 { transition-delay: 0.1s; }
.mask-reveal .stagger-2 { transition-delay: 0.2s; }
.mask-reveal .stagger-3 { transition-delay: 0.3s; }
.mask-reveal .stagger-4 { transition-delay: 0.4s; }
.mask-reveal .stagger-5 { transition-delay: 0.5s; }
.mask-reveal .stagger-6 { transition-delay: 0.6s; }
.mask-reveal .stagger-7 { transition-delay: 0.7s; }
.mask-reveal .stagger-8 { transition-delay: 0.8s; }

/* ---------- Slide In ---------- */
.slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

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

.slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

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

/* ---------- Scale Reveal ---------- */
.scale-reveal {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

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

/* ---------- Blur Reveal ---------- */
.blur-reveal {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.98);
    transition: opacity 1s ease,
                filter 1s ease,
                transform 1s ease;
    will-change: transform, opacity, filter;
}

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

/* ---------- Fade Reveal (map) ---------- */
.flip-reveal {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

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

/* ---------- Section Transition ---------- */
.section-transition {
    position: relative;
}

.section-transition::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--orange), transparent);
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-transition.in-focus::before {
    opacity: 1;
    transform: scaleX(1);
}

/* ---------- Word Reveal ---------- */
.word-reveal {
    display: inline-block;
    overflow: visible;
    vertical-align: bottom;
}

.word-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotate(2deg);
    transition: opacity 1.2s ease,
                transform 0.8s ease;
    will-change: transform, opacity;
}

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

.word-reveal .word:nth-child(1) { transition-delay: 0.5s; }
.word-reveal .word:nth-child(2) { transition-delay: 0.5s; }
.word-reveal .word:nth-child(3) { transition-delay: 0.5s; }
.word-reveal .word:nth-child(4) { transition-delay: 0.26s; }
.word-reveal .word:nth-child(5) { transition-delay: 0.33s; }
.word-reveal .word:nth-child(6) { transition-delay: 0.40s; }
.word-reveal .word:nth-child(7) { transition-delay: 0.47s; }
.word-reveal .word:nth-child(8) { transition-delay: 0.54s; }
.word-reveal .word:nth-child(9) { transition-delay: 0.61s; }
.word-reveal .word:nth-child(10) { transition-delay: 0.68s; }

/* ---------- Responsive Animations ---------- */
@media (max-width: 600px) {
    .reveal-text {
        transform: translateY(25px);
    }
    .slide-left,
    .slide-right {
        transform: translateX(30px);
    }
    .word-reveal .word {
        transform: translateY(25px);
    }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal-text,
    .mask-reveal,
    .slide-left,
    .slide-right,
    .scale-reveal,
    .blur-reveal,
    .flip-reveal,
    .word-reveal .word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    
    .section-transition::before {
        display: none;
    }
}