/* =========================================================
   ANIMACIONES — CIP
   (se carga después de styles.css; no modifica el diseño)
   ========================================================= */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
body { overflow-x: clip; }

/* ---------- Barra de progreso de lectura ---------- */
#scroll-progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, #ea8025, #d97706);
    transform: scaleX(0); transform-origin: left;
    z-index: 60; pointer-events: none;
}
header#top { transition: box-shadow .35s ease; }
header#top.is-scrolled { box-shadow: 0 6px 20px rgba(6, 38, 51, .10); }

/* ---------- Revelado al hacer scroll (más suave) ---------- */
.reveal       { transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-scale { transform: scale(.92) translateY(20px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-left  { opacity: 0; transform: translateX(-50px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: opacity, transform; }
.reveal-right { opacity: 0; transform: translateX(50px);  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: opacity, transform; }
.reveal-left.active, .reveal-right.active { opacity: 1; transform: translateX(0); }

/* Cuando ya terminó de aparecer: respuesta inmediata en hover (sin retraso) */
.reveal.active.settled, .reveal-scale.active.settled,
.reveal-left.active.settled, .reveal-right.active.settled {
    transition: transform .4s var(--ease-out), box-shadow .4s ease, opacity .4s ease;
    transition-delay: 0s !important;
}

/* Línea decorativa bajo los títulos: se dibuja al aparecer */
.reveal h2 + div { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .35s; }
.reveal.text-center h2 + div { transform-origin: center; }
.reveal.active h2 + div { transform: scaleX(1); }

/* ---------- Portada (hero) ---------- */
@keyframes kenBurns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes bandIn   { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } }
@keyframes textUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
#hero-bg-img            { animation: kenBurns 3s var(--ease-out) backwards; }
#hero-bg-img + div      { animation: bandIn 1s var(--ease-out) .35s backwards; }
#hero-bg-img + div h1   { animation: textUp .9s var(--ease-out) .85s backwards; }
#hero-bg-img + div p    { animation: textUp .9s var(--ease-out) 1.1s backwards; }

/* ---------- Menú de navegación ---------- */
.dropdown-menu {
    transform: translateY(12px) scale(.98); transform-origin: top;
    transition: opacity .25s var(--ease-out), transform .35s var(--ease-out), visibility .25s;
}
.group:hover .dropdown-menu { transform: translateY(0) scale(1); }
@keyframes dropItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.group:hover .dropdown-menu a { animation: dropItem .4s var(--ease-out) backwards; }
.group:hover .dropdown-menu a:nth-child(1) { animation-delay: .04s; }
.group:hover .dropdown-menu a:nth-child(2) { animation-delay: .09s; }
.group:hover .dropdown-menu a:nth-child(3) { animation-delay: .14s; }
.group:hover .dropdown-menu a:nth-child(4) { animation-delay: .19s; }
.dropdown-menu a { transition: padding-left .25s var(--ease-out), color .25s, background-color .25s; }
.dropdown-menu a:hover { padding-left: 1.4rem; color: #ea8025; }

/* Subrayado animado en los botones principales */
nav .group > button, nav a.px-4.text-amber-300 { position: relative; }
nav .group > button::after, nav a.px-4.text-amber-300::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 2px; height: 2px; border-radius: 2px;
    background: #ea8025; transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease-out);
}
nav .group:hover > button::after, nav a.px-4.text-amber-300:hover::after { transform: scaleX(1); }

/* Menú móvil */
@keyframes menuDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
#mobile-menu:not(.hidden)       { animation: menuDrop .35s var(--ease-out); }
#mobile-menu [id^="sub-"]:not(.hidden) { animation: menuDrop .3s var(--ease-out); }

/* ---------- Tarjetas de accesos ---------- */
#accesos a.group.settled:hover { transform: translateY(-8px); }
@keyframes iconPop {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.25) rotate(-8deg); }
    70%  { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
#accesos a.group:hover .text-cip-accent > i { animation: iconPop .7s var(--ease-out); }

/* ---------- Cifras ---------- */
@keyframes numPop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.counter-number { display: inline-block; }
.counter-number.pop { animation: numPop .5s var(--ease-out); }

/* ---------- Pie de página ---------- */
#contacto a.rounded-full { transition: transform .3s var(--ease-out), background-color .3s; }
#contacto a.rounded-full:hover { transform: translateY(-4px) rotate(8deg); }

/* ---------- Ventana emergente y notificación ---------- */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
#info-modal:not(.hidden)       { animation: fadeIn .25s ease-out; }
#info-modal:not(.hidden) > div { animation: modalPop .4s var(--ease-out); }
#toast:not(.hidden)            { animation: toastIn .4s var(--ease-out); }

/* ---------- Accesibilidad: respetar "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .reveal, .reveal-scale, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
    .reveal h2 + div { transform: none !important; }
}