/* Infinite Marquee Scroll */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
}

.marquee-content {
  display: inline-flex;
  gap: 2rem;
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}

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

/* Pause marquee on hover to encourage interaction */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

/* Marquee con velocidad reducida (proporcional al número de cards).
   Usar cuando el carrusel tiene muchas cards (>20) para mantener la
   misma velocidad de lectura visual que los marquees por defecto.
   El default son 30s (velocidad proporcional a ~14 cards).
   Para 44 cards: 30s × 3.14 ≈ 90s → mismo ritmo de scroll. */
.marquee-container--slow .marquee-content {
  animation-duration: 90s;
}



/* Pulse Animation for highlight badge */
.pulse-badge {
  box-shadow: 0 0 0 0 rgba(61, 35, 255, 0.4);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 35, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(61, 35, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(61, 35, 255, 0);
  }
}

/* Slow Spin for the connection hub */
.spin-slow {
  animation: spin 25s linear infinite;
}

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

/* Intersection Observer Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Flow Line Motion */
.flow-pulse {
  animation: flow-line-motion 2s linear infinite;
  background-size: 100% 200% !important;
}

@keyframes flow-line-motion {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 200%;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-content {
    animation: none;
  }
  .spin-slow {
    animation: none;
  }
  .flow-pulse {
    animation: none;
  }
  .que-es-hub,
  .que-es-halo,
  .que-es-line,
  .que-es-node {
    animation: none;
  }
  .que-es-node:hover {
    transform: none;
  }
  .que-es-icon:hover {
    transform: none;
    border-color: var(--color-outline-variant);
  }
}

/* ============================================
   QUÉ-ES · Ecosystem Illustration
   ============================================ */

@keyframes que-es-hub-pulse {
  0%, 100% {
    box-shadow: 0 0 50px rgba(61, 35, 255, 0.45),
                inset 0 0 24px rgba(255, 255, 255, 0.25);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 80px rgba(61, 35, 255, 0.70),
                0 0 30px rgba(21, 207, 195, 0.35),
                inset 0 0 28px rgba(255, 255, 255, 0.35);
    transform: scale(1.04);
  }
}

.que-es-hub {
  animation: que-es-hub-pulse 3.6s ease-in-out infinite;
}

@keyframes que-es-halo-breathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.10); }
}

.que-es-halo {
  animation: que-es-halo-breathe 5s ease-in-out infinite;
}

@keyframes que-es-flow {
  to { stroke-dashoffset: -32; }
}

.que-es-line {
  animation: que-es-flow 2.5s linear infinite;
}

.que-es-line-2 { animation-duration: 2.8s; animation-delay: -0.4s; }
.que-es-line-3 { animation-duration: 2.3s; animation-delay: -0.8s; }
.que-es-line-4 { animation-duration: 3.0s; animation-delay: -1.2s; }
.que-es-line-5 { animation-duration: 2.6s; animation-delay: -1.6s; }
.que-es-line-6 { animation-duration: 2.4s; animation-delay: -2.0s; }

@keyframes que-es-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.que-es-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  animation: que-es-float 4.2s ease-in-out infinite;
  cursor: default;
}

.que-es-node-1 { animation-delay: 0s;     animation-duration: 4.0s; }
.que-es-node-2 { animation-delay: -0.7s;  animation-duration: 4.6s; }
.que-es-node-3 { animation-delay: -1.4s;  animation-duration: 4.2s; }
.que-es-node-4 { animation-delay: -2.1s;  animation-duration: 4.8s; }
.que-es-node-5 { animation-delay: -2.8s;  animation-duration: 4.4s; }
.que-es-node-6 { animation-delay: -3.5s;  animation-duration: 4.6s; }

.que-es-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(39, 0, 208, 0.10);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              background 0.35s ease;
}

.que-es-node:hover .que-es-icon {
  transform: scale(1.14) rotate(-4deg);
  border-color: var(--color-primary);
  background: var(--color-primary-fixed);
  box-shadow: 0 14px 32px rgba(61, 35, 255, 0.28),
              0 0 0 4px rgba(61, 35, 255, 0.08);
}

.que-es-node:hover .que-es-label {
  color: var(--color-primary);
}

.que-es-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface);
  transition: color 0.25s ease;
}

.que-es-icon .material-symbols-outlined {
  font-size: 26px;
  color: var(--color-primary);
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.que-es-node:hover .que-es-icon .material-symbols-outlined {
  transform: scale(1.1);
}

.que-es-panel {
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.que-es-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 35px 80px rgba(39, 0, 208, 0.16);
}