/* 25 Film · "Screening room"
   The room is dark and neutral (chroma 0). The only color comes from the work:
   each production's key art sets --room / --glow for its own section (see build.ts → tint()).

   Type: Archivo (variable width) for titles, set wide like opening title cards;
         Source Serif 4 for loglines and prose, like press notes.               */

:root {
  --screen: oklch(0.145 0 0);
  --surface: oklch(0.19 0 0);
  --rule: oklch(0.33 0 0);
  --text: oklch(0.96 0 0);
  --text-2: oklch(0.8 0 0);
  --text-3: oklch(0.7 0 0);
  --light: oklch(0.97 0 0);
  --error: oklch(0.78 0.13 30);

  --room: var(--screen);
  --glow: oklch(0.35 0 0);

  --f-title: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif 4", Georgia, serif;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --sp: clamp(80px, 10vw, 160px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 20;
  --z-header: 30;
  --z-skip: 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--screen);
  color: var(--text);
  font: 400 18px/1.65 var(--f-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; box-shadow: 0 0 0 5px var(--screen); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: var(--z-skip); background: var(--light); color: var(--screen); padding: 12px 18px; font: 600 15px var(--f-title); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain.inline { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---------- type ---------- */
.h-hero, .h-display, .h-name {
  font-family: var(--f-title);
  font-stretch: 118%;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.h-hero { font-size: clamp(42px, 6.2vw, 94px); font-weight: 780; line-height: 0.94; letter-spacing: -0.005em; max-width: 14ch; }
.h-display { font-size: clamp(38px, 5vw, 76px); font-weight: 760; line-height: 0.96; }
.h-name { font-size: clamp(26px, 3.2vw, 46px); font-weight: 720; line-height: 1; }
.h-section { font: 620 clamp(24px, 2.3vw, 32px)/1.15 var(--f-title); margin: 0; text-wrap: balance; }
.h-small { font: 600 15px/1.3 var(--f-title); color: var(--text-2); margin: 0 0 10px; }
.h-display a, .h-section a { text-decoration: none; }
.h-display a:hover, .h-section a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.meta { font: 450 15px/1.45 var(--f-title); color: var(--text-2); margin: 0; }
.lead { font-size: clamp(20px, 1.7vw, 23px); line-height: 1.5; max-width: 44ch; margin: 24px 0 0; text-wrap: pretty; }
.logline { font-size: 20px; line-height: 1.55; max-width: 46ch; margin: 0; text-wrap: pretty; }
.logline.big { font-size: clamp(20px, 1.8vw, 24px); }
.prose p { font-size: 19px; line-height: 1.7; margin: 0 0 1.1em; max-width: 64ch; text-wrap: pretty; }
.note { font: 400 14px/1.5 var(--f-title); color: var(--text-3); margin: 10px 0 0; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px;
  background: var(--light); color: var(--screen);
  font: 600 16px/1 var(--f-title); text-decoration: none;
  border: 1.5px solid var(--light); border-radius: 3px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: transparent; color: var(--light); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn-quiet { background: transparent; color: var(--light); }
.btn-quiet:hover { background: var(--light); color: var(--screen); }
.text-link { font: 600 16px/1.3 var(--f-title); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: oklch(0.145 0 0 / 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.logo { display: inline-flex; }
.logo-img { width: 68px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { font: 500 16px var(--f-title); text-decoration: none; padding: 10px 0; color: var(--text-2); transition: color .2s; }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--text); }
.site-nav ul a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--text); }
.lang { font: 500 15px var(--f-title); color: var(--text-2); text-decoration: none; padding: 10px 0; }
.lang:hover { color: var(--text); }
.menu-btn { display: none; background: none; border: 1px solid var(--rule); min-height: 44px; padding: 0 18px; border-radius: 3px; font: 600 15px var(--f-title); cursor: pointer; }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .site-nav {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--screen); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 28px;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 18px 0; font: 700 26px var(--f-title); font-stretch: 112%; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--rule); }
  .site-nav ul a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-underline-offset: 6px; }
  .site-nav .lang { padding: 20px 0; font-size: 17px; }
  .site-nav .btn { min-height: 54px; }
}

/* ---------- hero: a contact sheet of real frames, drifting like film through a gate ---------- */
.hero { position: relative; min-height: min(90vh, 920px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.reel { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; padding: 8px 0; transform: rotate(-4deg) scale(1.12); }
.reel::after {
  content: ""; position: absolute; inset: -10%;
  background:
    linear-gradient(to top, var(--screen) 8%, oklch(0.145 0 0 / 0.86) 40%, oklch(0.145 0 0 / 0.35) 75%, oklch(0.145 0 0 / 0.55)),
    linear-gradient(to right, oklch(0.145 0 0 / 0.75), transparent 60%);
}
.reel-row { overflow: hidden; min-height: 0; }
.reel-track { display: flex; gap: 8px; height: 100%; width: max-content; animation: drift var(--s) linear infinite; animation-direction: var(--d); }
.reel-track img { height: 100%; width: auto; aspect-ratio: 772 / 722; object-fit: cover; filter: saturate(0.9); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reel.paused .reel-track { animation-play-state: paused; }

.hero-copy { padding-top: 160px; padding-bottom: clamp(56px, 8vw, 104px); }
.presents { font: italic 400 clamp(19px, 1.6vw, 22px)/1.3 var(--f-text); color: var(--text-2); margin: 0 0 18px; }
.hero-lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; max-width: 40ch; margin: 28px 0 0; text-wrap: pretty; }
.motion-toggle {
  position: absolute; right: var(--gutter); bottom: 24px;
  background: oklch(0.145 0 0 / 0.7); border: 1px solid var(--rule); border-radius: 3px;
  min-height: 40px; padding: 0 14px; font: 500 14px var(--f-title); color: var(--text-2); cursor: pointer;
}
.motion-toggle:hover { color: var(--text); border-color: var(--text-3); }
.motion-toggle.inline { position: static; margin-top: 18px; }

/* Title-card entrance: the copy is visible by default; motion only adds to it. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel-track, .roll { animation: none !important; }
  .motion-toggle { display: none; }
}

/* ---------- sections ---------- */
.section { padding-top: var(--sp); }
.section.tight { padding-top: 40px; }
main > :last-child:not(.title-card) { padding-bottom: var(--sp); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.page-head { padding: clamp(64px, 9vw, 128px) 0 24px; }
.crumbs { font: 500 15px var(--f-title); color: var(--text-2); margin-bottom: 24px; }
.crumbs a { color: var(--text-2); text-underline-offset: 4px; }
.crumbs a:hover { color: var(--text); }

/* ---------- latest releases: each title gets its own room, tinted by its key art ---------- */
.now { padding-top: var(--sp); }
.now .section-head { margin-bottom: 0; padding-bottom: 36px; }
.feature { background: var(--room); padding: clamp(56px, 8vw, 120px) 0; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.feature.flip .feature-pic { order: 2; }
.feature-pic { display: block; position: relative; }
.feature-pic::before { content: ""; position: absolute; inset: 12% 6%; background: var(--glow); filter: blur(70px); opacity: .9; z-index: 0; }
.feature-pic img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.8); }
.feature-copy { display: grid; gap: 22px; justify-items: start; }
.feature-copy .h-display { font-size: clamp(40px, 5.4vw, 84px); }
@media (max-width: 800px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature.flip .feature-pic { order: 0; }
  .feature-pic { max-width: 420px; }
}

/* ---------- international ---------- */
.intl { padding-top: var(--sp); }
.intl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 104px); }
.intl .h-display { position: sticky; top: 120px; align-self: start; }
.intl .lead { margin-top: 0; }
.services { margin: 40px 0 44px; }
.services div { padding: 24px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; }
.services div:last-child { border-bottom: 1px solid var(--rule); }
.services dt { font: 650 19px/1.35 var(--f-title); }
.services dd { margin: 0; color: var(--text-2); font-size: 17px; line-height: 1.6; }
@media (max-width: 800px) {
  .intl-grid { grid-template-columns: 1fr; }
  .intl .h-display { position: static; }
  .services div { grid-template-columns: 1fr; }
}

/* ---------- contact sheet (frames) ---------- */
.sheet { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sheet-stills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .sheet-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 10px; } }
.frame a { display: grid; gap: 4px; text-decoration: none; }
.frame-pic { display: block; overflow: hidden; background: var(--room, var(--surface)); margin-bottom: 12px; }
.frame-pic.is-poster { aspect-ratio: 4 / 5; }
.frame-pic.is-still { aspect-ratio: 772 / 722; }
.sheet-work .frame-pic { aspect-ratio: 4 / 5; }
.frame-pic img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .35s var(--ease), transform .6s var(--ease); }
.frame a:hover .frame-pic img, .frame a:focus-visible .frame-pic img { opacity: 1; transform: scale(1.035); }
.frame-title { font: 620 17px/1.3 var(--f-title); }
.frame a:hover .frame-title { text-decoration: underline; text-underline-offset: 4px; }
.frame-meta { font: 400 14px/1.45 var(--f-title); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .frame-pic img { transition: none; } .frame a:hover .frame-pic img { transform: none; } }

/* ---------- directors ---------- */
.dir-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dir-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto); align-items: center; gap: 16px 40px; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.dir-name { font-family: var(--f-title); font-stretch: 118%; font-weight: 740; text-transform: uppercase; font-size: clamp(28px, 4vw, 58px); line-height: 1; }
.dir-strip { display: flex; gap: 6px; }
.dir-strip img { height: 64px; width: auto; aspect-ratio: 772 / 722; object-fit: cover; opacity: .55; transition: opacity .3s var(--ease); }
.dir-list a:hover .dir-strip img { opacity: 1; }
.dir-list .meta { text-align: right; }
@media (max-width: 800px) {
  .dir-list a { grid-template-columns: 1fr; gap: 12px; }
  .dir-list .meta { text-align: left; }
}
.dir-row { padding: 48px 0; border-top: 1px solid var(--rule); }

/* ---------- end credits ---------- */
.credits { padding-top: var(--sp); text-align: center; }
.roll-window {
  height: 620px; overflow: hidden; margin-top: 40px;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.roll { padding: 310px 0; animation: roll 110s linear infinite; }
.roll-window.paused .roll { animation-play-state: paused; }
@keyframes roll { to { transform: translateY(-100%); } }
.roll-block { margin-bottom: 96px; }
.roll-block h3 { font: 500 16px var(--f-title); color: var(--text-3); margin: 0 0 24px; }
.roll-big { list-style: none; margin: 0; padding: 0; }
.roll-big li { font-family: var(--f-title); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.3; }
.roll-cols { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; columns: 2; column-gap: 56px; }
.roll-cols li { font-size: 19px; line-height: 1.95; break-inside: avoid; }
.roll-end .logo-img { width: 96px; margin: 0 auto 18px; }
.roll-end p { font: italic 400 18px var(--f-text); color: var(--text-2); margin: 0; }
@media (max-width: 560px) { .roll-cols { columns: 1; } .roll-window { height: 520px; } }
@media (prefers-reduced-motion: reduce) {
  .roll-window { height: auto; -webkit-mask-image: none; mask-image: none; }
  .roll { padding: 0; }
}

/* ---------- closing title card ---------- */
.title-card { padding: clamp(96px, 12vw, 184px) 0; margin-top: var(--sp); border-top: 1px solid var(--rule); text-align: center; }
.title-card .h-display { max-width: 16ch; margin: 0 auto; }
.title-card-p { color: var(--text-2); margin: 24px auto 0; max-width: 44ch; }
.title-card .actions { justify-content: center; margin-top: 32px; }
.mail-link { display: inline-block; font-family: var(--f-title); font-stretch: 112%; font-weight: 640; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.1; margin-top: 36px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; word-break: break-word; }
.mail-link:hover { text-decoration-thickness: 3px; }
.contact-info .mail-link { margin-top: 0; font-size: clamp(24px, 2.4vw, 34px); }

/* ---------- work filters ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); position: sticky; top: 76px; z-index: var(--z-sticky); background: var(--screen); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.tab { background: none; border: 0; min-height: 44px; padding: 0; cursor: pointer; font: 560 17px var(--f-title); color: var(--text-2); box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.tab:hover { color: var(--text); }
.tab[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.tab .count { font-weight: 400; color: var(--text-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
.filter-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-fields input, .filter-fields select { min-height: 44px; background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 0 14px; min-width: 250px; font: 400 16px var(--f-title); }
.filter-fields input::placeholder { color: var(--text-3); }
@media (max-width: 720px) { .filters { position: static; } .filter-fields, .filter-fields label, .filter-fields input, .filter-fields select { width: 100%; min-width: 0; } }
.result-count { margin: 24px 0 28px; }
.empty { padding: 72px 0; text-align: center; }
.empty p { margin: 0 auto 24px; color: var(--text-2); max-width: 40ch; }

/* ---------- project ---------- */
.project { background: linear-gradient(var(--room) 0, var(--room) 72%, var(--screen)); padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.project-head { margin-bottom: 40px; }
.project-sub { font: 500 clamp(17px, 1.5vw, 20px)/1.4 var(--f-title); color: var(--text-2); margin: 18px 0 0; }
.player-wrap { position: relative; }
.player-wrap::before { content: ""; position: absolute; inset: 8% 10%; background: var(--glow); filter: blur(90px); opacity: .8; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: 0 40px 100px -40px oklch(0 0 0 / 0.9); }
.player img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px 0 22px; background: var(--light); color: var(--screen); border: 0; border-radius: 999px; font: 650 17px var(--f-title); white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease); }
.play:hover { transform: translate(-50%, -50%) scale(1.05); }
.player-note { position: relative; font: 400 14px/1.5 var(--f-title); color: var(--text-3); margin: 12px 0 0; }
.project-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); margin-top: 56px; align-items: start; }
.project-grid > div { display: grid; gap: 24px; justify-items: start; }
@media (max-width: 900px) { .project-grid { grid-template-columns: 1fr; } }
.credits-dl { margin: 0; }
.credits-dl div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid oklch(1 0 0 / 0.14); }
.credits-dl div:last-child { border-bottom: 1px solid oklch(1 0 0 / 0.14); }
.credits-dl dt { font: 500 15px/1.6 var(--f-title); color: var(--text-2); }
.credits-dl dd { margin: 0; font: 500 16px/1.6 var(--f-title); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 80px; border-top: 1px solid oklch(1 0 0 / 0.14); }
.pager a { display: grid; gap: 6px; padding: 26px 0 0; text-decoration: none; font: 650 20px var(--f-title); }
.pager a[rel="next"] { text-align: right; }
.pager a:hover span:last-child { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.about-fact { font: italic 400 clamp(22px, 2vw, 28px)/1.45 var(--f-text); margin: 0; border-top: 1px solid var(--rule); padding-top: 24px; }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 44px; }
.founders p { margin: 16px 0 0; color: var(--text-2); max-width: 44ch; }
.partner-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.name-list { list-style: none; padding: 0; margin: 24px 0 0; }
.name-list li { font-family: var(--f-title); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; }
@media (max-width: 800px) { .about-grid, .founders, .partner-cols { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.enquiry { display: grid; gap: 24px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font: 600 16px var(--f-title); padding: 0; margin-bottom: 8px; }
.field em { font: 400 14px var(--f-title); font-style: normal; color: var(--text-3); margin-left: 6px; }
.enquiry input, .enquiry textarea { width: 100%; background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 13px 14px; min-height: 50px; font: 400 17px var(--f-title); }
.enquiry input::placeholder, .enquiry textarea::placeholder { color: var(--text-3); }
.enquiry input:hover, .enquiry textarea:hover { border-color: var(--text-3); }
.enquiry [aria-invalid="true"] { border-color: var(--error); }
.err { color: var(--error); font: 500 15px var(--f-title); }
.err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; font: 500 16px var(--f-title); }
.chip span:hover { border-color: var(--text-3); }
.chip input:checked + span { background: var(--light); color: var(--screen); border-color: var(--light); }
.chip input:focus-visible + span { outline: 2px solid var(--light); outline-offset: 3px; }
.sent { background: var(--surface); border: 1px solid var(--rule); padding: 16px 18px; margin: 0; font: 500 16px var(--f-title); }
.contact-info { display: grid; gap: 40px; }
.contact-info address { font-size: 19px; margin-bottom: 10px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 64px 0 32px; font: 400 15px/1.8 var(--f-title); color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand p { max-width: 30ch; margin: 18px 0 0; }
.footer-grid a { color: var(--text); text-underline-offset: 3px; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--text-3); }
.footer-base a { color: var(--text-2); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

.nf { min-height: 56vh; }

/* Narrow screens: pull the title width in so long Turkish words (ÜRETİYORUZ, SEKİZİNCİ) never overflow. */
@media (max-width: 560px) {
  .h-hero, .h-display, .h-name, .dir-name, .name-list li, .roll-big li { font-stretch: 104%; }
  .h-hero { font-size: clamp(32px, 10.5vw, 46px); }
  .h-display, .feature-copy .h-display { font-size: clamp(30px, 9.5vw, 42px); overflow-wrap: anywhere; hyphens: auto; }
  .dir-name { font-size: clamp(24px, 8vw, 34px); }
  .hero-copy { padding-top: 120px; }
  .reel { grid-template-rows: repeat(3, 1fr); }
}

/* Review fixes (Claude + GPT round 2) */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, oklch(0.145 0 0 / 0.9) 0%, oklch(0.145 0 0 / 0.72) 42%, transparent 72%); }
.presents { color: var(--text); }
.made-for { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid oklch(1 0 0 / 0.16); max-width: 620px; font: 600 15px/1.6 var(--f-title); color: var(--text); }
.made-for > span:first-child { color: var(--text-2); font-weight: 450; margin-right: 10px; }
.motion-toggle { bottom: 32px; background: var(--screen); color: var(--text); border-color: var(--text-3); min-height: 44px; font-size: 15px; }
.lang { font-size: 16px; color: var(--text-2); }
.motion-toggle:not(.inline) { top: 24px; bottom: auto; }

/* Round 3: credit the background frames; stronger credibility row */
.reel-caption { position: absolute; right: var(--gutter); bottom: 32px; margin: 0; max-width: 34ch; text-align: right; font: 500 14px/1.45 var(--f-title); }
.reel-caption a { color: var(--text); text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.4); text-underline-offset: 4px; background: oklch(0.145 0 0 / 0.72); padding: 2px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reel-caption a:hover { text-decoration-color: currentColor; }
.made-for { font-size: 16px; }
.made-for > span:first-child { color: var(--text-2); }
@media (max-width: 900px) { .reel-caption { display: none; } }
/* Round 3b: the whole title card fits in one desktop viewport */
.hero { min-height: calc(100svh - 76px); max-height: 980px; }
.hero-copy { padding-top: 88px; padding-bottom: 44px; }
.h-hero { font-size: clamp(42px, 5.6vw, 86px); }
.hero-lede { margin-top: 22px; }
.hero .actions { margin-top: 32px; }
.made-for { margin-top: 32px; }
.reel-caption { bottom: 44px; }
@media (max-height: 760px) and (min-width: 901px) { .hero { max-height: none; } }

/* ===== Round 4: split title card. Text on a solid panel; the reel plays only on the right. ===== */
.hero { display: grid; align-items: end; min-height: calc(100svh - 76px); max-height: 980px; }
.hero::before { content: none; }
.reel { left: 44%; inset-block: 0; right: 0; transform: rotate(-4deg) scale(1.18); transform-origin: left center; }
.reel::after { inset: -12%; background:
    linear-gradient(to right, var(--screen) 0%, oklch(0.145 0 0 / 0.55) 14%, transparent 34%),
    linear-gradient(to top, oklch(0.145 0 0 / 0.65), transparent 30%); }
.reel-track img { filter: none; }
.hero-copy { position: relative; padding-top: 72px; padding-bottom: 56px; }
.hero-copy > * { max-width: 600px; }
.hero-copy .h-hero { max-width: 11ch; }
.kicker { font: 600 17px/1.4 var(--f-title); color: var(--text); margin: 0 0 22px; }
.made-for { margin: 26px 0 0; padding: 0; border: 0; font: 600 16px/1.6 var(--f-title); }
.made-for > span:first-child { color: var(--text-2); font-weight: 450; margin-right: 8px; }
.hero .actions { margin-top: 34px; }
.text-link.pad { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.reel-ui { position: absolute; right: var(--gutter); top: 24px; bottom: 32px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.reel-ui > * { pointer-events: auto; }
.motion-toggle, .motion-toggle:not(.inline) { position: static; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: oklch(0.145 0 0 / 0.78); color: var(--text); border: 1px solid oklch(1 0 0 / 0.4); border-radius: 3px; font: 500 15px var(--f-title); }
.motion-toggle::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.motion-toggle[aria-pressed="true"]::before { width: 0; height: 0; background: none; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.reel-caption { position: static; max-width: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: oklch(0.145 0 0 / 0.78); border: 1px solid oklch(1 0 0 / 0.4); border-radius: 3px; font: 500 15px var(--f-title); color: var(--text); text-decoration: none; }
.reel-caption:hover { border-color: var(--text); }
@media (max-width: 900px) {
  .hero { min-height: 0; max-height: none; display: block; }
  .reel { position: relative; left: 0; height: 300px; transform: rotate(-4deg) scale(1.2); transform-origin: center; }
  .reel::after { background: linear-gradient(to top, var(--screen) 0%, transparent 45%); }
  .reel-ui { top: 16px; bottom: auto; right: 16px; }
  .reel-ui .reel-caption { display: none; }
  .hero-copy { padding-top: 24px; padding-bottom: 56px; }
}
@media (min-width: 901px) {
  .reel { left: 53%; }
  .hero-copy > * { max-width: 540px; }
  .hero-lede { max-width: 36ch; }
  .h-hero { font-size: clamp(42px, 5.2vw, 80px); }
}
.made-for span[lang] { white-space: nowrap; } @media (min-width: 901px) { .hero-copy > .made-for { max-width: 620px; } }

/* ===== Round 5 ===== */
.hero { align-items: center; }
.hero-copy { padding-top: 56px; padding-bottom: 56px; }
.logo-img { width: 84px; }
.site-nav ul a, .lang { color: var(--text); }
.site-nav ul a:hover { box-shadow: inset 0 -2px 0 oklch(1 0 0 / 0.4); }
.kicker { font-size: 18px; }
.made-for > span:first-child { color: var(--text); font-weight: 450; }
.made-for a { text-decoration: none; }
.made-for a:hover { text-decoration: underline; text-underline-offset: 4px; }
.motion-toggle, .motion-toggle:not(.inline), .reel-caption { background: oklch(0.12 0 0); border-color: oklch(1 0 0 / 0.5); }
.reel-caption { gap: 6px; max-width: 520px; flex-wrap: wrap; justify-content: flex-end; padding: 8px 14px; line-height: 1.4; }
.reel-caption .cap-k { color: var(--text-2); }
.reel-caption .cap-v { text-decoration: underline; text-underline-offset: 4px; }
.hero-copy .h-hero { max-width: 12.5ch; } .reel-caption { display: block; text-align: right; }

/* ===== Round 6 ===== */
.hero { max-height: 900px; }
.kicker { font: 600 14px/1.4 var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.made-for { margin-top: 30px; max-width: 620px; }
.made-for-k { font: 450 15px var(--f-title); color: var(--text-2); margin: 0 0 10px; }
.made-for ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.made-for li a { font-family: var(--f-title); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.made-for li a:hover { text-decoration: underline; text-underline-offset: 5px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; font: 500 15px var(--f-title); color: var(--text-3); }
.lang-toggle [aria-current] { color: var(--text); font-weight: 650; }
.lang-toggle a { color: var(--text-2); text-decoration: none; padding: 10px 2px; }
.lang-toggle a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.reel-caption { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 14px 8px 8px; background: oklch(0.1 0 0); font-size: 15px; max-width: 460px; }
.reel-caption img { width: 64px; height: 60px; object-fit: cover; flex: none; }
.reel-caption .cap-k { color: var(--text); font-weight: 650; display: block; }
.reel-caption .cap-t { display: block; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(s); grid-row: span 2; font-family: var(--f-title); font-stretch: 118%; font-weight: 760; font-size: 34px; line-height: 1; }
.steps h3 { font: 650 19px/1.35 var(--f-title); margin: 0; }
.steps p { margin: 0; color: var(--text-2); font-size: 17px; }
@media (max-width: 1100px) and (min-width: 901px) { .site-nav ul { gap: 20px; } .site-nav { gap: 22px; } }

/* ===== Round 7 ===== */
.made-for-k { color: var(--text); }
.made-for ul { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px 28px; }
.made-for li a { color: oklch(0.86 0 0); font-weight: 640; font-size: 16px; }
.made-for li a:hover { color: var(--text); }
.lang-toggle { color: oklch(0.6 0 0); }
.lang-toggle a { color: oklch(0.82 0 0); }
.lang-toggle [aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.reel-caption { min-height: 76px; padding: 8px 16px 8px 8px; font-size: 16px; background: #000; }
.reel-caption .cap-t { display: grid; gap: 2px; }
.reel-caption .cap-k { font-weight: 450; color: var(--text-2); font-size: 14px; }
.reel-caption .cap-n { font-weight: 650; }
.reel-caption .cap-v { font-weight: 600; }
.reel { inset-block: 28px; transform: rotate(-3deg) scale(1.08); }
@media (max-width: 560px) { .made-for ul { grid-template-columns: repeat(3, max-content); } }
.made-for ul { display: flex; flex-wrap: wrap; max-width: 410px; gap: 10px 28px; }

/* ===== Round 8: credits with titles, not just platform names ===== */
.made-for { margin-top: 28px; max-width: 560px; }
.made-for-k { font: 600 13px/1.4 var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; }
.made-for dl { margin: 0; display: grid; gap: 6px; }
.made-for dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.made-for dt { font-family: var(--f-title); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; color: var(--text); }
.made-for dd { margin: 0; font: 500 16px/1.5 var(--f-title); color: oklch(0.88 0 0); }
.made-for dd a { text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.3); text-underline-offset: 4px; }
.made-for dd a:hover { text-decoration-color: currentColor; color: var(--text); }
.proof { margin: 12px 0 0; font: 450 15px/1.5 var(--f-title); color: var(--text-2); }
.lang-toggle a, .lang-toggle [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 40px; }
.lang-toggle a { color: oklch(0.84 0 0); }
.reel { inset-block: 40px 28px; }
.reel-caption .cap-k { color: oklch(0.85 0 0); }
.hero-copy { padding-block: 40px; }
.hero-lede { font-size: clamp(18px, 1.45vw, 21px); }

/* ===== Round 9: framing by real orientation ===== */
/* Each frame knows whether its image is a poster (portrait) or a still (landscape).
   A sheet picks one frame shape; an image that doesn't match is shown whole ("contain")
   over a blurred, darkened copy of itself, instead of being cropped. */
.frame-pic { position: relative; isolation: isolate; aspect-ratio: 5 / 7; }
.sheet-work .frame-pic, .sheet-stills .frame-pic { aspect-ratio: 772 / 722; }
.frame-pic.is-poster, .frame-pic.is-still { aspect-ratio: inherit; }
.sheet .frame-pic { aspect-ratio: 5 / 7; }
.sheet-work .frame-pic, .sheet-stills .frame-pic { aspect-ratio: 772 / 722; }
.frame-pic::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg) center / cover; filter: blur(22px) brightness(.5) saturate(1.15); opacity: 0; }
.sheet:not(.sheet-work):not(.sheet-stills) .is-still::before,
.sheet-work .is-poster::before, .sheet-stills .is-poster::before { opacity: 1; }
.sheet:not(.sheet-work):not(.sheet-stills) .is-still img,
.sheet-work .is-poster img, .sheet-stills .is-poster img { object-fit: contain; opacity: 1; }
.sheet-work .is-poster img, .sheet-stills .is-poster img { padding: 8px 0; filter: drop-shadow(0 10px 24px oklch(0 0 0 / .6)); }

.feature-pic img { aspect-ratio: auto; height: auto; max-height: 82vh; object-fit: contain; }

.player.is-portrait { isolation: isolate; }
.player.is-portrait::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--bg) center / cover; filter: blur(36px) brightness(.45) saturate(1.2); }
.player.is-portrait img { object-fit: contain; opacity: 1; }
.player.is-portrait { background: transparent; }

/* ===== Footer: maker mark ===== */
.footer-links { display: inline-flex; align-items: center; gap: 6px; }
.made-by { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin-left: 10px; opacity: .35; transition: opacity .25s var(--ease); }
.made-by img { width: 12px; height: auto; }
.made-by:hover, .made-by:focus-visible { opacity: 1; }
.made-by-tip { position: absolute; right: 0; bottom: calc(100% + 8px); white-space: nowrap; padding: 6px 10px; border-radius: 3px; background: var(--light); color: var(--screen); font: 600 13px var(--f-title); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.made-by:hover .made-by-tip, .made-by:focus-visible .made-by-tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .made-by-tip { transition: none; transform: none; } }

/* ===== Mobile ===== */
@media (max-width: 900px) {
  .hero { max-height: none; }
  .header-row { min-height: 64px; }
  .logo-img { width: 64px; }
  .site-nav { inset: 64px 0 0 0; height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 40px; }
  .filters { top: 64px; }
}
@media (max-width: 560px) {
  .h-display, .feature-copy .h-display, .title-card .h-display { font-size: clamp(26px, 8.2vw, 40px); overflow-wrap: normal; hyphens: manual; }
  .h-hero { font-size: clamp(30px, 9.6vw, 44px); }
  .lead, .hero-lede { font-size: 18px; }
  .section { padding-top: 72px; }
  .feature { padding: 48px 0; }
  .feature-copy { gap: 16px; }
  .feature-pic { max-width: none; }
  .feature-pic img { max-height: 64vh; width: auto; max-width: 100%; margin: 0 auto; }
  .made-for dl div { grid-template-columns: 84px minmax(0, 1fr); }
  .title-card { padding: 80px 0; }
  .mail-link { font-size: clamp(24px, 7.4vw, 32px); }
  .footer-base { flex-direction: column; align-items: flex-start; }
  /* Format tabs scroll sideways in one row instead of wrapping into a block */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-snap-type: x proximity; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; scroll-snap-align: start; }
  .dir-strip { display: none; }
  .services div { padding: 18px 0; }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .steps li::before { font-size: 26px; }
}

@media (max-width: 560px) {
  .tabs { margin: 0; padding: 0; width: 100%; gap: 4px 22px; }
  .page-head { padding: 44px 0 8px; }
  .play { min-height: 46px; padding: 0 20px 0 16px; font-size: 15px; gap: 8px; }
  .play svg { width: 16px; height: 16px; }
  .project-head { margin-bottom: 28px; }
  .project-grid { margin-top: 36px; }
  .logline.big { font-size: 19px; }
  .credits-dl div { grid-template-columns: 96px 1fr; }
  .pager { margin-top: 48px; }
  .pager a { font-size: 17px; }
  .dir-name { font-size: clamp(22px, 7.4vw, 30px); }
  .contact-info { gap: 28px; }
}

/* ===== Mobile header: text CTA + icon menu ===== */
.hdr-cta { display: none; }
@media (max-width: 900px) {
  .header-row { gap: 12px; }
  .logo { margin-right: auto; }
  .hdr-cta { display: inline-flex; min-height: 40px; padding: 0 16px; }
  .hdr-cta[aria-current="page"] { background: transparent; color: var(--light); }
  .menu-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; justify-content: center; margin-right: -10px; }
  .burger { position: relative; width: 22px; height: 10px; display: block; }
  .burger i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
  .burger i:first-child { top: 0; }
  .burger i:last-child { top: 8px; }
  .menu-btn[aria-expanded="true"] .burger i:first-child { top: 4px; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .burger i:last-child { top: 4px; transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .burger i { transition: none; } }

/* ===== 404: a working clapperboard ===== */
.nf { padding: clamp(56px, 8vw, 112px) 0 var(--sp); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.nf-copy .h-display { font-size: clamp(34px, 4.4vw, 64px); }
.nf-stage { display: grid; justify-items: center; gap: 18px; }
.slate { display: block; width: min(100%, 520px); padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; }
.slate:focus-visible { outline-offset: 10px; }
.slate-sticks { position: relative; display: block; height: 56px; }
.slate-arm, .slate-base {
  position: absolute; left: 0; right: 0; height: 26px; border-radius: 3px;
  background: repeating-linear-gradient(-55deg, var(--light) 0 26px, var(--screen) 26px 52px);
  box-shadow: inset 0 0 0 2px var(--light);
}
.slate-base { bottom: 0; }
.slate-arm { top: 4px; transform-origin: 8px 100%; transform: rotate(-16deg); transition: transform .5s var(--ease); background: repeating-linear-gradient(55deg, var(--light) 0 26px, var(--screen) 26px 52px); }
.slate-arm::before { content: ""; position: absolute; left: 2px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--rule); box-shadow: inset 0 0 0 2px var(--light); }
.slate:hover .slate-arm { transform: rotate(-22deg); }
.slate.clap .slate-arm { transform: rotate(0deg); transition: transform .09s cubic-bezier(.5, 0, 1, .5); }
.slate-board {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px;
  background: oklch(0.17 0 0); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--light), 0 30px 80px -30px oklch(0 0 0 / .9);
}
.slate-cell { display: grid; gap: 6px; padding: 16px 18px; border-bottom: 1.5px solid oklch(1 0 0 / .55); min-width: 0; }
.slate-cell:nth-child(2n+1):not(.wide) { border-right: 1.5px solid oklch(1 0 0 / .55); }
.slate-cell.wide { grid-column: 1 / -1; }
.slate-cell:nth-last-child(-n+2) { border-bottom: 0; }
.slate-cell em { font: 600 12px/1 var(--f-title); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.slate-cell b { font-family: var(--f-title); font-stretch: 118%; font-weight: 760; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.slate-cell.wide b { font-size: clamp(30px, 4vw, 52px); }
.slate-cell b[data-slate-scene] { font-size: clamp(16px, 1.6vw, 20px); text-transform: none; font-stretch: 100%; font-weight: 600; }
.slate.clap .slate-board { animation: knock .18s var(--ease); }
@keyframes knock { 40% { transform: translateY(3px); } }
.slate-status { margin: 0; font: 500 15px/1.5 var(--f-title); color: var(--text-2); text-align: center; min-height: 1.5em; }
@media (prefers-reduced-motion: reduce) {
  .slate-arm, .slate.clap .slate-arm { transition: none; }
  .slate.clap .slate-board { animation: none; }
}
@media (max-width: 800px) { .nf-grid { grid-template-columns: 1fr; } .nf-stage { order: -1; } }
.slate-cell:nth-child(2n+1):not(.wide) { border-right: 0; }
.slate-cell:nth-child(2n) { border-right: 1.5px solid oklch(1 0 0 / .55); }
.slate-arm { transform: rotate(-9deg); }
.slate:hover .slate-arm { transform: rotate(-13deg); }
.nf-stage { padding-top: 40px; }
@media (max-width: 800px) { .nf-stage { order: 0; padding-top: 24px; } .slate-arm { transform: rotate(-7deg); } }

/* Idle wiggle: every few seconds the arm lifts and the board rocks, so it reads as something to press.
   Stops once it has been clapped, and never runs while hovered or for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .slate { animation: slate-rock 4.5s var(--ease) 1.2s infinite; transform-origin: 50% 100%; }
  .slate-arm { animation: arm-wiggle 4.5s var(--ease) 1.2s infinite; }
  .slate:hover, .slate:focus-visible, .slate.used { animation: none; }
  .slate:hover .slate-arm, .slate:focus-visible .slate-arm, .slate.clap .slate-arm, .slate.used .slate-arm { animation: none; }
}
@keyframes arm-wiggle {
  0%, 20%, 100% { transform: rotate(-9deg); }
  5%  { transform: rotate(-17deg); }
  10% { transform: rotate(-5deg); }
  15% { transform: rotate(-12deg); }
}
@keyframes slate-rock {
  0%, 20%, 100% { transform: rotate(0deg); }
  6%  { transform: rotate(-1.2deg); }
  12% { transform: rotate(.8deg); }
  16% { transform: rotate(-.3deg); }
}

/* ===== Performance =====
   Compositor hints for the moving layers. No visual change; helps every browser. */
.reel { contain: layout paint; }
.reel-track { will-change: transform; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.roll { will-change: transform; }
@keyframes roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } }

/* Firefox only. Gecko repaints blur(), backdrop-filter and mask-image on every frame while content
   scrolls or animates underneath, which Chrome composites on the GPU. Only Firefox and its forks
   support -moz-appearance, so Chrome, Safari and Edge keep the original effects untouched. */
@supports (-moz-appearance: none) {
  /* Header: near-opaque instead of a live backdrop blur over the moving reel */
  .site-header { backdrop-filter: none; background: oklch(0.145 0 0 / 0.97); }
  /* Blurred backdrops: a 32px image scaled up is already soft; darken with a gradient layer, not a filter */
  .frame-pic::before { inset: 0; filter: none; background: linear-gradient(oklch(0 0 0 / .5), oklch(0 0 0 / .5)), var(--bg-sm) center / cover; }
  .player.is-portrait::before { inset: 0; filter: none; background: linear-gradient(oklch(0 0 0 / .55), oklch(0 0 0 / .55)), var(--bg-sm) center / cover; }
  .sheet-work .is-poster img, .sheet-stills .is-poster img { filter: none; }
  /* Glows: radial gradients instead of 70–90px blur filters */
  .feature-pic::before { inset: -8% -10%; filter: none; opacity: .85; background: radial-gradient(closest-side, var(--glow), transparent); }
  .player-wrap::before { inset: -6% -4%; filter: none; opacity: .7; background: radial-gradient(closest-side, var(--glow), transparent); }
  /* Credits fade: gradient overlays on top instead of a mask on the moving roll */
  .roll-window { position: relative; mask-image: none; }
  .roll-window::before, .roll-window::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 1; pointer-events: none; }
  .roll-window::before { top: 0; background: linear-gradient(var(--screen), transparent); }
  .roll-window::after { bottom: 0; background: linear-gradient(transparent, var(--screen)); }
  @media (prefers-reduced-motion: reduce) { .roll-window::before, .roll-window::after { display: none; } }
  /* Hero title entrance without the blur filter */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  }
}

/* Phones: the hero's motion toggle is icon only (pause bars / play triangle); the label stays for screen readers */
@media (max-width: 900px) {
  .reel-ui .motion-toggle { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; }
  .reel-ui .motion-toggle .mt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .reel-ui .motion-toggle[aria-pressed="true"]::before { margin-left: 3px; }
}