/**
 * METIQ · Estilos de arranque premium
 * Fade-in coordinado (anti-FOUC) + micro-refinamientos de sensación premium.
 */

/* ── Anti-FOUC: contenido oculto hasta que boot.js lo revela ── */
html.metiq-loading body {
  opacity: 0 !important;
}
body {
  opacity: 1;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Si el usuario prefiere menos movimiento, sin fade (aparece directo) */
@media (prefers-reduced-motion: reduce) {
  html.metiq-loading body { opacity: 1 !important; }
  body { transition: none; }
}

/* ── Transición suave de valores numéricos (VIX, precios, métricas) ──
   Cuando un dato pasa de "—" al valor real, un fade breve evita el salto
   brusco. Se aplica a los contenedores de métricas que se actualizan. */
.metiq-value-swap {
  transition: opacity 0.35s ease, color 0.35s ease;
}
.metiq-value-swap.updating {
  opacity: 0.35;
}

/* ── Skeleton shimmer para bloques que cargan datos ──
   Un brillo sutil que recorre el placeholder mientras llega el dato real.
   Da sensación de "cargando con vida" en vez de un hueco muerto. */
.metiq-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.metiq-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  animation: metiqShimmer 1.4s ease-in-out infinite;
}
@keyframes metiqShimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .metiq-skeleton::after { animation: none; }
}

/* ── Fade-in escalonado de secciones al entrar en viewport ──
   Refuerza la sensación premium: las secciones aparecen con un leve
   desplazamiento en vez de estar simplemente ahí. Complementa (no reemplaza)
   cualquier .reveal existente. */
.metiq-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.metiq-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .metiq-fade-up { opacity: 1; transform: none; transition: none; }
}