/* ============================================================
   PromoInk — Animaciones y Micro-interacciones
   ============================================================ */

/* --- Smooth Scroll (Lenis) Support --- */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ── Entrance animations ──────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up    { animation: fadeInUp    0.6s var(--ease-smooth) both; }
.anim-fade-left  { animation: fadeInLeft  0.6s var(--ease-smooth) both; }
.anim-fade-right { animation: fadeInRight 0.6s var(--ease-smooth) both; }
.anim-scale-in   { animation: scaleIn     0.5s var(--ease-spring)  both; }

.anim-delay-1  { animation-delay: 0.1s; }
.anim-delay-2  { animation-delay: 0.2s; }
.anim-delay-3  { animation-delay: 0.3s; }
.anim-delay-4  { animation-delay: 0.4s; }
.anim-delay-5  { animation-delay: 0.5s; }
.anim-delay-6  { animation-delay: 0.6s; }

/* ── Número contadores animados ───────────────────────────── */
.counter-anim {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Progress bars ────────────────────────────────────────── */
.progress-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--ease-smooth);
}

.progress-bar-fill.animate { transform: scaleX(1); }

/* ── Parallax sutil ───────────────────────────────────────── */
.parallax-slow  { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ── Línea divisora animada ───────────────────────────────── */
.animated-line {
  height: 1px;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-smooth);
}

.animated-line.visible { transform: scaleX(1); }

/* ── Partículas decorativas ───────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleDrift linear infinite;
  opacity: 0;
}

@keyframes particleDrift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translate(var(--dx, 50px), var(--dy, -100px)) scale(1); }
}

/* ── Hover glow en íconos ─────────────────────────────────── */
.icon-glow {
  transition: filter var(--duration-base), transform var(--duration-base) var(--ease-spring);
}

.icon-glow:hover {
  filter: drop-shadow(0 0 12px var(--accent-pink));
  transform: scale(1.1);
}

/* ── Underline animado en links ───────────────────────────── */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-smooth);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Skeleton pulse ──────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.pulse { animation: pulse 2s ease-in-out infinite; }

/* ── Ripple en botones ────────────────────────────────────── */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ── Typing cursor ────────────────────────────────────────── */
.typing::after {
  content: '|';
  display: inline-block;
  animation: blink 0.8s step-end infinite;
  color: var(--accent-pink);
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ── Glitch text effect (decorativo) ─────────────────────── */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.glitch:hover::before {
  opacity: 0.8;
  color: var(--accent-pink);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  transform: translateX(-2px);
  animation: glitchA 0.4s steps(2) both;
}

.glitch:hover::after {
  opacity: 0.8;
  color: var(--accent-cyan);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  transform: translateX(2px);
  animation: glitchB 0.4s steps(2) both;
}

@keyframes glitchA {
  from { transform: translateX(0px); }
  to   { transform: translateX(-4px) skewX(2deg); }
}

@keyframes glitchB {
  from { transform: translateX(0px); }
  to   { transform: translateX(4px) skewX(-2deg); }
}

/* ── Page loader ──────────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s, visibility 0.5s;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-logo-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 10;
  animation: scaleInLoader 0.8s var(--ease-spring) both;
}

.loader-img-main {
  height: 140px; /* Tamaño elegante, no excesivo */
  width: auto;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.1));
}

.loader-bar {
  width: 280px;
  height: 6px;
  background: rgba(255,255,255,0.15); /* Más visible */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
  margin-top: 1rem;
}

.loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan), var(--accent-gold));
  background-size: 200% 100%;
  box-shadow: 0 0 15px rgba(0,188,255,0.4);
  animation: loadProgress 2.2s cubic-bezier(0.65, 0, 0.35, 1) forwards,
             gradientFlow 3s linear infinite;
}

/* ── Orbiting Icons ──────────────────────────────────────── */
.loader-icons-orbit {
  position: absolute;
  width: 400px;
  height: 400px;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.03);
}

.orbit-1 { width: 300px; height: 300px; top: 50px; left: 50px; animation: rotate 20s linear infinite; }
.orbit-2 { width: 450px; height: 450px; top: -25px; left: -25px; animation: rotate 30s linear reverse infinite; }

.orbit-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  animation: counter-rotate 20s linear infinite; /* Para que el icono no rote sobre sí mismo */
}

.orbit-2 .orbit-icon { animation-duration: 30s; animation-direction: reverse; }

/* Positions on the rings */
.orbit-icon-1 { top: 0; left: 50%; transform: translate(-50%, -50%); color: var(--accent-pink); border-color: var(--accent-pink); box-shadow: 0 0 15px rgba(232,62,140,0.3); }
.orbit-icon-2 { bottom: 0; left: 50%; transform: translate(-50%, 50%); color: var(--accent-cyan); border-color: var(--accent-cyan); box-shadow: 0 0 15px rgba(0,188,255,0.3); }
.orbit-icon-3 { top: 50%; right: 0; transform: translate(50%, -50%); color: var(--accent-gold); border-color: var(--accent-gold); box-shadow: 0 0 15px rgba(251,191,36,0.3); }
.orbit-icon-4 { top: 50%; left: 0; transform: translate(-50%, -50%); color: #fff; border-color: rgba(255,255,255,0.2); }

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes counter-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes scaleInLoader {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes gradientFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

@keyframes loadProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

.loader-bg-decor {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232,62,140,0.08) 0%, transparent 70%);
  filter: blur(60px);
  animation: pulseBg 4s ease-in-out infinite;
}

@keyframes pulseBg {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.5; }
}

.loader-bg-decor {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232,62,140,0.1) 0%, transparent 70%);
  filter: blur(80px);
  animation: pulseBg 4s ease-in-out infinite;
}

@keyframes pulseBg {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* ── Reveal stagger children ──────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}

.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }
.stagger-children.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 480ms; }
.stagger-children.visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 560ms; }