/* lulla.net cinema scenes (D63): one sheet for every scene under /cinema/ and /en/cinema/. Sits on ds/scene.css (tokens, faces, the
   scene bar). Two states of the same page:
   1. THE STILL READ (no class on <html>): no script, reduced motion, or no WebGL. The title over the first painting, then each
      painting with its lines under or beside it. Nothing is pinned, nothing moves.
   2. THE SCENE (html.cine-on, set in the head before first paint): the sections become scroll length only, one canvas fills the
      screen (cine.js), and the lines stand one at a time over it. Lines never move with the page; they fade.
   Colours are the ds night tokens; the scene is dark by design (data-ds-dark on the bar). */
:root{--cine-ink:#F7F0E1;--cine-soft:#E4DAC6;--cine-gold:var(--l-accent,#E0B25C);--cine-ground:#0B0906;--cine-gut:20px}
html.cine{background:var(--cine-ground);scroll-behavior:auto}
.cine body{margin:0;background:var(--cine-ground);color:var(--cine-ink);font-family:var(--l-font-prose);-webkit-font-smoothing:antialiased;overflow-x:clip}
.cine *,.cine *::before,.cine *::after{box-sizing:border-box}
.cine-main{display:block;position:relative}
.cine-stage,.cine-scrim,.cine-bar,.cine-tail{display:none}

/* ---- the opener: the first painting, the title on its fade ---- */
.cine-open{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.cine-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--cine-px,50%) var(--cine-py,50%);z-index:-2}
.cine-open::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,6,.5) 0,rgba(11,9,6,0) 16%,rgba(11,9,6,0) 42%,rgba(11,9,6,.72) 70%,rgba(11,9,6,.94) 100%)}
.cine-open__in{padding:0 var(--cine-gut) calc(13svh + env(safe-area-inset-bottom,0px));max-width:44rem}
.cine-kick{margin:0 0 .7rem;font-family:var(--l-font-ui);font-size:var(--l-fs-ui-sm,15px);font-weight:600;line-height:1.4;color:var(--cine-gold)}
.cine-open h1{margin:0;font-family:var(--l-font-display);font-weight:400;font-size:clamp(44px,12.4vw,104px);line-height:1.02;letter-spacing:0;color:var(--cine-ink);text-wrap:balance}
html[lang^="hi"] .cine-open h1{line-height:1.24;font-size:clamp(44px,13vw,96px)}
.cine-hint{position:absolute;left:var(--cine-gut);bottom:calc(4.2svh + env(safe-area-inset-bottom,0px));margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--l-font-ui);font-size:var(--l-fs-ui-sm,15px);line-height:1.4;color:var(--cine-soft)}
.cine-hint::before{content:'';width:28px;height:1px;background:var(--cine-gold)}
html:not(.cine-on) .cine-hint{display:none}

/* ---- a beat: its painting, its lines ---- */
.cine-beat{position:relative;padding:11svh var(--cine-gut) 3svh}
.cine-art{margin:0 calc(-1 * var(--cine-gut)) 7svh}
.cine-art img{display:block;width:100%;height:auto;max-height:86svh;object-fit:cover;object-position:50% 40%}
.cine-copy{max-width:34rem;margin:0 auto}
.cine-line{margin:0 0 2.1em;font-size:clamp(21px,5.5vw,26px);line-height:1.46;color:var(--cine-soft);text-wrap:pretty}
html[lang^="hi"] .cine-line{line-height:1.66}
.cine-line--say{color:var(--cine-ink)}
.cine-who{display:block;margin:0 0 .5em;font-family:var(--l-font-ui);font-size:var(--l-fs-floor,14px);font-weight:600;line-height:1.4;color:var(--cine-gold)}
html[lang^="en"] .cine-who{letter-spacing:.14em;text-transform:uppercase;font-size:13.5px}

/* ---- the end: the way back to the chapter ---- */
.cine-end{padding:6svh var(--cine-gut) calc(12svh + env(safe-area-inset-bottom,0px))}
.cine-end__in{max-width:34rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px}
.cine-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--l-pill,999px);border:1px solid var(--l-line-ui,rgba(247,240,225,.34));
  background:rgba(11,9,6,.5);color:var(--cine-ink);font-family:var(--l-font-ui);font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cine-btn--go{background:var(--cine-gold);border-color:transparent;color:var(--l-on-accent,#1A1206)}
.cine-btn:hover{border-color:var(--cine-gold)}
.cine-btn--go:hover{background:color-mix(in srgb,var(--cine-gold) 86%,#fff)}
.cine-btn:focus-visible{outline:2px solid var(--l-focus,#F2C97D);outline-offset:3px}

/* the still read on a wide screen: an upright painting beside its lines, a wide one above them */
@media (min-width:900px){
  :root{--cine-gut:40px}
  .cine-open__in{padding-left:max(var(--cine-gut),calc((100vw - 1240px)/2));padding-bottom:12svh}
  .cine-hint{left:max(var(--cine-gut),calc((100vw - 1240px)/2))}
  .cine-line{font-size:clamp(23px,1.9vw,31px)}
  html:not(.cine-on) .cine-beat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:4.5rem;align-items:center;max-width:1160px;margin:0 auto;padding:9svh var(--cine-gut)}
  html:not(.cine-on) .cine-beat .cine-art{grid-column:2;grid-row:1;margin:0}
  html:not(.cine-on) .cine-beat .cine-copy{grid-column:1;grid-row:1;margin:0}
  html:not(.cine-on) .cine-art img{max-height:84svh;width:auto;max-width:100%;margin-left:auto;border-radius:4px}
  html:not(.cine-on) .cine-beat--wide,html:not(.cine-on) .cine-beat--bare{display:block}
  html:not(.cine-on) .cine-beat--wide .cine-art{margin:0 0 6svh}
  html:not(.cine-on) .cine-beat--wide .cine-art img{width:100%;max-height:none}
  html:not(.cine-on) .cine-beat--wide .cine-copy,html:not(.cine-on) .cine-beat--bare .cine-copy{max-width:40rem;margin:0 auto}
  html:not(.cine-on) .cine-end__in{max-width:1080px}
}

/* ================= the scene ================= */
html.cine-on{overscroll-behavior-y:none}
html.cine-on body{touch-action:manipulation}
/* the bar stands on a near-solid band (its gold pill would not hold 4.5:1 on a painted sun through anything lighter), fading out below it */
html.cine-on .hdr--scene{position:fixed;left:0;right:0;top:0;z-index:45;background:rgba(11,9,6,.96);border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.cine-on .hdr--scene::after{content:'';position:absolute;left:0;right:0;top:100%;height:26px;background:linear-gradient(180deg,rgba(11,9,6,.96),rgba(11,9,6,0));pointer-events:none}
/* the layers, back to front: the canvas, the first painting as the browser draws it (until the canvas has a frame), the dark the
   lines stand on, the progress line, the lines, the end, the bar. All fixed; the sections below are scroll length only. */
html.cine-on .cine-stage{display:block;position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;overflow:hidden;background:var(--cine-ground);pointer-events:none}
html.cine-on .cine-gl{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
html.cine-live .cine-gl{visibility:visible}
html.cine-on .cine-poster{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:2;pointer-events:none;transition:opacity .7s ease}
html.cine-live .cine-poster{opacity:0}
html.cine-on .cine-scrim{display:block;position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,6,.34) 0,rgba(11,9,6,0) 13%,rgba(11,9,6,0) 38%,rgba(11,9,6,.5) 54%,rgba(11,9,6,.84) 70%,rgba(11,9,6,.95) 86%,rgba(11,9,6,.97) 100%)}
html.cine-on .cine-bar{display:block;position:fixed;left:0;top:0;width:100%;height:2px;z-index:46;pointer-events:none}
html.cine-on .cine-bar i{display:block;height:100%;width:100%;background:var(--cine-gold);transform-origin:0 50%;transform:scaleX(0);opacity:.9}
html.cine-on .cine-open{height:calc(var(--cine-open,.75) * 100svh);min-height:0;overflow:visible;isolation:auto}
html.cine-on .cine-open::before{display:none}
html.cine-on .cine-open__in,html.cine-on .cine-hint{position:fixed;z-index:6;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.cine-on .cine-open__in{left:0;right:0;bottom:0}
html.cine-on.cine-in .cine-open__in,html.cine-on.cine-in .cine-hint{opacity:0;transform:translateY(-10px);pointer-events:none}
html.cine-on .cine-beat{height:calc(var(--len) * 100svh);padding:0;margin:0}
/* in the scene a beat's own picture is drawn by the canvas: the element stays for assistive tech, out of sight */
html.cine-on .cine-art{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;overflow:hidden;opacity:0;pointer-events:none}
html.cine-on .cine-art img{width:1px;height:1px}
html.cine-on .cine-copy{position:fixed;left:0;right:0;bottom:0;z-index:6;height:100svh;max-width:none;margin:0;pointer-events:none}
html.cine-on .cine-line{position:absolute;left:var(--cine-gut);right:var(--cine-gut);bottom:calc(8.5svh + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:34rem;
  opacity:0;transform:translateY(12px);transition:opacity .34s ease,transform .34s ease;text-shadow:0 1px 2px rgba(0,0,0,.5)}
html.cine-on .cine-line::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;border-radius:16px;background:rgba(11,9,6,.46);box-shadow:0 0 30px 24px rgba(11,9,6,.46);pointer-events:none}
html.cine-on .cine-line.is-on{pointer-events:auto;opacity:1;transform:none;transition:opacity .75s ease .16s,transform .95s cubic-bezier(.2,.7,.2,1) .16s}
/* the end stays in the tab order and in the reading order of assistive tech all along (out of sight, taking no pointer); it shows
   at the scene's end, and at once if the keyboard reaches it earlier */
html.cine-on .cine-end{position:fixed;left:0;right:0;bottom:0;z-index:7;padding:0 var(--cine-gut) calc(9svh + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease}
html.cine-on.cine-out .cine-end{opacity:1;pointer-events:auto;transform:none;transition:opacity .8s ease .5s,transform 1s cubic-bezier(.2,.7,.2,1) .5s}
html.cine-on .cine-end:focus-within{opacity:1;pointer-events:auto;transform:none;transition:none}
html.cine-on .cine-tail{display:block;height:100svh}
@media (min-aspect-ratio:6/5){
  /* a screen wider than it is tall: an upright painting stands at the right, the lines at the left on the ground beside it; a
     wide painting fills the screen and the lines stand low on its fade (html.cine-low, set per beat) */
  html.cine-on .cine-scrim{background:linear-gradient(180deg,rgba(11,9,6,.3) 0,rgba(11,9,6,0) 14%)}
  html.cine-on.cine-low .cine-scrim{background:linear-gradient(180deg,rgba(11,9,6,.3) 0,rgba(11,9,6,0) 14%,rgba(11,9,6,0) 40%,rgba(11,9,6,.72) 66%,rgba(11,9,6,.95) 100%)}
  html.cine-on:not(.cine-low) .cine-line::before{display:none}
  html.cine-on .cine-open__in{right:auto;width:min(46rem,44vw);max-width:none;padding-left:max(var(--cine-gut),calc((100vw - 1240px)/2));padding-right:0;padding-bottom:17svh}
  html.cine-on .cine-open h1{font-size:clamp(34px,5.6vw,96px)}
  html.cine-on .cine-hint{left:max(var(--cine-gut),calc((100vw - 1240px)/2));bottom:7svh}
  html.cine-on .cine-line{left:max(var(--cine-gut),calc((100vw - 1240px)/2));right:auto;width:min(31rem,37vw);max-width:none;margin:0;bottom:19svh;font-size:clamp(19px,1.95vw,31px)}
  html.cine-on .cine-end{left:max(var(--cine-gut),calc((100vw - 1240px)/2));right:auto;padding:0 0 19svh}
  html.cine-on .cine-end__in{margin:0}
  html.cine-on.cine-up .cine-poster{left:auto;right:calc(30vw - var(--cine-ar,.6667) * 50vh);right:calc(30vw - var(--cine-ar,.6667) * 50lvh);width:calc(var(--cine-ar,.6667) * 100vh);width:calc(var(--cine-ar,.6667) * 100lvh);object-position:50% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}
/* a short landscape screen (a phone on its side): smaller type, lower lines */
@media (max-height:520px){
  .cine-open h1{font-size:clamp(34px,9svh,56px)}
  html.cine-on .cine-line{font-size:18px;line-height:1.4;bottom:9svh}
  html.cine-on .cine-open__in{padding-bottom:20svh}
  html.cine-on .cine-end{padding-bottom:9svh}
}
@media print{.hdr--scene,.cine-hint,.cine-stage,.cine-scrim,.cine-bar{display:none}.cine body{background:#fff;color:#000}.cine-line,.cine-line--say{color:#000}}