/* ══════════════════════════════════════════════════════════════
   X1TECHS – Entrance Animation Styles  v7
   ══════════════════════════════════════════════════════════════ */

/* ─── Smooth scroll ────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Base transition (all IO-driven animations) ─────────────  */
.x1-anim-init {
    will-change: opacity, transform;
    transition:
        opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── FADE UP ─────────────────────────────────────────────── */
[data-x1-anim="fade-up"].x1-anim-init  { opacity: 0; transform: translateY(20px); }
[data-x1-anim="fade-up"].x1-anim-active { opacity: 1; transform: translateY(0); }

/* ─── FADE IN ─────────────────────────────────────────────── */
[data-x1-anim="fade-in"].x1-anim-init  { opacity: 0; }
[data-x1-anim="fade-in"].x1-anim-active { opacity: 1; }

/* ─── FADE LEFT ───────────────────────────────────────────── */
[data-x1-anim="fade-left"].x1-anim-init  { opacity: 0; transform: translateX(-20px); }
[data-x1-anim="fade-left"].x1-anim-active { opacity: 1; transform: translateX(0); }

/* ─── FADE RIGHT ──────────────────────────────────────────── */
[data-x1-anim="fade-right"].x1-anim-init  { opacity: 0; transform: translateX(20px); }
[data-x1-anim="fade-right"].x1-anim-active { opacity: 1; transform: translateX(0); }

/* ─── SCALE IN ────────────────────────────────────────────── */
[data-x1-anim="scale-in"].x1-anim-init  { opacity: 0; transform: scale(0.92); }
[data-x1-anim="scale-in"].x1-anim-active { opacity: 1; transform: scale(1); }

/* ─── BLUR IN ─────────────────────────────────────────────── */
[data-x1-anim="blur-in"].x1-anim-init {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
    will-change: opacity, transform, filter;
    transition:
        opacity   0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter    0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-x1-anim="blur-in"].x1-anim-active {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
}

/* ─── REVEAL UP (clip-path curtain) ──────────────────────── */
[data-x1-anim="reveal-up"].x1-anim-init {
    will-change: clip-path;
    transition: clip-path 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    clip-path: inset(100% 0 0 0 round 12px);
}
[data-x1-anim="reveal-up"].x1-anim-active { clip-path: inset(0% 0 0 0 round 12px); }

/* ─── FLIP IN (subtle 3D rotateX) ────────────────────────── */
.e-parent { perspective: 1200px; }
[data-x1-anim="flip-in"].x1-anim-init {
    opacity: 0;
    transform: rotateX(20deg) translateY(16px);
    transform-origin: top center;
    will-change: opacity, transform;
    transition:
        opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-x1-anim="flip-in"].x1-anim-active {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   BATCH REVEAL  (service cards, projects, process-steps etc.)
   ──────────────────────────────────────────────────────────────
   Each card is observed individually — it only animates when
   IT enters the viewport, not when its container does.
   Cards visible at the same time get micro-batched and staggered.
   ══════════════════════════════════════════════════════════════ */
[data-x1-anim="batch"].x1-anim-init  { opacity: 0; transform: translateY(18px) scale(0.97); }
[data-x1-anim="batch"].x1-anim-active { opacity: 1; transform: translateY(0) scale(1); }

/* ══════════════════════════════════════════════════════════════
   IMAGE ANIMATIONS
   ──────────────────────────────────────────────────────────────
   Three distinct custom reveals for image/media containers.
   Apply the class to the Elementor widget wrapper container
   (the one with your custom CSS class).
   ══════════════════════════════════════════════════════════════ */

/* ── IMG WIPE  ─────────────────────────────────────────────────
   A clean vertical clip-path reveal — the image "slides" into
   view from the bottom edge upward.  Rounded reveal edge.
   Use on: hero images, about-us photos, project screenshots.
   ──────────────────────────────────────────────────────────── */
[data-x1-anim="img-wipe"].x1-anim-init {
    will-change: clip-path;
    transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    clip-path: inset(0 0 100% 0 round 16px);
}
[data-x1-anim="img-wipe"].x1-anim-active {
    clip-path: inset(0 0 0% 0 round 16px);
}

/* ── IMG ZOOM  ─────────────────────────────────────────────────
   Image starts slightly zoomed in (1.08×) and settles to natural
   size while fading in — a Ken-Burns-style entrance.
   Use on: team images, project thumbnails, card images.
   ──────────────────────────────────────────────────────────── */
[data-x1-anim="img-zoom"].x1-anim-init {
    opacity: 0;
    transform: scale(1.08);
    will-change: opacity, transform;
    transition:
        opacity   1.0s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-x1-anim="img-zoom"].x1-anim-active {
    opacity: 1;
    transform: scale(1);
}

/* ── IMG IRIS  ─────────────────────────────────────────────────
   Circular clip-path expands from the centre outward — like a
   camera iris or spotlight opening.  Very distinctive on isolated
   images.
   Use on: team member photos, logo images, single hero images.
   ──────────────────────────────────────────────────────────── */
[data-x1-anim="img-iris"].x1-anim-init {
    will-change: clip-path;
    transition:
        clip-path 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    clip-path: circle(0% at 50% 50%);
}
[data-x1-anim="img-iris"].x1-anim-active {
    clip-path: circle(75% at 50% 50%);
}

/* ══════════════════════════════════════════════════════════════
   CHARACTER SPLIT ANIMATION
   ══════════════════════════════════════════════════════════════ */
.x1-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
    transition:
        opacity   0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.x1-char-space { opacity: 1 !important; transform: none !important; transition: none !important; }
.x1-char.x1-char-visible { opacity: 1; transform: translateY(0); }

/* ─── Reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .x1-anim-init {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    .x1-char { opacity: 1 !important; transform: none !important; transition: none !important; }
}