/* arihoresh.com shared OPENING + POSTER (see README.md). Every selector is prefixed .op- so it never clashes
   with a take. Geometry: one unit --u (CSS px per design px) set by opening.js. Three boards: desk (1200 x 680,
   poster B), land (a short landscape phone, 844 x 390) and phone (portrait: --u = W / 390, 16 px gutters, the
   vertical positions written by opening.js as --op-* variables so the height goes into the gaps).
   Colors and type: SCREENPLAY.md section 6. */
@font-face { font-family: "OP Cal Sans"; src: url("fonts/cal-sans.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "OP Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

/* Before the module mounts (JavaScript on), the take's root div covers the page with Leo's stage, so the take
   never flashes first. Without JavaScript the rule does not apply and the <noscript> poster shows instead. If
   opening.js never mounts (a failed load), the cover lifts by itself after 4 s. */
@media (scripting: enabled) {
  .op-cover { position: fixed; inset: 0; z-index: 50; background: #f1eefc; animation: op-cover-failsafe 0s linear 4s forwards; }
}
@keyframes op-cover-failsafe { to { visibility: hidden; } }
html.op-lock, html.op-lock body { overflow: hidden; }

.op-layer {
  --op-paper: #fbfaff;
  --op-stage: #f1eefc;
  --op-ink: #16122b;
  --op-ink-2: #57536f;
  --op-ink-3: #8a87a0;
  --op-line: rgba(22, 18, 43, 0.12);
  --op-violet: #4a2fa0;
  --op-rim: rgba(74, 47, 160, 0.28);
  --op-lift: 0 1px 2px rgba(22, 18, 43, 0.06), 0 24px 48px -24px rgba(22, 18, 43, 0.32);
  --u: min(calc(100vw / 1200), calc(100vh / 680), 1.3px);
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: var(--op-stage); color: var(--op-ink);
  font-family: "OP Inter", system-ui, sans-serif; font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  contain: layout paint style;
}
.op-layer *, .op-layer *::before, .op-layer *::after { box-sizing: border-box; }
.op-layer[data-state="hidden"] { display: none; }
.op-layer.op-leaving { opacity: 0; transition: opacity 300ms ease; pointer-events: none; }

.op-paper, .op-canvas { position: absolute; inset: 0; }
.op-paper { background: var(--op-paper); }
.op-canvas { display: block; width: 100%; height: 100%; }
.op-layer[data-state="poster"] .op-canvas { visibility: hidden; }

.op-board { position: absolute; left: calc(50% - 600 * var(--u)); top: calc((100% - var(--op-rb, 0px)) / 2 - 340 * var(--u)); width: calc(1200 * var(--u)); height: calc(680 * var(--u)); }

/* ---------------------------------------------------------------- the four frames (round doors in frame A) */
/* desk poster B: four WHOLE frames, two each side of the portrait, mirrored about x 600 (og-b-film's own geometry):
   46 | 194 | 16 | 194 | ~(portrait 470..730 with clearance) | 194 | 16 | 194 | 46. Fixed 12 Oct on Ari's review:
   the earlier strip (280 wide at x -75 / 995) bled off both screen edges and ran under the portrait. */
.op-frame { position: absolute; top: calc(328.4375 * var(--u)); width: calc(194 * var(--u)); height: calc(109.125 * var(--u)); }
.op-f-mq  { left: calc(46 * var(--u)); }
.op-f-dan { left: calc(256 * var(--u)); }
.op-f-yt  { left: calc(750 * var(--u)); }
.op-f-hv  { left: calc(960 * var(--u)); }
.op-fring, .op-fplate, .op-fclip { position: absolute; }
.op-fring { border-radius: 50%; background: var(--op-paper); }
.op-fplate { left: 0; top: 0; width: 100%; height: 100%; border-radius: calc(8 * var(--u)); box-shadow: 0 0 0 1px var(--op-line), var(--op-lift); }
/* one window per frame: during the morph opening.js sets clip-path: inset(... round r) on it (a squircle that
   FLIPs from the door's circle to the frame); at rest it is the frame's rounded rect */
.op-fclip { left: 0; top: 0; width: 100%; height: 100%; border-radius: calc(8 * var(--u)); overflow: hidden; background: #e9e6f3; }
.op-fm { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; display: block; }
.op-px { image-rendering: pixelated; }
.op-vid { opacity: 0; transition: opacity 240ms ease; }
.op-vid.op-on { opacity: 1; }

/* ---------------------------------------------------------------- Ari's portrait (the lens) */
.op-photo { position: absolute; left: calc(484 * var(--u)); top: calc(267 * var(--u)); width: calc(232 * var(--u)); height: calc(232 * var(--u)); cursor: pointer; }
.op-pring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 calc(12 * var(--u)) var(--op-paper), 0 0 0 calc(12 * var(--u) + 1px) var(--op-rim), var(--op-lift); }
.op-pclip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #d9d4ea; }
.op-pclip img { position: absolute; left: 0; top: 0; width: 768px; height: 768px; max-width: none; transform-origin: 0 0; display: block; }

/* ---------------------------------------------------------------- words */
.op-name, .op-line { position: absolute; left: 0; right: 0; margin: 0; text-align: center; transform-origin: 50% 0; }
.op-name { top: calc(52 * var(--u)); font: 600 calc(104 * var(--u)) / 1 "OP Cal Sans", "OP Inter", system-ui, sans-serif; letter-spacing: -0.01em; white-space: nowrap; color: var(--op-ink); }
.op-line { top: calc(172 * var(--u)); font: 500 calc(26 * var(--u)) / 1.3 "OP Inter", system-ui, sans-serif; white-space: nowrap; color: var(--op-ink-2); }

/* ---------------------------------------------------------------- play */
.op-play {
  position: absolute; left: calc(420 * var(--u)); top: calc(463 * var(--u)); width: calc(360 * var(--u)); height: calc(121 * var(--u));
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; appearance: none;
}
.op-play:focus { outline: none; }
.op-play-disc {
  position: absolute; left: calc(50% - 36 * var(--u)); top: 0; width: calc(72 * var(--u)); height: calc(72 * var(--u));
  border-radius: 50%; background: var(--op-violet); display: grid; place-items: center;
  box-shadow: 0 0 0 calc(6 * var(--u)) var(--op-paper), 0 0 0 calc(6 * var(--u) + 1px) var(--op-rim), 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(22, 18, 43, 0.5);
}
/* the hover ease only at rest: during the opening the disc is moved frame by frame and must not lag */
.op-layer[data-state="poster"] .op-play-disc { transition: transform 200ms ease; }
.op-play-disc svg { display: block; width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-left: calc(4 * var(--u)); }
.op-play-label { position: absolute; left: 0; right: 0; top: calc(97 * var(--u)); text-align: center; white-space: nowrap; font: 600 max(15px, calc(18 * var(--u))) / max(20px, calc(24 * var(--u))) "OP Inter", system-ui, sans-serif; color: var(--op-ink); }
.op-play-dot { margin: 0 calc(8 * var(--u)); color: var(--op-ink-3); font-weight: 500; }
.op-play-meta { font-weight: 500; color: var(--op-ink-2); }
.op-layer[data-state="poster"] .op-play:hover .op-play-disc { transform: scale(1.04); }
/* keyboard focus: a quiet 2 px ring inside the disc's own paper ring (3u off the disc), not a target */
.op-play:focus-visible .op-play-disc { outline: 2px solid var(--op-violet); outline-offset: calc(3 * var(--u)); }

/* ---------------------------------------------------------------- the quiet links line */
.op-links { position: absolute; left: 0; right: 0; top: calc(608 * var(--u)); margin: 0; text-align: center; white-space: nowrap; font: 500 max(13px, calc(14 * var(--u))) / max(18px, calc(20 * var(--u))) "OP Inter", system-ui, sans-serif; color: var(--op-ink-3); }
.op-links a { color: var(--op-ink-2); text-decoration: none; border-radius: 4px; }
.op-links a:hover { color: var(--op-violet); text-decoration: underline; text-underline-offset: 3px; }
.op-links a:focus-visible { outline: 2px solid var(--op-violet); outline-offset: 3px; }
.op-sep { margin: 0 calc(8 * var(--u)); color: var(--op-ink-3); }
.op-lg { display: inline; }

/* ---------------------------------------------------------------- phone (portrait): width-driven, see phoneBoard() */
.op-phone .op-board { left: var(--op-bx); top: 0; width: var(--op-bw); height: 100%; }
.op-phone .op-frame { width: var(--op-fw); height: var(--op-fh); }
.op-phone .op-f-dan { left: var(--op-fx0); top: var(--op-fy0); }
.op-phone .op-f-yt  { left: var(--op-fx1); top: var(--op-fy0); }
.op-phone .op-f-mq  { left: var(--op-fx0); top: var(--op-fy1); }
.op-phone .op-f-hv  { left: var(--op-fx1); top: var(--op-fy1); }
.op-phone .op-photo { left: calc(50% - var(--op-pd) / 2); top: var(--op-py); width: var(--op-pd); height: var(--op-pd); }
.op-phone .op-play { left: calc(50% - 160 * var(--u)); top: calc(var(--op-py) + var(--op-pd) - 28 * var(--u)); width: calc(320 * var(--u)); height: calc(68 * var(--u) + max(20px, calc(20 * var(--u)))); }
.op-phone .op-play-disc { left: calc(50% - 28 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.op-phone .op-play-disc svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(3 * var(--u)); }
.op-phone .op-play-label { top: calc(68 * var(--u)); font-size: max(15px, calc(15 * var(--u))); line-height: max(20px, calc(20 * var(--u))); }
.op-phone .op-play-dot { margin: 0 calc(6 * var(--u)); }
.op-phone .op-name { top: var(--op-ny); font-size: calc(56 * var(--u)); }
.op-phone .op-line { top: calc(var(--op-ny) + 64 * var(--u)); left: calc(16 * var(--u)); right: calc(16 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(23 * var(--u)); white-space: normal; text-wrap: balance; }
.op-phone .op-links { top: var(--op-ly); font-size: max(13px, calc(14 * var(--u))); line-height: max(18px, calc(20 * var(--u))); }
.op-phone .op-lg { display: block; }
.op-phone .op-sep-mid { display: none; }
.op-phone .op-sep { margin: 0 calc(6 * var(--u)); }

/* ---------------------------------------------------------------- land (a short landscape phone): 844 x 390 board */
.op-land .op-board { left: calc(50% - 422 * var(--u)); top: calc((100% - var(--op-rb, 0px)) / 2 - 195 * var(--u)); width: calc(844 * var(--u)); height: calc(390 * var(--u)); }
.op-land .op-frame { top: calc(151.625 * var(--u)); width: calc(172 * var(--u)); height: calc(96.75 * var(--u)); }
.op-land .op-f-mq  { left: calc(16 * var(--u)); }
.op-land .op-f-dan { left: calc(196 * var(--u)); }
.op-land .op-f-yt  { left: calc(476 * var(--u)); }
.op-land .op-f-hv  { left: calc(656 * var(--u)); }
.op-land .op-photo { left: calc(352 * var(--u)); top: calc(130 * var(--u)); width: calc(140 * var(--u)); height: calc(140 * var(--u)); }
.op-land .op-pring { box-shadow: 0 0 0 calc(10 * var(--u)) var(--op-paper), 0 0 0 calc(10 * var(--u) + 1px) var(--op-rim), var(--op-lift); }
.op-land .op-play { left: calc(272 * var(--u)); top: calc(246 * var(--u)); width: calc(300 * var(--u)); height: calc(84 * var(--u)); }
.op-land .op-play-disc { left: calc(50% - 24 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); box-shadow: 0 0 0 calc(5 * var(--u)) var(--op-paper), 0 0 0 calc(5 * var(--u) + 1px) var(--op-rim), 0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-8 * var(--u)) rgba(22, 18, 43, 0.5); }
.op-land .op-play-disc svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); margin-left: calc(3 * var(--u)); }
.op-land .op-play-label { top: calc(58 * var(--u)); font-size: max(15px, calc(15 * var(--u))); line-height: max(20px, calc(20 * var(--u))); }
.op-land .op-play-dot { margin: 0 calc(6 * var(--u)); }
.op-land .op-name { top: calc(20 * var(--u)); font-size: calc(44 * var(--u)); }
.op-land .op-line { top: calc(72 * var(--u)); font-size: max(14px, calc(16 * var(--u))); line-height: max(19px, calc(22 * var(--u))); }
.op-land .op-links { top: calc(346 * var(--u)); font-size: max(13px, calc(13 * var(--u))); line-height: max(18px, calc(18 * var(--u))); }
.op-land .op-sep { margin: 0 calc(6 * var(--u)); }

/* ---------------------------------------------------------------- no JavaScript: the rendered poster + real text */
.op-noscript { position: relative; min-height: 100svh; display: grid; place-items: center; background: #fbfaff; overflow: hidden; }
.op-noscript picture, .op-noscript img { display: block; width: 100%; height: 100svh; object-fit: cover; }
.op-noscript-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-noscript-links { position: absolute; left: 16px; right: 16px; bottom: 11.5svh; margin: 0; text-align: center; font: 500 14px / 20px "OP Inter", system-ui, sans-serif; color: #8a87a0; }
.op-noscript-links a { color: #57536f; text-decoration: none; }
.op-noscript-links a:hover { color: #4a2fa0; text-decoration: underline; }
@media (max-width: 760px) { .op-noscript-links { bottom: 9svh; } }

@media (prefers-reduced-motion: reduce) {
  /* fades stay (they are not motion); the hover scale goes */
  .op-layer[data-state] .op-play-disc { transition: none; }
  .op-layer[data-state="poster"] .op-play:hover .op-play-disc { transform: none; }
}