/**
 * Aartful Theme — Animations.
 * Scroll-triggered reveals, hover effects, and micro-interactions.
 * Works with GSAP ScrollTrigger for performance.
 */

/* ══════════════════════════════════════
   SCROLL REVEAL BASE STATES
   Elements start hidden, GSAP animates them in.
   ══════════════════════════════════════ */

[data-aa-reveal] {
    opacity: 0;
    will-change: transform, opacity;
}

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

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

[data-aa-reveal="fade-left"] {
    transform: translateX(-40px);
}

[data-aa-reveal="fade-right"] {
    transform: translateX(40px);
}

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

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

[data-aa-reveal="flip-up"] {
    transform: perspective(800px) rotateX(10deg) translateY(30px);
}

[data-aa-reveal="clip-up"] {
    clip-path: inset(100% 0 0 0);
    transform: none;
    opacity: 1;
}

[data-aa-reveal="clip-left"] {
    clip-path: inset(0 100% 0 0);
    transform: none;
    opacity: 1;
}

/* Revealed state — applied by GSAP */
[data-aa-reveal].is-revealed {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

/* ══════════════════════════════════════
   STAGGER CHILDREN
   Parent gets [data-aa-stagger], children animate sequentially.
   ══════════════════════════════════════ */

[data-aa-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
}

[data-aa-stagger].is-revealed > * {
    opacity: 1;
    transform: none;
}

/* ══════════════════════════════════════
   TEXT SPLIT ANIMATIONS
   ══════════════════════════════════════ */

.aa-text-split .aa-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all var(--aa-duration-slow) var(--aa-ease-out);
}

.aa-text-split.is-revealed .aa-char {
    opacity: 1;
    transform: translateY(0);
}

.aa-text-reveal {
    overflow: hidden;
    display: inline-block;
}

.aa-text-reveal__inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform var(--aa-duration-slower) var(--aa-ease-out);
}

.aa-text-reveal.is-revealed .aa-text-reveal__inner {
    transform: translateY(0);
}

/* ══════════════════════════════════════
   LINE / DIVIDER ANIMATIONS
   ══════════════════════════════════════ */

.aa-line-reveal {
    width: 0;
    height: 2px;
    background: var(--aa-primary);
    transition: width var(--aa-duration-slower) var(--aa-ease-out);
}

.aa-line-reveal.is-revealed {
    width: 60px;
}

/* ══════════════════════════════════════
   HOVER ANIMATIONS
   ══════════════════════════════════════ */

.aa-hover-lift {
    transition: transform var(--aa-duration-base) var(--aa-ease-out),
                box-shadow var(--aa-duration-base) var(--aa-ease-out);
}

.aa-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--aa-shadow-lg);
}

.aa-hover-scale {
    transition: transform var(--aa-duration-base) var(--aa-ease-out);
}

.aa-hover-scale:hover {
    transform: scale(1.03);
}

.aa-hover-glow {
    transition: box-shadow var(--aa-duration-base) var(--aa-ease-out);
}

.aa-hover-glow:hover {
    box-shadow: var(--aa-shadow-hover);
}

.aa-hover-rotate {
    transition: transform var(--aa-duration-slow) var(--aa-ease-out);
}

.aa-hover-rotate:hover {
    transform: rotate(3deg);
}

/* Image zoom on hover */
.aa-img-zoom {
    overflow: hidden;
}

.aa-img-zoom img {
    transition: transform var(--aa-duration-slower) var(--aa-ease-out);
}

.aa-img-zoom:hover img {
    transform: scale(1.08);
}

/* ══════════════════════════════════════
   MAGNETIC BUTTON EFFECT (JS-enhanced)
   ══════════════════════════════════════ */

.aa-magnetic {
    transition: transform var(--aa-duration-fast) var(--aa-ease-out);
}

/* ══════════════════════════════════════
   PARALLAX MARKERS
   ══════════════════════════════════════ */

[data-aa-parallax] {
    will-change: transform;
}

/* ══════════════════════════════════════
   COUNTER / NUMBER ANIMATION
   ══════════════════════════════════════ */

.aa-counter {
    font-family: var(--aa-font-heading);
    font-size: var(--aa-fs-4xl);
    color: var(--aa-dark);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════ */

.aa-skeleton {
    background: linear-gradient(
        90deg,
        var(--aa-warm-beige) 25%,
        var(--aa-warm-sand) 50%,
        var(--aa-warm-beige) 75%
    );
    background-size: 200% 100%;
    animation: aa-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--aa-radius-md);
}

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

/* ══════════════════════════════════════
   SMOOTH SCROLL PROGRESS BAR
   ══════════════════════════════════════ */

.aa-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aa-primary), var(--aa-accent));
    z-index: 9999;
    width: 0%;
    transition: width 50ms linear;
}

/* ══════════════════════════════════════
   CURSOR FOLLOW DOT (optional)
   ══════════════════════════════════════ */

.aa-cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--aa-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform var(--aa-duration-fast) var(--aa-ease-out);
}

.aa-cursor-dot.is-hovering {
    transform: scale(4);
    background: var(--aa-accent);
}

/* ══════════════════════════════════════
   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-aa-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    [data-aa-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .aa-cursor-dot { display: none; }
    .aa-scroll-progress { display: none; }
}