/* ============================================================================
   EXPERIENCE.CSS — Capa de movimiento · Aposento Alto Espíritu Santo y Fuego
   Se carga DESPUÉS de styles.css. Solo animaciones sutiles y acabados:
   revelado al hacer scroll, barra de progreso y reglas que se "dibujan".
   ============================================================================ */
::selection { background: var(--flame); color: var(--ink); }

/* ---- Barra de progreso de lectura (empieza donde termina la barra lateral) ---- */
.scroll-progress {
  position: fixed; top: 0; left: var(--rail-w); right: 0; height: 4px; z-index: 300;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--ember);
  pointer-events: none;
}
@media (max-width: 1080px) { .scroll-progress { top: auto; bottom: 0; height: 4px; } }

/* ---- Reglas de sección que se dibujan al aparecer ---- */
.js-rv .section-head.rv { border-top-color: transparent; position: relative; }
.js-rv .section-head.rv::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.js-rv .section-dark .section-head.rv::before { background: rgba(245,248,254,0.5); }
.js-rv .section-head.rv.in::before { transform: scaleX(1); }

/* ---- Revelado al hacer scroll (solo si JS está activo) ---- */
.js-rv .rv { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--rd, 0s); }
.js-rv .rv.in { opacity: 1; transform: none; }
/* Las tarjetas con hover propio no deben heredar el retraso del revelado */
.js-rv .card.rv.in, .js-rv .photo-tile.rv.in, .js-rv .mosaic-tile.rv.in { transition-delay: 0s; transition: opacity 700ms var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }

/* ---- Acabados ---- */
.mission-item { transition: background var(--dur-2) ease, padding var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .mission-item:hover { background: rgba(245,248,254,0.05); padding-left: 0.75rem; }
  .mission-item:hover .mission-num { color: var(--flame); }
}
.hero-card { transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
@media (hover: hover) { .hero-card:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--ink); } }

@media (max-width: 640px) { .card-link:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv { opacity: 1; transform: none; transition: none; }
  .js-rv .section-head.rv { border-top-color: var(--ink); }
  .js-rv .section-head.rv::before { display: none; }
  .js-rv .section-dark .section-head.rv { border-top-color: rgba(245,248,254,0.5); }
}