/* =========================================================
   MOD Mallorca — Página "Gracias · Experiencia vídeo" (page-gracias.php)
   Solo se carga en esa plantilla. Pantalla completa estilo videojuego,
   sin scroll. Tres fases controladas por data-phase en #mod-xp:
   loading → flight → flash → video. (19-09-2026)
   ========================================================= */

.mod-xp {
  position: fixed;
  inset: 0;
  z-index: 200; /* por encima de la barra de navegación (z 50) */
  overflow: hidden;
  color: var(--mod-white);
  background: #030b13;
  font-family: var(--font-label);
  touch-action: none;        /* sin gestos de scroll (los toques en botones siguen funcionando) */
  overscroll-behavior: none; /* sin rebote en iOS/Android */
}
/* Sin scroll en toda la experiencia (la clase la pone el JS al arrancar y
   no se quita: la página ES la experiencia). */
body.mod-xp-locked,
body.mod-xp-locked html { overflow: hidden !important; height: 100%; }
html:has(body.mod-xp-locked) { overflow: hidden; }

.mod-xp__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.mod-xp[data-phase="loading"] .mod-xp__loader,
.mod-xp[data-phase="flight"]  .mod-xp__flight,
.mod-xp[data-phase="flash"]   .mod-xp__flight,
.mod-xp[data-phase="video"]   .mod-xp__video {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}

/* ── HUD común: scanlines suaves (las esquinas se quitaron a petición) ── */
.mod-xp__scan {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.mod-xp[data-phase="video"] .mod-xp__scan { opacity: 0.5; }

/* ── Fase 1: carga ─────────────────────────────────────── */
.mod-xp__loader { background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(201, 168, 76, 0.12), transparent 70%), #030b13; }
.mod-xp__loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 0 1.5rem; text-align: center; }
.mod-xp__logo { width: clamp(150px, 28vw, 240px); animation: mod-xp-pulse 2.2s ease-in-out infinite; }
.mod-xp__logo img { width: 100%; height: auto; filter: drop-shadow(0 12px 40px rgba(0, 229, 255, 0.22)); }
@keyframes mod-xp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.mod-xp__loading-label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  font-family: var(--font-impact);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mod-white);
}
.mod-xp__dots i { display: inline-block; animation: mod-xp-blink 1.2s steps(1) infinite; }
.mod-xp__dots i:nth-child(2) { animation-delay: 0.4s; }
.mod-xp__dots i:nth-child(3) { animation-delay: 0.8s; }
@keyframes mod-xp-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.mod-xp__pct {
  min-width: 3.2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--mod-gold-light);
}
.mod-xp__bar {
  position: relative;
  width: min(360px, 76vw);
  height: 6px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  padding: 1px;
  background: rgba(240, 237, 232, 0.06);
}
.mod-xp__bar span {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--mod-gold) 0 10px, var(--mod-gold-light) 10px 12px);
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.55);
}

/* ── Fase 2: vuelo ─────────────────────────────────────── */
.mod-xp__flight { background: linear-gradient(180deg, #030b13 0%, #062532 55%, #0b3a4a 100%); }
.mod-xp__sky {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(240, 237, 232, 0.8), transparent 60%),
    radial-gradient(1px 1px at 28% 42%, rgba(240, 237, 232, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 12%, rgba(240, 237, 232, 0.9), transparent 60%),
    radial-gradient(1px 1px at 61% 30%, rgba(240, 237, 232, 0.55), transparent 60%),
    radial-gradient(1px 1px at 73% 8%, rgba(240, 237, 232, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 38%, rgba(240, 237, 232, 0.8), transparent 60%),
    radial-gradient(1px 1px at 92% 20%, rgba(240, 237, 232, 0.5), transparent 60%),
    radial-gradient(1px 1px at 35% 62%, rgba(240, 237, 232, 0.4), transparent 60%),
    radial-gradient(1px 1px at 66% 55%, rgba(240, 237, 232, 0.45), transparent 60%);
  opacity: 0;
  animation: mod-xp-fade 0.8s ease forwards;
}
.mod-xp__horizon {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 45%;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(201, 168, 76, 0.28), rgba(0, 229, 255, 0.06) 45%, transparent 75%);
}
.mod-xp__plane-wrap { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.mod-xp__plane {
  position: absolute;
  width: clamp(56px, 12vw, 140px);
  height: auto;
  left: 0;
  top: 0;
  color: var(--mod-white);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(201, 168, 76, 0.25));
  transform: translate(-50%, -50%) translate(-60vw, 45vh) rotate(38deg) scale(0.35);
  opacity: 0;
}
.mod-xp__trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(240, 237, 232, 0.55), transparent);
  opacity: 0;
}
.mod-xp[data-phase="flight"] .mod-xp__plane,
.mod-xp[data-phase="flash"]  .mod-xp__plane { animation: mod-xp-plane 2.6s cubic-bezier(0.3, 0.7, 0.2, 1) forwards; }
.mod-xp[data-phase="flight"] .mod-xp__trail,
.mod-xp[data-phase="flash"]  .mod-xp__trail { animation: mod-xp-trail 2.6s cubic-bezier(0.3, 0.7, 0.2, 1) forwards; }
@keyframes mod-xp-plane {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-60vw, 45vh) rotate(38deg) scale(0.35); }
  12%  { opacity: 1; }
  70%  { transform: translate(-50%, -50%) translate(-6vw, 6vh) rotate(24deg) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(0, -4vh) rotate(0deg) scale(2.6); }
}
@keyframes mod-xp-trail {
  0%   { opacity: 0; height: 0; transform: translate(-50%, 0) translate(-60vw, 45vh) rotate(-142deg); }
  15%  { opacity: 0.7; }
  70%  { opacity: 0.5; height: 38vh; transform: translate(-50%, 0) translate(-6vw, 6vh) rotate(-156deg); }
  100% { opacity: 0; height: 60vh; transform: translate(-50%, 0) translate(0, -4vh) rotate(-180deg); }
}
.mod-xp__flash { position: absolute; inset: 0; background: #f0ede8; opacity: 0; pointer-events: none; }
.mod-xp[data-phase="flash"] .mod-xp__flash { animation: mod-xp-flash 0.5s ease-out forwards; }
@keyframes mod-xp-flash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mod-xp-fade { to { opacity: 1; } }

/* ── Fase 3: vídeo a pantalla completa ─────────────────── */
.mod-xp__video { background: #000; }
/* El reproductor cubre la pantalla ("cover"): nunca menor que el viewport
   en ningún eje, manteniendo 16:9, centrado. El 22% de altura extra (1.22)
   recorta la barra de título de YouTube (arriba) y su logo (abajo), que no
   se pueden desactivar por parámetro; y sin eventos de ratón, así nunca
   aparecen los controles al pasar el cursor. */
.mod-xp__player {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100vh * 16 / 9 * 1.22));
  height: max(calc(100vh * 1.22), calc(100vw * 9 / 16 * 1.22));
  transform: translate(-50%, -50%);
  background: #000;
  pointer-events: none;
}
.mod-xp__player iframe,
.mod-xp__player > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vertical (móvil de pie, monitor girado): también a SANGRE, cubriendo
   toda la pantalla (se recortan los laterales del plano, que está centrado)
   — a petición del cliente, 19-09-2026: ajustado al ancho quedaba una franja
   pequeña y perdía toda la fuerza que tiene en escritorio. */
/* Viñeta cinematográfica sobre el vídeo para integrar los HUD */
.mod-xp__video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 11, 19, 0.55) 0%, transparent 28%, transparent 62%, rgba(3, 11, 19, 0.7) 100%);
}

.mod-xp__hud {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.mod-xp__hud--top {
  left: 2.25rem;
  top: calc(1.5rem + 1rem);
  max-width: min(36rem, calc(100vw - 4.5rem));
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  /* Oculto por defecto: aparece al pasar el ratón por la pantalla
     (petición 19-09-2026); en táctil, un toque lo muestra unos segundos
     (clase .is-peek desde el JS). */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mod-xp[data-phase="video"]:hover .mod-xp__hud--top,
.mod-xp.is-peek .mod-xp__hud--top { opacity: 1; transform: translateY(0); }
.mod-xp__title { margin: 0.35rem 0 0; font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1; }
.mod-xp__hud--end {
  left: 50%;
  bottom: 2.5rem;
  transform: translate(-50%, 16px);
  width: min(40rem, calc(100vw - 3rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.mod-xp__hud--end.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mod-xp__text {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-body, inherit);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(240, 237, 232, 0.72);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
/* Volver: enlace discreto en etiqueta pequeña, con filete degradado que
   aparece al pasar el ratón (sin botón grande), 19-09-2026. */
.mod-xp__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.1rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.75);
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.2s ease;
}
.mod-xp__back svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.mod-xp__back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.7), transparent);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.mod-xp__back:hover { color: var(--mod-gold-light); }
.mod-xp__back:hover svg { transform: translateX(4px); }
.mod-xp__back:hover::after { opacity: 1; }

/* Botón "Activar sonido": solo si el vídeo arrancó en silencio */
.mod-xp__sound {
  position: absolute;
  right: 2.25rem;
  top: calc(1.5rem + 1rem);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(201, 168, 76, 0.7);
  background: rgba(3, 11, 19, 0.65);
  color: var(--mod-gold-light);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  animation: mod-xp-attention 1.6s ease-in-out infinite;
}
.mod-xp__sound svg { width: 1.1rem; height: 1.1rem; }
.mod-xp__sound[hidden] { display: none; }
@keyframes mod-xp-attention { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(201, 168, 76, 0); } }

/* ── Móvil ──────────────────────────────────────────────── */
@media (max-width: 639.98px) {
  .mod-xp__hud--top { left: 1.5rem; top: 2rem; max-width: calc(100vw - 11rem); }
  .mod-xp__sound { right: 1.5rem; top: 2rem; padding: 0.55rem 0.8rem; } /* arriba a la derecha, sin pisar el texto final */
  .mod-xp__hud--end { bottom: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mod-xp__stage { transition: none; }
  .mod-xp__logo, .mod-xp__dots i, .mod-xp__plane, .mod-xp__trail, .mod-xp__flash, .mod-xp__sky, .mod-xp__sound { animation: none !important; }
}