/* ═══════════════════════════════════════
   animations.css — Efectos visuales premium
   Rupta Studios
═══════════════════════════════════════ */

/* ══════════════════════════════
   REVEAL — base (ya en main.css,
   aquí agregamos variantes extra)
══════════════════════════════ */
.rv-left{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .6s ease}
.rv-left.in{opacity:1;transform:none}

.rv-right{opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease}
.rv-right.in{opacity:1;transform:none}

.rv-scale{opacity:0;transform:scale(.94);transition:opacity .55s ease,transform .55s ease}
.rv-scale.in{opacity:1;transform:scale(1)}

.rv-blur{opacity:0;filter:blur(6px);transition:opacity .6s ease,filter .6s ease}
.rv-blur.in{opacity:1;filter:blur(0)}

/* ══════════════════════════════
   CURSOR GLOW (escritorio)
══════════════════════════════ */
.cursor-glow{
  position:fixed;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.07) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  transition:opacity .4s;
  will-change:transform
}

/* ══════════════════════════════
   HOVER 3D EN CARDS
══════════════════════════════ */
.card-3d{
  transform-style:preserve-3d;
  transition:transform .15s ease,box-shadow .15s ease;
  will-change:transform
}
.card-3d:hover{
  box-shadow:0 24px 56px rgba(0,0,0,.55)
}

/* ══════════════════════════════
   MAGNETIC BUTTONS
══════════════════════════════ */
.btn-magnetic{
  transition:transform .2s cubic-bezier(.23,1,.32,1),
             box-shadow .2s ease
}

/* ══════════════════════════════
   GRADIENT TEXT ANIMADO
══════════════════════════════ */
.text-gradient{
  background:linear-gradient(90deg,#9b59f5,#e040fb,#9b59f5);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 4s linear infinite
}
@keyframes gradientShift{
  to{background-position:200% center}
}

/* ══════════════════════════════
   NÚMERO CONTADORES — pulso al terminar
══════════════════════════════ */
.counter-done{
  animation:counterPop .35s cubic-bezier(.34,1.56,.64,1)
}
@keyframes counterPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

/* ══════════════════════════════
   STAT CELL — glow al hover
══════════════════════════════ */
.stat-cell{
  transition:background .25s,box-shadow .25s
}
.stat-cell:hover{
  background:rgba(124,58,237,.06);
  box-shadow:inset 0 0 0 1px rgba(155,89,245,.18)
}

/* ══════════════════════════════
   HERO BADGE — shimmer
══════════════════════════════ */
.hero-badge::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
  background-size:200% 100%;
  animation:shimmer 2.8s ease-in-out infinite
}
.hero-badge{position:relative;overflow:hidden}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

/* ══════════════════════════════
   LOGOS STRIP — pausa al hover
══════════════════════════════ */
.logos-track:hover{
  animation-play-state:paused
}

/* ══════════════════════════════
   BORDER GLOW EN CARDS AL HOVER
══════════════════════════════ */
.rcard,.sol-card,.wcard,.case,.rev,.plan,.sc,.pc{
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s
}
.rcard:hover,.sol-card:hover,.case:hover,.rev:hover,.sc:hover{
  box-shadow:0 0 0 1px rgba(155,89,245,.2),0 16px 40px rgba(0,0,0,.4)
}

/* ══════════════════════════════
   TRANSICIÓN ENTRE PÁGINAS
══════════════════════════════ */
#page-container{
  transition:opacity .22s ease, transform .22s ease
}
#page-container.leaving{
  opacity:0;
  transform:translateY(10px)
}
#page-container.entering{
  opacity:0;
  transform:translateY(-10px)
}
#page-container.visible{
  opacity:1;
  transform:none
}

/* ══════════════════════════════
   PARALLAX SUTIL EN HERO
══════════════════════════════ */
.hero-glow{
  will-change:transform;
  transition:transform .1s linear
}

/* ══════════════════════════════
   TECH PILLS — rebote al hover
══════════════════════════════ */
.tech{
  transition:border-color .2s,color .2s,background .2s,transform .2s cubic-bezier(.34,1.56,.64,1)
}
.tech:hover{
  transform:translateY(-3px)
}

/* ══════════════════════════════
   BOTONES — ripple effect
══════════════════════════════ */
.btn{
  position:relative;overflow:hidden
}
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:scale(0);
  animation:rippleAnim .5s linear;
  pointer-events:none
}
@keyframes rippleAnim{
  to{transform:scale(4);opacity:0}
}

/* ══════════════════════════════
   STAGGER — children con delay
   Uso: <div class="stagger"> en el padre
══════════════════════════════ */
.stagger > .rv:nth-child(1){transition-delay:.04s}
.stagger > .rv:nth-child(2){transition-delay:.10s}
.stagger > .rv:nth-child(3){transition-delay:.16s}
.stagger > .rv:nth-child(4){transition-delay:.22s}
.stagger > .rv:nth-child(5){transition-delay:.28s}
.stagger > .rv:nth-child(6){transition-delay:.34s}

/* ══════════════════════════════
   LÍNEA DECORATIVA ANIMADA
   Uso: <span class="line-draw">
══════════════════════════════ */
.line-draw{
  display:inline-block;position:relative
}
.line-draw::after{
  content:'';
  position:absolute;bottom:-2px;left:0;right:0;height:1.5px;
  background:var(--pl);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.23,1,.32,1)
}
.line-draw:hover::after,.line-draw.active::after{
  transform:scaleX(1)
}

/* ══════════════════════════════
   FLOATING BADGES — más suaves
══════════════════════════════ */
@keyframes float1{
  0%,100%{transform:translate(-58%,-50%)}
  50%{transform:translate(-58%,-53%)}
}
@keyframes float2{
  0%,100%{transform:translateY(-42%)}
  50%{transform:translateY(-46%)}
}
@keyframes float3{
  0%,100%{transform:none}
  50%{transform:translateY(-8px)}
}

/* ══════════════════════════════
   REDUCED MOTION — respeto total
══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important
  }
  .cursor-glow{display:none}
}