/* ============================================================
   Bomrruk Vision — direção "O Caso"
   Identidade herdada do site v1 (paleta e fontes), estrutura nova:
   editorial, assimétrica, o raciocínio ao lado da peça.
   ============================================================ */

:root{
  --bg:        #070A10;
  --bg-2:      #0B0F17;
  --surface:   #10151F;
  --raised:    #161C28;
  --ink:       #F4F2ED;
  --muted:     #9DA4B2;
  --dim:       #676E7C;
  --line:      rgba(244,242,237,.10);
  --line-hi:   rgba(244,242,237,.20);
  --ghost:     rgba(255,255,255,.08);

  /* âmbar: usado só no indicador de disponibilidade e no progresso do scroll */
  --signal:    #D9A94F;

  --display: "Clash Display", "Instrument Sans", system-ui, sans-serif;
  --sans:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1140px;
  --pad: 26px;
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: var(--ease-out);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:74px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
::selection{ background:var(--ink); color:var(--bg); }

.sr,.skip{ position:absolute; }
.skip{
  left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--bg);
  padding:12px 18px; border-radius:0 0 8px 0; font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }

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

/* ---------- tipografia compartilhada ---------- */

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin:0 0 18px;
}

.h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(30px,4.2vw,46px); letter-spacing:-.03em; line-height:1.04;
  margin:0 0 22px; text-wrap:balance;
}

.lede{
  font-size:clamp(16px,1.35vw,18.5px); line-height:1.6; color:var(--muted);
  max-width:66ch; margin:0;
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(7,10,16,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
.nav.stuck{ border-bottom-color:var(--line); }

.nav__prog{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:0 50%;
  opacity:.85; pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .nav__prog{
    animation:prog linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes prog{ to{ transform:scaleX(1) } }

.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad);
  height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav__me{
  font-family:var(--display); font-weight:500; font-size:17px; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  font-size:14px; color:var(--muted); text-decoration:none;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }

.nav__cta{
  display:inline-flex; align-items:center; height:34px; padding:0 15px;
  border-radius:999px; background:var(--ghost);
  box-shadow:inset 0 0 0 1px var(--line-hi);
  color:var(--ink) !important; font-weight:500;
}
.nav__cta:hover{ background:rgba(255,255,255,.14); }

/* ============================================================
   HERO — tese, não nome
   ============================================================ */

.hero{
  position:relative; overflow:hidden;
  padding:clamp(72px,11vw,132px) 0 clamp(64px,9vw,108px);
}
.hero__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  position:relative; z-index:2;
}

.hero__h{
  font-family:var(--display); font-weight:600;
  font-size:clamp(32px,6.2vw,80px); letter-spacing:-.042em; line-height:.98;
  margin:0 0 28px; max-width:24ch;
}
.hero__h .ln{
  display:block; overflow:hidden;
  /* respiro para o overflow não cortar descendentes no Clash Display */
  padding-bottom:.09em; margin-bottom:-.09em;
}
.hero__h .ln i{
  display:block; font-style:normal;
  transform:translateY(100%);
  animation:lineIn .9s var(--ease-out) both;
}
.hero__h .ln:nth-of-type(1) i{ animation-delay:.08s; }
.hero__h .ln:nth-of-type(2) i{ animation-delay:.16s; }
.hero__h .ln:nth-of-type(3) i{ animation-delay:.24s; }
.hero__h .ln--dim{ color:var(--muted); }

@keyframes lineIn{ to{ transform:translateY(0) } }

@media (max-width:760px){
  .hero__h .ln{ overflow:visible; padding-bottom:0; margin-bottom:0; }
  .hero__h .ln i{ transform:none; animation:riseIn .7s var(--ease-out) both; }
}

/* sequência de entrada do hero — um momento orquestrado, não efeito espalhado */
.enter{ animation:riseIn .7s var(--ease-out) both; animation-delay:calc(.08s * var(--o, 0)); }
@keyframes riseIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.hero__sub{
  font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--muted);
  max-width:56ch; margin:0 0 36px;
}

.hero__meta{
  display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center;
  font-family:var(--mono); font-size:12.5px; color:var(--dim);
}
.hero__meta b{ color:var(--ink); font-weight:500; }
.hero__meta .live{ display:inline-flex; align-items:center; gap:8px; color:var(--signal); }
.hero__meta .live i{
  width:7px; height:7px; border-radius:50%; background:var(--signal); display:block;
  box-shadow:0 0 0 0 rgba(217,169,79,.5); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(217,169,79,.45) }
  70%{ box-shadow:0 0 0 9px rgba(217,169,79,0) }
  100%{ box-shadow:0 0 0 0 rgba(217,169,79,0) }
}
@media (prefers-reduced-motion: reduce){ .hero__meta .live i{ animation:none } }

/* dois clipes na borda direita — presença, não protagonismo */
.hero__rail{
  position:absolute; top:0; right:0; height:100%; width:38%;
  display:flex; gap:10px; padding:18px 18px 18px 0;
  z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, #000 8%, rgba(0,0,0,.55) 45%, transparent 100%);
  mask-image:linear-gradient(to left, #000 8%, rgba(0,0,0,.55) 45%, transparent 100%);
}
/* duas camadas: a lane carrega o parallax, o vídeo carrega a entrada.
   As duas na mesma camada colidiriam em transform e a entrada sumiria. */
.hero__lane{ flex:1 1 0; min-width:0; height:100%; }

.hero__rail video{
  width:100%; height:100%; object-fit:cover; border-radius:10px;
  opacity:0; animation:railIn 1.1s var(--ease-out) .28s both;
}
.hero__lane:nth-child(2) video{ animation-delay:.4s; }
@keyframes railIn{
  from{ opacity:0; transform:translateY(26px) scale(1.03) }
  to{ opacity:.34; transform:none }
}

@supports (animation-timeline: scroll()){
  .hero__lane{ animation:railDrift linear both; animation-timeline:scroll(root block); animation-range:0 100vh; }
  .hero__lane:nth-child(2){ animation-name:railDrift2; }
}
@keyframes railDrift{  to{ transform:translateY(-11%) } }
@keyframes railDrift2{ to{ transform:translateY(-19%) } }

@media (max-width:900px){ .hero__rail{ display:none; } }

/* ============================================================
   FAIXAS
   ============================================================ */

.band{ padding:clamp(64px,8.5vw,104px) 0; }
.bord{ border-top:1px solid var(--line); }

/* ============================================================
   CASE
   ============================================================ */

.case{ padding:clamp(48px,7vw,84px) 0; border-top:1px solid var(--line); }

/* o case no centro da tela fica "selecionado": chega no pico de presença e
   recua quando sai. O que está sendo lido é o que está aceso. */
@supports (animation-timeline: view()){
  @media (min-width:1001px){
    .case__in{
      animation:focus linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes focus{
  0%   { opacity:.42; filter:saturate(.75) }
  38%  { opacity:1;   filter:saturate(1)   }
  62%  { opacity:1;   filter:saturate(1)   }
  100% { opacity:.42; filter:saturate(.75) }
}
.case.alt{ background:var(--bg-2); }

.case__head{
  display:flex; align-items:baseline; gap:20px; margin-bottom:38px;
}
.case__n{
  font-family:var(--display); font-weight:600; font-size:clamp(34px,4.6vw,54px);
  letter-spacing:-.04em; line-height:1; color:var(--line-hi); flex:none;
}
.case__title{
  font-family:var(--display); font-weight:500; font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.025em; line-height:1.1; margin:0 0 6px;
}
.case__cat{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin:0;
}

.case__role{
  font-size:12px; letter-spacing:.04em; color:var(--muted, #8a8a8a);
  margin:6px 0 0; text-transform:none;
}

.case__grid{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(28px,4vw,56px);
  align-items:start;
}

.case__media{ display:grid; grid-template-columns:1fr 1fr; gap:12px; position:sticky; top:82px; }

@supports (animation-timeline: view()){
  .case__media .tile{
    animation:build linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  .case__media .tile:nth-child(2){ animation-name:buildB; }
}
/* a peça se forma na entrada e segue derivando enquanto atravessa a tela:
   uma curva só, presa à posição do scroll do começo ao fim */
@keyframes build{
  0%   { opacity:0; transform:translateY(38px) scale(.94) }
  36%  { opacity:1; transform:translateY(0)    scale(1)   }
  100% { opacity:1; transform:translateY(-24px) scale(1)  }
}
@keyframes buildB{
  0%   { opacity:0; transform:translateY(54px) scale(.93) }
  42%  { opacity:1; transform:translateY(0)    scale(1)   }
  100% { opacity:1; transform:translateY(-40px) scale(1)  }
}

.case__text{ display:grid; gap:28px; }

/* --- beats --- */

@supports (animation-timeline: view()){
  .beat{
    animation:materialize linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 22%;
  }
}

.beat--anim{ opacity:0; transform:translateY(14px); }
.beat--anim.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .beat--anim{ transform:none; }
  .beat--anim.is-in{ transition:opacity .4s ease; }
}

.beat h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dim); font-weight:500; margin:0 0 10px;
}
.beat p{ margin:0; }

.quote{
  font-family:var(--display); font-weight:500;
  font-size:clamp(19px,2.1vw,25px); letter-spacing:-.02em; line-height:1.25;
  color:var(--ink);
}
.obs{
  margin-top:10px !important; font-size:15px; line-height:1.55; color:var(--muted);
  max-width:60ch;
}

/* ============================================================
   TILES + STRIP
   ============================================================ */

.tile{
  position:relative; aspect-ratio:9/16; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  transition:border-color .28s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tile video{
  width:100%; height:100%; object-fit:cover;
  transition:transform .28s var(--ease);
}
/* toque dispara :hover falso — só ponteiro fino */
@media (hover: hover) and (pointer: fine){
  .tile:hover{ border-color:var(--line-hi); }
  .tile:hover video{ transform:scale(1.055); }
}

/* clipes muito claros — gravação de tela, fundo branco — perdiam a borda
   contra o fundo escuro e liam como buraco. Vinheta interna resolve. */
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(244,242,237,.07),
    inset 0 -46px 62px -34px rgba(7,10,16,.72);
}

.tile__play{
  position:absolute; right:10px; bottom:10px; width:30px; height:30px;
  border-radius:50%; background:rgba(7,10,16,.6); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px var(--line-hi);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.tile__play::after{
  /* triângulo por clip-path em vez do truque de bordas transparentes:
     mesma forma, sem um border-left colorido que lê como barra de acento */
  content:""; position:absolute; top:50%; left:calc(50% + 1px); translate:-50% -50%;
  width:9px; height:11px; background:var(--ink);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.tile__play{ transform:scale(.94); transition:opacity .2s var(--ease), transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine){
  .tile:hover .tile__play{ opacity:1; transform:scale(1); }
}
.tile:focus-visible .tile__play{ opacity:1; transform:scale(1); }

.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;
}

@supports (animation-timeline: view()){
  .strip .tile{
    animation:build linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 34%;
  }
  .strip .tile:nth-child(3n+2){ animation-range:entry 0% cover 40%; }
  .strip .tile:nth-child(3n+3){ animation-range:entry 0% cover 46%; }
}

/* ============================================================
   PROCESS
   ============================================================ */

.steps{
  list-style:none; margin:52px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.steps li{ background:var(--bg); padding:30px 28px; }

@supports (animation-timeline: view()){
  .steps li{
    animation:materialize linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 30%;
  }
  .steps li:nth-child(2){ animation-range:entry 5% cover 36%; }
  .steps li:nth-child(3){ animation-range:entry 5% cover 33%; }
  .steps li:nth-child(4){ animation-range:entry 5% cover 39%; }
}
.steps__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--dim);
  display:block; margin-bottom:16px;
}
.steps h3{
  font-family:var(--display); font-weight:500; font-size:19px; letter-spacing:-.02em;
  line-height:1.2; margin:0 0 10px;
}
.steps p{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); max-width:44ch; }

/* ============================================================
   CONTACT
   ============================================================ */

.contact__rows{ margin-top:44px; border-top:1px solid var(--line); }

.crow{
  display:grid; grid-template-columns:120px 1fr 24px; align-items:center; gap:20px;
  padding:22px 6px; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  transition:background-color .3s var(--ease);
}
.crow:hover{ background:rgba(255,255,255,.02); }

/* o deslocamento no hover é feito nos filhos com transform:
   animar padding no <a> causava reflow da linha inteira a cada hover */
.crow__k,.crow__v{ transition:transform .35s var(--ease); }
.crow:hover .crow__k,
.crow:hover .crow__v{ transform:translateX(10px); }
.crow__k{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.crow__v{ font-size:clamp(16px,1.7vw,20px); }
.crow__go{ color:var(--dim); transition:color .3s var(--ease), transform .3s var(--ease); }
.crow:hover .crow__go{ color:var(--signal); transform:translateX(4px); }

/* ============================================================
   FOOTER + LIGHTBOX
   ============================================================ */

.foot{ border-top:1px solid var(--line); padding:30px 0 44px; }
.foot__in{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--dim);
}
.foot__in p{ margin:0; }
.foot__in p:first-child{
  font-family:var(--display); font-size:15px; letter-spacing:-.02em; color:var(--ink);
}

.lb[hidden]{ display:none !important; }
.lb{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; background:rgba(4,6,10,.93); backdrop-filter:blur(10px);
  animation:fade .28s var(--ease);
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lb__video{
  max-width:min(430px,92vw); max-height:88svh; width:auto;
  border-radius:12px; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.lb__close{
  position:absolute; top:20px; right:22px; width:44px; height:44px;
  border:0; border-radius:50%; background:var(--ghost); color:var(--ink);
  font-size:26px; line-height:1; cursor:pointer; transition:background-color .25s var(--ease);
}
.lb__close:hover{ background:rgba(255,255,255,.16); }

/* ============================================================
   REVEAL
   ============================================================ */

/* fallback para navegador sem scroll-driven animation: dispara uma vez */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* onde houver suporte, o progresso vira função da rolagem */
@supports (animation-timeline: view()){
  .reveal{
    opacity:1; transform:none;
    animation:materialize linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 26%;
  }
  .reveal.is-in{ transition:none; }
}
@keyframes materialize{
  from{ opacity:0; transform:translateY(30px) scale(.985) }
  to{   opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  /* mantém o que ajuda a compreensão (opacidade), remove deslocamento */
  .reveal{ opacity:0; transform:none; }
  .reveal.is-in{ transition:opacity .4s ease; }
  .hero__h .ln i{ transform:none; animation:fadeIn .4s ease both; }
  .enter{ animation:fadeIn .4s ease both; animation-delay:0s; }
  .hero__rail video{ animation:none; opacity:.34; }
  .hero__lane{ animation:none; }
  .tile:hover video{ transform:none; }
  .case__in{ animation:none !important; opacity:1 !important; filter:none !important; }
  .case__media .tile,
  .strip .tile,
  .steps li,
  .beat,
  .reveal{ animation:none !important; opacity:1 !important; transform:none !important; }
  .nav__prog{ animation:none; }
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width:1000px){
  .case__grid{ grid-template-columns:1fr; gap:32px; }
  .case__media{ position:static; max-width:340px; }
  .strip{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:760px){
  :root{ --pad:20px; }
  .nav__links a:not(.nav__cta){ display:none; }
  .steps{ grid-template-columns:1fr; }
  .strip{ grid-template-columns:repeat(3,1fr); gap:9px; }
  .case__media{ max-width:none; }
  .crow{ grid-template-columns:96px 1fr 20px; gap:12px; }
  .case__head{ gap:14px; }
}