/* ============================================================
   SOFTWARELAPS — animations.css
   Scroll-reveal, entrance, hover and loading animations
   ============================================================ */

/* ── Scroll-reveal base ───────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1),
                transform .6s cubic-bezier(.4, 0, .2, 1);
}

[data-reveal="fade-up"]   { transform: translateY(40px); }
[data-reveal="fade-down"] { transform: translateY(-40px); }
[data-reveal="fade-left"] { transform: translateX(40px); }
[data-reveal="fade-right"]{ transform: translateX(-40px); }
[data-reveal="zoom-in"]   { transform: scale(.92); }
[data-reveal="zoom-out"]  { transform: scale(1.08); }

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

/* Stagger delays via data-delay attribute */
[data-delay="100"] { transition-delay: .1s; }
[data-delay="150"] { transition-delay: .15s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="250"] { transition-delay: .25s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="350"] { transition-delay: .35s; }
[data-delay="400"] { transition-delay: .4s; }
[data-delay="500"] { transition-delay: .5s; }
[data-delay="600"] { transition-delay: .6s; }

/* ── Hero entrance (no-JS fallback via CSS) ───────────────── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-badge   { animation: heroFadeUp .6s .1s both; }
.hero h1      { animation: heroFadeUp .6s .2s both; }
.hero .lead   { animation: heroFadeUp .6s .3s both; }
.hero-cta     { animation: heroFadeUp .6s .4s both; }
.hero-visual  { animation: heroFadeUp .7s .3s both; }
.mockup-stats { animation: heroFadeUp .6s .55s both; }

/* ── Float animation (code mockup) ───────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}
.code-mockup { animation: float 5s ease-in-out infinite; }

/* ── Pulse glow (primary CTA button) ─────────────────────── */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(224,90,0,.35); }
    50%       { box-shadow: 0 8px 32px rgba(224,90,0,.6); }
}
.btn-primary { animation: pulseGlow 3s ease-in-out infinite; }
.btn-primary:hover { animation: none; }

/* ── Spinner ──────────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}

/* ── HTMX loading indicator ───────────────────────────────── */
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }
.htmx-request .btn-submit-text { display: none; }

/* ── Skeleton shimmer ─────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f0f0f5 25%, #e0e0ea 50%, #f0f0f5 75%);
    background-size: 1200px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 6px;
}

/* ── Stat counter bump ────────────────────────────────────── */
@keyframes statBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.stat-num.bump { animation: statBump .4s ease-in-out; }

/* ── Page transition overlay ──────────────────────────────── */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
main { animation: pageIn .4s ease-out both; }

/* ── Card hover lift (reinforced) ────────────────────────── */
.service-card,
.post-card,
.value-card,
.process-step {
    transition: transform .3s cubic-bezier(.4,0,.2,1),
                box-shadow .3s cubic-bezier(.4,0,.2,1),
                border-color .3s;
}

/* ── Link underline slide ─────────────────────────────────── */
.footer-col a,
.nav-link {
    position: relative;
}

/* ── Active nav indicator dot ─────────────────────────────── */
.nav-link.active::after {
    content: '';
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}

/* ── Form field focus ring animation ─────────────────────── */
@keyframes focusRing {
    from { box-shadow: 0 0 0 0 rgba(224,90,0,.4); }
    to   { box-shadow: 0 0 0 4px rgba(224,90,0,.15); }
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    animation: focusRing .2s ease-out forwards;
}

/* ── Success checkmark ────────────────────────────────────── */
@keyframes checkDraw {
    from { stroke-dashoffset: 60; }
    to   { stroke-dashoffset: 0; }
}
.check-icon { stroke-dasharray: 60; animation: checkDraw .4s .2s ease-out forwards; }

/* ── Reduce-motion override ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}