/* ESPARTANOS BODY GYM · Intro del gladiador
   Módulo independiente: no modifica ningún estilo de la página.
   Para desactivarla, quita en index.html las dos líneas marcadas "INTRO". */

.esp-intro {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #060606; overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.esp-intro.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
.esp-intro.is-broken { background: transparent; }          /* al estallar, detrás ya está la página */
.esp-intro.is-leaving { pointer-events: none; transition-property: opacity; transition-timing-function: ease; }

.esp-intro__stage { position: absolute; inset: 0; will-change: transform; }
.esp-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.esp-intro__ui {
  position: absolute; z-index: 2; display: flex; gap: 8px;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}
.esp-intro__btn {
  font: 500 11.5px/1 "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  background: rgba(8, 8, 8, .35);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s, background .2s;
}
.esp-intro__btn:hover,
.esp-intro__btn:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(8, 8, 8, .55); outline: none; }
.esp-intro.is-broken .esp-intro__ui { opacity: 0; transition: opacity .2s; }

/* Mientras la intro está en pantalla: sin scroll detrás y el título de la portada espera
   para hacer su entrada justo cuando estalla el cristal. */
html.esp-intro-lock, html.esp-intro-lock body { overflow: hidden; }
html.esp-intro-hold.js.is-loaded .hero__title .line > span { transform: translateY(105%); }