/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — LA INTRO DE LAS TRES FRASES Y EL FONDO DE LA CAJA
   ───────────────────────────────────────────────────────────────────────────
   Lo que pidió el dueño el 04/10/2026: el video de la intro no va «de
   momento». La intro son sus tres frases, sobre negro y de a una, como
   arrancaba el video (intro.definitivo.MOV):

     1 · Every universe started as one idea nobody was watching.
     2 · No matter when. No matter how. No matter where.
     3 · What’s meant to exist finds its way.

   Tapan la pantalla entera al llegar, pasan y se van, y queda la portada en su
   petróleo de siempre. Detrás de la caja no hay nada: la única frase pegada a
   la caja es la suya, «LET IT FLOW».

   ── CUÁNDO SE VE ──────────────────────────────────────────────────────────
   Lo decide el script chico del <head> de studio/index.html: al llegar a la
   portada desde afuera y al recargarla. Quien vuelve a la portada desde otra
   pantalla del sitio no la vuelve a ver. No se guarda nada en el navegador
   (por qué: «SE MUESTRA SIEMPRE» en /intro/intro-video-definitiva-v1.js). Sin
   JavaScript no aparece: la página queda como siempre. El reloj arranca
   cuando la pestaña está a la vista. Mientras dura, lo de atrás queda inerte
   (ni Tab ni el lector de pantalla llegan) y la rueda del mouse no lo mueve.

   ── LA LETRA ──────────────────────────────────────────────────────────────
   La del video: angosta, en mayúsculas y blanca (Bebas Neue, la que ya tiene
   el sitio en estetica.css). El texto de la página sigue tal cual; las
   mayúsculas las pone el CSS.

   ── CÓMO PASAN ────────────────────────────────────────────────────────────
   Solo opacidad y un desenfoque corto, nada se mueve de lugar. Cada frase
   dura 3,4 s: entra en 0,7, queda entera 2 y se va en 0,7. Entre una y otra,
   0,2 s de negro. Después de la tercera, la pantalla negra se abre en 0,9 s.
   En total, unos 12 s desde que la letra está lista. Un toque, Escape, Enter,
   la barra o «Saltar» la cortan cuando sea: las frases se apagan en el acto y
   el negro se va en 0,15 s (23/10/2026).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La intro ─────────────────────────────────────────────────────────────── */
.intro-frases { display: none; }

html[data-intro="frases"] .intro-frases {
  --frase-dura: 3.4s;
  --frase-paso: 3.6s;      /* lo que dura más 0,2 s de negro */
  --frases-arranque: .3s;  /* negro solo, antes de la primera */

  position: fixed;
  inset: 0;
  /* Arriba de todo: del menú fijo, de los avisos y de lo que sea. */
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: #000;
  color: #f3f1ee;
  cursor: pointer;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
/* Con la barra de desplazamiento clásica (Windows), esconderla mientras dura
   la intro angostaría la página de golpe al devolverla: se guarda su lugar. */
html[data-intro="frases"] { scrollbar-gutter: stable; }

/* Las tres en la misma celda, una encima de la otra. */
.intro-frases-pista {
  display: grid;
  width: min(100% - 48px, 1320px);
  pointer-events: none;
  user-select: none;
}
.intro-frase {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  text-align: center;
  font-family: 'Bebas Neue', 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 10.4vw, 52px);
  line-height: 1.04;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-wrap: balance;
  opacity: 0;
}
/* «No matter when.», «No matter how.» y «No matter where.» no se parten. */
.intro-frase-trozo { white-space: nowrap; }
/* En la compu, cada frase en UNA línea, como en el video. La línea entera
   solo con Bebas Neue cargada (data-intro-letra, del script del <head>): la
   letra de respaldo es más ancha y se cortaría contra el borde. */
@media (min-width: 900px) {
  .intro-frase { font-size: min(3.6vw, 60px); }
  html[data-intro-letra] .intro-frase { white-space: nowrap; }
}

/* Corren cuando la letra está lista (o al segundo, si tarda): hasta entonces
   la pantalla queda negra, sin frases en otra letra. */
html[data-intro="frases"][data-intro-corre] .intro-frase {
  animation: intro-frase var(--frase-dura) ease-in-out both;
}
html[data-intro="frases"][data-intro-corre] .intro-frase:nth-child(1) { animation-delay: var(--frases-arranque); }
html[data-intro="frases"][data-intro-corre] .intro-frase:nth-child(2) { animation-delay: calc(var(--frases-arranque) + var(--frase-paso)); }
html[data-intro="frases"][data-intro-corre] .intro-frase:nth-child(3) { animation-delay: calc(var(--frases-arranque) + var(--frase-paso) * 2); }

/* Después de la tercera, la pantalla negra se abre y deja la portada. Al
   terminar queda invisible y sin tapar nada aunque el script no llegue a
   sacarla. */
html[data-intro="frases"][data-intro-corre] .intro-frases {
  animation: intro-frases-se-va .9s ease both;
  animation-delay: calc(var(--frases-arranque) + var(--frase-paso) * 2 + var(--frase-dura));
}
/* «Saltar» (o un toque, o una tecla): se va ya. Es otra animación, con otro
   nombre: si fuera la misma con otros tiempos, el navegador no la arranca de
   nuevo y la pantalla negra se cortaría en seco.
   23/10/2026, lo vieron los jurados: hasta hoy se fundía la capa entera (el
   negro con la frase adentro) en 0,45 s, y la frase, que seguía entera dentro
   de la capa, quedaba a media luz encima de las pestañas de la caja. Ahora
   las frases y «Saltar» se apagan en el mismo cuadro del toque, sin fundido,
   y lo único que se funde es el negro vacío, en 0,15 s: la portada aparece
   enseguida y ninguna letra de la intro queda encima de la caja. */
html[data-intro="frases"][data-intro-salta] .intro-frases {
  animation: intro-frases-salta .15s ease-out both;
}
html[data-intro="frases"][data-intro-salta] .intro-frases-pista,
html[data-intro="frases"][data-intro-salta] .intro-frases-saltar {
  visibility: hidden;
}
/* Sin transición: con «menos movimiento», estetica.css le pone a todo una de
   0,01 ms, y con eso el navegador dejaba la frase a la vista dos cuadros más
   antes de apagarla. */
html[data-intro="frases"][data-intro-salta] .intro-frases * { transition: none !important; }

/* 3,4 s: entra hasta 0,7 · entera hasta 2,7 · se va hasta 3,4. */
@keyframes intro-frase {
  0%     { opacity: 0; filter: blur(6px); }
  20.6%  { opacity: 1; filter: blur(0); }
  79.4%  { opacity: 1; filter: blur(0); }
  100%   { opacity: 0; filter: blur(4px); }
}
@keyframes intro-frases-se-va {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}
@keyframes intro-frases-salta {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* «Saltar»: chico, abajo a la derecha, en la letra de los rótulos. Con 44 px
   de alto, para el dedo. */
.intro-frases-saltar {
  position: absolute;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #ffffff40;
  border-radius: 999px;
  background: transparent;
  color: #ffffffb8;
  font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro-frases-saltar:hover { color: #fff; border-color: #ffffff80; }
.intro-frases-saltar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* «Menos movimiento»: estetica.css lleva toda animación a 0,01 ms y deja los
   retrasos, así que las frases no llegarían a verse y quedarían 11 s de negro
   vacío. Acá se les devuelven sus tiempos: son fundidos, nada se mueve de
   lugar, y sin el desenfoque. */
@media (prefers-reduced-motion: reduce) {
  html[data-intro="frases"][data-intro-corre] .intro-frase { animation-name: intro-frase-quieta; animation-duration: var(--frase-dura) !important; }
  html[data-intro="frases"][data-intro-corre] .intro-frases { animation-duration: .9s !important; }
  html[data-intro="frases"][data-intro-salta] .intro-frases { animation-duration: .15s !important; }
}
@keyframes intro-frase-quieta {
  0%, 100%     { opacity: 0; }
  20.6%, 79.4% { opacity: 1; }
}

@media print {
  html[data-intro="frases"] .intro-frases { display: none; }
}

/* ── La sección de la caja, sobre el petróleo de la página ─────────────────── */
/* Todo vale solo con `data-fondo="petroleo"` en la sección (studio/index.html).
   Con `data-fondo="intro"` vuelve el video de la intro detrás de la caja y
   esto no hace nada. */
.entrada-portada[data-fondo="petroleo"] {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Abajo, el fondo de la página (portada-identidad.css): el petróleo con sus
     luces, el mismo fondo-petroleo.webp, cubriendo la sección entera, mida lo
     que mida (en el <body> esa imagen mide 950 px de alto; la sección, hasta
     1060). Arriba, un velo del mismo petróleo (#405967, ningún negro) que
     arranca debajo de la caja: apaga la luz de abajo a la izquierda, que caía
     justo debajo de «Prueba:» y de los ejemplos: medidos de 320 a 2560 px,
     los textos chicos pasan de 2,4:1 a 4,8:1 o más en su peor punto. La luz
     de arriba, alrededor del título, queda entera. */
  background:
    linear-gradient(to bottom, #40596700 0, #40596700 var(--velo-desde), #405967d9 var(--velo-medio), #405967 var(--velo-hasta)),
    var(--papel, #405967) url('../fondo-petroleo.webp') center top / cover no-repeat;
  --velo-desde: 300px;
  --velo-medio: 440px;
  --velo-hasta: 640px;
  /* Con el video la sección medía siempre una pantalla entera. Ahora mide
     una pantalla, pero nunca más de 1060 px, así que en un monitor alto no
     queda un hueco de petróleo vacío antes del hero. Y no hay CLS: hasta
     1060 px de alto el hero arranca debajo de la pantalla antes y después de
     que la caja se arme (la arma JavaScript); en una pantalla más alta, la
     sección ya mide lo que va a medir armada. */
  min-height: min(100vh, 1060px);
  min-height: min(100svh, 1060px);
  /* El menú de arriba es fijo: el título arranca debajo, con aire. */
  padding-top: clamp(104px, 13vh, 132px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
/* Donde el menú de la portada ocupa dos renglones (portada-identidad.css) y
   mide unos 125 px, el título arranca debajo, como lo hacía con el video:
     · entre 761 y 1280 px, siempre (la marca y las acciones arriba, el menú
       abajo);
     · entre 601 y 760 px, con sesión, cuando el nombre de la cuenta no entra
       al lado del menú. Sin sesión la barra es de una fila, pero el lugar del
       título es el mismo: así no salta cuando se sabe si hay sesión. */
@media (min-width: 761px) and (max-width: 1280px) {
  .entrada-portada[data-fondo="petroleo"] { padding-top: 156px; --velo-desde: 350px; --velo-medio: 490px; --velo-hasta: 690px; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .entrada-portada[data-fondo="petroleo"] { padding-top: 156px; --velo-desde: 360px; --velo-medio: 520px; --velo-hasta: 720px; }
}
/* En el celular la barra es una sola fila (portada-identidad.css), pero la
   caja es más alta: los «+» van de a dos y «Seguir» abajo, a todo el ancho. */
@media (max-width: 600px) {
  .entrada-portada[data-fondo="petroleo"] { padding-top: 96px; --velo-desde: 380px; --velo-medio: 500px; --velo-hasta: 700px; }
}
/* El velo negro del final fundía el video de la intro con lo que sigue. Acá
   el final lo funde el velo petróleo del video de fondo, más abajo. */
.entrada-portada[data-fondo="petroleo"]::after { content: none; }

/* ── El video de fondo: «noche traveling», en loop, bajo un velo petróleo ───
   Detrás de todo lo de la sección (z-index −1 dentro de su isolation) y
   encima de su fondo petróleo. Sin JavaScript, con «menos movimiento» o con
   ahorro de datos queda el póster, el primer cuadro.
   El velo no es negro: es el petróleo de la página (#405967) en tres capas:
     · un tinte de color que lleva la noche al petróleo sin aplanarla;
     · arriba y en el medio, un velo parejo para que el título y la caja se
       lean (la caja ya es un vidrio con su propio fondo);
     · abajo, el petróleo entero: la sección termina en el color de la página. */
/* Con el interruptor en «intro» (el video de la intro detrás de la caja) este
   fondo no existe: ni ocupa lugar ni tapa los mandos de la intro. */
.fondo-loop { display: none; }
.entrada-portada[data-fondo="petroleo"] .fondo-loop {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--papel, #405967) url('/fondo/portada-noche-v1.webp') center / cover no-repeat;
  pointer-events: none;
}
/* Un poco más apagado que el original: las luces del muelle no compiten con
   los textos chicos de debajo de la caja. */
.fondo-loop-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.82) saturate(.9);
}
.entrada-portada[data-fondo="petroleo"] .fondo-loop::before,
.entrada-portada[data-fondo="petroleo"] .fondo-loop::after {
  content: '';
  position: absolute;
  inset: 0;
}
.entrada-portada[data-fondo="petroleo"] .fondo-loop::before {
  background: #405967;
  mix-blend-mode: color;
  opacity: .55;
}
.entrada-portada[data-fondo="petroleo"] .fondo-loop::after {
  /* Medido de 320 a 2560 px: con este velo, los textos chicos de debajo de
     la caja («Prueba:», los ejemplos, «Con tu canción y tu cara.» y el lema)
     quedan a 4,5:1 o más en su peor punto, sobre la luz más clara. */
  background: linear-gradient(to bottom,
    #2a43509e 0%,
    #2c4553b8 35%,
    #314c5ad6 62%,
    #405967f0 85%,
    #405967 100%);
}

/* «LET IT FLOW» («DÉJALO fluir», «LASCIA CHE scorra»): como son pocas
   palabras, en el celular puede ir más grande sin cortarse.
   La letra es la de los títulos (--f-rara) y la última palabra va en la
   misma letra, destacada con el rosa: desde el 15/10/2026 no hay cursiva en
   ningún lado. Cada interfaz pone su letra y su tamaño encima (con id). */
.entrada-portada[data-fondo="petroleo"] .entrada--portada { padding-top: 0; }
.entrada-portada[data-fondo="petroleo"] .entrada--portada .entrada-titulo {
  font-family: var(--f-rara);
  font-weight: 600;
  font-size: clamp(44px, 13vw, 92px);
  letter-spacing: -.045em;
}
.entrada-portada[data-fondo="petroleo"] .entrada--portada .entrada-titulo em {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* La caja y lo suyo, en sus colores petróleo (los de /crear/). Lo que queda
   suelto sobre el fondo (título, ejemplos, videoclip, lema) lleva la sombra
   de los textos sobre imagen de la portada (.hero-cuerpo), en petróleo
   oscuro y no en negro, como la llevaba sobre el video. */
.entrada-portada[data-fondo="petroleo"] .entrada--portada {
  --e-panel: #304b59cc;
  --e-panel-2: var(--g1, #354f5d);
  --e-linea: var(--linea-fuerte, rgba(213, 232, 240, .36));
  --e-linea-suave: var(--linea, rgba(213, 232, 240, .17));
  --e-tinta: var(--tinta, #edf2f4);
  --e-tenue: var(--tinta-dim, #d5e1e7);
  text-shadow: 0 1px 3px #1934404d, 0 1px 16px #19344059;
}
/* La caja es un vidrio, como en la portada original: el petróleo de /crear/
   (#304b59) al 80 %, con un desenfoque corto sobre las luces del fondo. */
.entrada-portada[data-fondo="petroleo"] .entrada--portada .entrada-caja {
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  backdrop-filter: blur(4px) saturate(1.05);
}
/* La opción elegida, como en /crear/: la portada la oscurecía a negro. */
.entrada-portada[data-fondo="petroleo"] .entrada--portada .entrada-opcion[aria-pressed="true"] { color: var(--g0, #405967); }
.entrada-portada[data-fondo="petroleo"] .entrada--portada .entrada-opcion[aria-pressed="true"] .entrada-punto { border-color: var(--g0, #405967); background: var(--g0, #405967); }