/* MATIZ Lab · Fase 0
   Capa visual compartida para superficies interactivas e informativas. */

.ml-surface {
  --ml-x: 50%;
  --ml-y: 50%;
  --ml-tone: rgba(73, 170, 183, 0.22);
  --ml-edge: rgba(73, 170, 183, 0);
  --ml-radius: 520px;
  --ml-opacity: 0;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  transition:
    box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 320ms ease;
}

.ml-surface::after {
  background: radial-gradient(
    circle var(--ml-radius) at var(--ml-x) var(--ml-y),
    var(--ml-tone) 0%,
    color-mix(in srgb, var(--ml-tone) 48%, transparent) 28%,
    transparent 70%
  );
  content: "";
  inset: 0;
  opacity: var(--ml-opacity);
  pointer-events: none;
  position: absolute;
  transition: opacity 320ms ease;
  z-index: 0;
}

@supports not (color: color-mix(in srgb, white, black)) {
  .ml-surface::after {
    background: radial-gradient(
      circle var(--ml-radius) at var(--ml-x) var(--ml-y),
      var(--ml-tone) 0%,
      transparent 70%
    );
  }
}

.ml-surface--subtle {
  --ml-radius: 430px;
}

.ml-surface--standard {
  --ml-radius: 560px;
}

.ml-surface--featured {
  --ml-radius: 720px;
}

@media (hover: hover) and (pointer: fine) {
  .ml-surface:is(:hover, :focus-within, .ml-is-active) {
    --ml-opacity: 0.92;
    --ml-edge: color-mix(in srgb, var(--ml-tone) 74%, transparent);
    box-shadow:
      inset 0 0 0 1px var(--ml-edge),
      0 15px 34px rgba(18, 30, 27, 0.075);
    transform: translateY(-2px);
  }

  .ml-surface--subtle:is(:hover, :focus-within, .ml-is-active) {
    --ml-opacity: 0.58;
    box-shadow:
      inset 0 0 0 1px var(--ml-edge),
      0 10px 24px rgba(18, 30, 27, 0.05);
    transform: translateY(-1px);
  }

  .ml-surface--featured:is(:hover, :focus-within, .ml-is-active) {
    --ml-opacity: 1;
    box-shadow:
      inset 0 0 0 1px var(--ml-edge),
      0 18px 42px rgba(18, 30, 27, 0.09);
    transform: translateY(-3px);
  }
}

@keyframes ml-spotlight-drift {
  0%,
  100% {
    transform: translate(-12%, -9%) scale(1.02);
  }
  50% {
    transform: translate(12%, 9%) scale(1.08);
  }
}

/* Mantiene el pulso ambiental tanto con mouse como en pantallas táctiles. */
.ml-surface.ml-is-visible::after {
  background: radial-gradient(
    circle at center,
    var(--ml-tone) 0%,
    transparent 66%
  );
  animation: ml-spotlight-drift 10s ease-in-out infinite;
  inset: -34%;
  opacity: 0.5;
}

.ml-surface--subtle.ml-is-visible::after {
  opacity: 0.32;
}

.ml-surface--featured.ml-is-visible::after {
  opacity: 0.7;
}

.ml-surface:nth-child(2n).ml-is-visible::after {
  animation-delay: -3.3s;
}

.ml-surface:nth-child(3n).ml-is-visible::after {
    animation-delay: -6.6s;
}

/* En escritorio el abanico probabilístico conserva una señal de movimiento
   visible aun cuando el puntero no esté sobre el componente. */
@keyframes ml-cuantil-fan-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -3px, 0) scale(1.012);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cuantil-identity__fan {
    animation: ml-cuantil-fan-breathe 7.6s ease-in-out infinite;
    transform-origin: 48% 55%;
    will-change: transform;
  }

  .cuantil-fan__band,
  .cuantil-fan__contour,
  .cuantil-fan__node {
    animation-play-state: running;
  }
}

/* En escritorios amplios hay lugar para mantener completa la identificación
   legal en una sola línea; la navegación puede bajar a la fila siguiente. */
@media (min-width: 861px) {
  .site-footer__meta {
    flex-wrap: wrap;
  }

  .site-footer__meta p {
    max-width: none;
    white-space: nowrap;
  }

  .site-footer__meta nav {
    margin-left: auto;
  }
}

/* La dirección visual prioriza movimiento continuo incluso cuando el sistema
   solicita reducirlo. Estas reglas neutralizan el modo estático del CSS base. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 180ms !important;
  }

  .ml-surface.ml-is-visible::after {
    animation: ml-spotlight-drift 10s ease-in-out infinite !important;
  }

  .cuantil-identity__fan {
    animation: ml-cuantil-fan-breathe 7.6s ease-in-out infinite !important;
  }

  .cuantil-fan__contours {
    display: inline !important;
  }

  .cuantil-fan__band {
    animation-duration: 7.4s !important;
    animation-iteration-count: infinite !important;
  }

  .cuantil-fan__band--95 {
    animation-duration: 8.2s !important;
  }

  .cuantil-fan__band--75 {
    animation-duration: 7.4s !important;
  }

  .cuantil-fan__band--25 {
    animation-duration: 7.8s !important;
  }

  .cuantil-fan__band--05 {
    animation-duration: 8.6s !important;
  }

  .cuantil-fan__contour {
    animation-duration: 9.5s, 7.4s !important;
    animation-iteration-count: infinite, infinite !important;
  }

  .cuantil-fan__node {
    animation-duration: 5.8s !important;
    animation-iteration-count: infinite !important;
  }

  .experience-card {
    animation-duration: 1s !important;
    animation-iteration-count: 1 !important;
  }

  .rb-spotlight-card::before {
    animation: rb-spotlight-drift 9s ease-in-out infinite !important;
  }
}