@charset "utf-8";
/* ==========================================================================
   actos/04-takaragawa.css · La montaña de nieve, el monigote y el acto 4
   --------------------------------------------------------------------------
   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 y las bandas de fondo son
   del acto 3 y no se tocan: este acto las hereda tal cual.

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

/* ==========================================================================
   1 · La montaña que se acumula
   --------------------------------------------------------------------------
   Kiko: «esa nieve que va cayendo se va acumulando abajo y va haciendo una
   especie de montañita de nieve que ocupa hasta un tercio de la pantalla».

   🚨 CRECE CON UN `scale`, NO APILANDO COPOS. Apilar de verdad significa contar
   partículas y redibujar un trazado en cada fotograma, que es exactamente lo
   que prohíbe la ley 15. Aquí el trazado está quieto y lo único que se mueve
   son dos números de una `transform`: el navegador lo compone sin repintar.
   ========================================================================== */
.dibujo {
  /* 🚨 ESTO ES UNA RESERVA, NO LA DEFINICIÓN. La altura de verdad la escribe
     el acto en píxeles (ver ALTO_MONTE en js/actos/04-takaragawa.js), y se
     escribe desde ahí porque el monigote necesita la MISMA cuenta para saber a
     qué altura va: dos definiciones de la misma medida, una en CSS y otra en
     JavaScript, es como el muñeco acaba flotando por encima de la nieve. */
  --monte-h: 30svh;
}

[data-pieza='monte'] {
  /* 🚨 SE APOYA EN LA LÍNEA DEL SUELO, QUE PARA ENTONCES YA ESTÁ ABAJO DEL TODO.
     Kiko, el 18 de septiembre, en dos pasos. Primero: «la montaña de nieve que
     aparezca abajo del todo de la página, no en el suelo del paisaje». Y al
     verlo así, la solución buena: «cuando el coche se va, bajar el paisaje
     abajo del todo, que el suelo coincida con la parte de abajo… y ahí ya sí
     tiene sentido que la montaña esté también en la parte de abajo».

     O sea que no son dos suelos: es UNO que baja. Cuando el coche se ha ido, el
     bosque, su carretera y el recorte de la nieve se deslizan hasta el borde
     inferior de la pantalla (--baja-paisaje, en 03-al-coche.css), y la montaña
     crece sobre esa misma línea. Por eso aquí basta con usar --suelo-ahora,
     igual que las demás piezas: todo casa solo.
     🚨 La bajada va en el `transform` con --baja-px, no en el `top`: mover
     `top` en cada fotograma es layout de la capa entera (NORMAS § 9, regla 1). */
  top: var(--suelo);
  /* 🚨 MÁS ANCHA QUE ALTA, Y LAS DOS CIFRAS SON DE KIKO: «que la montaña sea un
     poquito más baja y más ancha, y no tan alta y tan estrecha y picuda».
     Pasó de 96u × 35svh a 132u × 30svh, que sobre el papel es poco y en
     pantalla es otra silueta: de una campana puntiaguda a un montón tendido.
     132u es bastante más que la pantalla en un móvil —que mide 100u— así que
     las faldas se salen por los lados, y eso es justo lo que se quiere: se ve
     un TROZO de montaña, no una montaña entera puesta en medio. */
  width: calc(132 * var(--u));
  height: var(--monte-h);
  transform-origin: 50% 100%;
  /* --s es lo alta que está —de 0, nada, a 1, entera— y --sx lo ancha. Las dos
     crecen a la vez porque un montón de nieve se ensancha según sube; solo a lo
     alto parecería una sábana inflándose. Y por defecto vale 0: antes de que el
     acto pinte no hay nada. */
  transform:
    translate(-50%, -100%)
    translateY(var(--baja-px, 0px))
    translate(calc(var(--x, 0) * var(--u)), 0)
    scale(var(--sx, 1), var(--s, 0));
}
/* 🚨 `preserveAspectRatio="none"` en el SVG: la caja de aquí arriba no guarda
   la proporción del viewBox —en un móvil sale un montón ancho y bajo, y en un
   portátil una loma larga—, así que el dibujo tiene que estirarse con ella. */

/* ==========================================================================
   2 · El monigote
   --------------------------------------------------------------------------
   «Un monigote chiquitito que la esquía», de izquierda a derecha, subiendo y
   bajando por encima. 🔁 Desde el 18 de septiembre baja en TABLA, por orden de
   Kiko. Sigue puesto en el acto 5 y en el 6, por eso vive en la capa del dibujo
   y no en el acto.
   ========================================================================== */
/* 🚨 EL MUÑECO Y SU TABLA SON DOS PIEZAS Y UNA SOLA REGLA, y eso no es por
   ahorrar líneas: es lo que las mantiene pegadas.
   La tabla salió de dentro del muñeco al construir el acto 5 —«se cae de la
   tabla y sube hacia arriba en diagonal»—, y mientras van juntas, en todo el
   acto 4 y el principio del 5, el acto les da la misma x, la misma y y el mismo
   giro. Con el mismo viewBox (arte/tabla.svg lo dice) y el mismo tamaño, eso
   basta para que encajen EXACTAS sin cuadrar ningún desfase a mano.
   🚨 Si alguien le cambia el ancho a una, se lo cambia a la otra o el muñeco
   se queda montado en el aire. */
[data-pieza='monigote'],
[data-pieza='tabla'] {
  /* Se apoya en lo mismo que la montaña, porque va montado en ella */
  top: var(--suelo);
  width: calc(20 * var(--u));
  aspect-ratio: 130 / 150;
  transform-origin: 50% 100%;
  /* 🚨 AQUÍ --y VA EN PÍXELES, y es la única pieza de las diez donde no va en
     unidades del escenario. Es lo que mide el perfil de la montaña, que se saca
     del trazado de verdad (ver perfilDe() en js/motor/dibujo.js) y ya viene en
     píxeles. Cuando la montaña se va por la izquierda, el perfil se sale de
     debajo de él y esto vale 0 solo: se queda de pie en el suelo, que para
     entonces es el borde de abajo de la pantalla.
     --g es la pendiente, en grados, y gira sobre la tabla. */
  transform:
    translate(-50%, -100%)
    translateY(var(--baja-px, 0px))
    translate(calc(var(--x, 0) * var(--u)), calc(var(--y, 0) * 1px))
    rotate(calc(var(--g, 0) * 1deg))
    scale(var(--s, 1));
}

/* ==========================================================================
   3 · El texto del acto
   --------------------------------------------------------------------------
   El acento es el azul frío que NORMAS § 9 le asigna a este acto, y es el mismo
   que tenía el capítulo de la nieve: no se estrena un color por estrenarlo.
   ========================================================================== */
#takaragawa { --acento: #2e7aa8; }

/* 🚨 EL PANEL SUBE DESDE ABAJO DEL TODO Y SE POSA ENCIMA DEL PAISAJE.
   Kiko, el 18 de septiembre: «cuando aparece la primera parada de la nieve, que
   aparezca desde abajo del todo y se vaya poniendo encima del paisaje con el
   coche».

   O sea que NO se aparta del dibujo: se pone delante. Antes iba arriba y medido
   para no tocar el techo del coche; ahora entra por el borde de abajo de la
   pantalla, sube y se queda centrado, con el bosque y el coche por detrás. Lo
   que lo hace legible es el halo (ley 9: halo, nunca velo).

   🚨 SON DOS VARIABLES Y NO UNA. `--p-sube` es el viaje desde abajo y solo va
   hacia delante; `--p-datos` es lo que se ve. Con una sola, al desvanecerse al
   final el panel se habría ido otra vez hacia abajo, y lo que pidió Kiko es que
   «se desvanezca del todo»: quieto y a menos. */
#takaragawa .panel {
  align-self: center;
  width: min(100%, 25rem);
  transform: translateY(calc((1 - var(--p-sube, 0)) * 92svh));
}
#takaragawa .panel-cabecera { margin-bottom: .7rem; }
#takaragawa .panel h3 {
  font-size: clamp(1.4rem, 6.2vw, 1.9rem);
  margin-block: .3rem .4rem;
}
#takaragawa .panel .entradilla { font-size: .88rem; line-height: 1.5; }
#takaragawa .fotos {
  gap: .5rem;
  margin-bottom: .75rem;
}
/* 💭 Más apaisadas que las del acto 2. El panel viaja por delante del dibujo y
   cuanto menos alto es, menos tapa: en un móvil esto son setenta píxeles menos
   de bosque escondido. */
#takaragawa .foto-hueco { aspect-ratio: 16 / 9; }
#takaragawa .fila { padding-block: .4rem; }

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

/* Halo, como todo el texto que flota sobre el dibujo (ley 9: halo, nunca velo).
   🚨 El panel del acto 2 no lo necesitaba porque detrás no había nada; este
   flota sobre el bosque nevado y sobre el coche. */
.anim #takaragawa .panel {
  text-shadow: 0 0 .5rem var(--papel), 0 0 .25rem var(--papel), 0 0 .1rem var(--papel);
}

/* Los rótulos de la nieve, arriba, mientras el monigote baja la montaña.
   Mismo sitio que los del acto 3: el dibujo es una franja apoyada en el suelo,
   así que con el texto pegado al borde de arriba queda un agujero blanco. */
#takaragawa .rotulos {
  align-self: start;
  padding-top: 6svh;
}

/* ==========================================================================
   4 · 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 la montaña y el monigote se queden
   plantados encima del texto, porque el acto pinta su fotograma final y ese
   fotograma los tiene puestos. Y que el panel no se quede a una pantalla por
   debajo de donde le toca, que es lo que dice su transform.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-pieza='monte'],
  [data-pieza='monigote'],
  [data-pieza='tabla'] { display: none !important; }
  #takaragawa .panel { transform: none !important; }
}
html:not(.anim) #takaragawa .panel { transform: none; }