/* ================================================================
   IN-DI Ingeniería — Animations
   ================================================================ */

/* ================================================================
   HERO LOAD SEQUENCE
   ================================================================ */

/* Badge fades up first */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-badge-wrap { animation: fadeUp .7s cubic-bezier(0.16,1,0.3,1) .12s both; }
.hero-sub        { animation: fadeUp .8s cubic-bezier(0.16,1,0.3,1) .85s both; }
.hero-actions    { animation: fadeUp .8s cubic-bezier(0.16,1,0.3,1) 1.0s  both; }
.hero-scroll-cue { animation: fadeUp 1s  cubic-bezier(0.16,1,0.3,1) 1.25s both; }

/* ── Character reveal on hero H1 ── */
@keyframes charReveal {
    from {
        opacity: 0;
        transform: translateY(0.85em) rotate(4deg);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
        filter: blur(0);
    }
}

/* All chars within .split-text */
.split-text .char {
    display: inline-block;
    animation: charReveal .65s cubic-bezier(0.16,1,0.3,1) both;
    /* Line 1: starts at 0.22s */
    animation-delay: calc(0.22s + var(--char-i, 0) * 0.031s);
}

/* Line 2 (accent line) starts after line 1 is mostly done */
.hero-line--accent .char {
    animation-delay: calc(0.52s + var(--char-i, 0) * 0.031s);
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(42px);
    transition:
        opacity  .85s cubic-bezier(0.16, 1, 0.3, 1),
        transform .85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger helpers */
.delay-1 { transition-delay: .1s;  }
.delay-2 { transition-delay: .2s;  }
.delay-3 { transition-delay: .32s; }
.delay-4 { transition-delay: .44s; }
.delay-5 { transition-delay: .56s; }

/* ================================================================
   CURSOR
   ================================================================ */
@keyframes dotGlow {
    0%,100% { box-shadow: 0 0 0 0   rgba(245,158,11,0.5); }
    50%      { box-shadow: 0 0 0 10px rgba(245,158,11,0);  }
}
.cursor-dot { animation: dotGlow 2.5s ease-in-out infinite; }
.cursor-dot.hovered { animation: none; }

/* ================================================================
   COUNTER BEAT
   ================================================================ */
@keyframes countBeat {
    0%   { transform: scale(1);    color: inherit; }
    35%  { transform: scale(1.1);  color: var(--accent); }
    100% { transform: scale(1);    color: inherit; }
}
.result-num.beat { animation: countBeat .5s cubic-bezier(0.16,1,0.3,1); }

/* ================================================================
   MVV ICON JIGGLE
   ================================================================ */
@keyframes iconJiggle {
    0%   { transform: rotate(0deg)  scale(1);    }
    25%  { transform: rotate(-10deg) scale(1.1); }
    60%  { transform: rotate(7deg)  scale(1.05); }
    100% { transform: rotate(0deg)  scale(1);    }
}
.mvv-item:hover .mvv-icon i { animation: iconJiggle .5s var(--spring); }

/* ================================================================
   SERVICE ROW INDENT ON OPEN
   ================================================================ */
.service-row-header { transition: padding-left .35s var(--spring); }
.service-row.open .service-row-header { padding-left: 0.4rem; }

/* ================================================================
   SEDE ITEM ICON GLOW
   ================================================================ */
.sede-item:hover .sede-marker i {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
    transition: filter .3s ease;
}

/* ================================================================
   PLAT STEP DOT PULSE
   ================================================================ */
@keyframes dotPulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(245,158,11,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(245,158,11,0);  }
}
.plat-step:hover::before { animation: dotPulse 1.2s ease-in-out infinite; }

/* ================================================================
   NAV LINK ACTIVE STATE
   ================================================================ */
.nav-links a.active { color: var(--dk-text); }
.nav-links a.active::after { width: 100%; }

/* ================================================================
   TEXT GRADIENT SHINE
   ================================================================ */
@keyframes shine {
    to { background-position: 200% center; }
}
.text-gradient-shine {
    background: linear-gradient(90deg, var(--accent) 0%, #fcd34d 40%, var(--accent) 60%, #fcd34d 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shine 3s linear infinite;
}

/* ================================================================
   FORM FOCUS GLOW PULSE
   ================================================================ */
@keyframes formFocus {
    0%,100% { box-shadow: 0 0 0 3px rgba(2,43,50,0.06); }
    50%      { box-shadow: 0 0 0 5px rgba(2,43,50,0.12); }
}
.form-control:focus { animation: formFocus 2s ease-in-out infinite; }