/* =============================================
   animations.css — Code Curators
   All keyframes + reveal classes
   ============================================= */

/* ── Keyframes ── */

@keyframes preloaderBounce {
    0%, 80%, 100% { transform: scale(0); opacity: .3; }
    40%            { transform: scale(1); opacity: 1; }
}

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero title: skewIn (per Auxa theme) */
@keyframes skewIn {
    0%   { opacity: 0; transform: skewY(3deg) translateY(60px); clip-path: inset(0 0 100% 0); }
    60%  { clip-path: inset(0 0 0% 0); }
    100% { opacity: 1; transform: skewY(0deg) translateY(0); clip-path: inset(0 0 0% 0); }
}

/* General scroll reveal */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Service card hover line sweep */
@keyframes lineSweep {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

/* Cursor blend */
@keyframes cursorPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.2); }
}

/* Smooth updown float */
@keyframes updown {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ── Hero text: .skew-in — triggered by JS ── */
.skew-in {
    display: block;
    opacity: 0;
    transform: skewY(3deg) translateY(60px);
    clip-path: inset(0 0 100% 0);
    will-change: transform, opacity;
    transition:
        opacity    .8s cubic-bezier(.16, 1, .3, 1),
        transform  .8s cubic-bezier(.16, 1, .3, 1),
        clip-path  .8s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--di, 0s);
}

.skew-in.in {
    opacity: 1;
    transform: skewY(0deg) translateY(0);
    clip-path: inset(0 0 0% 0);
}

/* ── General fade-in-up ── */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity   .7s cubic-bezier(.16, 1, .3, 1),
        transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--di, 0s);
}
.fade-in-up.in {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scroll reveal: .reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity   .75s cubic-bezier(.16, 1, .3, 1),
        transform .75s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--d, 0s);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scroll skewIn on h2 ── */
.skew-in-scroll {
    overflow: hidden;
    display: block;
}
.skew-in-scroll .h2-top,
.skew-in-scroll .h2-bot {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform .8s cubic-bezier(.16, 1, .3, 1),
        opacity   .8s cubic-bezier(.16, 1, .3, 1);
}
.skew-in-scroll .h2-bot { transition-delay: .1s; }

.skew-in-scroll.visible .h2-top,
.skew-in-scroll.visible .h2-bot {
    transform: translateY(0);
    opacity: 1;
}

/* For h2 that are NOT split into spans, just do standard reveal */
.skew-in-scroll:not(:has(.h2-top)) {
    opacity: 0;
    transform: translateY(28px) skewY(1.5deg);
    transition:
        opacity   .8s cubic-bezier(.16, 1, .3, 1),
        transform .8s cubic-bezier(.16, 1, .3, 1);
}
.skew-in-scroll:not(:has(.h2-top)).visible {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .skew-in, .fade-in-up, .reveal, .skew-in-scroll,
    .skew-in-scroll .h2-top, .skew-in-scroll .h2-bot {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}