/* ============================================================
   FLAVOR THEME — ANIMATIONS
   Scroll reveals, counters, hover effects
   ============================================================ */

/* ── Scroll Reveal Base ── */
[data-reveal] {
    opacity: 0;
    transition: all var(--duration-slow) var(--ease-out);
}

[data-reveal].revealed {
    opacity: 1;
}

/* Reveal: fade-up */
[data-reveal="fade-up"] {
    transform: translateY(50px);
}

[data-reveal="fade-up"].revealed {
    transform: translateY(0);
}

/* Reveal: fade-down */
[data-reveal="fade-down"] {
    transform: translateY(-50px);
}

[data-reveal="fade-down"].revealed {
    transform: translateY(0);
}

/* Reveal: fade-left */
[data-reveal="fade-left"] {
    transform: translateX(-50px);
}

[data-reveal="fade-left"].revealed {
    transform: translateX(0);
}

/* Reveal: fade-right */
[data-reveal="fade-right"] {
    transform: translateX(50px);
}

[data-reveal="fade-right"].revealed {
    transform: translateX(0);
}

/* Reveal: scale-up */
[data-reveal="scale-up"] {
    transform: scale(0.9);
}

[data-reveal="scale-up"].revealed {
    transform: scale(1);
}

/* Reveal: zoom-in */
[data-reveal="zoom-in"] {
    transform: scale(0.8);
}

[data-reveal="zoom-in"].revealed {
    transform: scale(1);
}

/* Staggered delays for grid children */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--duration-slow) var(--ease-out);
}

[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 500ms; }

[data-reveal-stagger].revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero Entrance ── */
.hero-content > * {
    opacity: 0;
    transform: translateY(30px);
    animation: hero-entrance 0.8s var(--ease-out) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.4s; }
.hero-content > *:nth-child(4) { animation-delay: 0.55s; }

@keyframes hero-entrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Typing cursor effect for hero ── */
.hero-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--color-primary);
    margin-left: 4px;
    animation: blink-cursor 0.8s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Magnetic hover effect on buttons ── */
.btn-magnetic {
    transition: transform var(--duration-fast) var(--ease-out);
}

/* ── Card tilt on hover ── */
.card-tilt {
    transition: transform var(--duration-normal) var(--ease-out);
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* ── Counter animation ── */
.counter-animated {
    display: inline-block;
    min-width: 2ch;
}

/* ── Floating elements ── */
.float-element {
    animation: float-gentle 6s ease-in-out infinite;
}

.float-element-delayed {
    animation: float-gentle 6s ease-in-out infinite 2s;
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ── Shimmer loading effect ── */
.shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-move 2s linear infinite;
}

@keyframes shimmer-move {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Gradient border animation ── */
.border-gradient-animated {
    position: relative;
}

.border-gradient-animated::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-fire);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.border-gradient-animated:hover::before {
    opacity: 1;
}

/* ── Parallax scrolling helpers ── */
[data-parallax] {
    will-change: transform;
}

/* ── Image reveal ── */
.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-warm);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.8s var(--ease-out);
}

.image-reveal.revealed::after {
    transform: scaleX(0);
}

.lang-ar .image-reveal::after {
    transform-origin: left;
}

/* ── Line draw animation for section labels ── */
.line-draw::after {
    animation: draw-line 0.6s var(--ease-out) forwards;
    transform: scaleX(0);
    transform-origin: left;
}

.lang-ar .line-draw::after {
    transform-origin: right;
}

.line-draw.revealed::after {
    transform: scaleX(1);
}

@keyframes draw-line {
    to { transform: scaleX(1); }
}

/* ── Spinning accent shapes ── */
.spin-slow {
    animation: spin-slow 20s linear infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

    [data-reveal],
    [data-reveal-stagger] > *,
    .hero-content > * {
        opacity: 1 !important;
        transform: none !important;
    }
}