/**
 * ===============================================
 * NIKA MOTION LIBRARY v1.0.0
 * https://github.com/jcrrodriguez/nika-motion
 * 
 * Copyright (c) 2025 Nika Agency
 * Released under the MIT License
 * ===============================================
 */

/* ======================================
   NIKA MOTION CORE SYSTEM
   ====================================== */

/* Distancia por defecto para animaciones */
:root {
  --n-distance: 100px;
}

/* Estado inicial: elementos ocultos hasta que se inicialice */
[n-animate] {
  pointer-events: none;
}

[n-animate].n-init {
  pointer-events: auto;
}


/* === DURACIONES === */
[n-animate][n-duration="50"] { transition-duration: 50ms; }
[n-animate][n-duration="100"] { transition-duration: 100ms; }
[n-animate][n-duration="150"] { transition-duration: 150ms; }
[n-animate][n-duration="200"] { transition-duration: 200ms; }
[n-animate][n-duration="250"] { transition-duration: 250ms; }
[n-animate][n-duration="300"] { transition-duration: 300ms; }
[n-animate][n-duration="400"] { transition-duration: 400ms; }
[n-animate][n-duration="500"] { transition-duration: 500ms; }
[n-animate][n-duration="600"] { transition-duration: 600ms; }
[n-animate][n-duration="700"] { transition-duration: 700ms; }
[n-animate][n-duration="800"] { transition-duration: 800ms; }
[n-animate][n-duration="900"] { transition-duration: 900ms; }
[n-animate][n-duration="1000"] { transition-duration: 1000ms; }
[n-animate][n-duration="1200"] { transition-duration: 1200ms; }
[n-animate][n-duration="1500"] { transition-duration: 1500ms; }
[n-animate][n-duration="2000"] { transition-duration: 2000ms; }
[n-animate][n-duration="2500"] { transition-duration: 2500ms; }
[n-animate][n-duration="3000"] { transition-duration: 3000ms; }


/* === DELAYS === */
[n-animate][n-delay="0"] { transition-delay: 0ms; }
[n-animate][n-delay="50"] { transition-delay: 50ms; }
[n-animate][n-delay="100"] { transition-delay: 100ms; }
[n-animate][n-delay="150"] { transition-delay: 150ms; }
[n-animate][n-delay="200"] { transition-delay: 200ms; }
[n-animate][n-delay="250"] { transition-delay: 250ms; }
[n-animate][n-delay="300"] { transition-delay: 300ms; }
[n-animate][n-delay="400"] { transition-delay: 400ms; }
[n-animate][n-delay="500"] { transition-delay: 500ms; }
[n-animate][n-delay="600"] { transition-delay: 600ms; }
[n-animate][n-delay="800"] { transition-delay: 800ms; }
[n-animate][n-delay="1000"] { transition-delay: 1000ms; }
[n-animate][n-delay="1500"] { transition-delay: 1500ms; }
[n-animate][n-delay="2000"] { transition-delay: 2000ms; }


/* === EASINGS === */
[n-animate][n-easing="linear"] { transition-timing-function: linear; }
[n-animate][n-easing="ease"] { transition-timing-function: ease; }
[n-animate][n-easing="ease-in"] { transition-timing-function: ease-in; }
[n-animate][n-easing="ease-out"] { transition-timing-function: ease-out; }
[n-animate][n-easing="ease-in-out"] { transition-timing-function: ease-in-out; }
[n-animate][n-easing="ease-in-back"] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); }
[n-animate][n-easing="ease-out-back"] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
[n-animate][n-easing="ease-in-out-back"] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }


/* ======================================
   NIKA MOTION LIBRARY - ANIMATIONS
   Todas las animaciones de la librería
   ====================================== */

/* === FADE ANIMATIONS === */

[n-animate^="fade"] {
  opacity: 0;
  transition-property: opacity, transform;
}

[n-animate^="fade"].n-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fade simple */
[n-animate="fade"] {
  opacity: 0;
}

[n-animate="fade"].n-animate {
  opacity: 1;
}

/* Fade con dirección */
[n-animate="fade-up"] {
  transform: translate3d(0, var(--n-distance), 0);
}

[n-animate="fade-down"] {
  transform: translate3d(0, calc(var(--n-distance) * -1), 0);
}

[n-animate="fade-left"] {
  transform: translate3d(var(--n-distance), 0, 0);
}

[n-animate="fade-right"] {
  transform: translate3d(calc(var(--n-distance) * -1), 0, 0);
}

/* Fade diagonal */
[n-animate="fade-up-right"] {
  transform: translate3d(calc(var(--n-distance) * -1), var(--n-distance), 0);
}

[n-animate="fade-up-left"] {
  transform: translate3d(var(--n-distance), var(--n-distance), 0);
}

[n-animate="fade-down-right"] {
  transform: translate3d(calc(var(--n-distance) * -1), calc(var(--n-distance) * -1), 0);
}

[n-animate="fade-down-left"] {
  transform: translate3d(var(--n-distance), calc(var(--n-distance) * -1), 0);
}


/* === BLUR ANIMATIONS === */

[n-animate^="blur"] {
  opacity: 0;
  filter: blur(10px);
  transition-property: opacity, transform, filter;
}

[n-animate^="blur"].n-animate {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* Blur simple */
[n-animate="blur"] {
  opacity: 0;
  filter: blur(10px);
}

[n-animate="blur"].n-animate {
  opacity: 1;
  filter: blur(0);
}

/* Blur con dirección */
[n-animate="blur-up"] {
  transform: translate3d(0, var(--n-distance), 0);
}

[n-animate="blur-down"] {
  transform: translate3d(0, calc(var(--n-distance) * -1), 0);
}

[n-animate="blur-left"] {
  transform: translate3d(var(--n-distance), 0, 0);
}

[n-animate="blur-right"] {
  transform: translate3d(calc(var(--n-distance) * -1), 0, 0);
}


/* === SLIDE ANIMATIONS === */

[n-animate^="slide"] {
  transition-property: transform;
  visibility: hidden;
}

[n-animate^="slide"].n-animate {
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

[n-animate="slide-up"] {
  transform: translate3d(0, 100%, 0);
}

[n-animate="slide-down"] {
  transform: translate3d(0, -100%, 0);
}

[n-animate="slide-left"] {
  transform: translate3d(100%, 0, 0);
}

[n-animate="slide-right"] {
  transform: translate3d(-100%, 0, 0);
}


/* === SPLIT TEXT ANIMATIONS === */

/* Base styles para SplitText */
[n-animate^="split-"],
[n-animate="slot-machine"],
[n-animate="masked-reveal"] {
  /* Ocultar hasta que se anime */
  opacity: 0;
  /* Mantener visibilidad para que GSAP maneje la animación */
  visibility: visible;
}

/* Mostrar inmediatamente si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  [n-animate^="split-"],
  [n-animate="slot-machine"],
  [n-animate="masked-reveal"] {
    opacity: 1;
  }
}

/* Wrapper para slot machine */
.slot-wrapper {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
}

/* Clases para elementos spliteados */
.word,
.line,
.letter {
  display: inline-block;
  position: relative;
  white-space: pre-wrap;
}

.line {
  overflow: hidden;
  display: block;
  width: 100%;
}

/* Mask para masked reveal (estilo Osmo) */
[n-animate="masked-reveal"] .line {
  overflow: hidden;
  display: block;
}

[n-animate="masked-reveal"] .word {
  display: inline-block;
}

/* Animaciones básicas de split */
[n-animate="split-words"],
[n-animate="split-lines"],
[n-animate="split-letters"] {
  /* Overflow hidden en el contenedor para el efecto de máscara */
  overflow: hidden;
}

[n-animate="split-words"] .word,
[n-animate="split-lines"] .line,
[n-animate="split-letters"] .letter {
  /* GSAP maneja la animación, solo necesitamos estructura */
  will-change: transform, opacity;
}