@charset "utf-8";
/* ==========================================================================
   actos/06-yamanouchi.css · El mono, la huida y la salida de la nieve
   --------------------------------------------------------------------------
   El color vive en color.css. Aquí vive dónde está cada cosa y cómo se mueve.
   La capa del dibujo, la línea del suelo, la nieve, las bandas de fondo, el
   monigote, la tabla, la roca, el onsen y el coche son de los actos 3, 4 y 5 y
   no se tocan: este acto los hereda.

   🚨 Regla de oro, la de siempre: el JavaScript solo escribe VARIABLES CSS.

   🚨 Y LA HERENCIA DE ESTE ACTO TIENE LA MISMA TRAMPA QUE LA DEL 5, más una
   nueva: el paisaje sigue BAJADO —el suelo es el borde de abajo de la
   pantalla— y además el muñeco viene METIDO EN EL ONSEN, en la postura del
   onsen. Las dos cosas hay que volver a escribirlas en cada fotograma, porque
   son de capas compartidas y saltando desde el raíl no pasa por aquí nadie que
   las ponga. Ver ESTADO § 5.7.
   ========================================================================== */

/* ==========================================================================
   1 · El mono de Jigokudani
   --------------------------------------------------------------------------
   Kiko: «aparece por la derecha un mono de la nieve, de estos japoneses de
   Nagano, de Jigokudani, y avanza ligeramente hacia la izquierda sin llegar al
   onsen».

   🚨 22 UNIDADES: un pelo más que el muñeco, que mide 20. Es lo que hace que la
   escena funcione. Más pequeño no asusta a nadie y más grande deja de ser un
   mono y pasa a ser un oso: lo que da miedo de un macaco no es el tamaño, es
   que se te acerque. Y a 22u cabe entero entre el onsen y el borde derecho de
   un móvil, que mide 100u de ancho.

   No necesita regla de `transform` propia: la de `.d-pieza` ya lo apoya en el
   suelo, lo mueve con --x y le suma la bajada del paisaje.
   ========================================================================== */
[data-pieza='mono'] {
  width: calc(22 * var(--u));
  aspect-ratio: 130 / 110;
}

/* ==========================================================================
   1.bis · La montaña de la derecha y la poza de los monos
   --------------------------------------------------------------------------
   Kiko, viendo el acto publicado: «a la derecha una especie de montaña que se
   vea como en la mitad, es decir, que empiece en la base y el pico se corte
   justo en el lateral derecho. Y haya como una especie de mini onsen, típico de
   onsen de montaña donde están los monos estos que se bañan en la nieve».

   🚨 LA MONTAÑA ES ENORME A PROPÓSITO: 96 unidades de ancho, casi la pantalla
   entera de un móvil. Tiene que serlo para que su pico caiga fuera por la
   derecha y su base cruce media pantalla: una montaña que cabe entera no se
   «corta en el lateral», se ve pequeña y lejos. Y su alto va atado a la
   pantalla y no a la caja, como el monte del acto 4, por lo mismo: en un
   portátil ancho 96 unidades de alto se salen por arriba.
   ========================================================================== */
[data-pieza='pico'] {
  width: calc(96 * var(--u));
  height: min(46svh, calc(70 * var(--u)));
  aspect-ratio: auto;
  /* 🚨 POR DETRÁS DEL BOSQUE, Y ESTO NO ES UN DETALLE: ES LA PIEZA.
     Las piezas del dibujo van DESPUÉS de las bandas de fondo en el HTML, así
     que por defecto se pintan por delante de los árboles. Con la montaña ahí,
     la mitad derecha del bosque desaparecía debajo de ella: en la captura del
     zoom out había árboles en la izquierda y nada en la derecha, y parecía que
     la banda se había acabado.
     Es la única pieza de la película que va detrás del fondo, porque es la
     única que está MÁS LEJOS que el bosque. */
  z-index: -1;
}

/* 🚨 LAS DOS MITADES DE LA POZA LLEVAN LA MISMA REGLA Y TIENEN QUE SEGUIR
   LLEVÁNDOLA, exactamente igual que el onsen del acto 5: son un solo dibujo
   partido por el eje del agua con el mono metido en medio. Cambiarle el tamaño
   a una y no a la otra parte la poza por la mitad, literalmente.
   💭 18 unidades: poco más de la mitad que el onsen del muñeco (32). Es la
   diferencia entre «una poza donde cabe una persona» y «una charca donde cabe
   un mono», y es lo que hace que se lea que son dos sitios distintos. */
[data-pieza='poza'],
[data-pieza='poza-fondo'] {
  /* 🚨 LO ANCHO LO ESCRIBE EL ACTO, IGUAL QUE EL ONSEN DEL ACTO 5, y aqui estaba
     puesto a fuego: el acto escribia --poza-ancho y el CSS no lo leia, asi que
     la poza salia a 26 unidades sobre un repecho de cima de 15 y se le veia
     colgando por los dos lados. Se vio en la captura. El numero vive en el acto
     porque lo necesita para calcular cuanto se hunde el mono. */
  width: calc(var(--poza-ancho, 16) * var(--u));
  aspect-ratio: 300 / 150;
}

/* 🏨 よろづや · el 桃山風呂.
   🚨 88 UNIDADES, que es casi la pantalla de un móvil, y tiene que serlo: es el
   sitio donde dormimos y el muñeco se está bañando enfrente. Más pequeño se lee
   como una casita del paisaje y se pierde el gesto entero.
   Y va con un `z-index` en medio: DELANTE de las bandas del bosque y DETRÁS del
   onsen. Como el HTML ya lo pone ahí, no hace falta tocarle la capa. */
[data-pieza='yorozuya'] {
  width: calc(68 * var(--u));
  aspect-ratio: 600 / 330;
}

/* 🏔️ La montaña de los monos, delante de todo.
   🚨 Su alto va atado a la PANTALLA y no a la caja, como el monte del acto 4 y
   la montaña del fondo, y por lo mismo: en un portátil ancho una altura en
   unidades se sale por arriba. Y el mono baja por su ladera, así que este
   tamaño y el `viewBox` del dibujo son la misma cosa: si se toca uno, la tabla
   de alturas que muestrea dibujo.js deja de cuadrar (ley 18). */
[data-pieza='monte-mono'] {
  width: calc(56 * var(--u));
  height: min(30svh, calc(40 * var(--u)));
  aspect-ratio: auto;
}

/* 🏔️ Los Alpes japoneses, al fondo del final.
   🚨 LAS DOS FILAS SON EL MISMO DIBUJO Y SOLO CAMBIAN DE TAMAÑO. La de atrás es
   más pequeña y más baja —y en color.css, más pálida—, que es lo único que dice
   «está más lejos» en una película sin sombras ni degradados.
   Y las dos van DETRÁS del bosque, como la montaña grande: son el fondo. */
[data-pieza='sierra'],
[data-pieza='sierra-lejos'] {
  aspect-ratio: auto;
  z-index: -1;
}
[data-pieza='sierra'] {
  width: calc(150 * var(--u));
  height: min(26svh, calc(38 * var(--u)));
}
[data-pieza='sierra-lejos'] {
  width: calc(190 * var(--u));
  height: min(18svh, calc(27 * var(--u)));
}

/* 🏯 El castillo de Matsumoto.
   🚨 MÁS PEQUEÑO QUE EL HOTEL, y eso es deliberado: el hotel es donde dormimos y
   el muñeco se baña delante; el castillo es lo que se ve al llegar al final del
   viaje, con la cordillera detrás. A 62 unidades cabe con los Alpes a la vista,
   que es la estampa de Matsumoto. */
[data-pieza='matsumoto'] {
  /* 🔁 SOLO LA TORRE, Y MÁS GRANDE. Kiko: «haz solamente la torre principal y
     hazla más detallada y más grande, que tenga más presencia». La versión
     anterior dibujaba los cinco edificios del conjunto a 52 unidades de ancho, y
     a ese tamaño eran cinco manchas pequeñas: ninguna se leía. Una sola torre al
     mismo ancho es el TRIPLE de alta, y entonces sí se reconoce.
     🚨 Su alto va atado a la PANTALLA y no a la caja, como las montañas y por lo
     mismo: en un portátil ancho una altura en unidades se sale por arriba. */
  width: calc(46 * var(--u));
  height: min(44svh, calc(62 * var(--u)));
  aspect-ratio: auto;
}

/* ==========================================================================
   2 · El texto del acto
   --------------------------------------------------------------------------
   Mismo acento azul frío que los actos 4 y 5: es la misma nieve y no se estrena
   un color por estrenarlo. El acto 7 ya cambiará, que ahí se sale de la nieve.
   ========================================================================== */
#yamanouchi { --acento: #2e7aa8; }

/* 🚨 LOS DOS DATOS DE TRAMO VAN EN EL MISMO SITIO, y nunca a la vez.
   Es la misma posición que en el acto 5 —colgando por ARRIBA de las copas del
   bosque, porque debajo del suelo no hay nada: el suelo es el canto inferior—,
   y los dos se turnan ahí: el de Kusatsu → Yamanouchi al principio y el de
   Yamanouchi → Matsumoto al final. Cada uno con su propia variable, y el acto
   se encarga de que no coincidan.

   🚨 Va atado a --banda-alto (base.css) y no a un número escrito aquí: el día
   que el bosque cambie de alto, esto se mueve con él.

   🚨 Y AL FINAL DEL ACTO YA NO HAY BOSQUE —los árboles se apagan uno a uno—,
   pero la banda SIGUE PUESTA con su manto de nieve y su carretera, así que
   --banda-alto sigue significando lo mismo y el dato no se mueve de sitio
   cuando el bosque se va. Si algún día se apagara la banda entera, esto se
   quedaría colgado en mitad del blanco. */
#yamanouchi .viaje {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--banda-alto) - 6.5svh);
  text-align: center;
  pointer-events: none;
}
#yamanouchi .viaje[data-viaje='uno'] { opacity: var(--p-viaje-1, 0); }
/* 🚨 EL SEGUNDO VA MÁS ARRIBA QUE EL PRIMERO, y no es un capricho: cuando sale
   este, debajo está el CASTILLO DE MATSUMOTO, que es la pieza más alta de todo
   el acto. A la altura del primero, el dato le caía encima de los tejados y las
   dos cosas se hacían ilegibles. Se vio en la captura.
   Y va atado a `--banda-alto` como el otro, no a un número suelto: el día que
   el bosque cambie de alto, los dos se mueven con él. */
#yamanouchi .viaje[data-viaje='dos'] {
  top: calc(100% - var(--banda-alto) - 22svh);
  opacity: var(--p-viaje-2, 0);
}

/* El panel se queda ARRIBA, igual que en el acto 5 y por lo mismo: abajo está
   el onsen con el muñeco dentro, y después el mono, la huida y el coche. Todo
   lo que cuenta este acto pasa en la mitad de abajo de la pantalla.

   🚨 DOS VARIABLES Y NO UNA, como en los actos 4 y 5: --p-sube es el viaje y
   solo va hacia delante, --p-datos es lo que se ve. Con una sola, al
   desvanecerse el panel se iría otra vez por donde vino, y lo que pidió Kiko es
   que se desvanezca quieto. */
#yamanouchi .panel {
  align-self: start;
  width: min(100%, 25rem);
  /* La opacidad ya la pone escena.css con --p-datos: aqui solo se cambia el
     viaje, igual que en el acto 5. */
  transform: translateY(calc((1 - var(--p-sube, 0)) * 7svh));
}
#yamanouchi .panel-cabecera { margin-bottom: .7rem; }
#yamanouchi .panel h3 {
  font-size: clamp(1.4rem, 6.2vw, 1.9rem);
  margin-block: .3rem .4rem;
}
#yamanouchi .panel .entradilla { font-size: .88rem; line-height: 1.5; }
#yamanouchi .fotos {
  gap: .5rem;
  margin-bottom: .75rem;
}
/* 💭 Apaisadas como las de los actos 4 y 5, y por el mismo motivo: cuanto menos
   alto es el panel, menos baja llega y más lejos se queda del onsen. */
#yamanouchi .foto-hueco { aspect-ratio: 16 / 9; }
#yamanouchi .fila { padding-block: .4rem; }

@media (max-width: 360px) {
  #yamanouchi .foto-hueco { aspect-ratio: 5 / 2; }
  #yamanouchi .fotos { margin-bottom: .6rem; }
  #yamanouchi .fila { padding-block: .22rem; }
  #yamanouchi .panel .entradilla { font-size: .84rem; }
  #yamanouchi .panel-cabecera { margin-bottom: .55rem; }
}

/* Halo, como todo el texto que flota sobre el dibujo (ley 9: halo, nunca velo) */
.anim #yamanouchi .panel {
  text-shadow: 0 0 .5rem var(--papel), 0 0 .25rem var(--papel), 0 0 .1rem var(--papel);
}

/* ==========================================================================
   3 · Movimiento reducido y sin JavaScript
   --------------------------------------------------------------------------
   Lo genérico ya lo hace escena.css: los actos se aplanan y el texto sale
   entero. Aquí solo hay que evitar que las piezas del acto se queden plantadas
   encima del texto —el acto pinta su fotograma final y ese fotograma las tiene
   puestas— y que los dos datos de tramo no se queden colgados en una posición
   absoluta que ya no significa nada.

   🚨 Y AQUÍ LOS DOS DATOS SÍ SALEN A LA VEZ, uno debajo del otro. Es lo
   correcto: sin animación no hay «antes» ni «después», hay una página que se
   lee, y los dos tramos son dos datos del viaje.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-pieza='mono'] { display: none !important; }
  #yamanouchi .viaje {
    position: static;
    opacity: 1 !important;
    text-align: left;
    margin-top: 2.2rem;
  }
  #yamanouchi .viaje[data-viaje='dos'] { margin-top: 1rem; }
  #yamanouchi .panel { transform: none !important; }
}
html:not(.anim) #yamanouchi .panel { transform: none; }
html:not(.anim) #yamanouchi .viaje {
  position: static;
  opacity: 1;
  text-align: left;
}