/* utils.css */

/* ─────────── Helper Classes ─────────── */
.text-glow {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.hover-lift:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  transition: box-shadow 0.3s ease;
}

.active-glow {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  border-color: var(--gold-light);
}

/* Ocultar inputs de archivo por defecto */
input[type="file"] {
  display: none;
}

/* ─────────── Loading & Shimmer ─────────── */
.loading-text::after {
  content: '...';
  display: inline-block;
  animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
  0%, 20%   { color: rgba(255, 215, 0, 0.2); }
  40%       { color: rgba(255, 215, 0, 1); }
  60%,100%  { color: rgba(255, 215, 0, 0.2); }
}

.text-shimmer {
  background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s ease-in-out infinite;
}

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

/* ─────────── Accessibility & Performance ─────────── */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* ─────────── Responsive Preferences ─────────── */
@media (prefers-contrast: high) {
  :root {
    --gold: #ffff00;
    --gold-light: #ffffff;
    --black: #000000;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kitt-bar,
  .badge {
    animation: none !important;
  }
}

/* ─────────── Slide-In Animations ─────────── */
@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right {
  animation: slideInFromRight 0.4s ease-out;
}

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-left {
  animation: slideInFromLeft 0.4s ease-out;
}

@keyframes slideInFromTop {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-in-top {
  animation: slideInFromTop 0.4s ease-out;
}

@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-in-bottom {
  animation: slideInFromBottom 0.4s ease-out;
}