/*
 * layers.css — WITH A FLY: the five layers as the picture's own type, the collage camera, the fly's words. [ours]
 * 8 Oct 2026 (the five lanes); the new face 9 Oct 2026 (cinema-work/with-a-fly/DESIGN.md). Type direction: Tora.
 *
 * Copyright (C) 2026 CRAITR (https://craitr.no) (see ../NOTICE.html).
 * This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later
 * version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
 * implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See ../LICENSES/GPL-3.0.html
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * The type is laid into the film, not on it: large, translucent, blended with the picture under it (data-tone, set by
 * layers.js from the picture's brightness there: dark -> screen, mid -> overlay, bright -> difference), moving slowly.
 * Sizes are in vh so a 1080p projector and a 720p laptop see the same composition; reading lanes keep a pixel floor
 * (max(vh, px)) so none falls under 14 px at 720p. html.lite (set by layers.js when frames run late) drops the blends.
 * The motion constants (--tao-*, --hands-cross, --fly-orbit*, --wall-breathe) are read by layers.js.
 * This is the direction called "sky" in DESIGN.md; the two not taken ("glass", "still") are kept in
 * cinema-work/with-a-fly/directions/directions.css.
 */

:root {
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, 0.78);
  --glow-dark: 0 0 0.45em rgba(0, 0, 0, 0.55), 0 0 0.08em rgba(0, 0, 0, 0.5);
  --gloss: linear-gradient(176deg, #ffffff 0%, #ffffff 42%, #dfe9ff 70%, #f6dcff 100%);
  --amber: #ffc46b;
  --tao-drift-y: 4.2; --tao-drift-x: 1.6; --tao-grow: 0.035;
  --hands-cross: 1.25; --fly-orbit: 5; --fly-orbit-speed: 0.2; --wall-breathe: 1;
}

/* ---------------------------------------------------------------- the picture: wall / wall + camera / camera */
.cinemaCamera { display: none; position: absolute; background: #000; object-fit: contain; pointer-events: none; }
.picture-pip .cinemaCamera { display: block; top: 2.2vh; right: 1.4vw; width: 24vw; height: 13.5vw; box-shadow: 0 0.6vh 2.4vh rgba(0, 0, 0, 0.6); z-index: 0; }
.picture-camera .cinemaCamera { display: block; top: 0; left: 0; width: 100%; height: 100%; }
.picture-camera .htmlvideoplayer { opacity: 0; }

/* ---------------------------------------------------------------- the lanes' stage: NOT a stacking context */
/* position absolute + no z-index / transform / opacity / contain: each line's mix-blend-mode reaches the film below */
.cinemaLayers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.cinemaLayers .lane { position: absolute; }
.cinemaLayers [hidden], .flyWords [hidden], .flyWords[hidden], .videoSubtitles [hidden] { display: none !important; }

/* the blends, by the picture under each line */
/* (THE ROOM's tone sits on #roomSubtitles itself: that element is fixed, so its group is what meets the film) */
[data-tone="mixed"] { mix-blend-mode: normal; }
[data-tone="dark"] { mix-blend-mode: screen; }
[data-tone="mid"] { mix-blend-mode: overlay; }
[data-tone="vivid"], [data-tone="bright"] { mix-blend-mode: difference; }
/* the large type (TAO, the field's figures, the voice in the music) on a box that is part light, part dark: difference,
   which turns white type black on the paper and cyan on the red; the small reading lines stay normal, with their glow */
.taoLine[data-tone="mixed"], .wallStrip .cell[data-tone="mixed"], .videoSubtitles[data-kind="vim"][data-tone="mixed"] { mix-blend-mode: difference; --glow-dark: none; }
/* the soft dark glow only helps where the type is drawn normally; under a blend it would muddy the picture */
[data-tone="dark"], [data-tone="vivid"], [data-tone="bright"], [data-tone="mid"] { --glow-dark: none; }
html.lite [data-tone] { mix-blend-mode: normal !important; }

/* ================================================================ THE ROOM: voices in the image */
/* Jellyfin's custom subtitle element (.videoSubtitles > .videoSubtitlesInner), restyled: no box, the reading face */
.videoSubtitles { transition: transform 0.3s ease; font-size: 100%; display: flex; flex-direction: column-reverse; align-items: flex-start;
  left: 0; right: 0; bottom: 0; padding: 0 6vw 9vh; box-sizing: border-box; pointer-events: none; }
.videoSubtitles { --glow-dark: 0 0 0.3em rgba(0, 0, 0, 0.8), 0 0 0.07em rgba(0, 0, 0, 0.75), 0 0 0.9em rgba(0, 0, 0, 0.35); }
.videoSubtitles .videoSubtitlesInner { background: transparent; max-width: 52vw; margin: 0; text-align: left; color: var(--ink);
  font-family: var(--cin-read); font-weight: 300; font-size: max(4.2vh, 18px); line-height: 1.2; letter-spacing: -0.005em;
  text-shadow: var(--glow-dark); text-wrap: pretty; will-change: transform, opacity; }
.videoSubtitles[data-long="1"] .videoSubtitlesInner { font-size: max(3.3vh, 16px); }
/* the spoken introduction runs over the wall's WARNING (y ~ 27-81 %): it sits in the band under it */
.videoSubtitles[data-intro="1"] { padding-bottom: 3.6vh; }
.videoSubtitles[data-intro="1"][data-long="1"] .videoSubtitlesInner { font-size: max(3vh, 15px); }
.videoSubtitles .roomVoice { font-family: var(--cin-read); font-style: italic; font-weight: 300; font-size: max(1.9vh, 14px); line-height: 1.3;
  color: var(--ink-soft); text-shadow: var(--glow-dark); margin: 0 0 0.9vh; letter-spacing: 0.02em; max-width: 52vw; text-align: left; }
.videoSubtitles .roomVoice .en { display: block; font-style: normal; color: rgba(255, 255, 255, 0.88); }
.videoSubtitlesInner.room-skipped { font-style: italic; }
/* the performer's voice inside the music: large, light, at its own place in the frame (slots taken in turn) */
.videoSubtitles[data-kind="vim"] .videoSubtitlesInner { font-weight: 200; font-style: italic; font-size: max(6.6vh, 26px); line-height: 1.08;
  max-width: 44vw; letter-spacing: -0.01em; text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.35); }
.videoSubtitles[data-kind="vim"] .roomVoice { font-style: normal; text-transform: uppercase; letter-spacing: 0.22em; font-size: max(1.4vh, 12px); margin-bottom: 1.6vh; }
.videoSubtitles[data-kind="vim"] .videoSubtitlesInner, .videoSubtitles[data-kind="vim"] .roomVoice { max-width: 40vw; }
/* the four places, all in the left column (x <= 54 vw; the right column belongs to THE HANDS) */
.videoSubtitles[data-kind="vim"][data-slot="0"] { padding: 0 6vw 46vh 7vw; }
.videoSubtitles[data-kind="vim"][data-slot="1"] { padding: 0 6vw 24vh 10vw; }
.videoSubtitles[data-kind="vim"][data-slot="2"] { padding: 0 6vw 56vh 14vw; }
.videoSubtitles[data-kind="vim"][data-slot="3"] { padding: 0 6vw 11vh 6vw; }

/* ================================================================ TAO: the sentence the image was told to become */
.laneTao { left: 6vw; right: 6vw; top: 0; bottom: 0; }
.taoLine { position: absolute; left: 0; right: 0; text-align: center; will-change: transform, opacity; transform-origin: 50% 50%;
  font-family: var(--cin-display); font-weight: 400; color: var(--ink); text-transform: uppercase; text-wrap: balance;
  font-size: calc(8.4vh * var(--cin-display-scale)); line-height: 1.06; letter-spacing: 0.01em; }
/* the gloss: a pale gradient in the letters, a soft light around them */
.taoLine.lane-tao:not(.dash) { background: var(--gloss); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.16); }
.taoLine.lane-tao { top: 27vh; }
.taoLine .shade { font-size: 0.6em; letter-spacing: 0.08em; opacity: 0.8; }
/* before START the wall shows its own WARNING (y ~ 27-80 % of the frame): TAO sits in the band above it */
.taoLine.lane-tao.intro { top: 3.2vh; font-size: calc(4.3vh * var(--cin-display-scale)); line-height: 1.1; letter-spacing: 0.02em; }
/* ... and under THE WALL's field when that is on (still above the warning's triangle at 26.5 vh) */
/* ... and when THE WALL is on, in the right column under its field (its stage directions take the left one) */
.laneTao[data-wall="1"] .taoLine.lane-tao.intro { top: 14.4vh; left: 46vw; text-align: right; font-size: calc(2.8vh * var(--cin-display-scale)); }
.laneTao[data-wall="1"] .taoLine.dash.intro { top: 12vh; left: 70vw; font-size: 6vh; }
/* the room's words as sent to the image (only while THE ROOM is off), and the "words wiped" card */
.taoLine.lane-words { font-family: var(--cin-read); text-transform: none; font-weight: 200; }
/* the ghost takes THE ROOM's place (the left column) */
.taoLine.lane-words.ghost { top: 70vh; right: 36vw; text-align: left; font-size: max(3.2vh, 16px); font-style: italic; letter-spacing: 0; line-height: 1.2; }
.taoLine.lane-words.ghost.intro { top: 83vh; font-size: max(2.6vh, 15px); }
.taoLine.lane-words.card { top: 44vh; font-size: max(2.4vh, 15px); text-transform: lowercase; letter-spacing: 0.24em; font-weight: 300; }
/* a silence: one long thin stroke, the quietest thing in the frame */
.taoLine.dash { top: 40vh; font-size: 12vh; font-family: var(--cin-read); font-weight: 200; letter-spacing: 0; line-height: 1; mix-blend-mode: screen; }
.taoLine.dash.intro { top: 6vh; font-size: 8vh; }
.taoLine.lane-words.dash { top: 60vh; font-size: 7vh; }

/* ================================================================ THE WALL: a breathing field of the engine's numbers */
.laneWall { left: 0; right: 0; top: 0; color: var(--ink); font-family: var(--cin-read); }
.wallStrip { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2vw; padding: 2.6vh 4vw 0;
  font-size: max(1.5vh, 14px); white-space: nowrap; transition: padding-top 0.3s ease-out; }
/* while the controls show, the top bar (the film's name, the back arrow) has the top band: the field steps down under it */
.cinemaLayers[data-osd="1"] .wallStrip { padding-top: max(6.4vh, 52px); }
.wallStrip .mode { font-family: var(--cin-display); font-size: calc(2.2vh * var(--cin-display-scale)); letter-spacing: 0.28em; align-self: flex-start;
  padding-top: 0.6vh; min-width: 9vw; opacity: 0.9; }
.wallStrip .cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 10vw; transform-origin: 0 0; will-change: transform, opacity; }
.wallStrip .cell b { font-family: var(--cin-display); font-weight: 400; font-size: calc(7vh * var(--cin-display-scale)); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wallStrip .lbl { font-family: var(--cin-read); font-size: max(1.35vh, 12px); text-transform: uppercase; letter-spacing: 0.24em; opacity: 0.75; margin-top: 0.7vh; }
/* the strobe marker is a safety sign: the plain reading face, steady, never blended */
.wallStrip .strobe { position: absolute; right: 4vw; top: 12.6vh; font-family: var(--cin-read); font-weight: 500; font-size: max(1.8vh, 14px);
  letter-spacing: 0.16em; color: #111; background: var(--amber); padding: 0.25vh 0.7em; mix-blend-mode: normal; }
.wallLines { margin: 2.2vh 0 0 4vw; width: 46vw; font-size: max(1.9vh, 14px); text-transform: uppercase; letter-spacing: 0.13em; line-height: 1.45; font-weight: 300; }
.wallLine { margin: 0.2vh 0; transition: opacity 0.4s linear; text-shadow: var(--glow-dark); }
.wallLine .caret { display: inline-block; width: 0.5em; height: 0.95em; vertical-align: -0.1em; background: rgba(255, 255, 255, 0.85); margin-left: 0.12em; }
.wallLine .count { color: var(--amber); }
.wallLine.flash { animation: wallflash 420ms ease-out 1 both; }
@keyframes wallflash { 0% { background: #fff; color: #000; text-shadow: none; } 100% { background: transparent; } }
.wallLine.kind-strobe { color: var(--amber); }

/* ================================================================ THE HANDS: gestures crossing the frame */
/* the right column (x 60-96 vw). A long gesture wraps and stays; a short one slides left as it ages, never past the
   column's left edge (layers.js measures its words) */
.laneHands { right: 4vw; top: 57vh; width: 36vw; text-align: right; font-family: var(--cin-read); }
.laneHands[data-intro="1"] { top: 83vh; }   /* before START the wall's WARNING fills the middle: under it */
.handsLine { font-size: max(2.5vh, 15px); font-weight: 300; line-height: 1.25; color: var(--ink); margin: 0.9vh 0; text-wrap: balance;
  text-shadow: var(--glow-dark); will-change: transform, opacity; }
.handsLine .who { display: block; font-size: max(1.3vh, 12px); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.2vh; }
.handsLine .count { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* ================================================================ THE FLY: her words, orbiting her */
.flyWords { position: absolute; left: 0; top: 0; max-width: 26vw; pointer-events: none; will-change: transform, opacity; z-index: 0;
  font-family: var(--cin-read); font-weight: 400; font-size: max(2.8vh, 16px); line-height: 1.3; color: #fff; text-shadow: var(--glow-dark); }
.flyWords::before { content: ""; position: absolute; z-index: -1; left: -1.1em; right: -1.1em; top: -0.9em; bottom: -0.9em; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.16) 60%, rgba(0, 0, 0, 0)); }
.flyWords .cueLine { display: block; }
.flyWords .brainLine { display: block; font-size: max(2vh, 14px); font-weight: 300; font-style: italic; color: rgba(255, 255, 255, 0.84); margin-top: 0.3vh; }
.flyWords .cueLine .tag { font-size: 0.72em; letter-spacing: 0.08em; opacity: 0.8; }
.flyWords.left { text-align: right; }

/* the fly's stage sits above the OSD and the subtitles (z 2 > header 1), below the dialogs (999998+) */
.flyStage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }

/* lite: the blends and the soft glows go, the composition stays */
html.lite .taoLine.lane-tao:not(.dash) { background: none; -webkit-text-fill-color: currentColor; text-shadow: var(--glow-dark); }