/* ==========================================================================
   MOIRE - Coming Soon
   Secuencia:  el video se reproduce limpio, sin ningun efecto
               -> al acabar se funde a negro
               -> aparece el COMING SOON sobre el fondo, nunca encima
                  del video.
   Los tiempos los inyecta assets/js/coming-soon.js en --fade-dur y
   --reveal-dur.
   ========================================================================== */

:root {
  --c-ink:   #0b0708;
  --c-cream: #f2ede6;

  /* Los sobrescribe el JS con los segundos reales */
  --fade-dur: 0.9s;     /* lo que tarda el video en desaparecer */
  --reveal-dur: 1.2s;   /* lo que tarda en aparecer el texto */

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-ink);
}

/* ---- Bloqueo total de interaccion: nada de scroll, zoom ni seleccion ---- */
html {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--c-cream);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ========================= ESCENARIO =====================================
   El fondo es el que queda a la vista cuando el video se funde. Es un rojo
   casi negro, del mismo tono que el fondo de los videos, para que el
   fundido no se note como un corte a negro puro.                          */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: radial-gradient(125% 100% at 50% 45%,
              #1d0709 0%, #0b0708 58%, #050203 100%);
}

/* ========================= VIDEO =========================================
   Sin zoom, sin desenfoque, sin vineteado, sin grano. Se ve tal cual se
   exporto. Lo unico que hace es desaparecer al final.                     */

.stage__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity var(--fade-dur) ease-in-out;
  will-change: opacity;
}

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* llena la pantalla sin deformar */
  object-position: center;
  display: block;
  pointer-events: none;   /* el video no es clicable */
}

/* ========================= COMING SOON ===================================
   Vive por debajo del video en la pila visual: mientras el video esta
   opaco no se ve nada, y solo aparece cuando el video se ha ido. Asi es
   imposible que se superponga.                                            */

.reveal {
  position: relative;
  z-index: 0;
  display: grid;
  justify-items: center;
  padding: 6vmin;
  text-align: center;
  pointer-events: none;
}

.reveal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Tipografia GRANDE: escala con el viewport, tope en 22rem */
  font-size: clamp(3.4rem, 15.5vw, 22rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  display: grid;
  gap: 0.02em;
}

.reveal__word { display: block; }

.reveal__word em {
  display: block;
  font-style: normal;
  opacity: 0;
  transform: translateY(0.16em);
}

/* ------- FINAL: el video se funde y entra el texto ----------------------
   El retardo del texto es --fade-dur, es decir, empieza justo cuando el
   video ha acabado de desaparecer. Ni solapado ni con hueco muerto.      */

.is-ended .stage__media { opacity: 0; }

.is-ended .reveal__word em {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-dur) var(--ease-soft)
      calc(var(--fade-dur) + var(--word-delay, 0s)),
    transform var(--reveal-dur) var(--ease-soft)
      calc(var(--fade-dur) + var(--word-delay, 0s));
}

/* ========================= CONTROLES =====================================
   Puerta de entrada, solo si el navegador bloquea el autoplay.            */

.gate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  gap: 1.4rem;
  justify-items: center;
  border: 0;
  background: rgba(11,7,8,0.72);
  color: var(--c-cream);
  font-family: var(--font-text);
  font-size: clamp(0.65rem, 1.3vw, 0.85rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.6s var(--ease-soft);
}

.gate[hidden] { display: none; }
.gate.is-hiding { opacity: 0; pointer-events: none; }

.gate__ring {
  width: clamp(56px, 8vw, 84px);
  aspect-ratio: 1;
  border: 1px solid rgba(242,237,230,0.5);
  border-radius: 50%;
  position: relative;
}

.gate__ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 0.7em solid var(--c-cream);
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
}

.is-ended .gate { opacity: 0; pointer-events: none; }

/* ========================= CARGA =========================================
   El video entra con un fundido en vez de aparecer de golpe.              */

.is-booting .stage__media { opacity: 0; }

/* ========================= FALLBACKS =====================================
   Sin JS no hay video (lo monta el script), asi que se ve el Coming Soon
   estatico sobre el fondo de marca.                                       */

.reveal--static .reveal__word em { opacity: 1; transform: none; }

/* Si el video no existe o el navegador no lo soporta (Safari viejo con
   webm), el JS pone esta clase y se salta directo al texto. */
.no-video .stage__media { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stage__media { transition-duration: 0.3s; }
  .is-ended .reveal__word em { transition-duration: 0.3s; }
}