/* How it works as one film (home/film.js), on a band like the examples' (.band, .on-dark: the whole width, dark in both
   themes): its heading, the film as wide as the page, and the three steps under it as chapters, only their titles,
   centred. The band is lit by a soft wash laid out like the recording (pieces/audiolight.js), under the cards' fine
   grain. The band is its own container: below 600 px the frame turns 4:5, each sound's controls sit above its line and
   the pointer is a fingertip. */
.how-band { container: how / inline-size; }
.how-band .sec-head { margin-bottom: var(--lead, 56px); }
.film-wrap { position: relative; width: 100%; }
/* the wash: over the whole band, on the film's own time axis and rows. Grey, shaped like the recording, then all its
   colours (coming in from the left behind the listening line, on a long soft edge --m0 to --m2), then without the sound turned off, then with
   the one turned up, each over the last */
.how-band .how-light { inset: -30px; opacity: .55; }
.how-band .how-light img { filter: none; }   /* blurred once in film.js (90 px, saturated 1.35): a live blur under the moving film stuttered */
.how-band :is(.how-all, .how-off, .how-mix) { opacity: 0; }
.how-band .how-all { --edge: linear-gradient(90deg, #000 var(--m0, 0px), rgba(0, 0, 0, .72) calc((var(--m0, 0px) + var(--m1, 0px)) / 2), rgba(0, 0, 0, .4) var(--m1, 0px), rgba(0, 0, 0, .12) calc((var(--m1, 0px) + var(--m2, 0px)) / 2), transparent var(--m2, 0px));
  -webkit-mask-image: var(--edge); mask-image: var(--edge); }

/* the frame: a picture, a touch lighter than the band like the examples' cards; click it to pause */
.film { --phone: 0; --pad: 34px; position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - 160px); border-radius: 24px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 70%, #2a2825); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8); }
.film-scene { position: absolute; inset: 0; pointer-events: none; }
.film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 1 · the file the pointer brings and drops onto the line its recording will be on; it melts into the line (its size,
   corner and colours set as it does) */
/* 1 · the file's name under its tile while it is carried (the tile is drawn on the canvas), and the app's drop place:
   its plus in a circle and its words (its dashed outline is on the canvas), waking with the file over it */
.film-flabel { position: absolute; left: 0; top: 0; z-index: 2; font: 500 13px/1.2 var(--f-sans); color: var(--ink-2); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.film-zone { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; opacity: 0; pointer-events: none; }
.film-zplus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); transition: background .25s, color .25s; }
.film-zplus svg { width: 19px; height: 19px; fill: currentColor; }
.film-zplus.over { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.film-zt { position: relative; display: block; width: 100%; height: 28px; font: 400 23px/28px var(--f-serif); text-align: center; color: var(--ink); }
.film-zt span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; }
.film-plus { position: absolute; left: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #30D158; color: #06210E; font: 700 15px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); opacity: 0; will-change: translate, opacity; }
.film-top { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) - 6px); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.film-title { min-width: 0; font: 400 26px/1.1 var(--f-serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform-origin: 0 50%; will-change: transform, opacity; }

/* 3 · each sound's controls, as in the app: its icon on its drop, its name, its headphones and its volume, its fader (the
   app's, smaller) */
.film-ctl { --live: 0; position: absolute; display: flex; flex-direction: column; gap: 6px; transform: translateY(-50%); opacity: 0; will-change: opacity, translate; }
.film-id { display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; }
.film-icon { --live: 0; position: relative; flex: none; width: 30px; height: 30px; margin-left: -3px; display: grid; place-items: center; }
/* the app's drop: 25 at rest behind its 15-point symbol on a 30-point icon (the svg is 48 units, one a pixel) */
.film-icon .drop { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; overflow: visible; pointer-events: none; }
.film-icon .drop path { fill: color-mix(in srgb, var(--c) calc(18% + var(--live) * 34%), transparent); }
.film-glyph { position: relative; width: 17.5px; height: 17.5px; color: var(--c); transition: color .3s var(--ease), opacity .3s var(--ease); }
.film-glyph svg { display: block; width: 100%; height: 100%; }
.film-glyph svg path { fill: currentColor; }
.film-name { min-width: 0; padding: 0 3px; margin: 0 -3px; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); transition: color .3s var(--ease); }
.film-val { flex: none; margin-left: 4px; font: 400 12.5px/1 var(--f-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* its headphones (hear only it), as the app's small round button: 30 with its symbol 15, at the end of the name's line,
   12 before the volume */
.film-alone { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; color: var(--ink); }
.film-alone svg { display: block; width: 22.5px; height: 22.5px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.film-word { position: relative; }
.film-short { display: none; }
.film.phone .film-long { display: none; }
.film.phone .film-short { display: inline; }
/* off, as in the app: grey, Off beside its name, and a slash drawn through its icon */
.film-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.75px; height: 24px; margin: -12px 0 0 -.875px; border-radius: 1px; background: var(--ink-3); transform: rotate(-45deg) scaleY(0); transition: transform .32s var(--ease); }
.film-ctl.is-off .film-icon::after { transform: rotate(-45deg) scaleY(1); }
.film-ctl.silent .film-name { color: var(--ink-3); }
.film-ctl.silent .film-glyph { color: var(--ink-3); opacity: .8; }
.film-ctl.silent .film-icon .drop path { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
.film-fader { width: 100%; height: 16px; border-radius: 8px; }
.film-fader .rk-fader-mark { top: 4.5px; bottom: 4.5px; }
.film-fader .rk-fader-knob { height: 10px; margin-top: -5px; transition: height .15s var(--ease), margin .15s var(--ease); }
.film-fader.held .rk-fader-knob { height: 13px; margin-top: -6.5px; }

/* the pointer: an arrow, its tip where it points; on a phone, a fingertip that presses */
.film-hand { position: absolute; left: 0; top: 0; z-index: 3; width: 24px; height: 24px; margin: -3.5px 0 0 -5px; opacity: 0; will-change: translate, opacity; }
.film-hand svg { display: block; width: 24px; height: 24px; fill: var(--ink); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3));
  transform-origin: 5px 3.5px; transition: transform .1s var(--ease); }
.film-hand.tap svg { transform: scale(.84); }
.film.phone .film-hand { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent), 0 4px 14px -4px rgba(0, 0, 0, .4); transition: scale .15s var(--ease), background .15s var(--ease); }
.film.phone .film-hand svg { display: none; }
.film.phone .film-hand.press { scale: .82; background: color-mix(in srgb, var(--ink) 30%, transparent); }

/* paused (a click on it): a soft scrim with a play sign in the middle, gone the moment it plays on. Its pause button only
   shows when the keyboard reaches it */
.film::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='%23000' fill-opacity='.45'/%3E%3Cpath d='M29 24v24l20-12z' fill='%23efece8'/%3E%3C/svg%3E") center / 64px no-repeat, rgba(0, 0, 0, .14); }
.film.paused::after { opacity: 1; }
.film-play { position: absolute; z-index: 5; top: calc(var(--pad) - 8px); right: calc(var(--pad) - 4px); width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--sheet); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; }
.film-play:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--ink); outline-offset: 2px; }
.film-play svg { width: 12px; height: 12px; fill: currentColor; }

/* the chapters: a line each that fills as it plays, and its title, centred under its third of the film; click one to
   go there */
.film-bar { width: 100%; margin-top: 32px; }
.film-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.film-steps li { position: relative; padding-top: 18px; text-align: center; cursor: pointer; outline: none; border-radius: 3px; }
.film-steps li:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.film-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.film-line b { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.film-step { display: block; font: 400 22px/1.12 var(--f-serif); letter-spacing: -.01em; color: var(--ink); }   /* white, all three: the line shows where it is */
.film-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* read out, not shown */

@container how (max-width: 900px) { .film { aspect-ratio: 16 / 10; } }
/* a phone: the frame 4:5, the bar the homepage's phone bar, each sound's controls on one line above it; the chapters
   closer */
@container how (max-width: 600px) {
  .film { --phone: 1; aspect-ratio: 4 / 5; border-radius: 20px; }
  .film-title { font-size: 21px; }
  .film-zplus { width: 40px; height: 40px; }
  .film-zt { font-size: 19px; }
  .film-ctl { flex-direction: row; align-items: center; gap: 10px; transform: none; }
  .film-id { flex: 0 0 60%; }                                   /* room for the name beside the headphones */
  .film-alone { width: 26px; height: 26px; }                    /* as tall as the line it sits on */
  .film-fader { flex: 1; width: auto; }
  .film-play { top: calc(var(--pad) - 10px); right: calc(var(--pad) - 6px); width: 30px; height: 30px; }
  .film-bar { margin-top: 18px; }
  .film-steps { gap: 12px; }
  .film-steps li { padding-top: 12px; }
  .film-step { font-size: 16.5px; }
}