/* Films fit the phone screen (3 Nov 2026). Alex: "the footage is too big on mobiles ... mobiles should have footage
   that fits their screens, and our footage on desktop stays how it is now".
   Measured at 390 x 844: the wide (16:9) films were cut to fill tall boxes, so a phone saw only 23% of the picture's
   width on the Projects page and the case study tops, against about 90% on a 1920 laptop. Project pages only
   (Alex 3 Nov 15:44: the homepage's Selected work was fine as it was).
   Here, on phones only, each wide film is shown whole across the screen in its own 16:9 shape, framed as a laptop
   frames it. The films themselves are unchanged (the phone encodes, -m.webm, were already the same cut).
   Everything sits inside the phone media query, so laptops and desktops are untouched. Loaded last. */

@media (max-width: 760px) {

  /* ---------- Projects page tiles and the case study tops: the film whole, across the screen ---------- */
  /* each tile is still one full screen sliding over the last; the film sits across its top, just under the header,
     and the line and link stay at its foot. Centred, it left half a screen of black under the project names on the
     first screen, which read as a film that hadn't loaded (Alex 3 Nov 16:38). */
  /* the film and its words sit together as one group a little above the middle of the card (Alex 3 Nov 17:09: too much
     empty space at the bottom), never higher than just under the header */
  .w-tile { --w-ft: max(92px, calc((100svh - 56.25vw - 140px) * .42)); }
  .w-tile .w-film { inset: auto 0; top: var(--w-ft); aspect-ratio: 16 / 9; }
  /* the project's logo stays on its film */
  .w-tile .w-tile-name { top: calc(var(--w-ft) + 28.125vw); }
  /* its line and link sit just under the film, not at the foot of the card (Alex 3 Nov 17:03: too far below) */
  .w-tile .w-tile-foot { top: calc(var(--w-ft) + 56.25vw + 28px); bottom: auto; }
  /* the case study top: the film a little above the middle, so the line below never runs into it on a short phone */
  .w-hero .w-film { inset: auto 0; top: 42%; aspect-ratio: 16 / 9; transform: translateY(-50%); }
  /* the shade was there for words laid over the picture; the words now sit on black, so the picture shows clean */
  .w-tile .w-film::after, .w-hero .w-film::after { background: rgba(0, 0, 0, .12); }
  /* the pause button sits in the film's corner, as on the other films */
  .w-tile .w-film .w-toggle, .w-hero .w-film .w-toggle { top: auto; bottom: 12px; right: 12px; }
  /* the logos sit on the film, sized to it */
  .w-titles--logo .w-tile-name .w-logo--monpro { width: 56vw; }
  .w-titles--logo .w-tile-name .w-logo--visitrove { width: 50vw; }
  .w-titles--logo .w-tile-name .w-logo--studio { height: 128px; }

  /* the project's world again, between the screens: whole width, as a laptop shows it */
  .w-wide { aspect-ratio: 16 / 9; }

  /* ---------- case studies on phones: motion that keeps up with a thumb (3 Nov 2026) ---------- */
  /* Alex: "some of the animations dont work well with a mobile phone". Measured with a finger swipe at 390 x 844:
     each picture and paragraph faded in only after it was 12% up the screen, so a swipe showed pale, empty boxes for
     about a third of a second before the work appeared. On phones things are there at full strength as they arrive
     and only make the short rise into place. */
  html.js .w-rise { opacity: 1; transform: translate3d(0, 24px, 0); transition: transform 1s var(--w-expo); }
  html.js .w-rise.is-in { transform: none; }
  /* the app screens were taller than their panel (485 px in 448), so the panel cut off the top and foot of every
     screen as it tilted in; sized so each screen sits whole in its panel */
  .w-panel .w-screen { width: 72%; }
  /* the long app pages drift inside their screens, and on iPhone the drifting page sometimes slipped out of its
     screen's rounded frame and filled the whole panel, then snapped back (Alex's screenshots, 3 Nov 17:57). Safari
     loses that frame when the screen also carries the laptops' tilt in 3D, which phones don't use. So on phones the
     screen is placed flat, and the frame is cut with clip-path, which Safari keeps on a moving picture. The phones
     panel drops its unused lift for the same reason. */
  .w-panel .w-screen { transform: translate(-50%, -50%); will-change: auto; clip-path: inset(0 round 6px); }
  .w-phone { transform: none; will-change: auto; }
  /* that wasn't enough (Alex's recordings, 3 Nov 20:28): on iPhone a page moved by transform gets its own layer, and
     Safari kept drawing that layer outside every frame round it, even the panel's, so the long page spilled over the
     panel and the words under it while the page scrolled. On phones the long pages now drift by moving the picture
     inside its own box (object-position) instead of moving the box, so nothing ever leaves the screen to be cut off.
     Same path, speed and easing as before. */
  .w-panel .w-screen.is-long img, .w-phones .w-phone:not(.is-still) img { height: 100%; object-fit: cover; object-position: 50% 0; transform: none; animation-name: w-drift-m; }
  @keyframes w-drift-m { 0%, 8% { object-position: 50% 0%; } 92%, 100% { object-position: 50% 100%; } }

  /* ---------- the agency page on phones (Alex 3 Nov 16:38: "the footage on agency page on mobile doesn't fit") ---------- */
  /* the two square app films (payments, customer list) were cut to a taller box, so the app's left and right edges
     fell off the screen; on phones they keep their own square shape */
  .ag-tile--half .ag-media { aspect-ratio: 1 / 1; }
}