/* skin: F4 · gate. Escena pintada + sellos de lacre + portada legible.
   Las variables de cámara (--ni-cam-*, --ni-hand, --ni-paper, --ni-focus, --ni-unlock) viven en #gate y las escribe el runtime. */

#gate { overflow: hidden; padding: 0; background: var(--ni-s1); }

/* ── Escena ───────────────────────────────────────────── */
.kc-gate__scene {
  overflow: hidden;
  container-type: size;
  background: var(--ni-s1);
}
.ni-stage {
  --ni-sw: max(100cqw, calc(100cqh * 9 / 16));
  --ni-sh: max(100cqh, calc(100cqw * 16 / 9));
  --ni-k: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ni-sw);
  height: var(--ni-sh);
  translate: -50% -50%;
}
.ni-cam {
  position: absolute;
  inset: 0;
  transform-origin: var(--ni-focus-x) var(--ni-focus-y);
  transform: translate(calc(var(--ni-cam-x, 0) * 1%), calc(var(--ni-cam-y, 0) * 1%)) scale(calc(var(--ni-cam-s, 1) * var(--ni-k, 1)));
  will-change: transform;
}
.ni-l {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
img.ni-l { max-width: none; height: auto; }
.ni-l--bg { height: 100%; }
.ni-l--bg img { width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* Paralaje: capas lejanas se mueven menos que la cornisa. Contraescala = (1 + (s-1)·k) / s alrededor del foco.
   k: fondo .29 (x1.16 con cámara x1.55), pedestal .69 (x1.38), primer plano .22 (x1.12).
   Los orígenes en px salen de --ni-focus-x/y (57% / 60%) menos la caja de cada capa (ni-gate-layers.css). */
.ni-l--bg {
  transform-origin: var(--ni-focus-x) var(--ni-focus-y);
  transform: scale(calc(1 / var(--ni-cam-s, 1) * (1 + (var(--ni-cam-s, 1) - 1) * 0.29)));
}
.ni-l--pedestal,
.ni-l--pedestal-soft {
  transform-origin: calc(var(--ni-sw) * 0.00704) calc(var(--ni-sh) * 0.41875);
  transform: scale(calc(1 / var(--ni-cam-s, 1) * (1 + (var(--ni-cam-s, 1) - 1) * 0.69)));
}
.ni-l--fore {
  transform-origin: calc(var(--ni-sw) * 0.57) calc(var(--ni-sh) * 0.6);
  transform: scale(calc(1 / var(--ni-cam-s, 1) * (1 + (var(--ni-cam-s, 1) - 1) * 0.22)));
}

/* Rack focus solo por opacidad (--ni-focus 0 = farol nítido, 1 = papel nítido). La capa suave va encima y se funde. */
.ni-l--lantern-soft { opacity: var(--ni-focus, 0); }
.ni-l--pedestal-soft { opacity: calc(1 - var(--ni-focus, 0)); }

/* La mano entra con el folleto, lo deja y se retira; el papel viaja con ella hasta posarse */
.ni-l--hand {
  translate:
    calc(clamp(0, 1 - var(--ni-hand, 0), 1) * var(--ni-sw) * 0.6 + clamp(0, var(--ni-hand, 0) - 1, 1) * var(--ni-sw) * 0.05)
    calc(clamp(0, var(--ni-hand, 0) - 1, 1) * 18%);
  opacity: clamp(0, (1.8 - var(--ni-hand, 0)) * 5, 1);
}
.ni-l--hand { filter: drop-shadow(0 3px 3px rgba(40, 58, 52, 0.28)); }
.ni-l--paper { translate: calc((1 - var(--ni-paper, 0)) * var(--ni-sw) * 0.6) 0; }

/* La llama es solo luz: halo + punta, mezclada en screen sobre el vidrio ya iluminado. El origen (50% / 51.6% de la capa) es la mecha: medido al exportar. */
.ni-l--flame {
  mix-blend-mode: screen;
  transform-origin: 50% 51.6%;
  animation: ni-flame 2.2s ease-in-out infinite alternate;
}
@keyframes ni-flame {
  from { opacity: 0.86; scale: 1; }
  to { opacity: 1; scale: 1.03; }
}

/* Teléfonos más angostos que 9:20 ven menos del 80 % del ancho de la escena: menos zoom para que el farol y el folleto quepan */
@media (max-aspect-ratio: 9/20) {
  .ni-stage { --ni-k: 0.92; }
}

/* Horizontal: la escena es una columna 9:16 centrada y el fondo ancho llena detrás */
@media (min-aspect-ratio: 1/1) {
  .ni-stage {
    --ni-sw: calc(100cqh * 9 / 16);
    --ni-sh: 100cqh;
  }
  .ni-cam .ni-l--bg {
    left: calc(50% - 50cqw);
    width: 100cqw;
    height: 100%;
    transform-origin: 50% 50%;
  }
  /* La cornisa nítida se desenfoca hacia los lados y se funde con la misma cornisa pintada, ya borrosa, de bg-l */
  .ni-l--ledge {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  }
}

/* ── Bloque de desbloqueo ─────────────────────────────── */
.ni-unlock {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  isolation: isolate;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 8px;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
  text-align: center;
}
/* La opacidad del bloque ya no lo apaga todo: solo el cartel de título (hint) se enciende en la intro; la pregunta y los sellos esperan a `ready` */
.ni-unlock { opacity: 1; }
.ni-unlock__ask,
.ni-seals { opacity: var(--ni-unlock, 1); }
#gate[data-ni-beat="intro"] .ni-unlock__hint,
#gate[data-ni-beat="intro"] .ni-unlock::before {
  visibility: visible;
  animation: ni-title-in 900ms ease-out 1600ms both;
}
@keyframes ni-title-in { from { opacity: 0; } to { opacity: 1; } }
/* Lavado de papel: la cornisa es pintura, no se asume su luminancia */
.ni-unlock::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Banda de papel liso con borde superior difuminado: el texto nunca pisa la arista grabada de la cornisa */
  inset: -40px 0 0;
  background: linear-gradient(180deg, rgba(247, 244, 238, 0) 0, rgba(247, 244, 238, 0.86) 40px, rgba(247, 244, 238, 0.9) 100%);
  pointer-events: none;
}
.ni-unlock__hint,
.ni-unlock__ask { margin: 0; }
.ni-unlock span[aria-hidden] { display: none; }
.ni-unlock__hint span,
.ni-unlock__ask span { display: block; }
.ni-unlock__hint {
  font-size: 1.14rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  color: var(--kc-ink);
}
.ni-unlock__hint [lang="en-US"] { font-size: 0.96em; color: var(--kc-ink-muted); }
.ni-unlock__ask {
  margin-top: 2px;
  font-family: var(--kc-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--kc-ink);
}
.ni-unlock__ask [lang="en-US"] { color: var(--kc-ink-muted); }

.ni-seals { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }
.ni-seal {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1px;
  min-width: 124px;
  min-height: 128px;
  padding: 4px 4px 2px;
  border: 0;
  background: none;
  color: var(--kc-ink);
  -webkit-tap-highlight-color: transparent;
  transition: translate 180ms var(--kc-ease);
}
.ni-seal__wax {
  width: 92px;
  height: 92px;
  max-width: none;
  filter: drop-shadow(0 3px 4px rgba(40, 24, 24, 0.38));
}
.ni-seal__label {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 0 6px rgba(247, 244, 238, 0.95), 0 0 2px rgba(247, 244, 238, 0.9);
}
@media (hover: hover) {
  .ni-seal:hover { translate: 0 -2px; }
  .ni-seal:hover .ni-seal__wax { filter: drop-shadow(0 4px 9px rgba(176, 138, 90, 0.85)); }
}
.ni-seal:focus-visible { outline: 2px solid var(--kc-focus); outline-offset: 2px; border-radius: 8px; }
.ni-seal:active { translate: 0 1px; }
.ni-seal:active .ni-seal__wax { scale: 0.96; }

/* Horizontal corto (portada para compartir, laptops bajas): el bloque de desbloqueo se compacta para no pisar el papel */
@media (min-aspect-ratio: 1/1) and (max-height: 720px) {
  .ni-unlock { gap: 2px; padding-bottom: 8px; }
  .ni-unlock__hint { font-size: 0.9rem; line-height: 1.1; }
  .ni-unlock__ask { font-size: 0.56rem; line-height: 1.3; }
  .ni-seals { margin-top: 0; }
  .ni-seal { min-height: 82px; min-width: 104px; padding-top: 2px; }
  .ni-seal__wax { width: 54px; height: 54px; }
  .ni-seal::before, .ni-seal::after { width: 54px; height: 54px; margin-left: -27px; top: 2px; }
  .ni-seal__label { font-size: 0.86rem; line-height: 1.1; }
}

/* ── Romper el sello: estampa y el lacre se parte en dos (≤ 520 ms) ── */
.ni-seal::before,
.ni-seal::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  background: url('../../../assets/gate/seal-es.webp') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.ni-seal[data-locale="en"]::before,
.ni-seal[data-locale="en"]::after { background-image: url('../../../assets/gate/seal-en.webp'); }
.ni-seal::before { clip-path: polygon(0 0, 52% 0, 46% 17%, 55% 33%, 47% 50%, 54% 67%, 48% 84%, 53% 100%, 0 100%); }
.ni-seal::after { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 48% 84%, 54% 67%, 47% 50%, 55% 33%, 46% 17%); }

#gate[data-ni-beat="unsealing"] .ni-seal { pointer-events: none; }
#gate[data-ni-beat="unsealing"] :is(.ni-unlock__hint, .ni-unlock__ask) {
  visibility: visible;
  animation: ni-fade-out 260ms ease-out forwards;
}
#gate[data-ni-beat="unsealing"] .ni-unlock::before { visibility: visible; animation: ni-fade-out 260ms ease-out forwards; }
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"],
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"] {
  visibility: visible;
  animation: ni-fade-out 260ms ease-out forwards;
}
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"],
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"] { visibility: visible; }
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"] .ni-seal__wax,
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"] .ni-seal__wax {
  animation: ni-stamp 180ms ease-out forwards, ni-gone 1ms linear 180ms forwards;
}
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"] .ni-seal__label,
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"] .ni-seal__label {
  animation: ni-fade-out 300ms ease-out 100ms forwards;
}
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"]::before,
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"]::after,
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"]::before,
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"]::after { display: block; }
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"]::before,
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"]::before { animation: ni-crack-a 340ms cubic-bezier(0.2, 0.7, 0.3, 1) 180ms forwards; }
#gate[data-ni-chosen="es"][data-ni-beat="unsealing"] .ni-seal[data-locale="es"]::after,
#gate[data-ni-chosen="en"][data-ni-beat="unsealing"] .ni-seal[data-locale="en"]::after { animation: ni-crack-b 340ms cubic-bezier(0.2, 0.7, 0.3, 1) 180ms forwards; }

@keyframes ni-stamp {
  0% { transform: scale(1); }
  45% { transform: scale(0.9); }
  100% { transform: scale(1.05); }
}
@keyframes ni-gone { to { opacity: 0; } }
@keyframes ni-fade-out { to { opacity: 0; } }
@keyframes ni-crack-a {
  from { opacity: 1; transform: scale(1.05); }
  to { opacity: 0; transform: translate(-14px, 3px) rotate(-8deg) scale(1.05); }
}
@keyframes ni-crack-b {
  from { opacity: 1; transform: scale(1.05); }
  to { opacity: 0; transform: translate(14px, 4px) rotate(8deg) scale(1.05); }
}

/* ── Portada legible: el folleto de sociedad ──────────── */
/* Sin transform: el runtime lo usa para el FLIP desde el papel. Alto = 2.25 × ancho; toda la tipografía va en cqw para que quepa sin scroll. */
.ni-page {
  --ni-w: clamp(270px, min(82vw, 360px, calc((100dvh - 100px) / 2.25)), 360px);
  position: absolute;
  inset: 72px 0 16px;
  margin: auto;
  box-sizing: border-box;
  width: var(--ni-w);
  height: calc(var(--ni-w) * 2.25);
  max-height: calc(100% - 88px);
  overflow: auto;
  scrollbar-width: none;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--ni-w) * 0.1) calc(var(--ni-w) * 0.105) calc(var(--ni-w) * 0.085);
  /* papel de trapo de algodón + oscurecimiento de borde (deckle) */
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, rgba(247, 244, 238, 0) 52%, rgba(168, 140, 98, 0.2) 100%),
    url('../../../assets/page/paper.webp') 0 0 / 360px 360px repeat var(--kc-canvas);
  border: 1px solid #1b1d1c;
  box-shadow:
    inset 0 0 22px rgba(126, 98, 62, 0.28),
    inset 0 0 3px rgba(84, 64, 40, 0.45),
    0 0 0 3px rgba(247, 244, 238, 0.28),
    0 26px 48px rgba(30, 36, 51, 0.42),
    0 4px 10px rgba(30, 36, 51, 0.26);
  color: var(--kc-ink);
  text-align: center;
}
.ni-page::-webkit-scrollbar { display: none; }
.ni-page:focus-visible { outline: 1px dotted rgba(40, 58, 52, 0.7); outline-offset: -6px; }
.ni-page > * { margin: 0; }

/* El marco: filete punteado, regla doble (gruesa + fina) y filete punteado interior. Solo CSS. */
.ni-page__frame {
  position: absolute;
  inset: 6px;
  border: 1.5px dotted #1b1d1c;
  pointer-events: none;
}
.ni-page__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid #1b1d1c;
  outline: 1px solid #1b1d1c;
  outline-offset: -8px;
}
.ni-page__frame::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1.5px dotted #1b1d1c;
}

.ni-page__cameo {
  width: 35cqw;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 1px 1.5px rgba(40, 58, 52, 0.28));
}
.ni-page__kicker {
  margin: 0;
  max-width: 78cqw;
  font-family: var(--kc-font-display);
  font-size: 8cqw;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--kc-ink);
}
.ni-page__rule {
  display: block;
  align-self: stretch;
  height: 4px;
  border-top: 1.5px solid var(--kc-ink);
  border-bottom: 1px solid var(--kc-ink);
}
.ni-page .kc-gate__name {
  font-size: 12.8cqw;
  line-height: 1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ni-page__tagline {
  align-self: stretch;
  padding: 2.2cqw 3cqw;
  border: 1px solid var(--kc-ink);
  outline: 1px solid var(--kc-ink);
  outline-offset: -4px;
  font-family: var(--kc-font-display);
  font-size: max(0.64rem, 2.9cqw);
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
}
.ni-page .kc-gate__date {
  align-self: stretch;
  padding-block: 1.6cqw;
  border-block: 1px solid var(--kc-ink);
  font-size: 3.7cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--kc-ink);
}
.ni-page__gossip {
  align-self: stretch;
  font-size: 4.85cqw;
  line-height: 1.28;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Capitular de tres líneas */
.ni-page__gossip::first-letter {
  float: left;
  margin: 0.02em 0.08em 0 0;
  font-family: var(--kc-font-display);
  font-size: 3.3em;
  line-height: 0.8;
  color: var(--kc-ink);
}
/* Divisor de losange entre la crónica y la firma */
.ni-page__orn {
  align-self: stretch;
  height: 9px;
  background:
    linear-gradient(var(--kc-ink), var(--kc-ink)) 0 50% / calc(50% - 10px) 1px no-repeat,
    linear-gradient(var(--kc-ink), var(--kc-ink)) 100% 50% / calc(50% - 10px) 1px no-repeat;
}
.ni-page__orn::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 1px auto 0;
  background: var(--kc-ink);
  rotate: 45deg;
}
.ni-page__sign {
  align-self: flex-end;
  font-family: var(--ni-font-script);
  font-size: 9cqw;
  font-style: italic;
  line-height: 1;
  color: var(--kc-ink);
}
.ni-page .kc-gate__open {
  position: relative;
  min-width: 62cqw;
  min-height: max(44px, 13cqw);
  padding: 0 7cqw;
  border: 1px solid var(--kc-ink);
  border-radius: 0;
  background: transparent;
  color: var(--kc-ink);
  font-family: var(--kc-font-display);
  font-size: max(0.78rem, 3.7cqw);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 240ms var(--kc-ease), color 240ms var(--kc-ease);
}
/* El filete interior a 3 px: la tinta grabada */
.ni-page .kc-gate__open::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  opacity: 0.6;
  pointer-events: none;
}
@media (hover: hover) {
  .ni-page .kc-gate__open:hover { background: var(--kc-ink); color: var(--kc-canvas); }
}
.ni-page .kc-gate__open:active { translate: 0 1px; }
.ni-page__imprint {
  font-size: max(0.66rem, 2.9cqw);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--kc-ink-muted);
  text-wrap: balance;
}

/* Pantallas angostas o cortas: el bloque de desbloqueo se compacta antes de pisar el folleto */
@media (max-width: 360px), (max-height: 760px) {
  .ni-unlock { gap: 5px; padding-inline: 8px; }
  .ni-unlock__hint { font-size: 1.04rem; }
  .ni-unlock__ask { font-size: 0.66rem; letter-spacing: 0.08em; line-height: 1.4; }
  .ni-seals { margin-top: 0; }
  .ni-seal { min-height: 120px; }
  .ni-seal__wax { width: 84px; height: 84px; }
  .ni-seal::before, .ni-seal::after { width: 84px; height: 84px; margin-left: -42px; }
}

/* Pantallas muy cortas: se cae el divisor y el camafeo se encoge antes de recurrir al scroll interno */
@media (max-height: 640px) {
  .ni-page__orn { display: none; }
  .ni-page__cameo { width: 28cqw; }
}

/* ── Apertura: la cámara se zambulle en el camafeo y la portada se funde con el jardín ── */
#gate[data-gate-state="opening"] .ni-cam {
  transform: translate(calc(var(--ni-cam-x, 0) * 1%), calc(var(--ni-cam-y, 0) * 1%)) scale(calc(var(--ni-cam-s, 1) * var(--ni-k, 1) * 1.35));
  transition: transform var(--kc-gate-duration) cubic-bezier(0.5, 0, 0.7, 1);
}
#gate[data-gate-state="opening"] .ni-page,
#gate[data-gate-state="opening"][data-ni-beat="reading"] .ni-page {
  transform: scale(1.12);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1), opacity 380ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ni-l--flame { animation: none; }
  .ni-seal { transition: none; }
  #gate[data-ni-beat="unsealing"] * , #gate[data-ni-beat="unsealing"] *::before, #gate[data-ni-beat="unsealing"] *::after { animation-duration: 1ms !important; animation-delay: 0s !important; }
  #gate[data-gate-state="opening"] .ni-cam { transition: none; }
  #gate[data-gate-state="opening"] .ni-page,
  #gate[data-gate-state="opening"][data-ni-beat="reading"] .ni-page { transform: none; transition: opacity 150ms linear; }
}