/* irchiinnuss design: a project's page, one run of blocks for every project (the user,
   2026-11-10: every project the same structure and visuals, with a laptop, phones and videos,
   and the next case in the page's own footer, which differs from the home page's and the lists').

   Kept as shares of the window, sized at 1966 px wide:
     title 7vw; three facts under hairlines; our square Live site block on the picture's corner;
     the picture: the first screen of the project's own site, 16 to 10 and still, as
     css/style.css frames it
     a laptop, 73.5vw, its video in the screen; then a video with no device, the text column wide
     a video the whole width of the window, drifting in its frame, a fifth darker
     a laptop again; three phones in thirds, sliding against each other as the page moves
     the footer: "Next case", the next title at the size of this one, its picture half risen
     over a hairline (it rises and the title dims when pointed at), All work, the small print.
   The blocks stand a section's padding apart (21vh).

   The laptop and the phone are our own drawings (assets/devices/laptop.svg and phone.svg: each
   from the front, its screen cut out), laid over the video or the picture. Loaded after
   style.css; index.html's .case--study articles use these names, and tools/case-blocks.mjs
   writes their blocks from what is in assets/work/<slug>/. */

:root { --case-pad: clamp(72px, 21vh, 228px); }

/* ---------- the stage: the project's own colour, light, one block after another ---------- */
/* (justify-items: normal: style.css centres these as grids. On a plain block a browser may take
   that as "shrink each child to its content and centre it", which made the footer's column the
   width of the next title) */
.case__stage { display: block; justify-items: normal; padding: var(--case-pad) var(--g) 0; }
.case__stage--end { padding-bottom: var(--case-pad); }
.case__scene { width: auto; max-width: none; margin: 0; }

/* ---------- the laptop ---------- */
.case__notebook { position: relative; width: min(100%, 73.45vw, 1444px); aspect-ratio: 2400 / 1370; margin: 0 auto; }
.case__notebook .case__screen { position: absolute; left: 10.9167%; top: 2.1898%; width: 78.1667%; height: 85.6204%; aspect-ratio: auto; border-radius: 0; background: #0b0b0c; }
.case__notebook::after, .case__handset::after { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; }
.case__notebook::after { background-image: url("../assets/devices/laptop.svg?v=1"); }
.case__screen :is(img, video), .case__clip :is(img, video), .case__display :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* (a video's first frame, as a picture lying under it. A poster="" is fetched with the page, and
   every project's at once, as the document holds them all: two megabytes before anything was
   asked for. A picture marked lazy is fetched as it nears the window, and never for a project
   that is not shown. The video over it is clear until it has a frame, so the picture is what
   shows before it plays, and where it never does: motion off, or scripts off) */
.case__still { position: absolute; inset: 0; }
.case__screen video, .case__clip video { position: relative; }
/* (scripts off: nothing would start a video, and the browser lays its own play bar on a dark
   panel over the picture. So the pictures alone) */
html:not(.js) .case__showcase video { display: none; }

/* ---------- a video with no device: the text column wide, barely rounded ---------- */
.case__clip { position: relative; width: min(100%, var(--case-content)); aspect-ratio: 16 / 10; margin: 0 auto; overflow: hidden; border-radius: 6px; background: #0b0b0c; }

/* ---------- the film: the window wide, a fifth darker, drifting in its frame ---------- */
.case__film { position: relative; aspect-ratio: 16 / 9; max-height: none; background: #101114; }
.case__film :is(img, video) { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.case__film::after { content: ""; position: absolute; inset: 0; background: #101114; opacity: .2; pointer-events: none; }

/* ---------- the phones: three in thirds ---------- */
.case__phones { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; justify-items: center; align-items: start; gap: 0; width: min(100%, 1900px); margin: 0 auto; padding: 0; overflow: visible; }
.case__handset { position: relative; width: min(57.2%, 362px); aspect-ratio: 446 / 904; margin: 0; }
/* (the screen: a strip at the top in the page's own colour, where a phone has its clock and its
   camera sits, and the page under it, as a phone's browser shows one. --bar is the colour along
   the picture's top) */
.case__display { position: absolute; left: 4.9327%; top: 1.8805%; width: 90.1345%; height: 96.2389%; overflow: hidden; border-radius: 13.2% / 6.1%; background: var(--bar, #0b0b0c); }
.case__display > img { position: absolute; left: 0; top: 5.57%; height: 94.43%; }
.case__handset::after { background-image: url("../assets/devices/phone.svg?v=1"); }
/* (standing still they step down a little; where the page can drive them, they slide instead) */
.case__handset:nth-child(2) { margin-top: clamp(14px, 3vw, 58px); }
.case__handset:nth-child(3) { margin-top: clamp(28px, 6vw, 116px); }

/* ---------- what moves with the scroll (where the browser can tie it to the scroll) ---------- */
@keyframes case-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
@keyframes case-phone-a { from { translate: 0 13vh; } to { translate: 0 -13vh; } }
@keyframes case-phone-c { from { translate: 0 -13vh; } to { translate: 0 13vh; } }
@keyframes case-end-under { from { translate: 0 -25%; } }
@keyframes case-end-shade { from { opacity: .5; } to { opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.still) .case__film :is(img, video) { animation: case-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    html:not(.still) .case__phones { view-timeline: --case-phones block; }
    html:not(.still) .case__handset:nth-child(n) { margin-top: 0; }
    html:not(.still) .case__handset:nth-child(1) { animation: case-phone-a linear both; animation-timeline: --case-phones; animation-range: entry 0% exit 100%; }
    html:not(.still) .case__handset:nth-child(3) { animation: case-phone-c linear both; animation-timeline: --case-phones; animation-range: entry 0% exit 100%; }
    html:not(.still) .case__phones { padding-block: 13vh; }
    /* the footer comes up from under the page, as the site's own does (style.css, .foot) */
    html:not(.still) .case__end { view-timeline: --case-end block; view-timeline-inset: 0; }
    html:not(.still) .case__end-in { animation: case-end-under linear both; animation-timeline: --case-end; animation-range: entry 0% entry 100%; }
    html:not(.still) .case__end::after { animation: case-end-shade linear both; animation-timeline: --case-end; animation-range: entry 0% entry 100%; }
  }
}

/* ---------- the footer of a project: the next one ---------- */
.case__end { position: relative; display: block; justify-items: normal; padding: var(--case-pad) var(--g) 0; overflow: hidden; overflow: clip; text-align: center; }
.case__end::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }
.case__next { display: block; width: min(100%, var(--case-content)); margin: 0 auto; padding-bottom: calc(var(--case-pad) / 1.25 + .8vw); overflow: visible; }
.case__next-k { display: block; margin: 0 0 calc(var(--case-pad) / 4); color: var(--fg); font: 400 clamp(15px, .97vw, 19px)/1.66 var(--f-sans); letter-spacing: -.01em; text-transform: none; }
.case__next-n { display: block; font: 400 clamp(52px, 7.1vw, 156px)/1.066 var(--f-sans); letter-spacing: -.05em; }
/* its picture: a window on the hairline, the picture a third down behind it */
.case__next-art { position: absolute; left: 50%; bottom: 0; z-index: 1; width: clamp(171px, 21.8vw, 428px); aspect-ratio: 2 / 1; padding: 0; overflow: hidden; translate: -50% 0; background: none; }
.case__next-tile { display: block; aspect-ratio: 100 / 85; padding: 7% 8%; background: var(--next-tone, #222); translate: 0 30%; }
.case__next-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case__end .barbtn { display: inline-flex; width: min(100%, 300px); margin-top: calc(var(--case-pad) * .48); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.still) .case__next-tile, html:not(.still) .case__next-n { transition: translate .5s cubic-bezier(.7, 0, .3, 1), opacity .5s cubic-bezier(.7, 0, .3, 1); }
  html:not(.still) .case__next:hover .case__next-art { translate: -50% 0; }
  html:not(.still) .case__next:hover .case__next-tile { translate: 0 0; }
  html:not(.still) .case__next:hover .case__next-n { opacity: .25; }
}
/* under it, of the site's footer, only the small print: no way in to us here, the next project
   is the way on (the home page and the lists keep the whole footer) */
.cases:has(> .case--study:not([hidden])) + .foot .foot__stage { display: none; }
.cases:has(> .case--study:not([hidden])) + .foot .foot__in { padding-top: calc(var(--case-pad) / 1.9); }

/* ---------- smaller windows ---------- */
@media (max-width: 839.98px) {
  .case__notebook { width: 100%; }
  .case__handset { width: min(76%, 300px); }
}
@media (max-width: 599.98px) {
  .case__stage { padding-inline: 12px; }
  .case__phones { justify-content: normal; overflow: visible; scroll-snap-type: none; }
  .case__handset { width: 88%; scroll-snap-align: none; }
  .case__display { border-radius: 13.2% / 6.1%; }
  .case__next-art { width: 50vw; }
  .case__next { padding-bottom: 13em; }
  .case__next-tile { translate: 0 0; }
  .case__film { aspect-ratio: 1; }
}