/* monky — website v2 */

/* ---------- fonts (self-hosted, latin + latin-ext) ---------- */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --red:   #E21A26;
  --cream: #FEF5E3;
  --ink:   #141310;
  --fg:      var(--ink);      /* type and pixel art on red: ink, or cream in the cream version */
  --on-dark: #fff;            /* type over the dark sky of the photo */
  --sky:   #E5E5E7;  --g-light: #B4B4B4;  --g-mid: #838383;  --g-dark: #3D3D3D;

  --m: max(12px, 1.2vw);
  --hdr-h: 60px;                          /* measured by app.js */
  --sans:  'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

/* the cream version: <html data-ink="cream"> turns everything that is ink on red into cream */
:root[data-ink="cream"] { --fg: var(--cream); --on-dark: var(--cream); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--red);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: hidden; overflow-x: clip;
}
body {
  margin: 0;
  background: var(--red);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
canvas, video, svg { display: block; }
button { font: inherit; color: inherit; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- type roles ---------- */
.hl, .cta-t, .stmt, .mail {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -0.012em;
}
.lbl {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* the word "monky", drawn with the logo's letters (cap height .734em, y hangs below) */
.mk { display: inline-block; position: relative; width: 2.773em; height: .734em; vertical-align: baseline; letter-spacing: 0; }
.mk::before {
  content: ""; position: absolute; left: 0; bottom: -.182em; width: 100%; height: .923em;
  background: currentColor;
  -webkit-mask: url("brand/monky-word.svg") left bottom / 100% 100% no-repeat;
          mask: url("brand/monky-word.svg") left bottom / 100% 100% no-repeat;
}

/* ---------- header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--m);
  color: var(--ink);
  pointer-events: none;
  transition: opacity .25s, visibility .25s, color .25s;
}
.hdr { color: var(--fg); }
.hdr.on-photo { color: var(--ink); }           /* over the grey photo: dark, whatever the version */
.hdr.on-dark { color: var(--on-dark); }                  /* over the dark sky of the computer photo */
.hdr > * { pointer-events: auto; }
.hdr.is-off { opacity: 0; visibility: hidden; }
.hdr-logo { display: block; width: clamp(76px, 6vw, 110px); color: inherit; }
.wm {
  display: block; width: 100%; aspect-ratio: 1585 / 488;
  background: currentColor;
  -webkit-mask: url("brand/monky-wordmark.svg") center / 100% 100% no-repeat;
          mask: url("brand/monky-wordmark.svg") center / 100% 100% no-repeat;
}
.hdr-lang {
  display: flex; align-items: baseline;
  font: 700 19px/1 var(--sans); font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase;
  margin: -12px calc(-5px - .14em) 0 0;
}
.lang {
  position: relative; appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; padding: 12px 5px 14px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lang::after {
  content: ''; position: absolute; left: 5px; right: calc(5px + .14em); bottom: 8px; height: 2px;
  background: currentColor; opacity: 0;
}
.lang[aria-pressed="true"]::after { opacity: 1; }
.lang-sep { color: inherit; }
.hdr a:focus-visible, .lang:focus-visible, .studio a:focus-visible, .foot a:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* ---------- HOME ---------- */
.home { position: relative; }
.pin { position: relative; height: calc(100vh + var(--pin-vh, 90) * 1vh); }
@supports (height: 100svh) { .pin { height: calc(100svh + var(--pin-vh, 90) * 1svh); } }
.hero {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--red);
}
.hl {
  position: absolute; margin: 0;
  white-space: nowrap;
  font-size: clamp(44px, 9vw, 230px);
  color: var(--fg);
}
.hl-a { left: var(--m); top: calc(50% - 1.425em); }
.hl-b { right: var(--m); top: calc(50% - 1.425em); text-align: left; }
.trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.mark {
  position: absolute; left: 0; top: 0;
  width: var(--mw, 0px); height: var(--mh, 0px);
  background: var(--ink);
  overflow: hidden;
  -webkit-mask: url("brand/monky-mark-mask-720.webp") 0 0 / 100% 100% no-repeat;
          mask: url("brand/monky-mark-mask-720.webp") 0 0 / 100% 100% no-repeat;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  visibility: hidden;
}
.hero.is-ready .mark { visibility: visible; }
.knock {
  position: absolute; left: 0; top: 0;
  width: var(--hw, 100vw); height: var(--hh, 100vh);
  transform: translate(calc(-1 * var(--mx, 0px)), calc(-1 * var(--my, 0px)));
  pointer-events: none;
}
.knock .hl { color: var(--red); }
/* the cream version shows the logo itself, red square and cream face, sliding over the type */
:root[data-ink="cream"] .mark {
  background: url("brand/monky-mark-color-720.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask: none; mask: none;
}
:root[data-ink="cream"] .knock { display: none; }

@media (orientation: portrait) {
  .hl { font-size: 15.5vw; }
  .hl-a { top: 13vh; top: 13svh; }
  .hl-b { top: auto; bottom: 9vh; bottom: 9svh; text-align: right; }
}

/* ---------- LAVORI ---------- */
/* Wide screens: the photo covers the section, one screen tall (cut at the sides, which are sky).
   Tall screens (.is-tall): a band of sky for the line, then the whole photo, as wide as the screen. */
.lavori {
  position: relative;
  background: var(--lav-sky, #D1D1D2);         /* the photo's sky */
  color: var(--ink);
  height: 100vh; height: 100svh; min-height: 360px;
  overflow: hidden; overflow: clip;
  isolation: isolate;
}
.lavori.is-tall { height: auto; min-height: 0; padding-bottom: calc(100% * var(--lav-hw, 1.7778)); }
.lavori.is-zooming { overflow: visible; z-index: 30; pointer-events: none; }
.lavori.is-zooming .grain { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
.lavori.is-zooming .slab, .lavori.is-zooming .wins, .lavori.is-zooming .wins-over { will-change: transform; }
.city { position: absolute; inset: 0; }
.layer { position: absolute; left: 0; width: 100%; transform-origin: 0 0; pointer-events: none; }
.sky { top: -60%; height: 220%; background: var(--lav-sky, #E5E5E7); }
.lavori.is-tall .sky { top: 0; height: 100%; }   /* tall: no sky below the section when a zoom starts */
.fog { overflow: hidden; }
.fog::before, .fog::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
}
.fog::before { animation: fogdrift 96s linear infinite; }
.fog::after  { animation: fogdrift 64s linear infinite reverse; background-position: 37% 0; }
@keyframes fogdrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.fog-back { top: var(--fogb-t, 4%); height: var(--fogb-h, 22%); }
.fog-back::before, .fog-back::after { background-image: var(--fog-back, none); }
.fog-back::after { opacity: .65; }
.fog-front { top: auto; bottom: 0; height: 22%; opacity: .55; }   /* a light haze at the foot of the photo */
.fog-front::before, .fog-front::after { background-image: var(--fog-front, none); }
.fog-front::after { opacity: .55; }

/* the building: a photograph, seen straight on; the film windows sit on it */
.lavori { --cam: none; }
.slab, .wins, .wins-over {
  position: absolute;
  left: var(--fx, 0); top: var(--fy, 0); width: var(--fw, 100%); height: var(--fh, 100%);
  transform-origin: 50% 0;
  transform: var(--cam);
}
.lavori.is-tall .slab, .lavori.is-tall .wins, .lavori.is-tall .wins-over {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto; aspect-ratio: var(--lav-ar);
}
.lavori:not(.has-photo) .wins, .lavori:not(.has-photo) .wins-over { visibility: hidden; }
.wins-over { pointer-events: none; }
.win-ring { position: absolute; display: none; outline: 2px solid #fff; outline-offset: 3px; }
.win-ring.on { display: block; }
.slab { pointer-events: none; }
.slab > .facade-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
/* tall screens: the photo's sky melts into the band above it */
.lavori.is-tall .slab > .facade-img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%);
          mask-image: linear-gradient(to bottom, transparent, #000 5%);
}
.fog-back { display: none; }                 /* behind the photo: nothing to see */

/* film windows */
.win {
  position: absolute; display: block;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent;
  cursor: zoom-in;
  appearance: none; -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.win-room {
  position: absolute; overflow: hidden;
  background: var(--glass, #4B4B4C);
}
.win-dark, .win-refl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* the real glass, faintly in front of the film once it's lit (unlit windows match the photo exactly) */
.win-refl { opacity: 0; mix-blend-mode: screen; transition: opacity .3s; }
.win.is-on .win-refl { opacity: .2; }
.win-room video {
  position: absolute; left: -6px; top: -6px;
  width: calc(100% + 12px); height: calc(100% + 12px);
  object-fit: cover;
  opacity: 0;
  transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -6px), 0);
}
.win.is-on video { opacity: 1; animation: flick .3s step-end; }
/* the window head shades the top of the glass: the film sits back in the recess */
.win-room::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16%;
  background: linear-gradient(to bottom, rgba(20, 19, 16, .62), rgba(20, 19, 16, 0));
  opacity: 0; pointer-events: none;
}
.win.is-on .win-room::after { opacity: 1; }
@keyframes flick { 0% { opacity: 0; } 22% { opacity: .6; } 46% { opacity: .2; } 70%, 100% { opacity: 1; } }
.win-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.win-glare { position: absolute; pointer-events: none; transition: opacity .25s; }
.win:hover .win-glare, .win:focus-visible .win-glare, .win.is-target .win-glare { opacity: 0; }
.win:focus { outline: none; }
/* on the whole tower the windows are small: a finger can land up to halfway to the next one
   (app.js works out how far that is on the photo) */
.lavori.is-tall .win::before { content: ''; position: absolute; left: var(--hl, 0); right: var(--hr, 0); top: var(--ht, 0); bottom: var(--hb, 0); }
.win-tip {
  position: absolute; left: 0; top: 0; z-index: 9;
  width: max-content; max-width: min(410px, 46vw);
  padding: 9px 11px 10px;
  background: #000; color: #fff;
  text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.win-tip.on { opacity: 1; visibility: visible; }
.wl-t { display: block; font: 400 22px/1.02 var(--serif); letter-spacing: -0.01em; }
.wl-m {
  display: block; margin-top: 7px;
  font: 700 12px/1.4 var(--sans); font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase;
}
.wl-m .spec { display: block; }

/* the "click on a window" line */
/* wide screens: on the sky, left of the building (it wraps, and app.js makes it smaller if a word
   still doesn't fit); white where the photo's sky is dark */
.cta {
  position: absolute; z-index: 7;
  left: var(--m); top: calc(var(--hdr-h) + 1.4vw);
  max-width: calc(var(--cta-w, 100vw) - var(--m) - 12px);
  display: flex; align-items: flex-start; gap: 1.2vw;
  pointer-events: none;
  transition: opacity .2s;
}
.cta-t { margin: 0; min-width: 0; font-size: 2.2vw; color: var(--ink); text-wrap: balance; }
.lavori.sky-dark .cta-t { color: var(--on-dark); }
.cta-arrow { flex: none; }
.lavori.is-zooming .cta, .lavori.is-open .cta { opacity: 0; }
.lavori:not(.is-tall).cta-stuck .cta { opacity: 0; }
/* tall screens: a band of sky above the building, sticky inside the section */
.lavori.is-tall .cta {
  position: sticky; left: 0; top: 0; max-width: none;
  padding: calc(var(--hdr-h) + 1.2vw) var(--m) 3vw;
  align-items: center;
  transition: opacity .2s, background-color .2s;
}
.lavori.is-tall .cta-t { white-space: nowrap; }
.lavori.is-tall.cta-stuck .cta { background-color: var(--lav-sky, #D1D1D2); }

/* grain: fixed to the screen while the section is on it */
.grain-wrap { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.grain { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.grain::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(20, 19, 16, 0) 55%, rgba(20, 19, 16, .16) 100%);
}
.grain::before {
  content: ''; position: absolute; left: -256px; top: -256px; right: -256px; bottom: -256px; opacity: .07;
  background-image: var(--grain-img, none);
  background-size: var(--grain-size, 128px) var(--grain-size, 128px);
  animation: grain 1s step-end infinite;
}
@keyframes grain {
  0%      { transform: translate3d(0, 0, 0); }
  8.333%  { transform: translate3d(-61px, 23px, 0); }
  16.667% { transform: translate3d(37px, -88px, 0); }
  25%     { transform: translate3d(-104px, -41px, 0); }
  33.333% { transform: translate3d(79px, 112px, 0); }
  41.667% { transform: translate3d(-17px, 66px, 0); }
  50%     { transform: translate3d(118px, -9px, 0); }
  58.333% { transform: translate3d(-92px, 97px, 0); }
  66.667% { transform: translate3d(14px, -121px, 0); }
  75%     { transform: translate3d(-48px, -73px, 0); }
  83.333% { transform: translate3d(101px, 52px, 0); }
  91.667% { transform: translate3d(-125px, 5px, 0); }
}
.lavori.is-paused .fog::before, .lavori.is-paused .fog::after, .lavori.is-paused .grain::before { animation-play-state: paused; }

@media (max-width: 759.98px) {
  .cta { gap: 2.4vw; }
  .cta-t { font-size: 5.4vw; }
}

/* ---------- STUDIO ---------- */
.studio {
  position: relative;
  background: var(--red);
  color: var(--fg);
  display: grid;
  min-height: 100vh; min-height: 100svh;
}
.jungle { position: relative; min-height: 0; }
.jungle canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.studio-text { position: relative; z-index: 1; }
.studio .lbl { font-size: 19px; line-height: 1.1; margin: 0 0 .75em; }
.stmt { margin: 0; font-size: clamp(26px, 3.6vw, 84px); }
.stmt + .stmt { margin-top: .75em; }
.stmt + .lbl { margin-top: 2.4em; }
.mail-p { margin: 0; }
.mail {
  display: inline-block;
  font-size: clamp(30px, 4.45vw, 108px);
  text-transform: none;
  color: var(--fg);
  text-decoration: none;
}
.mail:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
@media (orientation: landscape) {
  .studio { grid-template-columns: 48vw 1fr; }
  .studio-text {
    grid-column: 1; grid-row: 1;
    align-self: center;
    padding: calc(var(--hdr-h) + 3vw) 0 3vw var(--m);
  }
  .jungle { grid-column: 2; grid-row: 1; }
}
@media (orientation: portrait) {
  .studio { grid-template-rows: auto 1fr; }
  .jungle { height: 55vh; height: 55svh; }
  .studio-text { padding: 2vw var(--m) 10vw; }
  .stmt { font-size: 8.5vw; }
  .mail { font-size: 9.4vw; }
}

/* footer: still the red poster, label style, never smaller than 19px */
/* each label carries its dot in a slot on its left; the footer starts one slot left of the margin and
   is cut there, so the first label of every row never shows its dot, however the labels wrap */
.foot {
  --dot: 38px;
  background: var(--red);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 0;
  margin-left: calc(var(--m) - var(--dot));
  padding: 0 var(--m) calc(var(--m) * 2) 0;
  clip-path: inset(-20px -20px -20px calc(var(--dot) - 6px));
}
.foot .lbl { font-size: 19px; line-height: 1.25; color: var(--fg); text-decoration: none; white-space: nowrap; }
.foot .lbl { margin-left: var(--dot); }
.foot .lbl::before { content: '·' / ''; display: inline-block; width: var(--dot); margin-left: calc(-1 * var(--dot)); text-align: center; letter-spacing: 0; }
.foot a.lbl { text-decoration: none; }
.foot a.lbl:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (orientation: landscape) { .foot { max-width: calc(48vw - var(--m) + var(--dot)); } }
@media (max-width: 759.98px) {
  .foot { flex-direction: column; align-items: flex-start; margin-left: 0; padding-left: var(--m); clip-path: none; }
  .foot .lbl { margin-left: 0; }
  .foot .lbl::before { content: none; }
}

/* ---------- player ---------- */
.player { position: fixed; inset: 0; z-index: 60; color: #fff; }
.player[hidden] { display: none; }
.pl-stage { position: absolute; inset: 0; background: #000; opacity: 0; }
.player.is-film .pl-stage { opacity: 1; transition: opacity .2s linear; }
.pl-video, .pl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pl-poster[hidden], .pl-dots[hidden] { display: none; }
.pl-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pl-ui { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none; }
.player.ui-on .pl-ui { opacity: 1; }
.player.ui-on .pl-ui > * { pointer-events: auto; }
.player.no-cursor { cursor: none; }
.pl-head { position: absolute; left: var(--m); top: var(--m); max-width: min(70vw, 900px); pointer-events: none !important; }
.pl-title { margin: 0; font: 400 clamp(28px, 3.2vw, 56px)/1 var(--serif); letter-spacing: -0.01em; color: #fff; }
.pl-meta {
  margin: .7em 0 0;
  font: 700 13px/1.45 var(--sans); font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.pl-close {
  position: absolute; right: calc(var(--m) - 12px); top: calc(var(--m) - 12px);
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  padding: 12px;
  font: 700 13px/1 var(--sans); font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; cursor: pointer;
}
.pl-close .x { font-variant-emoji: text; letter-spacing: 0; }
.pl-close:focus-visible, .pl-big:focus-visible, .pl-bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; cursor: pointer; touch-action: none; }
.pl-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .3); }
.pl-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #fff; transform-origin: 0 0; transform: scaleX(var(--p, 0)); }
.pl-big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 16px;
  cursor: pointer;
}
.pl-big[hidden] { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pin { height: auto; }
  .hero { position: relative; }
  .fog::before, .fog::after, .grain::before { animation: none; }
  .win.is-on video { animation: none; }
  .hdr, .win-glare, .pl-ui { transition: none; }
}