/*
==============================================
PLEY — ANIMATIONS CSS
Contiene todos los @keyframes y clases
de animación del proyecto.
==============================================
*/

/* ============================================
   ANIMACIONES DE ENTRADA
   ============================================ */
.scale-in {
  animation: scaleIn 0.6s ease-out;
}

@keyframes scaleIn {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.slide-up {
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  0%   { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.rotate-in {
  animation: rotateIn 1s ease-out;
}

@keyframes rotateIn {
  0%   { transform: rotate(-180deg) scale(0.5); opacity: 0; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes slideInUp {
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ============================================
   FLOATING
   ============================================ */
.floating-element {
  animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(2) { animation-delay: -2s; }
.floating-element:nth-child(3) { animation-delay: -4s; }

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(1deg); }
  66%       { transform: translateY(-10px) rotate(-1deg); }
}

/* ============================================
   GLOW
   ============================================ */
.glow-effect {
  box-shadow: 0 0 20px rgba(221, 0, 255, 0.5);
  animation: glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  0%   { box-shadow: 0 0 20px rgba(221, 0, 255, 0.5); }
  100% { box-shadow: 0 0 30px rgba(221, 0, 255, 0.8); }
}

@keyframes glow {
  from { box-shadow: 0 0 10px rgba(221, 0, 255, 0.3), 0 0 20px rgba(221, 0, 255, 0.2); }
  to   { box-shadow: 0 0 20px rgba(221, 0, 255, 0.5), 0 0 30px rgba(221, 0, 255, 0.3); }
}

/* ============================================
   SPIN
   ============================================ */
.spinning-icon {
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   3D TILT — Device icons
   ============================================ */
@keyframes tilt3D {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  25%       { transform: rotateY(15deg) rotateX(5deg); }
  50%       { transform: rotateY(0deg) rotateX(10deg); }
  75%       { transform: rotateY(-15deg) rotateX(5deg); }
}

/* ============================================
   CIRCLE 3D
   ============================================ */
@keyframes circle3d {
  0%, 100% { transform: translateZ(0) rotateX(0) rotateY(0); }
  25%       { transform: translateZ(50px) rotateX(45deg) rotateY(0); }
  50%       { transform: translateZ(100px) rotateX(45deg) rotateY(45deg); }
  75%       { transform: translateZ(50px) rotateX(0) rotateY(45deg); }
}

/* ============================================
   VIRTUE ICON — Flotación
   ============================================ */
@keyframes virtue-icon-float {
  0%, 100% { transform: translateY(0px) rotateZ(0deg); }
  50%       { transform: translateY(-10px) rotateZ(5deg); }
}

/* ============================================
   VIRTUE FLOATING CIRCLES
   ============================================ */
@keyframes virtue-floating {
  0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.7; }
  25%       { transform: translateY(-15px) translateX(10px) scale(1.2); opacity: 1; }
  50%       { transform: translateY(-25px) translateX(-5px) scale(0.8); opacity: 0.5; }
  75%       { transform: translateY(-10px) translateX(-10px) scale(1.1); opacity: 0.9; }
}

/* ============================================
   SPHERE FLOAT
   ============================================ */
@keyframes sphere-float {
  0%, 100% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); opacity: 0.3; }
  25%       { transform: translateY(-30px) translateX(20px) scale(1.2) rotate(90deg); opacity: 0.6; }
  50%       { transform: translateY(-50px) translateX(-10px) scale(0.8) rotate(180deg); opacity: 0.2; }
  75%       { transform: translateY(-20px) translateX(-30px) scale(1.1) rotate(270deg); opacity: 0.5; }
}

/* ============================================
   TOUCH PULSE
   ============================================ */
@keyframes touch-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================
   FADE SLIDE UP (para planes)
   ============================================ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SUBTLE PULSE (para plan highlighted)
   ============================================ */
@keyframes subtle-pulse {
  0%   { box-shadow: 0 0 15px rgba(221, 0, 255, 0.3); }
  100% { box-shadow: 0 0 25px rgba(221, 0, 255, 0.5); }
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
@keyframes gradient-text {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}