/**
 * CSS Animations & Keyframes
 * Animaciones CSS puras inspiradas en FlowFest
 */

/* ========================================
   KEYFRAMES - MOVIMIENTOS BÁSICOS
   ======================================== */

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

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes swing {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

/* ========================================
   KEYFRAMES - MARQUEE
   ======================================== */

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* ========================================
   KEYFRAMES - FADE & SLIDE
   ======================================== */

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ========================================
   KEYFRAMES - SCALE & ZOOM
   ======================================== */

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* ========================================
   KEYFRAMES - ROTATE
   ======================================== */

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

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg) scale(0);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* ========================================
   KEYFRAMES - SPECIAL EFFECTS
   ======================================== */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

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

/* ========================================
   MARQUEE SECTION
   ======================================== */

.marquee-section {
  padding: var(--space-8) 0;
  background: var(--color-black);
  overflow: hidden;
  position: relative;
}

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  user-select: none;
  gap: var(--space-8);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  animation: marquee-left 30s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

/* Pausar al hover */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  white-space: nowrap;
  display: inline-block;
  padding: 0 var(--space-4);
  position: relative;
}

/* Efecto de gradiente en el texto */
.marquee__item:nth-child(odd) {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent-yellow));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@media (max-width: 768px) {
  .marquee__item {
    font-size: var(--font-size-2xl);
  }
}

/* ========================================
   LOADING & SKELETON
   ======================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

/* ========================================
   UTILITY ANIMATION CLASSES
   ======================================== */

/* Delays para animaciones escalonadas */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Duraciones */
.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }

/* Aplicar animaciones */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

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

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

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

.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-zoomIn {
  animation: zoomIn 0.5s ease-out forwards;
}

.animate-rotateIn {
  animation: rotateIn 0.8s ease-out forwards;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */

.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

.hover-grow {
  transition: transform var(--transition-base);
}

.hover-grow:hover {
  transform: scale(1.05);
}

.hover-rotate {
  transition: transform var(--transition-base);
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-tilt {
  transition: transform var(--transition-base);
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
}

/* ========================================
   PARALLAX & SCROLL EFFECTS
   ======================================== */

.parallax {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.parallax-slow {
  will-change: transform;
}

.parallax-fast {
  will-change: transform;
}

/* ========================================
   REVEAL ANIMATIONS (para GSAP)
   ======================================== */

/* Estado inicial antes de animar con GSAP */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
}

[data-reveal-left] {
  opacity: 0;
  transform: translateX(-30px);
}

[data-reveal-right] {
  opacity: 0;
  transform: translateX(30px);
}

[data-reveal-scale] {
  opacity: 0;
  transform: scale(0.9);
}

/* Cuando están visibles (GSAP añadirá estas clases) */
.is-revealed {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ========================================
   STAGGER ANIMATIONS
   ======================================== */

/* Para animar elementos en secuencia */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-item.is-visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ========================================
   TEXT EFFECTS
   ======================================== */

/* Efecto de máquina de escribir */
.typewriter {
  overflow: hidden;
  border-right: 3px solid var(--color-primary);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

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

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: var(--color-primary);
  }
}

/* Split text preparation (para GSAP SplitText) */
.split-chars .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.split-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.split-lines .line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
}

/* ========================================
   BACKGROUND ANIMATIONS
   ======================================== */

.gradient-bg {
  background: linear-gradient(
    -45deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-accent-purple),
    var(--color-accent-blue)
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

/* Circles floating */
.floating-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  animation: float 10s ease-in-out infinite;
}

.shape:nth-child(1) {
  width: 80px;
  height: 80px;
  background: var(--color-primary);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.shape:nth-child(2) {
  width: 60px;
  height: 60px;
  background: var(--color-secondary);
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.shape:nth-child(3) {
  width: 100px;
  height: 100px;
  background: var(--color-accent-yellow);
  bottom: 20%;
  left: 30%;
  animation-delay: 4s;
}

/* ========================================
   ENTRANCE ANIMATIONS
   ======================================== */

/* Fade in elements on page load */
.entrance-fade {
  animation: fadeIn 1s ease-out;
}

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

.entrance-zoom {
  animation: zoomIn 0.6s ease-out;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Para animaciones más suaves */
.will-animate {
  will-change: transform, opacity;
}

/* Después de la animación, remover will-change */
.animate-complete {
  will-change: auto;
}

/* Hardware acceleration */
.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .marquee__track {
    animation: none;
  }
  
  .animate-float,
  .animate-bounce,
  .animate-pulse,
  .animate-swing,
  .animate-wiggle {
    animation: none;
  }
}