/* ═══════════════════════════════════════════════════════════════════════
   AURORA · APRESENTAÇÃO
   Sistema SEÏVA 2026, lido do aurora.video: chão Cacau, seções inteiras
   viram tarjas chapadas de Areia e Azul Margem. Nenhuma imagem de fundo,
   nenhum gradiente, nenhuma textura. Tracking normal. Os filmes são as
   únicas imagens da página.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Coolvetica";src:url("../fonts/coolvetica-regular.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Coolvetica Comp";src:url("../fonts/coolvetica-heavycompressed.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Cascadia Mono";src:url("../fonts/cascadiamono-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cascadia Mono";src:url("../fonts/cascadiamono-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/ibmplexsans-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --cacau:#211716;
  --areia:#EEECDF;
  --azul:#B2CCE7;

  /* Medidos: sobre Cacau, dim 8,13:1 e fade 4,58:1. Sobre Areia, dim 5,25:1. */
  --areia-dim:rgba(238,236,223,.72);
  --areia-fade:rgba(238,236,223,.50);
  --areia-rule:rgba(238,236,223,.24);
  --cacau-dim:rgba(33,23,22,.66);
  --cacau-rule:rgba(33,23,22,.24);

  --display:"Coolvetica","Helvetica Neue",Arial,sans-serif;
  --display-text:"Coolvetica","Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --label:"Plex","Helvetica Neue",Arial,sans-serif;

  /* Escala tipográfica — oito degraus, um papel cada. Antes eram 23 estilos
     distintos, com a Cascadia sozinha em 11/12/13/14/15/16px por três pesos:
     hierarquia nenhuma, tudo lendo como "médio". */
  --t-label:.6875rem;                          /* Plex 700 caixa alta   */
  --t-code:.8125rem;                           /* Cascadia 400, códigos */
  --t-body:.875rem;                            /* Cascadia 300, corpo   */
  --t-lead:1rem;                               /* Cascadia 300, lead    */
  --t-name:clamp(1.375rem,1rem + 1.3vw,2.125rem);
  --t-title:clamp(1.75rem,1rem + 3vw,3.5rem);
  --t-display:clamp(2.25rem,.6rem + 6vw,5.75rem);
  --t-num:clamp(2.5rem,1.5rem + 4.4vw,6.25rem);

  /* 2. Uma coluna direita só. .reel__bio, .crew__bio e o texto de crédito
     começavam em 1080, 1090 e 1100 — 20px de deriva ao longo da página. */
  --colr:22rem;
  --colgap:clamp(1.5rem,3.5vw,3.5rem);

  --bar:2.75rem;                    /* altura da tarja de timecode */
  --gut:clamp(1rem,1.4vw,1.25rem);  /* margem do site: 20px em 1440 */
  --max:87.5rem;                    /* 1400px */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cacau);
  color:var(--areia);
  font-family:var(--mono);font-weight:300;
  font-size:var(--t-lead);line-height:1.75;letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:inherit}
p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;text-align:left}

::selection{background:var(--azul);color:var(--cacau)}
:where(a,button):focus-visible{outline:2px solid var(--azul);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:200;transform:translateY(-200%);
  background:var(--azul);color:var(--cacau);text-decoration:none;
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
  padding:.6rem 1rem;transition:transform .25s var(--ease);
}
.skip:focus{transform:none}

/* ═══════════ TARJA DE TIMECODE ═══════════ */
.tcbar{
  position:sticky;top:0;z-index:80;
  height:var(--bar);background:var(--cacau);
  border-bottom:1px solid var(--areia-rule);
}
.tcbar__in{display:flex;align-items:center;gap:1.25rem;height:var(--bar)}
.tcbar__tc{
  font-family:var(--label);font-weight:700;font-size:var(--t-code);
  color:var(--azul);font-variant-numeric:tabular-nums;
}
.tcbar__fps{font-family:var(--mono);font-size:var(--t-code);color:var(--areia-fade)}
.tcbar__nav{display:flex;gap:1.25rem;margin-inline:auto;overflow-x:auto;scrollbar-width:none}
.tcbar__nav::-webkit-scrollbar{display:none}
.tn{
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
  text-decoration:none;color:var(--areia-fade);white-space:nowrap;
  padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.tn:hover{color:var(--areia)}
.tn.is-on{color:var(--azul);border-bottom-color:var(--azul)}
.tcbar__reel{font-family:var(--mono);font-size:var(--t-code);color:var(--areia-fade);white-space:nowrap}
.lang{
  display:flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--areia-rule);padding:.3rem .45rem;
  font-family:var(--label);font-weight:700;font-size:var(--t-label);
  transition:border-color .2s var(--ease);
}
.lang:hover{border-color:var(--areia-dim)}
.lang__on{color:var(--azul)}
.lang__off{color:var(--areia-fade)}
.lang__on::after{content:"/";margin:0 .3rem;color:var(--areia-fade)}

/* ═══════════ CLAQUETE ═══════════ */
/* Medido no aurora.video em 1440x900: selo 130x150 na ponta esquerda, logo
   679x120 alinhado à direita — 47% da largura da tela, não a largura inteira.
   O selo é 1,25x a altura do wordmark; eles não formam lockup colado, ocupam
   as duas pontas da faixa. */
.head{padding:clamp(1.25rem,3.5vh,2.5rem) 0 clamp(1rem,2.5vh,1.75rem)}
.head__meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
  color:var(--areia-dim);padding-bottom:clamp(.75rem,1.6vw,1.25rem);
}
.head__meta span:first-child{text-transform:none;font-family:var(--mono);font-weight:400}

.lock{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.lock__selo{flex:0 0 auto;display:block;width:clamp(4rem,9.3%,8.125rem)}
.lock__selo img{width:100%;height:auto;display:block}
.lock__mark{flex:0 0 48.5%;min-width:0}
.lock__mark img{width:100%;height:auto;display:block}

/* ═══════════ TARJAS ═══════════ */
.strip{background:var(--areia);color:var(--cacau)}
.strip__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.4rem 1.5rem;min-height:3.25rem;padding-block:.75rem;
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
}
.strip--foot{margin-top:0}
.strip__links{display:flex;gap:1.25rem}
.strip__links a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.strip__links a:hover{border-bottom-color:var(--cacau)}

.thesis{background:var(--azul);color:var(--cacau)}
.thesis__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  align-items:end;gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(2.5rem,7vh,4.5rem);
}
.thesis__h{
  display:flex;flex-direction:column;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:var(--t-display);line-height:.88;letter-spacing:-.02em;
}
.thesis__p{
  font-size:var(--t-body);line-height:1.85;color:var(--cacau-dim);
  padding-bottom:.4rem;
}

/* Selo acompanhando título: quadrado na altura da caixa alta do próprio
   título, nunca ao lado de número. Pontual — quatro na página inteira, e o
   manual proíbe usá-los lado a lado ou como elemento principal. */
.has-selo{display:flex;align-items:center;gap:.26em}
.selo{flex:0 0 auto;width:.88em;height:.88em;object-fit:contain;display:block}

/* ═══════════ SEÇÕES ═══════════ */
.sec{padding-block:clamp(3rem,8vh,6rem)}
.sec--sand{background:var(--areia);color:var(--cacau)}
/* O timecode é rótulo, não linha de base: pendurá-lo na baseline de um título
   de 56px deixava a coluna torta. Ele vive na própria linha, acima. */
.sec__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;column-gap:clamp(1rem,3vw,2rem);row-gap:.35rem;
  padding-bottom:clamp(1.25rem,3vh,2rem);
  border-bottom:1px solid var(--areia-rule);
}
.sec__tc{grid-column:1;grid-row:1}
.sec__h{grid-column:1;grid-row:2}
.sec__n{grid-column:2;grid-row:1/3;align-self:end}
.sec--sand .sec__head{border-bottom-color:var(--cacau-rule)}
.sec__tc{font-family:var(--label);font-weight:700;font-size:var(--t-label);color:var(--azul)}
.sec--sand .sec__tc{color:var(--cacau)}
.sec__h{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:var(--t-title);line-height:1;letter-spacing:-.02em;
}
.sec__n{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-num);line-height:.78;letter-spacing:-.02em;
  justify-self:end;
}
.sec__n i{font-family:var(--mono);font-style:normal;font-size:var(--t-label);vertical-align:super;margin-right:.15rem;color:var(--areia-fade)}
.sec--sand .sec__n i{color:var(--cacau-dim)}
.sec__lead{
  max-width:64ch;margin-top:clamp(1.5rem,4vh,2.5rem);
  font-size:var(--t-body);line-height:1.8;color:var(--areia-dim);
}
.sec--sand .sec__lead{color:var(--cacau-dim)}

/* ═══════════ ROLO DE CADA DIRETOR ═══════════ */
/* O índice não pode ocupar 1400px: o leader vira um traço de 800px e o título
   flutua longe do número. No aurora.video o item vive numa coluna de 532px. */
.reel{
  padding-top:clamp(1.5rem,3.5vh,2.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) var(--colr);
  column-gap:var(--colgap);
  grid-template-areas:"bar bar" "frame frame" "idx bio";
}
.reel__bar{grid-area:bar}
.reel__frame{grid-area:frame}
.idx{grid-area:idx}
.reel__bio{grid-area:bio}
.reel__bar{
  display:grid;grid-template-columns:minmax(0,1fr) var(--colr);
  column-gap:var(--colgap);align-items:baseline;
  padding-bottom:.85rem;
}
.reel__meta{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:baseline}
.reel__name{
  font-family:var(--display-text);font-weight:400;font-size:var(--t-name);
  line-height:1;margin-right:auto;
}
.reel__role,.reel__count{
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
  color:var(--azul);
}
.reel__count{color:var(--areia-dim)}

/* o quadro: um filme grande por vez, largura inteira do conteúdo */
/* Sangria total. 2.67:1 é a proporção nativa dos loops, então não há corte —
   o ganho de peso vem de ocupar a largura inteira da tela, não de esticar. */
.reel__frame{
  position:relative;overflow:hidden;background:#191110;
  width:100vw;margin-inline:calc(50% - 50vw);
  aspect-ratio:2.35;   /* scope anamórfico: 12% das laterais do 2.67, ganho de 14% em altura */
}
@media (max-width:700px){.reel__frame{aspect-ratio:16/9}}
.reel__frame video,.reel__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .22s var(--ease);
}
.reel__frame .is-on{opacity:1}
.reel__play{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:.6rem;
  background:var(--azul);color:var(--cacau);
  padding:.7rem 1.1rem;
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
}
.reel__play svg{flex:0 0 auto;transition:transform .25s var(--ease)}
.reel__play:hover svg,.reel__play:focus-visible svg{transform:translateX(4px)}

/* índice com leader pontilhado — a navegação do aurora.video */
.idx{margin-top:1.5rem;border-top:1px solid var(--areia-rule)}
.sec--sand .idx{border-top-color:var(--cacau-rule)}
.idx__i{
  display:flex;align-items:baseline;gap:.75rem;width:100%;
  padding:.7rem 0;border-bottom:1px solid var(--areia-rule);
  color:var(--areia-fade);
  transition:color .2s var(--ease);
}
.idx__i:hover{color:var(--areia)}
.idx__i.is-on{color:var(--areia)}
.idx__n{font-family:var(--mono);font-weight:400;font-size:var(--t-code);flex:0 0 auto}
.idx__d{
  flex:1 1 auto;min-width:1.5rem;height:0;
  border-bottom:2px dotted currentColor;opacity:.45;
  transform:translateY(-.2rem);
}
.idx__t{font-family:var(--mono);font-weight:300;font-size:var(--t-body);flex:0 0 auto}
.idx__t b{font-weight:700}
.idx__x{
  font-family:var(--label);font-weight:700;font-size:var(--t-label);
  flex:0 0 auto;min-width:3.5rem;text-align:right;
}
.idx__i.is-on .idx__x{color:var(--azul)}

.reel__bio{
  margin-top:1.25rem;padding-top:.7rem;border-top:1px solid var(--areia-rule);
  font-size:var(--t-code);line-height:1.85;color:var(--areia-dim);
}

/* ═══════════ A CASA ═══════════ */
.crew{margin-top:clamp(1.5rem,4vh,2.5rem);border-top:1px solid var(--cacau-rule)}
.crew__i{
  display:grid;align-items:start;
  grid-template-columns:auto 8.75rem minmax(0,14rem) minmax(2rem,1fr) var(--colr);
  gap:.3rem 1.25rem;
  padding:clamp(1.1rem,2.6vh,1.75rem) 0;border-bottom:1px solid var(--cacau-rule);
}
.crew__ph{
  grid-column:2;grid-row:1/3;display:block;width:8.75rem;aspect-ratio:700/961;
  overflow:hidden;background:var(--cacau);
}
.crew__ph img{width:100%;height:100%;object-fit:cover}
/* retrato pendente: iniciais em placa Cacau. Slot óbvio, troca de uma linha,
   e nunca um rosto que não é da pessoa. */
.crew__ph--wait{
  display:grid;place-items:center;background:var(--cacau);
  font-family:var(--display);font-weight:700;font-size:var(--t-name);
  color:var(--areia-fade);letter-spacing:.02em;
}
.crew__ph--wait::after{content:attr(data-ini)}
.crew__name{
  font-family:var(--display-text);font-weight:400;
  font-size:var(--t-name);line-height:1;
}
.crew__id{grid-column:3;display:flex;flex-direction:column;gap:.35rem}
.crew__role{font-family:var(--label);font-weight:700;font-size:var(--t-label);
  text-transform:uppercase;color:var(--cacau-dim);
}
.crew__i .idx__d{grid-column:4;align-self:start;margin-top:.85rem}
.crew__from{font-family:var(--mono);font-size:var(--t-code);line-height:1.6;color:var(--cacau-dim)}
.crew__bio{
  grid-column:5;font-family:var(--mono);font-size:var(--t-code);
  line-height:1.75;color:var(--cacau-dim);
}
.crew__from b{font-weight:700;color:var(--cacau)}
.crew__i .idx__n{grid-column:1;color:var(--cacau-dim);line-height:1.7}

/* ═══════════ A CONTA ═══════════ */
.net{margin-top:clamp(1.5rem,4vh,2.5rem);border-top:1px solid var(--areia-rule)}
.net__i{
  display:grid;align-items:baseline;
  grid-template-columns:auto minmax(0,13rem) minmax(2rem,1fr) minmax(0,30ch) 5rem;
  gap:.3rem 1.25rem;
  padding:clamp(1.1rem,2.6vh,1.75rem) 0;border-bottom:1px solid var(--areia-rule);
}
.net__name{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:var(--t-name);line-height:1;letter-spacing:-.02em;
}
.net__what{font-family:var(--mono);font-size:var(--t-code);color:var(--areia-dim)}
.net__num{
  font-family:var(--label);font-weight:700;
  font-size:var(--t-name);line-height:1;
  min-width:2.5ch;text-align:right;
}
.net__fine{
  max-width:66ch;margin-top:clamp(1.25rem,3vh,1.75rem);
  font-size:var(--t-code);line-height:1.8;color:var(--areia-fade);
}

/* tarja Azul Margem */
.house{background:var(--azul);color:var(--cacau)}
.house__in{padding-block:clamp(2.25rem,6vh,3.75rem)}
.house__label{font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase}
.house__name{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:var(--t-title);line-height:.95;letter-spacing:-.02em;
  margin:.6rem 0 .8rem;
}
.house__what{max-width:60ch;font-size:var(--t-body);line-height:1.8;color:var(--cacau-dim)}

/* ═══════════ O PEDIDO ═══════════ */
.ask__in{padding-top:clamp(1.5rem,4vh,2.5rem)}
.ask__h{
  display:flex;flex-direction:column;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:var(--t-display);line-height:.88;letter-spacing:-.02em;
}
.ask__p{max-width:54ch;margin-top:clamp(1.25rem,3vh,2rem);color:var(--areia-dim);font-size:var(--t-body);line-height:1.8}

.bar{display:block;background:var(--azul);color:var(--cacau);text-decoration:none}
.bar__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;
  padding-block:clamp(1.5rem,4vh,2.5rem);
}
.bar__label{font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase}
.bar__mail{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-title);line-height:1;letter-spacing:-.02em;
  margin-right:auto;
}
.bar svg{flex:0 0 auto;transition:transform .3s var(--ease)}
.bar:hover svg{transform:translateX(6px)}

/* ═══════════ PLAYER ═══════════ */
.player{
  position:fixed;inset:0;z-index:150;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:clamp(1rem,4vw,3rem);background:rgba(20,13,12,.97);
  opacity:0;transition:opacity .3s var(--ease);
}
.player[hidden]{display:none}
.player.is-open{opacity:1}
.player__frame{width:min(100%,75rem);aspect-ratio:16/9;background:#191110}
.player__frame iframe{width:100%;height:100%;border:0;display:block}
.player__close{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:3rem;height:3rem;display:grid;place-items:center;
  border:1px solid var(--areia-rule);color:var(--areia);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.player__close:hover{border-color:var(--azul);color:var(--azul)}
.player__cap{
  font-family:var(--label);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
  text-align:center;color:var(--areia-dim);
}
.player__cap a{color:var(--azul);text-decoration:none;border-bottom:1px solid transparent}
.player__cap a:hover{border-bottom-color:var(--azul)}

/* ═══════════ ENTRADA ═══════════ */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width:900px){
  .reel{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "frame" "idx" "bio"}
  .head__in{flex-direction:column;align-items:stretch;gap:1rem}
  .head__selo{width:3.25rem}
  .head__meta{justify-content:flex-start;gap:.35rem 1.25rem;font-size:var(--t-label)}



  .idx__i{flex-wrap:wrap;gap:.35rem .6rem}
  .idx__d{display:none}
  .idx__t{flex:1 1 100%;order:3}
  .idx__x{margin-left:auto;min-width:0}

  .thesis__in{grid-template-columns:minmax(0,1fr)}
  .crew__i{grid-template-columns:4.5rem 1fr;gap:.3rem .9rem}
  .crew__i .idx__n{display:none}
  .crew__ph{width:4.5rem;grid-column:1;grid-row:1/4}
  .crew__i .crew__name{grid-column:2}
  .crew__role{grid-column:2}
  .crew__i .idx__d{display:none}
  .crew__from{grid-column:2;grid-row:auto;max-width:none;margin-top:.5rem}

  .net__i{grid-template-columns:auto minmax(0,1fr) auto;gap:.3rem .9rem}
  .net__i .idx__d{display:none}
  .net__what{grid-column:1/-1;margin-top:.3rem}
}

@media (max-width:560px){
  .tcbar__fps,.tcbar__reel{display:none}
  .tcbar__in{gap:.85rem}
  .strip__in{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}