@font-face {
  font-family: "Right Grotesk Tall";
  src: url("assets/PPRightGrotesk-TallBlack.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

:root {
  --bg: #0b0b0a;
  --ink: #f1efea;
  --muted: #8a8780;
  --line: #f1efea22;
  --red: #e2231a;
  --display: "Right Grotesk Tall", "Arial Narrow", Impact, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(16px, 1.1vw, 18px)/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--red); color: var(--ink); }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* language switch: everything is written twice, CSS shows one */
html[data-lang="en"] [lang="pt"],
html[data-lang="pt"] [lang="en"] { display: none !important; }

/* ── top bar ── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  background: linear-gradient(var(--bg), transparent);
}
.bar a { text-decoration: none; }
.bar__name { font-family: var(--display); font-size: 1.4rem; letter-spacing: 0.02em; }
.bar__nav { display: flex; gap: 20px; margin-left: auto; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; }
.bar__nav a:hover { color: var(--red); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.lang button {
  font: 500 0.7rem var(--mono); color: var(--muted); background: none; border: 0;
  padding: 6px 10px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ── hero ── */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 120px var(--gutter) 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 6vw, 120px); row-gap: 32px;
}
.hero__tag { grid-column: 1 / -1; color: var(--muted); }
.hero__title {
  align-self: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(72px, 13.5vw, 230px);
  line-height: 0.84; text-transform: uppercase;
  max-width: 11ch;
}
/* the struck-through word: a red bar like the posters */
.hero__title s { text-decoration: none; position: relative; display: inline-block; }
.hero__title s::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 46%; height: 0.14em;
  background: var(--red); transform: rotate(-3deg) scaleX(0); transform-origin: left;
  animation: strike 0.7s 0.9s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes strike { to { transform: rotate(-3deg) scaleX(1); } }
/* right side: a vertical "ad" with the skip button on it */
.hero__ad { position: relative; align-self: center; height: min(68svh, 720px); aspect-ratio: 9 / 16; background: #000; }
.hero__ad video { width: 100%; height: 100%; object-fit: cover; }

/* fake "skip ad" button — the only skip on the site */
.skip {
  position: absolute; right: 0; bottom: 24px;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; border: 1px solid var(--line);
  background: #000000b3; color: var(--ink); cursor: pointer; border-right: 0;
}
.skip:disabled { cursor: default; color: var(--muted); }
.skip__n { color: var(--ink); }
.skip__go { display: none; }
.skip.is-ready .skip__wait { display: none; }
.skip.is-ready .skip__go { display: inline; }
.skip.is-ready:hover { background: var(--ink); color: var(--bg); }

/* ── numbers: one at a time, lots of air ── */
.numbers { padding: 10vh var(--gutter); }
.num { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; max-width: 900px; }
.num--right { margin-left: auto; text-align: right; align-items: flex-end; }
.num b {
  font-family: var(--display); font-weight: 900; line-height: 0.85;
  font-size: clamp(96px, 20vw, 340px); font-variant-numeric: tabular-nums;
}
.num p { font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--muted); max-width: 22ch; margin-top: 16px; }

/* ── work ── */
.section-title {
  font-family: var(--mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 var(--gutter) 16px; border-bottom: 1px solid var(--line); margin-bottom: 64px; color: var(--muted);
}
.work { padding: 64px 0 48px; }
.project { padding: 0 var(--gutter); margin-bottom: clamp(100px, 16vw, 220px); }
.project__head { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; margin-bottom: 28px; }
.project__num { color: var(--red); }
.project__title { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 9vw, 140px); line-height: 0.86; text-transform: uppercase; }
.project__title--sm { font-size: clamp(36px, 4.5vw, 64px); }
.project__meta { grid-column: 2; color: var(--muted); margin-top: 10px; }
.project__body { max-width: 52ch; margin-top: 28px; color: #f1efeacc; }

/* GNS */
.gns__media { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; align-items: start; }
.gns__media video { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #1a1a1a; }
.gns__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gns__thumbs img { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.gns__foot { display: grid; grid-template-columns: auto minmax(0, 52ch); gap: clamp(24px, 5vw, 80px); align-items: end; margin-top: clamp(32px, 4vw, 56px); }
.gns__foot .project__body { margin-top: 0; }

/* Bira */
.bira__frame { position: relative; display: block; overflow: hidden; }
.bira__frame video { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.6s ease; }
.bira__frame:hover video { transform: scale(1.03); }
.bira__play { position: absolute; left: 16px; bottom: 16px; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.bira__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.bira__stats { display: flex; flex-direction: column; gap: 12px; }
/* numbers sit in quiet cards */
.stats { display: flex; gap: 12px; }
.stat { border: 1px solid var(--line); background: #ffffff06; padding: clamp(20px, 2.4vw, 36px); }
.stat b {
  display: block; font-family: var(--display); font-weight: 900; line-height: 0.85;
  font-size: clamp(64px, 8vw, 150px); font-variant-numeric: tabular-nums;
}
.stat p { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 22ch; margin-top: 10px; }

/* showreel */
.reel { padding: 0 var(--gutter) clamp(64px, 8vw, 120px); }
.reel__frame { position: relative; overflow: hidden; }
.reel__frame video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.reel__cap { position: absolute; left: 16px; bottom: 16px; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.reel__cap > span { display: none; }
.reel__cap > span.is-on { display: inline; }

/* clients marquee */
.clients { padding-bottom: clamp(64px, 8vw, 120px); }
.clients__label { color: var(--muted); padding: 0 var(--gutter) 16px; }
.clients__window { overflow: hidden; border-block: 1px solid var(--line); }
.clients__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.clients__window:hover .clients__track { animation-play-state: paused; }
.clients__track ul { display: flex; list-style: none; }
.clients__track li {
  font-family: var(--display); font-size: clamp(40px, 6vw, 96px); line-height: 1; text-transform: uppercase;
  padding: 0.2em 0; white-space: nowrap;
}
.clients__track li::after {
  content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin: 0 0.6em;
  background: var(--red); border-radius: 50%; vertical-align: middle;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* titles rise word by word (split in main.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0; margin: -0.12em 0; }
.w__in { display: inline-block; transform: translateY(110%); transition: transform 0.9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 70ms); }
.is-split.is-in .w__in { transform: none; }

/* theme divider */
.theme { padding: 0 var(--gutter); margin-bottom: clamp(80px, 10vw, 140px); }
.theme__label { color: var(--red); margin-bottom: 16px; }
.theme__line { font-family: var(--display); font-size: clamp(40px, 6.5vw, 110px); line-height: 0.92; text-transform: uppercase; max-width: 16ch; }

/* documentary */
.project--doc { display: grid; grid-template-columns: minmax(0, 0.8fr) 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.doc__poster { width: 100%; transform: rotate(-2deg); }
.btn {
  display: inline-block; margin-top: 28px; padding: 14px 22px;
  background: var(--ink); color: var(--bg); text-decoration: none;
  font: 500 0.8rem var(--mono); text-transform: uppercase;
}
.btn:hover { background: var(--red); color: var(--ink); }

/* curriculum vital */
.cv__posters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cv__posters img { width: 100%; aspect-ratio: 841/1191; object-fit: cover; }

/* duo */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 var(--gutter); margin-bottom: clamp(100px, 16vw, 220px); }
.duo .project { padding: 0; margin: 0; }
.duo video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; margin-bottom: 20px; }
.talks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; aspect-ratio: 16/9; margin-bottom: 20px; overflow: hidden; }
.talks img { width: 100%; height: 100%; object-fit: cover; }

/* about */
.about { padding: 48px 0 120px; }
.about__grid { display: grid; grid-template-columns: minmax(0, 0.6fr) 1fr; gap: clamp(24px, 5vw, 80px); padding: 0 var(--gutter); }
.about__photo { width: 100%; filter: grayscale(1) contrast(1.1); }
.about__name { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 7vw, 120px); line-height: 0.86; text-transform: uppercase; margin-bottom: 24px; }
.about__lead { font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.25; font-weight: 500; }
.cv { list-style: none; margin-top: 40px; border-top: 1px solid var(--ink); }
.cv li { display: grid; grid-template-columns: 9em 1fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cv li > span, .cv em { color: var(--muted); font-style: normal; }
.cv b { font-weight: 500; }

/* contact */
.contact { padding: clamp(120px, 18vw, 260px) var(--gutter); text-align: center; border-top: 1px solid var(--line); }
.contact > .mono { color: var(--muted); }
.contact__mail {
  display: block; margin: 24px 0 32px;
  font-family: var(--display); font-size: clamp(36px, 8.5vw, 150px); line-height: 0.9;
  text-decoration: none; word-break: break-word;
}
.contact__mail:hover { color: var(--red); }
.contact__links { display: flex; justify-content: center; gap: 28px; list-style: none; }
.contact__links a { text-decoration: none; }
.contact__links a:hover { color: var(--red); }

.foot { display: flex; justify-content: space-between; padding: 20px var(--gutter); color: var(--muted); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .bar__nav { display: none; }
  .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero__ad { justify-self: start; height: 62svh; }
  .num { min-height: 55vh; }
  .gns__media { grid-template-columns: 1fr 1fr; }
  .gns__thumbs { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .project--doc, .about__grid, .duo, .bira__grid, .gns__foot { grid-template-columns: 1fr; }
  .duo { gap: 64px; }
  .stats { flex-direction: column; }
  .cv li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title s::after { animation: none; transform: rotate(-3deg); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .clients__track { animation: none; }
}