/* ================================================================
   MODERNITY SALAS — Animations
   ================================================================ */

/* ----------------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------------- */

/* Fade In Up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade In Down */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade In Left */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade In Right */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale In */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Pulse Yellow */
@keyframes pulseYellow {
  0%, 100% { box-shadow: 0 0 0 0 hsla(43, 92%, 50%, 0.5); }
  50%       { box-shadow: 0 0 0 14px hsla(43, 92%, 50%, 0); }
}

/* Shimmer skeleton */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

/* Badge bounce */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.35); }
  60%       { transform: scale(0.9); }
}

/* Ripple */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

/* Hero text reveal */
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Underline grow */
@keyframes underlineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* Progress fill */
@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress-w); }
}

/* ----------------------------------------------------------------
   UTILITY ANIMATION CLASSES
   ---------------------------------------------------------------- */
.anim-fadeInUp    { animation: fadeInUp 0.7s ease forwards; }
.anim-fadeInDown  { animation: fadeInDown 0.7s ease forwards; }
.anim-fadeInLeft  { animation: fadeInLeft 0.7s ease forwards; }
.anim-fadeInRight { animation: fadeInRight 0.7s ease forwards; }
.anim-scaleIn     { animation: scaleIn 0.5s ease forwards; }
.anim-float       { animation: float 4s ease-in-out infinite; }

/* Animation delays */
.anim-delay-100 { animation-delay: 0.1s; }
.anim-delay-200 { animation-delay: 0.2s; }
.anim-delay-300 { animation-delay: 0.3s; }
.anim-delay-400 { animation-delay: 0.4s; }
.anim-delay-600 { animation-delay: 0.6s; }
.anim-delay-800 { animation-delay: 0.8s; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #E8ECEF 0%, #F5F7FA 50%, #E8ECEF 100%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ----------------------------------------------------------------
   HERO SLIDER TRANSITIONS
   ---------------------------------------------------------------- */
.slide-enter   { opacity: 0; transform: scale(1.06); }
.slide-active  { opacity: 1; transform: scale(1); transition: opacity 0.9s ease, transform 0.9s ease; }
.slide-exit    { opacity: 0; transform: scale(0.97); transition: opacity 0.9s ease, transform 0.9s ease; }

/* ----------------------------------------------------------------
   NAV UNDERLINE HOVER
   ---------------------------------------------------------------- */
.nav-link-animated {
  position: relative;
}

.nav-link-animated::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--yellow);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.nav-link-animated:hover::after,
.nav-link-animated.active::after {
  width: 100%;
}

/* ----------------------------------------------------------------
   CARD HOVER LIFT
   ---------------------------------------------------------------- */
.hover-lift {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* ----------------------------------------------------------------
   GRADIENT ANIMATED BORDER
   ---------------------------------------------------------------- */
.gradient-border {
  position: relative;
  border-radius: var(--radius-xl);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: linear-gradient(135deg, var(--yellow), var(--blue), var(--yellow));
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
  z-index: -1;
}

/* ----------------------------------------------------------------
   PULSE BUTTON
   ---------------------------------------------------------------- */
.btn-pulse {
  animation: pulseYellow 2.5s ease infinite;
}

/* ----------------------------------------------------------------
   MARQUEE TRACK
   ---------------------------------------------------------------- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}