/* ================================================
   ANIMACIONES & MOVIMIENTO
   Agencia Sunsky  ·  css/animations.css
   ------------------------------------------------
   Cursor personalizado, scroll reveals, orbs del hero,
   pills flotantes, strip de logos, pulsaciones.
   Todos los @keyframes están al final del archivo.
================================================ */

/* ============================
   CURSOR PERSONALIZADO (desktop)
============================ */
#cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--purple-dark);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, opacity .25s ease;
  mix-blend-mode: multiply;
}

#cursor.hovering {
  width: 40px;
  height: 40px;
  background: rgba(91, 78, 158, .18);
}

/* ============================
   SCROLL REVEAL
============================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s cubic-bezier(.22,.68,0,1.2), transform .75s cubic-bezier(.22,.68,0,1.2);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Delays escalonados */
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* ============================
   ORBS DEL HERO (fondos difusos)
============================ */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  animation: orb-float 10s ease-in-out infinite;
}

.orb-a {
  width: 560px;
  height: 560px;
  top: -140px;
  right: -80px;
  background: radial-gradient(circle, rgba(232, 96, 138, .25), transparent 70%);
  animation-delay: 0s;
}

.orb-b {
  width: 420px;
  height: 420px;
  bottom: 40px;
  left: -80px;
  background: radial-gradient(circle, rgba(46, 196, 182, .22), transparent 70%);
  animation-delay: -4s;
}

.orb-c {
  width: 300px;
  height: 300px;
  top: 38%;
  right: 18%;
  background: radial-gradient(circle, rgba(255, 217, 61, .2), transparent 70%);
  animation-delay: -7s;
}
.orb-d {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  width: 240px;
  height: 240px;
  bottom: 16%;
  left: 28%;
  background: radial-gradient(circle, rgba(124, 138, 255, .16), transparent 70%);
  animation: orb-float 12s ease-in-out infinite;
  animation-delay: -2s;
}

/* ============================
   PILLS FLOTANTES (hero)
============================ */
.pill {
  position: absolute;
  background: rgba(30, 24, 48, .85);
  border-radius: var(--rs);
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  animation: pill-float 7s ease-in-out infinite;
}

.pill-ico { font-size: 1.15rem; }

.pill-top { top: -22px;   right: 18px;  animation-delay: -1s; }
.pill-bot { bottom: -18px; left: -22px; animation-delay: -4s; }
.pill-mid {
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  animation: pill-mid 7s ease-in-out infinite;
  animation-delay: -2.5s;
}

/* ============================
   LOGO STRIP (scroll infinito)
============================ */
.logos-track {
  display: flex;
  gap: 60px;
  animation: scroll-x 22s linear infinite;
}

.logos-half {
  display: flex;
  gap: 60px;
  flex-shrink: 0;
}

/* ============================
   WHATSAPP FLOAT (pulso)
============================ */
.wa-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: pulse 2.8s ease infinite;
}

/* ============================
   TEXTO CON MOVIMIENTO
   Gradiente animado que fluye sobre
   palabras destacadas (hero <em>, .gradient-text)
============================ */
.gradient-text,
.hero h1 em,
.cta-final h2 em {
  font-style: normal;
  background: linear-gradient(110deg, #FF5C8A, #FFC53D, #2EE6C5, #9D8FE8, #FF5C8A);
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: text-flow 6s linear infinite;
}

/* Aparición de títulos: letras/líneas que suben con desenfoque */
.title-rise {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1),
              transform .9s cubic-bezier(.2,.8,.2,1),
              filter .9s ease;
}
.title-rise.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Brillo que cruza un elemento (cards destacadas) */
.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-18deg);
  animation: shine-sweep 5s ease-in-out infinite;
}

/* ============================
   BARRA DE PROGRESO DE SCROLL
============================ */
.scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--purple-dark), var(--rose), var(--purple-dark));
  background-size: 200% 100%;
  z-index: 9998;
  transition: width .08s linear;
  animation: bar-gradient 4s ease infinite;
}

/* Nav link activo mientras se scrollea */
.nav-links a.active {
  color: var(--purple) !important;
}
.nav-links a.active::after {
  width: 100% !important;
}

/* ================================================
   @KEYFRAMES
================================================ */

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0)     scale(1); }
  33%       { transform: translate(18px, -22px) scale(1.06); }
  66%       { transform: translate(-14px, 16px) scale(.96); }
}

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

@keyframes pill-mid {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%       { transform: translateY(-50%) translateX(6px); }
}

@keyframes scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.7); }
}

@keyframes bar-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes text-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 280% center; }
}

@keyframes shine-sweep {
  0%, 100% { left: -120%; }
  45%, 55% { left: 140%; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 rgba(157,143,232,0); }
  50%      { box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 50px rgba(157,143,232,.35); }
}