/* ==========================================================================
   ADVANCED WEB ANIMATIONS - GRAVITAS AI
   Inspired by ReactBits patterns with professional timing and accessibility
   ========================================================================== */

/* ANIMATION SYSTEM TOKENS
   ========================================================================== */

:root {
  /* Core animation timing - based on research */
  --anim-duration-fast: 150ms;
  --anim-duration-base: 250ms;
  --anim-duration-reveal: 380ms;
  --anim-duration-shine: 1200ms;
  
  /* Professional easing curves */
  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1); /* Custom specified curve */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* Material Design standard */
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);   /* Subtle interactions */
  
  /* Brand gradient system */
  --gradient-brand: linear-gradient(135deg, #1CA3FF 0%, #7B3FE4 100%);
  --gradient-shine: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
  
  /* Animation distances - mobile-first */
  --reveal-distance: 8px;
  --blur-initial: 6px;
  --focus-dim-opacity: 0.3;
  --stagger-delay: 60ms;
  
  /* Desktop adjustments */
  @media (min-width: 768px) {
    --reveal-distance: 12px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-duration-reveal: 0.1s;
    --anim-duration-shine: 0.1s;
    --reveal-distance: 0px;
    --blur-initial: 0px;
  }
  
  /* Disable transforms and blur, keep opacity only */
  .scroll-reveal,
  .blur-text,
  .shine-text {
    transform: none !important;
    filter: none !important;
  }
}

/* 1. SCROLL REVEAL ANIMATIONS
   ========================================================================== */

.scroll-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: 
    opacity var(--anim-duration-reveal) var(--ease-reveal),
    transform var(--anim-duration-reveal) var(--ease-reveal);
  will-change: transform, opacity;
}

/* Reveal state */
.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Animation complete - remove will-change */
.scroll-reveal.animation-complete {
  will-change: auto;
}

/* Stagger variations for grouped elements */
.scroll-reveal[data-reveal-delay="60"] {
  transition-delay: 60ms;
}

.scroll-reveal[data-reveal-delay="120"] {
  transition-delay: 120ms;
}

.scroll-reveal[data-reveal-delay="180"] {
  transition-delay: 180ms;
}

.scroll-reveal[data-reveal-delay="240"] {
  transition-delay: 240ms;
}

/* Directional reveal variants */
.scroll-reveal--from-left {
  transform: translateX(calc(var(--reveal-distance) * -1));
}

.scroll-reveal--from-right {
  transform: translateX(var(--reveal-distance));
}

.scroll-reveal--scale {
  transform: translateY(var(--reveal-distance)) scale(0.95);
}

.scroll-reveal--scale.is-revealed {
  transform: translateY(0) scale(1);
}

/* 2. GRADIENT TEXT EFFECTS
   ========================================================================== */

.u-text-gradient {
  /* Fallback color for unsupported browsers */
  color: #1CA3FF;
  
  /* Modern gradient implementation */
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Progressive enhancement check */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .u-text-gradient {
    background: var(--gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

/* Animated gradient text for special effects */
.u-text-gradient--animated {
  background: var(--gradient-brand);
  background-size: 200% 100%;
  background-position: 200% 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

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

/* 3. BLUR TEXT EFFECTS
   ========================================================================== */

.blur-text {
  filter: blur(var(--blur-initial));
  opacity: 0;
  transition: 
    filter var(--anim-duration-reveal) var(--ease-reveal),
    opacity var(--anim-duration-reveal) var(--ease-reveal);
  will-change: filter, opacity;
}

.blur-text.is-focused {
  filter: blur(0px);
  opacity: 1;
}

.blur-text.animation-complete {
  will-change: auto;
}

/* Combined blur + scroll reveal */
.blur-text.scroll-reveal {
  transform: translateY(var(--reveal-distance));
  transition: 
    filter var(--anim-duration-reveal) var(--ease-reveal),
    opacity var(--anim-duration-reveal) var(--ease-reveal),
    transform var(--anim-duration-reveal) var(--ease-reveal);
}

.blur-text.scroll-reveal.is-focused.is-revealed {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0);
}

/* 4. SHINY TEXT EFFECTS
   ========================================================================== */

.u-text-shiny {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: transform var(--anim-duration-fast) var(--ease-gentle);
}

.u-text-shiny::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 100%;
  height: 200%;
  background: var(--gradient-shine);
  transform: skewX(-25deg);
  transition: left var(--anim-duration-shine) ease-out;
  opacity: 0;
}

.u-text-shiny:hover::before {
  left: 150%;
  opacity: 1;
}

.u-text-shiny:hover {
  transform: scale(1.02);
}

/* Alternative shine implementation for better performance */
.u-text-shiny--optimized {
  background: var(--gradient-brand);
  background-size: 200% 100%;
  background-position: 200% 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: 
    background-position var(--anim-duration-shine) ease-out,
    transform var(--anim-duration-fast) var(--ease-gentle);
}

.u-text-shiny--optimized:hover {
  background-position: -200% 0;
  transform: scale(1.02);
}

/* 5. TRUE FOCUS EFFECTS
   ========================================================================== */

.true-focus-container {
  --focus-transition: 
    opacity var(--anim-duration-base) var(--ease-gentle),
    transform var(--anim-duration-base) var(--ease-gentle),
    filter var(--anim-duration-base) var(--ease-gentle);
}

.true-focus-container > * {
  transition: var(--focus-transition);
  cursor: pointer;
}

/* Dim all siblings when container has hover/focus */
.true-focus-container:hover > *,
.true-focus-container:focus-within > * {
  opacity: var(--focus-dim-opacity);
  filter: blur(1px);
}

/* Brighten and lift the active item */
.true-focus-container:hover > *:hover,
.true-focus-container:focus-within > *:focus {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(-2px) scale(1.01);
  z-index: 10;
  position: relative;
}

/* Accordion-specific implementation */
.c-accordion[data-true-focus] .c-accordion__item {
  transition: var(--focus-transition);
}

.c-accordion[data-true-focus]:hover .c-accordion__item,
.c-accordion[data-true-focus]:focus-within .c-accordion__item {
  opacity: var(--focus-dim-opacity);
}

.c-accordion[data-true-focus] .c-accordion__item:hover,
.c-accordion[data-true-focus] .c-accordion__item:focus-within {
  opacity: 1;
  transform: translateY(-1px);
}

/* 6. SHINY TEXT EFFECTS (Perfected - AI Generated)
   ========================================================================== */

.u-text-shiny-brand {
  /* Configuración del texto base */
  color: transparent;
  background: linear-gradient(
    90deg,
    #1CA3FF 0%,
    #1CA3FF 40%,
    #ffffff 50%,
    #1CA3FF 60%,
    #1CA3FF 100%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  
  /* Aplicar gradiente solo al texto */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Animación */
  animation: shine 4s ease-in-out infinite;
  
  /* Mejoras visuales */
  font-weight: 700;
  display: inline-block;
  position: relative;
  
  /* Suavizado de fuente */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keyframes para el efecto de barrido */
@keyframes shine {
  0% {
    background-position: 200% center;
  }
  50% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Variante con violeta */
.u-text-shiny-brand.violet {
  background: linear-gradient(
    90deg,
    #7B3FE4 0%,
    #7B3FE4 40%,
    #ffffff 50%,
    #7B3FE4 60%,
    #7B3FE4 100%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s ease-in-out infinite;
}

/* Variante gradiente azul-violeta */
.u-text-shiny-brand.gradient {
  background: linear-gradient(
    90deg,
    #1CA3FF 0%,
    #7B3FE4 35%,
    #ffffff 50%,
    #7B3FE4 65%,
    #1CA3FF 100%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s ease-in-out infinite;
}

/* Variante más sutil */
.u-text-shiny-brand.subtle {
  background: linear-gradient(
    90deg,
    #1CA3FF 0%,
    #1CA3FF 45%,
    rgba(255, 255, 255, 0.9) 50%,
    #1CA3FF 55%,
    #1CA3FF 100%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4.5s ease-in-out infinite;
}

/* Variante con pausa más larga */
.u-text-shiny-brand.slow {
  animation: shine-slow 6s ease-in-out infinite;
}

@keyframes shine-slow {
  0%, 100% {
    background-position: 200% center;
  }
  15% {
    background-position: -200% center;
  }
}

/* Fallback para navegadores sin soporte */
@supports not (background-clip: text) and not (-webkit-background-clip: text) {
  .u-text-shiny-brand,
  .u-text-shiny-brand.violet,
  .u-text-shiny-brand.gradient,
  .u-text-shiny-brand.subtle,
  .u-text-shiny-brand.slow {
    background: none;
    color: #1CA3FF;
    -webkit-text-fill-color: #1CA3FF;
  }
  
  .u-text-shiny-brand.violet {
    color: #7B3FE4;
    -webkit-text-fill-color: #7B3FE4;
  }
}

/* Clase heredada para compatibilidad */
.u-text-shiny {
  color: #b5b5b5a4;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  animation: shine 5s linear infinite;
}

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

/* Force hardware acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Animation state management */
.animations-disabled * {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* Debug mode for development */
.debug-animations {
  animation-duration: 3s !important;
  transition-duration: 3s !important;
}