/* =============================================
   IMPERIUM COMEX GROUP — Animaciones
   ============================================= */

/* ---------- Keyframes ---------- */
@keyframes imp-spin {
  to { transform: rotate(360deg); }
}
@keyframes imp-rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes imp-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes imp-scalein {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes imp-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes imp-dot {
  0%, 100% { opacity: .25; r: 3; }
  50%       { opacity: 1; r: 5; }
}
@keyframes imp-wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes imp-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(212,162,78,.4); }
  70%  { box-shadow: 0 0 0 14px rgba(212,162,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,162,78,0); }
}
@keyframes imp-checkmark {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
@keyframes imp-countdown {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ---------- Hero entrance animations ---------- */
.anim-scalein {
  opacity: 0;
  animation: imp-scalein 1s ease .1s forwards;
}
.anim-rise {
  opacity: 0;
  animation: imp-rise 1s ease forwards;
}
.anim-fadein {
  opacity: 0;
  animation: imp-fadein 1s ease forwards;
}
.anim-delay-1 { animation-delay: .35s; }
.anim-delay-2 { animation-delay: .60s; }
.anim-delay-3 { animation-delay: .80s; }
.anim-delay-4 { animation-delay: 1.00s; }
.anim-delay-5 { animation-delay: 1.60s; }

/* Globe spin */
.globe-spin {
  transform-origin: 300px 300px;
  animation: imp-spin 90s linear infinite;
}

/* Globe dots */
.globe-dot { animation: imp-dot 2.6s ease-in-out infinite; }
.globe-dot--1 { animation-delay: 0s; }
.globe-dot--2 { animation-delay: .9s; }
.globe-dot--3 { animation-delay: .4s; animation-duration: 3s; }
.globe-dot--4 { animation-delay: 1.3s; animation-duration: 3s; }

/* Checkmark animation on gracias page */
.gracias-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: imp-checkmark .6s ease .5s forwards;
}

/* Countdown bar */
.countdown-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--dorado-claro), var(--dorado-cobre));
  margin: 12px auto 0;
  max-width: 200px;
  border-radius: 1px;
  animation: imp-countdown 5s linear 1s forwards;
}

/* =============================================
   SCROLL REVEAL — estado inicial invisible
   ============================================= */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}

.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(.9); }

/* Cuando el observer agrega .revealed */
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delays para children con --reveal-delay */
[style*="--reveal-delay"] {
  transition-delay: var(--reveal-delay, 0ms) !important;
}

/* =============================================
   PREFER REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}