/* The project page as a film. Two things, both kept apart from project.css so each can change on its own:
   how the page arrives when it is opened from the gallery (work-passage.ts, in the page that frames it, sets
   html[data-arrive] through window.__passage), and the cinema view a film takes while it plays (cinema.js). */

/* ── Arriving from the gallery ──
   hold: the room stands close and out of focus, and nothing has been said yet.
   land: the room pulls back into focus; the wall, then the conversation, come in as the film settles into its bubble.
   Only transform and opacity move, so it runs while the page is still loading its scene. */
.room-soft-focus { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; background:url('/cinematic/work/room/room-blur.webp') 0 0 / cover no-repeat; }
html[data-arrive='hold'] :is(.nav a,.wall > *,.thread > *,.room-motion-toggle) { opacity:0; }
html[data-arrive='hold'] .thread > :not(.film) { translate:0 14px; }
html[data-arrive='land'] :is(.nav a,.wall > *,.thread > *,.room-motion-toggle) { transition:opacity var(--arrive-for,.45s) ease var(--arrive,.5s),translate .65s cubic-bezier(.16,1,.3,1) var(--arrive,.5s); }
@media (min-width:700px) and (min-aspect-ratio:5/4) {
  html[data-arrive] :is(.room,.room-soft-focus) { transform-origin:50% 50%; }
  /* The character's layer is a part of the room's picture: it grows about the same point, a little more (it is nearer). */
  html[data-arrive] .room-live { transform-origin:50vw 50svh; }
  html[data-arrive='hold'] :is(.room,.room-soft-focus) { transform:scale(1.1); }
  html[data-arrive='hold'] .room-live { transform:scale(1.13); }
  html[data-arrive='hold'] .room-soft-focus { opacity:1; }
  html[data-arrive='land'] :is(.room,.room-live) { transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
  html[data-arrive='land'] .room-soft-focus { transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .85s ease .08s; }
}
@media (max-width:699px), (max-aspect-ratio:5/4) { .room-soft-focus { display:none; } }

/* ── Cinema view ──
   A film that starts playing leaves its bubble for the browser's top layer (a popover): large, on a dark house.
   Nothing is moved in the document, so the player is never reloaded. Its size is set by cinema.js. */
.stage[data-cinema]:popover-open { position:fixed; inset:0; margin:auto; padding:0; border:0; overflow:hidden; max-width:none; max-height:none; border-radius:10px; background:#05090a; color:inherit; }
.stage[data-cinema]:popover-open::backdrop { background:#04090b; opacity:.95; }
.cinema-close { position:fixed; inset:max(22px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) auto auto; margin:0; padding:0; min-height:44px; border:0; background:none; color:var(--cream); font:500 14.5px/1 var(--sans); letter-spacing:.02em; cursor:pointer; align-items:center; gap:12px; transition:color .25s; }
.cinema-close:hover { color:#dcbb94; }
.cinema-close:popover-open { display:inline-flex; }
.cinema-close:not(:popover-open) { display:none; }
/* Back into it, for a film already playing in its bubble. Wide screens with a pointer only: elsewhere a film fills the screen as it is. */
.cinema-open { display:none; align-items:center; gap:7px; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:500; cursor:pointer; }
@media (min-width:900px) and (min-aspect-ratio:5/4) and (hover:hover) and (pointer:fine) { .stage[data-state='playing'] ~ .film-line .cinema-open { display:inline-flex; } }
@media (prefers-reduced-motion:reduce) { html[data-arrive] * { transition:none!important; } }

/* Leaving for the contact page (cinema.js): what he said steps aside and the room is left, for that page to pull
   back from. Where the browser cannot dissolve the two pages, a dip to the wall's colour. */
html[data-leave] :is(.nav a,.wall > *,.thread > *,.room-motion-toggle,.signals) { opacity:0; pointer-events:none; transition:opacity .2s ease; }
.hello-dip { position:fixed; inset:0; z-index:2147483000; background:#3d5957; opacity:0; pointer-events:none; transition:opacity .22s ease; }
.hello-dip[data-on] { opacity:1; }