/* Erick Antunes — HOME v2 (23/09/2026). Folha própria da home: as páginas internas continuam em site.css
   até a aprovação visual. Estrutura do design system "Runway" (design-studio/references/design-systems/runwayml):
   mídia é a interface, zero sombra, raio 0–4px, base de 8px, display com entrelinha ~1 e tracking negativo,
   rótulos em caixa-alta com tracking positivo, nenhum gradiente de interface. Cor e tipo seguem o brief V2
   (serif editorial + sans; near-black, off-white, cinzas quentes, tungstênio tirado das próprias imagens). */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/BodoniModa-normal-400-700.woff2) format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/BodoniModa-italic-400-600.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/HankenGrotesk-normal-400-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/IBMPlexMono-normal-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/IBMPlexMono-normal-500.woff2) format('woff2'); }
/* Face de sinais (setas e marcas) — mesma de site.css; sem ela as setas caem na Segoe UI. */
@font-face { font-family: 'EA Marks'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/ea-marks-400.woff2) format('woff2'); unicode-range: U+2190-2194, U+2197, U+21BA, U+2713, U+25CB, U+25CF, U+2715; }
@font-face { font-family: 'EA Marks'; font-style: normal; font-weight: 500 900; font-display: block; src: url(/assets/fonts/ea-marks-600.woff2) format('woff2'); unicode-range: U+2190-2194, U+2197, U+21BA, U+2713, U+25CB, U+25CF, U+2715; }

:root {
  /* cor — Runway: Deep Black, Dark Surface, Border Dark; brief: off-white e cinzas quentes do site */
  --ink: #030303;
  --surface: #1a1a1a;
  --rule: #27272a;
  --paper: #ece8e1;
  --paper-2: #c2bcb2;
  --stone: #8f8a82;
  /* tungstênio e âmbar amostrados das lâmpadas de erick-carro e das janelas da abertura */
  --tungsten: #e4ab68;
  --amber: #ca843c;

  --serif: 'EA Marks', 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'EA Marks', 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'EA Marks', 'IBM Plex Mono', ui-monospace, monospace;

  /* escala de 6 degraus (mesma de site.css) + 3 papéis de display */
  --fs-plate: 0.64rem;
  --fs-label: 0.72rem;
  --fs-cap: 0.88rem;
  --fs-ui: 0.97rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.32rem;
  --fs-title: clamp(3.4rem, 11.5vw, 13rem);     /* abertura e nomes de projeto */
  --fs-head: clamp(2.2rem, 5vw, 5.4rem);        /* manifesto, autor, final */
  --fs-tc: clamp(3rem, 9vw, 9.5rem);            /* timecode do showreel */
  --fs-deck: clamp(1.9rem, 3.5vw, 3.9rem);      /* frase longa de seção: aprender, execução, fim da seleção */

  /* espaço — base 8px do Runway */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s10: 80px; --s16: 128px;
  --gut: clamp(20px, 3.4vw, 48px);
  --r: 2px;

  --ease-film: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-cut: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 var(--fs-body)/1.5 var(--sans); letter-spacing: -0.01em; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure, h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 1px solid var(--tungsten); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -80px; z-index: 50; background: var(--paper); color: var(--ink); padding: var(--s1) var(--s2); font-size: var(--fs-ui); }
.skip:focus { top: var(--s2); }

/* rótulo técnico: mono em caixa-alta, a "claquete" do site */
.meta { font: 400 var(--fs-label)/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-2); }
.scene { color: var(--stone); }

/* link de ação: texto + seta, sublinhado que corre (sem caixa, sem sombra) */
.go { display: inline-flex; gap: 0.6em; align-items: baseline; font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size 420ms var(--ease-out), color 200ms; }
.go:hover, .go:focus-visible { background-size: 100% 1px; color: var(--tungsten); }
.go span { transition: transform 420ms var(--ease-out); }
.go:hover span { transform: translateX(4px); }
.go--quiet { color: var(--paper-2); }

/* ───────── barra ───────── */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--gut); mix-blend-mode: difference; color: #fff; transition: transform 500ms var(--ease-film); }
.bar.is-away { transform: translateY(-110%); }
.bar-name { font: 500 var(--fs-cap)/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }
.bar-nav { display: flex; gap: var(--s4); font: 400 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.bar-nav a { padding: var(--s1) 0; opacity: 0.8; transition: opacity 200ms; }
.bar-nav a:hover, .bar-nav a:focus-visible { opacity: 1; }
.bar-menu { display: none; font: 400 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 0 14px 14px; }
.menu { position: fixed; inset: 0; z-index: 29; background: var(--ink); padding: 96px var(--gut) var(--s6); display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu ol a { display: flex; align-items: baseline; gap: var(--s2); font: 400 clamp(2.4rem, 11vw, 4rem)/1.1 var(--serif); padding: var(--s1) 0; border-bottom: 1px solid var(--rule); }
.menu ol span { font: 400 var(--fs-plate)/1 var(--mono); letter-spacing: 0.14em; color: var(--stone); }
.menu-direct { display: flex; gap: var(--s3); flex-wrap: wrap; }
.menu-direct a { font: 400 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 0; }

/* ───────── 01 · abertura ───────── */
.open { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #000; isolation: isolate; }
.open-shots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.shot { position: relative; overflow: hidden; background: #000; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.28) saturate(0.55); transform: scale(1.02); transition: filter 1400ms var(--ease-film), transform 6s linear; }
.shot.is-lit img, .shot.is-lit video { filter: brightness(0.92) saturate(1); transform: scale(1.08); }
.shot figcaption { position: absolute; left: var(--s2); bottom: var(--s2); font: 400 var(--fs-plate)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-2); opacity: 0; transition: opacity 600ms; }
.shot.is-lit figcaption { opacity: 1; }
/* key visual (sala de edição): primeiro plano da cena. Entra e sai por corte seco; enquanto está no ar, push-in lento */
.open-key { position: absolute; inset: 0; background: #000; }
.open-key:not(.is-on) { visibility: hidden; }
.open-key img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.open-key.is-on img { animation: push 7.2s linear both; }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.05); } }
/* véu inferior só onde o título senta */
.open::after { content: ""; position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(to top, rgba(3,3,3,0.86), rgba(3,3,3,0)); z-index: 1; pointer-events: none; }
.open-slate { position: absolute; z-index: 2; top: 84px; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; font: 400 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-2); }
.open-slate .tc { color: var(--tungsten); font-variant-numeric: tabular-nums; }
.open-title { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: 96px; font: 400 var(--fs-title)/0.86 var(--serif); letter-spacing: -0.035em; text-transform: uppercase; font-optical-sizing: auto; }
.open-title .ln { display: block; }
.open-title .ln + .ln { padding-left: 0.62em; }
.open-foot { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: var(--s4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.open-go { color: var(--paper); padding: 12px 0; }
.open-go span { display: inline-block; animation: nudge 2.4s var(--ease-film) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
.crop { position: absolute; z-index: 2; width: 18px; height: 18px; border: 0 solid var(--paper-2); opacity: 0.7; }
.crop--tl { top: 72px; left: 12px; border-width: 1px 0 0 1px; }
.crop--tr { top: 72px; right: 12px; border-width: 1px 1px 0 0; }
.crop--bl { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; }
.crop--br { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }

/* título entra por máscara de linha, não por fade */
.js .open-title .ln { clip-path: inset(0 0 100% 0); transform: translateY(0.18em); transition: clip-path 1100ms var(--ease-film), transform 1100ms var(--ease-film); }
.js .open-title .ln + .ln { transition-delay: 160ms; }
.js .is-ready .open-title .ln { clip-path: inset(-0.4em -2% -0.3em 0); transform: none; }

/* ───────── 02 · manifesto ───────── */
.manifest { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: var(--s16) var(--gut) calc(var(--s16) + var(--s6)); }
.manifest .scene { grid-column: 1 / 3; padding-top: 1.2em; }
.manifest-lines { grid-column: 3 / 13; font: 400 var(--fs-head)/1.04 var(--serif); letter-spacing: -0.025em; }
.manifest-lines .ln { display: block; text-wrap: balance; }
.manifest-lines .ln:nth-child(2) { padding-left: 1.6em; color: var(--paper-2); }
.manifest-lines .ln:nth-child(3) { margin-top: 0.5em; color: var(--tungsten); }
.js [data-lines] .ln { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-film); }
.js [data-lines] .ln:nth-child(2) { transition-delay: 220ms; }
.js [data-lines] .ln:nth-child(3) { transition-delay: 520ms; }
.js [data-lines].is-in .ln { clip-path: inset(-0.4em -2% -0.3em 0); }

/* ───────── 03 · selected work ───────── */
.work-head { display: flex; justify-content: space-between; padding: 0 var(--gut) var(--s3); border-bottom: 1px solid var(--rule); margin: 0 var(--gut); padding-left: 0; padding-right: 0; }
.work-head h2 { color: var(--paper); }

.take { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--gut); padding: var(--s10) var(--gut) var(--s6); height: 100vh; min-height: 720px; max-height: 1100px; }
.take-meta { display: flex; flex-direction: column; gap: var(--s1); }
.take-meta b { font-weight: 500; color: var(--paper); }
.take-title { font: 400 var(--fs-title)/0.84 var(--serif); letter-spacing: -0.04em; text-transform: uppercase; position: relative; z-index: 3; pointer-events: none; white-space: nowrap; }
/* capa do case: frame horizontal feito para o portfólio; o título entra por cima como cartela */
.take-cover { position: relative; z-index: 2; display: block; aspect-ratio: 16 / 9; align-self: center; background: var(--surface); overflow: hidden; border-radius: var(--r); }
.take-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-film), filter 600ms; }
.take-cover:hover img, .take-cover:focus-visible img { transform: scale(1.045); }  /* mudança de crop, não zoom de card */
.take-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(3,3,3,0.72), rgba(3,3,3,0)); pointer-events: none; }
.cover-slate { position: absolute; z-index: 1; top: var(--s2); right: var(--s2); color: var(--paper); }
.take-sheet { display: flex; gap: 3px; align-items: flex-start; }
.take-sheet li { position: relative; flex: 0 0 104px; }
.take-sheet img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r); }
.take-sheet .meta { display: block; margin-top: var(--s1); font-size: var(--fs-plate); color: var(--stone); }
.take-after p { max-width: 34ch; color: var(--paper-2); margin-bottom: var(--s1); }

/* 01 · Demovélli — o nome corre por baixo do filme (máscara); antes/depois e texto embaixo */
.take--1 .take-meta { grid-column: 1 / 5; grid-row: 1; }
.take--1 .take-cover { grid-column: 5 / 13; grid-row: 1 / 3; }
.take--1 .take-title { grid-column: 1 / 13; grid-row: 2; align-self: end; margin-bottom: 0; font-size: clamp(3rem, 10.2vw, 11.6rem); }
.take--1 .take-sheet { grid-column: 1 / 4; grid-row: 3; align-self: end; margin-top: var(--s4); }
.take--1 .take-after { grid-column: 5 / 9; grid-row: 3; align-self: end; }

/* 02 · Imobiliário — espelhado; planta → terreno → estrutura → noite, como folha de contato */
.take--2 .take-cover { grid-column: 1 / 9; grid-row: 1 / 3; }
.take--2 .take-meta { grid-column: 9 / 13; grid-row: 1; align-items: flex-end; text-align: right; }
.take--2 .take-title { grid-column: 1 / 13; grid-row: 2; justify-self: end; align-self: end; margin-bottom: 0; font-size: clamp(3rem, 9.4vw, 11rem); }
.take--2 .take-sheet { grid-column: 5 / 9; grid-row: 3; align-self: end; margin-top: var(--s4); }
.take--2 .take-after { grid-column: 10 / 13; grid-row: 3; align-self: end; }

/* 03 · Bene — capa à direita, tira de contato e texto na coluna da esquerda, nome inteiro embaixo */
.take--3 { grid-template-rows: auto 1fr auto; }
.take--3 .take-meta { grid-column: 1 / 4; grid-row: 1; }
.take--3 .take-cover { grid-column: 4 / 13; grid-row: 1 / 3; align-self: start; }
.take--3 .take-sheet { grid-column: 1 / 4; grid-row: 2; align-self: start; margin-top: var(--s4); }
.take--3 .take-after { grid-column: 1 / 4; grid-row: 2; align-self: end; padding-bottom: var(--s3); }
.take--3 .take-title { grid-column: 1 / 13; grid-row: 3; display: block; font-size: clamp(3rem, 8.2vw, 9.6rem); margin-top: calc(var(--s3) * -1); }

/* cursor de diretor: VIEW sobre as capas, PLAY sobre o reel (só com mouse) */
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; padding: 6px 10px; background: var(--paper); color: var(--ink); border-radius: var(--r); font: 500 var(--fs-plate)/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transition: opacity 160ms; }
.cursor-tag.is-on { opacity: 1; }
.has-tag [data-cursor], .has-tag [data-cursor] * { cursor: none; }

/* o corte: a mídia entra por cortina lateral, como um corte na timeline */
.js [data-cut] { clip-path: inset(0 0 0 100%); transition: clip-path var(--t-cut) var(--ease-film); }
.js [data-cut].is-in { clip-path: inset(0 0 0 0); }
.js .take--2 [data-cut] { clip-path: inset(0 100% 0 0); }
.js .take--2 [data-cut].is-in { clip-path: inset(0 0 0 0); }

/* fim da seleção: o arquivo completo logo depois do 3º case */
.work-all { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: var(--s4) var(--gut) 0; padding-top: var(--s3); border-top: 1px solid var(--rule); }
.work-all .meta { color: var(--stone); }
.work-all a { display: inline-flex; gap: 0.4em; align-items: baseline; font: 400 var(--fs-deck)/1.1 var(--serif); letter-spacing: -0.02em; padding: var(--s1) 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 420ms var(--ease-out), color 200ms; }
.work-all a:hover, .work-all a:focus-visible { background-size: 100% 1px; color: var(--tungsten); }
.work-all a span { font-size: 0.7em; transition: transform 420ms var(--ease-out); }
.work-all a:hover span { transform: translateX(6px); }

.splice { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--gut); color: var(--stone); }
.splice i { flex: 1; height: 10px; background: repeating-linear-gradient(90deg, var(--rule) 0 14px, transparent 14px 22px); }

/* ───────── 04 · showreel ───────── */
.reel { position: relative; height: 210vh; margin-top: var(--s10); }
.reel-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gut); padding: 0 var(--gut); overflow: hidden; }
.reel-frame { --p: 0; height: calc(100svh - 48px); aspect-ratio: 9 / 16; background: var(--surface); transform: scale(calc(0.5 + var(--p) * 0.5)); transform-origin: 50% 50%; will-change: transform; }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.reel-side { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--s2); }
.reel-side--l { align-items: flex-start; }
.reel-side--r { align-items: flex-end; text-align: right; }
.reel-tc { font: 400 var(--fs-tc)/0.9 var(--mono); letter-spacing: -0.04em; color: var(--paper); font-variant-numeric: tabular-nums; }
.reel-note { color: var(--stone); }


/* ───────── 05 · autor ───────── */
.author { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: end; padding: var(--s16) var(--gut) var(--s16) 0; }
.author-still { grid-column: 1 / 8; position: relative; aspect-ratio: 3 / 2; max-height: 88vh; overflow: hidden; }
.author-still img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.author-still figcaption { position: absolute; left: var(--gut); bottom: var(--s2); font-size: var(--fs-plate); color: var(--paper); }
.author-text { grid-column: 8 / 13; padding-bottom: var(--s2); }
.author-title { font: 400 var(--fs-head)/1.02 var(--serif); letter-spacing: -0.025em; margin: var(--s3) 0 var(--s4); }
.author-title em { color: var(--tungsten); }
.author-text > p:not(.scene):not(.author-links) { max-width: 44ch; color: var(--paper-2); }
.author-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--s3); }

/* ───────── 06 · aprender (Visão Premium IA) — faixa larga, pouco texto, sem card ───────── */
.learn { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: var(--s6); padding: var(--s10) 0 var(--s16); }
.learn-still { grid-column: 1 / 13; position: relative; aspect-ratio: 21 / 9; max-height: 82vh; width: 100%; overflow: hidden; background: var(--surface); }
.learn-still img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 32%; }
.learn-still figcaption { position: absolute; right: var(--gut); bottom: var(--s2); font-size: var(--fs-plate); color: var(--paper); }
.learn-side { grid-column: 1 / 5; padding-left: var(--gut); display: flex; flex-direction: column; gap: var(--s2); }
.learn-name { font: 400 var(--fs-lead)/1.2 var(--serif); margin-top: var(--s2); }
.learn-tags { color: var(--stone); }
.learn-text { grid-column: 5 / 12; }
.learn-title { font: 400 var(--fs-deck)/1.06 var(--serif); letter-spacing: -0.025em; margin-bottom: var(--s4); text-wrap: balance; }
.learn-title em { color: var(--tungsten); }
.learn-text > p { max-width: 52ch; color: var(--paper-2); margin-bottom: var(--s2); }

/* ───────── 07 · da direção à execução — a ponte para a Erisen AI ───────── */
.exec { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); margin: 0 var(--gut); padding: var(--s16) 0; border-top: 1px solid var(--rule); }
.exec .scene { grid-column: 1 / 13; margin-bottom: var(--s4); }
.exec-title { grid-column: 1 / 12; font: 400 var(--fs-deck)/1.06 var(--serif); letter-spacing: -0.025em; }
.exec-title .ln { display: block; text-wrap: balance; }
.exec-title em { color: var(--tungsten); }
.exec-foot { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--gut); margin-top: var(--s8); }
.exec-body { grid-column: 1 / 3; max-width: 52ch; color: var(--paper-2); }
.exec-sign { display: grid; gap: var(--s1); align-content: start; }
.exec-sign div { display: flex; flex-wrap: wrap; gap: 0 0.8em; font: 400 var(--fs-label)/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.exec-sign dt { color: var(--paper); }
.exec-sign dd { color: var(--stone); }
.exec-acts { display: flex; flex-direction: column; align-items: flex-start; }
/* paralaxe sutil da faixa do Visão Premium: a imagem sobra 12% e anda dentro do quadro (só desktop, com movimento) */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .learn-still img[data-drift] { height: 112%; will-change: transform; }
}

/* ───────── 06 · final ───────── */
.end { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: var(--s16) var(--gut) var(--s16); min-height: 100vh; align-content: center; }
.end-title { grid-column: 1 / 13; grid-row: 1 / 3; position: relative; z-index: 2; font: 400 clamp(3rem, 8.4vw, 9.4rem)/0.9 var(--serif); letter-spacing: -0.035em; text-transform: uppercase; pointer-events: none; }
.end-title .ln { display: block; }
.end-title .ln--b { text-align: right; margin-top: 38vh; }
.end-still { grid-column: 5 / 9; grid-row: 1 / 3; position: relative; z-index: 1; aspect-ratio: 9 / 16; max-height: 86vh; justify-self: center; overflow: hidden; }
.end-still img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; filter: saturate(0.9); }
.end-act { grid-column: 1 / 13; grid-row: 3; display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; gap: 0.8em; min-height: 52px; padding: 0 var(--s3); background: var(--paper); color: var(--ink); border-radius: var(--r); font: 500 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 240ms, color 240ms; }
.cta:hover, .cta:focus-visible { background: var(--tungsten); }
.cta span { transition: transform 420ms var(--ease-out); }
.cta:hover span { transform: translateX(4px); }

/* ───────── créditos ───────── */
.credits { padding: var(--s16) var(--gut) var(--s6); border-top: 1px solid var(--rule); }
.credits dl { display: grid; gap: var(--s2); max-width: 760px; margin: 0 auto var(--s10); }
.credits dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.credits dt { text-align: right; font: 400 var(--fs-label)/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.credits dd { font: 400 var(--fs-lead)/1.2 var(--serif); }
.credits dd a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 420ms var(--ease-out); }
.credits dd a:hover, .credits dd a:focus-visible { background-size: 100% 1px; }
.credits > .meta { text-align: center; color: var(--stone); font-size: var(--fs-plate); }
.credits > .meta a { padding: 12px 4px; }

/* ───────── celular: composição própria ───────── */
@media (max-width: 860px) {
  .bar { padding: var(--s1) var(--gut); }
  .bar-nav { display: none; }
  .bar-menu { display: block; }

  /* abertura: um plano só, vertical nativo, a tela inteira */
  .open-shots { grid-template-columns: 1fr; }
  .shot[data-shot="0"], .shot[data-shot="2"] { display: none; }
  .shot.is-lit img, .shot.is-lit video, .shot img, .shot video { filter: brightness(0.78); transform: none; }
  .shot figcaption { display: none; }
  .open-slate { top: 64px; }
  /* o key visual vertical foi composto com o terço de cima vazio: o título senta ali, não sobre o corpo */
  .open-title { top: 112px; bottom: auto; font-size: clamp(2.8rem, 12.6vw, 5rem); line-height: 0.9; white-space: nowrap; }
  .open::before { content: ""; position: absolute; inset: 0 0 auto; height: 44%; background: linear-gradient(to bottom, rgba(3,3,3,0.78), rgba(3,3,3,0)); z-index: 1; pointer-events: none; }
  .open::after { height: 30%; }
  .open-title .ln + .ln { padding-left: 0; }
  .open-foot { flex-direction: column; align-items: flex-start; gap: 0; bottom: var(--s2); }
  .crop--tl, .crop--tr { top: 56px; }

  .manifest { display: block; padding: var(--s10) var(--gut) var(--s10); }
  .manifest .scene { margin-bottom: var(--s3); padding: 0; }
  .manifest-lines { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .manifest-lines .ln:nth-child(2) { padding-left: 0.8em; }

  /* tomadas: nome por cima, filme quase a tela toda, folha de contato rolando de lado */
  .take { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: var(--s8) var(--gut) var(--s6); gap: var(--s3); }
  .take-title, .take--3 .take-title { order: -1; font-size: clamp(2.4rem, 11vw, 4.6rem); white-space: normal; justify-self: auto; text-align: left; margin: 0; display: block; }
  .take-meta, .take--2 .take-meta { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; }
  .take--3 .take-sheet { flex-direction: row; }
  .take--3 .take-sheet li { width: auto; }
  .take--3 .take-title span { display: block; }
  .take--2 .take-title { text-align: right; }
  .take-meta { order: -2; flex-direction: row; justify-content: space-between; gap: var(--s2); }
  .take-cover { width: 100%; aspect-ratio: 4 / 5; margin: 0; }
  .take-title, .take--1 .take-title, .take--2 .take-title { margin-bottom: 0; }
  .take--3 .take-sheet { margin-top: 0; }
  .take-sheet, .take--1 .take-sheet, .take--3 .take-sheet { max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
  .take-sheet::-webkit-scrollbar { display: none; }
  .take-sheet li { flex: 0 0 42vw; scroll-snap-align: start; }
  .take-after { margin: 0; padding: 0; }

  /* showreel sem pino: quadro a toda largura, timecode por cima */
  .reel { height: auto; margin-top: var(--s6); }
  .reel-pin { position: relative; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s6) var(--gut); }
  .reel-frame { width: 100%; height: auto; transform: none !important; }
  .reel-side, .reel-side--r { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; flex-wrap: wrap; }
  .reel-tc { font-size: clamp(2.6rem, 14vw, 4rem); }
  .reel-side--l .reel-note { flex-basis: 100%; }

  .author { display: block; padding: var(--s8) 0; }
  .author-still { height: auto; aspect-ratio: 4 / 5; max-height: none; }
  .author-still img { object-position: 64% 40%; }
  .author-text { padding: var(--s6) var(--gut) 0; }
  .author-title { font-size: clamp(2rem, 9.4vw, 2.8rem); }

  .work-all { flex-direction: column; gap: 0; margin-top: var(--s2); }

  .learn { display: block; padding: var(--s6) 0 var(--s8); }
  .learn-still { aspect-ratio: 4 / 5; max-height: none; }
  .learn-still img { object-position: 67% 40%; }
  .learn-side, .learn-text { padding: 0 var(--gut); }
  .learn-side { gap: var(--s1); margin: var(--s6) 0 var(--s3); }
  .learn-name { margin-top: 0; }

  .exec { display: block; padding: var(--s8) 0; }
  .exec-foot { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }

  .end { display: block; min-height: 0; padding: var(--s8) var(--gut); }
  .end-title { font-size: clamp(2.4rem, 11vw, 4rem); line-height: 0.96; }
  .end-title .ln--b { margin-top: 0; text-align: left; }
  .end-still { width: 72%; margin: var(--s4) 0 0 auto; max-height: none; }
  .end-title .ln--a { position: relative; z-index: 3; }
  .end-act { flex-direction: column; align-items: flex-start; gap: var(--s1); }

  .credits dl > div { grid-template-columns: 1fr; gap: 2px; }
  .credits dt { text-align: left; }
}

/* ───────── sem movimento ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .open-title .ln, .js [data-lines] .ln, .js [data-cut] { clip-path: none !important; transform: none !important; }
  .shot img, .shot video, .open-key img, .learn-still img { transform: none !important; }
  .cursor-tag { display: none; }
  .reel { height: auto; }
  .reel-pin { position: relative; }
  .reel-frame { transform: none !important; }
}