/* Etusivu · the phone (2026-09-24). What the phone gets beyond the still
   stack: the seam between the word list and #miksi (the page parks at the
   wall, one gesture fires the dive: the arriving page settles out of a
   close-up while the room it leaves darkens), the sauna print opening
   past its margins on the beam, the konserni rows reading by the beam,
   and the lift at the end (puhelin.css). The hero build, the dive
   through the period, the reading light on the words, the Grand passage,
   the light switch and the sauma ending already run on phones. */
@media (max-width:860px) {
  /* ── the seam: sanat → miksi ─────────────────────────────────────────
     --sy is the flight (0 at the wall, 1 landed), written by etusivu.js
     from #miksi's own travel through the last viewport before it lands.
     The close-up is 2.1×, pivoting on the claim's left edge (the measure
     is narrow: a 38% origin pushed the words off the left); the window
     (.mikkuna) clips it, as on the desktop. The print flies up from 60svh
     below. */
  .puhelin #sanat { position:relative; }
  .puhelin #miksi { --sy:1; }
  .puhelin .mikkuna { position:relative; overflow:hidden; min-height:100svh; }
  .puhelin .mlahi { transform:scale(calc(1 + 1.1 * (1 - var(--sy)))); transform-origin:7vw 0;
    will-change:transform; }
  .puhelin .mlahi .mtodiste { transform:translateY(calc(60svh * (1 - var(--sy)))); will-change:transform; }
  /* the words are present the whole flight (onto): no IO fade under the
     zoom, the period waits for the landing */
  .puhelin .mlahi .rv { opacity:1; transform:none; transition:none; }
  .puhelin .mlahi .miso .p { animation:none; }
  .puhelin .mlahi.landed .miso .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .2s forwards; }
  /* the room it leaves darkens: brightness straight on the print, the
     words thin late (nordevo.js's recipe, on the phone's clock) */
  .puhelin .skatto img { filter:brightness(calc(1 - .55 * var(--lahto, 0))); will-change:filter; }
  .puhelin #sanat .wrap { opacity:calc(1 - .5 * var(--lahto, 0)); }

  /* ── prints on the beam ─────────────────────────────────────────── */
  .puhelin .plate.mtodiste { margin-left:-7vw; margin-right:-7vw; width:auto; padding:0; }
  .puhelin .plate.mtodiste .ph img { height:auto; object-fit:cover; }

  /* ── the konserni register reads by the beam ─────────────────────── */
  .puhelin .rivi { --t:0; }
  .puhelin .rivi .yseloste { color:color-mix(in oklab, var(--muted), var(--faded) calc(var(--t) * 100%)); }
  .puhelin .rivi .rlogo { opacity:calc(.55 + .45 * var(--t)); transition:none; }
  .puhelin .rivi .rmene { opacity:calc(.35 + .65 * var(--t)); }

  /* ── the three words: the word at the beam is ink ─────────────────── */
  .puhelin .vast { --t:0; }
  .puhelin .vast h3 { color:color-mix(in oklab, var(--himmea), var(--ink) calc(var(--t) * 100%)); }
  .puhelin .vast .vteksti { color:color-mix(in oklab, var(--muted), var(--faded) calc(var(--t) * 100%)); }
}