/* =============================================
   ANIMATIONS & MICRO-INTERACTIONS
   Professional scroll reveals, hover effects,
   and UI transitions.
   ============================================= */

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children: each .reveal-child inside a revealed parent
   gets a small sequential delay */
.reveal-stagger .reveal-child {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-stagger.revealed .reveal-child {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.revealed .reveal-child:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger.revealed .reveal-child:nth-child(2)  { transition-delay: 60ms; }
.reveal-stagger.revealed .reveal-child:nth-child(3)  { transition-delay: 120ms; }
.reveal-stagger.revealed .reveal-child:nth-child(4)  { transition-delay: 180ms; }
.reveal-stagger.revealed .reveal-child:nth-child(5)  { transition-delay: 240ms; }
.reveal-stagger.revealed .reveal-child:nth-child(6)  { transition-delay: 300ms; }
.reveal-stagger.revealed .reveal-child:nth-child(7)  { transition-delay: 360ms; }
.reveal-stagger.revealed .reveal-child:nth-child(8)  { transition-delay: 420ms; }
.reveal-stagger.revealed .reveal-child:nth-child(9)  { transition-delay: 480ms; }
.reveal-stagger.revealed .reveal-child:nth-child(10) { transition-delay: 540ms; }
.reveal-stagger.revealed .reveal-child:nth-child(11) { transition-delay: 600ms; }
.reveal-stagger.revealed .reveal-child:nth-child(12) { transition-delay: 660ms; }

/* ---- Reduced motion: respect user preference ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger .reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Button hover transitions ---- */
/* Primary buttons (solid bg) */
a[class*="bg-[rgb(var(--primary))"],
button[class*="bg-[rgb(var(--primary))"] {
  transition: background-color 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
}
a[class*="bg-[rgb(var(--primary))"]:hover,
button[class*="bg-[rgb(var(--primary))"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 154, 250, 0.25);
}
a[class*="bg-[rgb(var(--primary))"]:active,
button[class*="bg-[rgb(var(--primary))"]:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary / ghost buttons (custom-cyan-border) — extend existing transition */
.custom-cyan-border {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
}
.custom-cyan-border:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 154, 250, 0.15);
}
.custom-cyan-border:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---- Card hover transitions ---- */
/* Cards with gradient border */
.custom-gradient-border {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-gradient-border:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ---- Navigation link transitions ---- */
nav a,
header a {
  transition: color 0.2s ease, opacity 0.2s ease;
}
nav a:hover,
header a:hover {
  opacity: 0.85;
}

/* ---- Carousel dots transition ---- */
.dot .dot-indicator {
  transition: background 0.3s ease, transform 0.2s ease;
}
.dot:hover .dot-indicator {
  transform: scale(1.2);
}

/* ---- Carousel card transition (enhance existing) ---- */
.carousel-card img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-card:hover img {
  transform: scale(1.03);
}


/* ---- Link hover (text links in innovacion page) ---- */
a[target="_blank"] {
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* ---- Footer transition ---- */
footer a {
  transition: color 0.2s ease, opacity 0.2s ease;
}
footer a:hover {
  opacity: 0.8;
}

/* ---- Theme switch enhanced transition ---- */
.theme-option {
  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.theme-option:hover {
  transform: scale(1.08);
}
.theme-option:active {
  transform: scale(0.95);
}

/* ---- Header backdrop blur for polish ---- */
header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}