/**
 * GSAP Cornerstone - Frontend Styles
 */

/* Estado inicial oculto para elementos animados */
[data-gsap-animation],
.gsap-animate {
  will-change: transform, opacity;
}

/* Anti-FOUC: ocultar elementos de texto antes de que JS los inicialice */
.split-words,
.split-chars,
.split-chars-rotate,
.split-chars-scale,
.split-chars-blur,
.split-lines,
.split-typewriter,
.split-typewriter-no-cursor,
.gsap-motion-svg svg,
.svg-draw,
.svg-draw-stagger,
.svg-draw-sync,
.svg-draw-reverse,
.svg-draw-ltr {
  visibility: hidden;
}
/* JS añade esta clase cuando la animación está lista */
.gsap-cs-ready {
  visibility: visible !important;
}

/* Barra de progreso de scroll */
[data-gsap-progress] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 99999;
}

/* Evitar parpadeo en animaciones de clip-path */
[data-gsap-animation="revealLeft"],
[data-gsap-animation="revealRight"],
[data-gsap-animation="revealUp"],
[data-gsap-animation="revealDown"] {
  overflow: hidden;
}

/* Timeline container */
.gsap-timeline {
  position: relative;
}

/* Caracteres de texto animados */
.gsap-char,
.gsap-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
}

/* ── SplitText ────────────────────────────────────────────────────────── */

/* Líneas: overflow oculto ya se aplica via JS, pero por si acaso */
.gsap-st-line {
  display: block;
  will-change: transform;
}

/* Palabras y caracteres */
.gsap-st-word,
.gsap-st-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* Cursor typewriter parpadeante */
.gsap-typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  color: currentColor;
  font-weight: 300;
  will-change: opacity;
}

/* Paralax overflow */
[data-gsap-parallax] {
  will-change: transform;
}

/* Hover animations base */
[data-gsap-hover] {
  cursor: pointer;
}

/* Elementos con morphing bg */
[data-gsap-morph-bg] {
  transition: none;
}

/* Utilitarios de visibilidad (helpers para Cornerstone) */
.gsap-invisible {
  opacity: 0;
  visibility: hidden;
}

.gsap-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Neutralizar interferencia de Cornerstone con GSAP ───────────────────────
 * Cornerstone escribe translate/rotate/scale como propiedades CSS individuales
 * en el style inline de sus elementos. Esto anula el transform que usa GSAP
 * para mover elementos (y, x, scale, rotation...).
 * Esta regla fuerza que dichas propiedades no tengan efecto en elementos animados,
 * dejando el control exclusivamente a GSAP via transform.
 */
[data-gsap-init],
.anim-item {
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

/* ── Sistema de animación CSS (independiente del globalTimeline de GSAP) ─────
 * Usamos CSS transitions en lugar de gsap.to() para evitar el conflicto
 * con Cornerstone/X-Theme que pone timeScale(-1) en el globalTimeline.
 * ScrollTrigger añade/quita clases, y CSS hace la transición.
 */

/* Estados iniciales — elemento invisible/desplazado */
.gsap-cs-init-fade      { opacity: 0 !important; }
.gsap-cs-init-fade-up   { opacity: 0 !important; transform: translateY(50px) !important; }
.gsap-cs-init-fade-down { opacity: 0 !important; transform: translateY(-50px) !important; }
.gsap-cs-init-fade-left { opacity: 0 !important; transform: translateX(-60px) !important; }
.gsap-cs-init-fade-right{ opacity: 0 !important; transform: translateX(60px) !important; }
.gsap-cs-init-scale     { opacity: 0 !important; transform: scale(0.7) !important; }
.gsap-cs-init-scale-up  { opacity: 0 !important; transform: scale(0.7) translateY(40px) !important; }
.gsap-cs-init-scale-sm  { opacity: 0 !important; transform: scale(0.5) !important; }
.gsap-cs-init-slide-left { opacity: 0 !important; transform: translateX(-100%) !important; }
.gsap-cs-init-slide-right{ opacity: 0 !important; transform: translateX(100%) !important; }
.gsap-cs-init-slide-up  { opacity: 0 !important; transform: translateY(100%) !important; }
.gsap-cs-init-slide-down{ opacity: 0 !important; transform: translateY(-100%) !important; }
.gsap-cs-init-rotate    { opacity: 0 !important; transform: rotate(-90deg) !important; }
.gsap-cs-init-flip-x    { opacity: 0 !important; transform: rotateX(90deg) !important; }
.gsap-cs-init-flip-y    { opacity: 0 !important; transform: rotateY(90deg) !important; }
.gsap-cs-init-reveal-l  { clip-path: inset(0 100% 0 0) !important; }
.gsap-cs-init-reveal-r  { clip-path: inset(0 0 0 100%) !important; }
.gsap-cs-init-reveal-u  { clip-path: inset(100% 0 0 0) !important; }
.gsap-cs-init-reveal-d  { clip-path: inset(0 0 100% 0) !important; }
.gsap-cs-init-skew-l    { opacity: 0 !important; transform: translateX(-80px) skewX(20deg) !important; }
.gsap-cs-init-skew-r    { opacity: 0 !important; transform: translateX(80px) skewX(-20deg) !important; }
.gsap-cs-init-blur      { opacity: 0 !important; filter: blur(20px) !important; }
.gsap-cs-init-blur-up   { opacity: 0 !important; transform: translateY(40px) !important; filter: blur(15px) !important; }

/* Estado activo — elemento visible en su posición natural */
.gsap-cs-active {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: inset(0 0% 0 0) !important;
}

/* Variantes de easing via cubic-bezier */
.gsap-cs-ease-back    { }  /* aplicado via transition en JS */
.gsap-cs-ease-bounce  { }
.gsap-cs-ease-elastic { }

/* ── Rotación controlada por scroll ─────────────────────────────────────────
 *
 *  .gsap-rotate-scroll  → scrub continuo con el scroll
 *  .gsap-rotate-enter   → animación de entrada al viewport (una vez)
 *  .gsap-rotate-loop    → entra y sale, se repite en cada paso
 *
 *  GSAP gestiona el transform directamente via JS.
 *  Aquí solo declaramos will-change y neutralizamos interferencias de Cornerstone.
 */

.gsap-rotate-scroll,
.gsap-rotate-enter,
.gsap-rotate-loop {
  will-change: transform;
  /* Evitar que Cornerstone sobreescriba el transform con propiedades individuales */
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  /* Asegurar que el origen de transformación esté centrado */
  transform-origin: center center;
  /* Sin transición CSS — GSAP toma el control total */
  transition: none !important;
  display: inline-block; /* necesario para que transform funcione en elementos inline */
}

/* ── Secciones apiladas (Stack Sections) ────────────────────────────────────
 *
 *  .gsap-stack-section  → cada sección que participa en el efecto
 *  .gsap-stack-wrapper  → padre cuyas hijas directas participan
 *  .stack-rounded / .stack-rounded-sm / .stack-rounded-lg → bordes en entrada
 *
 *  Usamos position:sticky nativo — no tocamos el DOM, compatible con React
 *  (Cornerstone usa React y lanza errores si GSAP mueve nodos con pin).
 */

.gsap-stack-section,
.gsap-stack-wrapper > * {
  /* El JS aplica position:sticky + top:0 + z-index dinámicamente */
  will-change: transform;
  /* Fondo sólido imprescindible: sin él se vería la sección anterior al pasar */
  background-color: inherit;
}

/* El contenedor padre debe tener altura suficiente y sin overflow:hidden */
.gsap-stack-wrapper {
  overflow: visible !important;
}

/* ── Morph Circle ────────────────────────────────────────────────────────────
 *
 *  .gsap-morph-circle-wrapper  → contenedor padre
 *  .gsap-morph-circle          → el círculo que se expande
 */

.gsap-morph-circle-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

.gsap-morph-circle {
  /* El círculo debe tener border-radius:50% definido en Cornerstone */
  will-change: transform, border-radius;
  cursor: pointer;
  /* Asegurar que el círculo se posicione bien dentro del wrapper */
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Contenido interno oculto inicialmente — el JS lo revela al expandir */
.gsap-morph-circle-wrapper > *:not(.gsap-morph-circle) {
  /* El JS aplica opacity:0 / visibility:hidden — aquí solo el will-change */
  will-change: opacity;
}

/* ── Pill / Cápsula animada ──────────────────────────────────────────────────
 *
 *  .gsap-pill-wrapper  → contenedor
 *  .gsap-pill          → la cápsula (empieza colapsada, se expande)
 *  .gsap-pill-content  → items interiores (aparecen con stagger+blur)
 *
 *  IMPORTANTE: el CSS colapsa la cápsula ANTES de que el JS cargue,
 *  evitando el flash del estado final al renderizar la página.
 */

.gsap-pill-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Estado inicial colapsado — CSS puro, sin esperar al JS
 * NO tocamos border-radius aquí — lo gestiona el JS para preservar
 * el valor definido en Cornerstone */
.gsap-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  overflow: hidden;
  /* Sin transform aquí — el JS aplica el estado inicial correctamente */
}

.gsap-pill.pill-from-left {
  transform-origin: left center;
}

.gsap-pill.pill-from-top {
  transform-origin: center top;
}

/* Contenido invisible hasta que el JS lo revela */
.gsap-pill-content {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, filter;
  backface-visibility: hidden;
}

/* Una vez que el JS ha tomado el control, quita el CSS inicial
   para evitar conflictos con las propiedades inline de GSAP */
.gsap-pill.gsap-pill-ready {
  transform: none;
}

/* ── Morph Circle — content ─────────────────────────────────────────────────
 *  .gsap-morph-circle-content → contenido que aparece al expandir el círculo
 */
.gsap-morph-circle-content {
  will-change: opacity;
  /* El posicionamiento lo gestiona Cornerstone */
}

/* ── Stack pin wrapper ───────────────────────────────────────────────────────
 * Wrapper dinámico creado por el plugin para el efecto de secciones apiladas.
 * GSAP hace pin sobre este wrapper en lugar de sobre los nodos de React.
 */
.gsap-stack-pin-wrapper {
  width: 100%;
  position: relative;
}