/* =========================================================
   CHICHI · Motion layer — micro-animaciones aditivas
   Carga después de design-system.css. Seguro de eliminar.
   ========================================================= */

/* ── Entrada de página: topbar + nav deslizan desde arriba ── */
.topbar {
  animation: csSlideDown .65s cubic-bezier(.16,1,.3,1) both;
}
.nav-ibero {
  animation: csSlideDown .75s .07s cubic-bezier(.16,1,.3,1) both;
}
@keyframes csSlideDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Hero USP items: animación CSS pura (no depende de JS) ── */
@keyframes uspSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy .hero-usp-item:nth-child(1) { animation: uspSlideIn .4s .65s cubic-bezier(.16,1,.3,1) both; }
.hero-copy .hero-usp-item:nth-child(2) { animation: uspSlideIn .4s .80s cubic-bezier(.16,1,.3,1) both; }
.hero-copy .hero-usp-item:nth-child(3) { animation: uspSlideIn .4s .95s cubic-bezier(.16,1,.3,1) both; }
.hero-copy .hero-usp-item:nth-child(4) { animation: uspSlideIn .4s 1.1s cubic-bezier(.16,1,.3,1) both; }

/* ── Feature cards: icono sube y brilla en hover ── */
.card-dyn .f-ico {
  transition: transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease;
}
.card-dyn:hover .f-ico {
  transform: translateY(-5px) scale(1.18);
  filter: drop-shadow(0 6px 14px rgba(155,95,255,0.6));
}

/* ── Feature cards: borde glow en hover (el JS tilt sigue controlando transform) ── */
.card-dyn:hover {
  border-color: rgba(155,95,255,0.40);
  box-shadow:
    0 0 0 1px rgba(155,95,255,0.14),
    0 22px 48px rgba(155,95,255,0.11);
}

/* ── Section eyebrow: línea crece al entrar en viewport ── */
.sec-intro .eyebrow {
  position: relative;
  display: inline-block;
}
.sec-intro .eyebrow::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--purple), var(--orange));
  transition: width .65s .22s cubic-bezier(.16,1,.3,1);
}
.sec-intro.reveal.in .eyebrow::after { width: 100%; }

/* ── Avión: keyframes mejorados — visible 77 % del ciclo (vs 60 % original)
   La redefinición aquí sobreescribe ibero.css porque motion.css carga después.
   !important gana el conflicto de prefers-reduced-motion de design-system.css ── */
@keyframes planeLand {
  0%   { transform: translate3d(-18vw, -2vh, 0) rotate(9deg) scale(0.88); opacity: 0; }
  8%   { opacity: 1; }
  75%  { transform: translate3d(88vw, 30vh, 0) rotate(6deg) scale(1.02); opacity: 1; }
  85%  { transform: translate3d(108vw, 38vh, 0) rotate(5deg) scale(1.05); opacity: 0; }
  100% { transform: translate3d(108vw, 38vh, 0) rotate(5deg) scale(1.05); opacity: 0; }
}
@keyframes contrailPulse {
  0%, 8%     { opacity: 0; }
  22%        { opacity: 0.55; }
  75%        { opacity: 0.35; }
  83%, 100%  { opacity: 0; }
}

/* Global — desktop y móvil */
.hero-plane {
  animation: planeLand 14s ease-in-out infinite !important;
  animation-play-state: running !important;
}
.hero-plane .contrail {
  animation: contrailPulse 14s ease-in-out infinite !important;
}

/* Móvil: avión más pequeño y ciclo levemente más rápido */
@media (max-width: 900px) {
  .hero-plane {
    width: 100px;
    animation-duration: 12s !important;
  }
  .hero-plane .contrail {
    animation-duration: 12s !important;
  }
}