/* =============================================================================
   LA PORTADA · base, barra, encabezado y las piezas que se repiten
   =============================================================================

   Calcada de kineticgames.co.uk/phasmophobia, que es la referencia que puso el
   usuario. Lo que se copia de ahí, y por qué:

   · EL TAMAÑO. Titulares de sección a 48-80 px en serif de VERSALITAS y texto
     corrido a 20 px con interlineado ancho. La versión anterior iba a 13-15 px
     con letra de píxel y no se leía de un vistazo: esa fue exactamente la queja.
     La de píxel se queda para el logo y para dentro del juego, que es su sitio.
   · EL PAPEL ROTO. Nada acaba en línea recta: los cortes entre secciones se
     rasgan (client/js/ui/rasgado.js), las fotos se recortan con el borde mordido
     y los botones son trozos de papel arrancado.
   · LOS FONDOS QUE ALTERNAN a pantalla completa, para que cada bloque se lea
     como una página distinta del expediente.

   Las secciones en sí están en actos.css; aquí va lo común.
============================================================================= */

.portal {
  position: relative;
  z-index: 1;
  color: #fff;

  /* Los cinco papeles del expediente. Cada sección pinta uno y el rasgado de su
     borde inferior pinta el de la siguiente. */
  --noche: #0a0812;
  --morado: #1b1030;
  --negro: #060509;
  --papel: #ded8b4;
  --rojo: #2a0f12;
  --tinta: #1a1508;

  background: var(--noche);
}
.portal[hidden] { display: none; }

.ancho { width: min(1240px, 90vw); margin-inline: auto; }
.ancho--corto { width: min(860px, 90vw); }

/* --- La barra ---------------------------------------------------------------
   Flotante sobre la casa; al bajar se vuelve sólida. La clase la pone motion.js. */
.barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px min(4vw, 40px);
  transition: background 240ms ease, box-shadow 240ms ease, padding 240ms ease;
}
.barra.pegada {
  padding-block: 10px;
  background: rgba(6, 5, 9, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
}
.barra-marca { text-decoration: none; }
.barra-marca .marca { height: 62px; transition: height 240ms ease; }
.barra.pegada .barra-marca .marca { height: 46px; }

.barra-menu { display: flex; gap: 30px; margin-inline: auto; }
.nav-link {
  font-family: var(--face-gorda);
  font-size: 21px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; border-color: var(--lime); }
.nav-link--admin { color: var(--lime); }

.barra-fin { display: flex; align-items: center; gap: 12px; }
.lang {
  border: 0;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
  font-family: var(--face-gorda);
  font-size: 16px;
  letter-spacing: .1em;
  padding: 9px 13px;
  cursor: pointer;
}
.lang:hover { color: #fff; background: rgba(255, 255, 255, .14); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 0;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}
.burger span { display: block; width: 22px; height: 2px; background: #fff; }

/* --- El botón de papel arrancado -------------------------------------------
   Un rectángulo claro con el borde mordido. El recorte es fijo, no aleatorio:
   así todos los botones de la página son hermanos y no un muestrario. */
.papel {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: #f2efe6;
  color: #12100c;
  font-family: var(--face-gorda);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  padding: 20px 42px;
  font-size: 30px;
  clip-path: polygon(
    1% 6%, 9% 0, 22% 5%, 38% 1%, 55% 6%, 71% 0, 86% 5%, 99% 2%,
    100% 32%, 98% 62%, 100% 94%, 88% 100%, 70% 95%, 52% 100%,
    34% 96%, 17% 100%, 3% 95%, 0 66%, 2% 36%
  );
  transition: transform 130ms var(--ease-pop), background 130ms ease;
}
.papel:hover { transform: translateY(-3px) rotate(-.5deg); background: #fff; }
.papel--grande { font-size: clamp(28px, 3.4vw, 42px); padding: 24px 56px; }
.papel--chico { font-size: 20px; padding: 12px 24px; }

/* --- El desgarrón entre secciones ------------------------------------------
   Vive pegado al borde inferior de cada sección y pinta el color de la que viene
   DEBAJO: así el papel de arriba se ve arrancado y asoma el siguiente. */
.rasgon {
  position: absolute;
  inset: auto 0 -1px;
  z-index: 3;
  height: clamp(34px, 4vw, 62px);
  pointer-events: none;
}
.rasgon svg { display: block; width: 100%; height: 100%; }
.rasgon--noche { color: var(--noche); }
.rasgon--morado { color: var(--morado); }
.rasgon--negro { color: var(--negro); }
.rasgon--papel { color: var(--papel); }
.rasgon--rojo { color: var(--rojo); }

/* --- Fotos con el borde mordido ---------------------------------------------
   Tres recortes distintos para que dos fotos vecinas no se vean calcadas. */
.foto { margin: 0; }
.foto img, .foto canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.roto-1 { clip-path: polygon(2% 3%, 26% 0, 51% 4%, 77% 1%, 100% 5%, 98% 30%, 100% 58%, 97% 84%, 99% 99%, 74% 96%, 48% 100%, 23% 95%, 1% 98%, 3% 72%, 0 46%, 2% 22%); }
.roto-2 { clip-path: polygon(0 6%, 21% 1%, 44% 5%, 68% 0, 96% 4%, 100% 28%, 97% 55%, 100% 80%, 96% 100%, 71% 96%, 45% 100%, 19% 96%, 2% 100%, 0 74%, 3% 48%, 0 26%); }
.roto-3 { clip-path: polygon(3% 0, 29% 5%, 55% 0, 80% 4%, 100% 1%, 97% 26%, 100% 52%, 98% 79%, 100% 97%, 76% 100%, 50% 96%, 25% 100%, 3% 97%, 0 70%, 2% 44%, 0 18%); }

/* --- El movimiento -----------------------------------------------------------
   Entra una vez y se queda. Nada que se repita al volver a pasar: eso convierte
   una página tranquila en una página inquieta. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(.2, .8, .3, 1);
}
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 980px) {
  /* EL DESPLEGABLE SE ABRE COMO UNA TAPA.
     Estaba pegado al borde y aparecía de golpe, que es lo que hace todo el
     mundo. Ahora cuelga DEL BOTÓN —arriba a la derecha, que es donde está el
     pulgar— y se abre girando sobre su borde superior, como una tapa que cae. El
     punto de fuga en la barra hace que ese giro se vea en perspectiva y no como
     un simple aplastarse.

     Y sigue existiendo aunque esté cerrado, escondido con `visibility`, porque
     una transición necesita de dónde salir: con `display: none` no hay animación
     que valga — el elemento no existe hasta el fotograma en que aparece. */
  .barra { perspective: 900px; }
  .barra-menu {
    position: absolute;
    top: calc(100% - 6px);
    right: 14px;
    left: auto;
    width: min(300px, calc(100vw - 28px));
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 12px;
    background: linear-gradient(180deg, rgba(20, 14, 34, .99), rgba(6, 5, 9, .99));
    box-shadow:
      inset 0 1px 0 rgba(200, 180, 255, .16),
      0 26px 60px rgba(0, 0, 0, .8);
    transform-origin: top right;
    transform: rotateX(-82deg) translateY(-6px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    transition:
      transform 340ms cubic-bezier(.16, .9, .3, 1.08),
      opacity 200ms ease,
      visibility 0s linear 340ms;
  }
  .barra-menu[data-open="true"] {
    transform: rotateX(0deg) translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
      transform 380ms cubic-bezier(.16, .9, .3, 1.08),
      opacity 180ms ease,
      visibility 0s;
  }

  /* Y cada enlace entra un pelín detrás del anterior. Es lo que separa «una caja
     que aparece» de «algo que se despliega». */
  .barra-menu .nav-link {
    padding: 15px 0;
    font-size: 23px;
    border-bottom: 1px solid rgba(200, 180, 255, .1);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 240ms ease;
  }
  .barra-menu[data-open="true"] .nav-link { opacity: 1; transform: none; }
  .barra-menu[data-open="true"] .nav-link:nth-child(1) { transition-delay: 90ms; }
  .barra-menu[data-open="true"] .nav-link:nth-child(2) { transition-delay: 130ms; }
  .barra-menu[data-open="true"] .nav-link:nth-child(3) { transition-delay: 170ms; }
  .barra-menu[data-open="true"] .nav-link:nth-child(4) { transition-delay: 210ms; }
  .barra-menu[data-open="true"] .nav-link:nth-child(5) { transition-delay: 250ms; }
  .barra-menu[data-open="true"] .nav-link:nth-child(6) { transition-delay: 290ms; }
  .barra-menu .nav-link:last-child { border-bottom: 0; }

  /* EL BOTÓN, EL ÚLTIMO DE LA FILA. Es el que se pulsa, y en un móvil lo que se
     pulsa va donde llega el pulgar: a la derecha del todo. */
  .barra-fin { margin-left: auto; }
  .lang { order: 1; }
  .papel--chico { order: 2; }
  .burger { display: flex; order: 3; }

  /* Las tres rayas se convierten en un aspa al abrir. Cuesta seis líneas y es la
     diferencia entre un botón y un botón que sabe en qué estado está. */
  .burger span { transition: transform 260ms var(--ease-pop), opacity 160ms ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .barra-marca .marca { height: 42px; }
}

/* --- Móviles estrechos -------------------------------------------------------
   En 390 píxeles no caben el nombre, el idioma, el botón y las rayas: se salía
   el último por el canto derecho, que es justo el que hay que pulsar. Se quita
   el idioma —de momento solo dice que el juego habla español— y se estrecha lo
   demás hasta que el botón del menú queda entero y con aire. */
@media (max-width: 560px) {
  .barra { gap: 10px; padding-inline: 12px; }
  .lang { display: none; }
  .barra-marca .marca { height: 34px; }
  .barra.pegada .barra-marca .marca { height: 30px; }
  .papel--chico { font-size: 16px; padding: 9px 16px; }
  .burger { padding: 10px; }
  .burger span { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-menu,
  .barra-menu .nav-link,
  .burger span { transition-duration: 1ms !important; }
  .barra-menu { transform: none !important; }
}