/* ============================================
   NIM-ACh — Animations
   ============================================ */

/* ─── Keyframes ─── */
@keyframes line-in {
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(29,184,132,.55); }
  50%       { opacity: .7; box-shadow: 0 0 0 5px rgba(29,184,132,0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes scale-in {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes slide-right {
  from { transform: translateX(-10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out),
              transform .65s var(--ease-out);
  will-change: opacity, transform;  /* pre-asigna compositing layer en mobile */
}

.reveal.visible {
  opacity: 1;
  transform: none;
  will-change: auto;  /* libera la layer una vez completada la transición */
}

/* Staggered delays */
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }

/* ─── Loading skeleton ─── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 25%,
    rgba(0,0,0,.02) 50%,
    rgba(0,0,0,.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}

/* ─── Page transition ─── */
.page-enter {
  animation: fade-in .4s var(--ease-out) forwards;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width:639px) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ─── Tooltip ─── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: rgba(6,14,30,.95);
  color: var(--t-hero);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease-out);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ─── Focus ring (accessibility) ─── */
:focus-visible {
  outline: 2px solid var(--c-coral);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ─── Hover glow util ─── */
.hover-glow-blue:hover  { box-shadow: 0 0 0 3px rgba(59,122,191,.2); }
.hover-glow-coral:hover { box-shadow: 0 0 0 3px rgba(232,112,64,.2); }
.hover-glow-teal:hover  { box-shadow: 0 0 0 3px rgba(29,184,132,.2); }