/* ==========================================================================
   CDM / COMEDIMA - animations.css
   Keyframes y clases de animacion (CSS puro + disparo via JS con .reveal)
   ========================================================================== */

/* ============================ PRELOADER BAR ============================ */
@keyframes preloader-fill {
    0%   { width: 0; }
    100% { width: 100%; }
}
.preloader__bar span {
    animation: preloader-fill 1.6s var(--ease-out) forwards;
}

/* ============================ HERO ENTRADA ============================ */
/* Fade In + Zoom lento del contenido del hero */
@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-zoom {
    from { transform: scale(1.15); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.hero__badge  { animation: hero-fade-in .8s var(--ease-out) .3s both; }
.hero__title  { animation: hero-fade-in .8s var(--ease-out) .5s both; }
.hero__subtitle { animation: hero-fade-in .8s var(--ease-out) .7s both; }
.hero__support  { animation: hero-fade-in .8s var(--ease-out) .85s both; }
.hero__buttons  { animation: hero-fade-in .8s var(--ease-out) 1s both; }
.hero__dots     { animation: hero-fade-in .8s var(--ease-out) 1.15s both; }
.hero__card     { animation: hero-zoom 1s var(--ease-out) .6s both; }
.hero__scroll   { animation: hero-fade-in .8s var(--ease-out) 1.4s both; }

/* Texto apareciendo letra por letra (typewriter) - controlado por JS
   La clase .typewriter aplica el cursor parpadeante */
.typewriter::after {
    content: "|";
    color: var(--yellow);
    animation: blink 1s steps(1) infinite;
    margin-left: 2px;
}
@keyframes blink {
    50% { opacity: 0; }
}

/* ============================ TITULOS: SUBRAYADO ANIMADO ============================ */
/* Al entrar en viewport, JS anade .is-reveal que dispara el subrayado */
.title-underline.is-reveal::after {
    animation: underline-grow .9s var(--ease-out) forwards;
}
@keyframes underline-grow {
    from { width: 0; }
    to   { width: 60%; }
}

/* ============================ SCROLL REVEAL ============================ */
/* Estado inicial oculto para elementos marcados con .reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    will-change: opacity, transform;
}
/* Cuando entra en viewport, JS anade .is-visible */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de direccion */
.reveal--left {
    transform: translateX(-50px);
}
.reveal--right {
    transform: translateX(50px);
}
.reveal--left.is-visible,
.reveal--right.is-visible {
    transform: translateX(0);
}

/* Escalado para cards */
.reveal--scale {
    transform: scale(.92);
}
.reveal--scale.is-visible {
    transform: scale(1);
}

/* Retraso escalonado para grids (lo asigna JS con --d) */
.reveal[style*="--d"] {
    transition-delay: var(--d);
}

/* ============================ CARRUSEL INFINITO ============================ */
@keyframes carousel-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* JS anade .is-running cuando la pista esta lista */
.brands__track.is-running {
    animation: carousel-scroll 30s linear infinite;
}
/* Pausa al hover */
.brands__track.is-running:hover {
    animation-play-state: paused;
}

/* ============================ SCROLL INDICATOR ============================ */
@keyframes scroll-wheel {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}
.hero__scroll span {
    animation: scroll-wheel 1.8s var(--ease-in-out) infinite;
}

/* ============================ FLOTACION SUAVE (iconos) ============================ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.what-card:hover .what-card__icon {
    animation: float 2.5s var(--ease-in-out) infinite;
}

/* ============================ PULSO DEL DOT ============================ */
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 184, 0, .2); }
    50%      { box-shadow: 0 0 0 8px rgba(245, 184, 0, .05); }
}
.mini-card:hover .mini-card__dot {
    animation: pulse-dot 1.6s var(--ease-in-out) infinite;
}

/* ============================ FADE ENTRE SECCIONES ============================ */
/* Aplicado al hacer scroll suave entre secciones (lo gestiona main.js) */
section {
    animation: section-fade .5s var(--ease) both;
}
@keyframes section-fade {
    from { opacity: .6; }
    to   { opacity: 1; }
}