/* Layout: a lâmpada do logo é um carrossel de slides — cada parada projeta um case no fundo (vertical vira um quadro 9:16 atrás da lâmpada). Abaixo, showreel, mosaico em vídeo, serviços e contato. Todo o conteúdo vem de conteudo.json. */
:root{
  --ink:#120010;          /* fundo: #240020 da marca, escurecido para a projeção */
  --plum:#240020;         /* cor da marca: superfícies */
  --line:#3a1634;         /* divisórias */
  --paper:#fbefe6;        /* texto */
  --muted:#c2a6b6;        /* texto secundário */
  --orange:#ff7809;       /* cor da marca */
  --pink:#cc316f;         /* cor da marca */
  --grad:linear-gradient(100deg,var(--orange) 0%,var(--pink) 100%);
  --f-display:"Rubik", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut:clamp(16px,3.4vw,44px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html,body{background:var(--ink);color:var(--paper)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
/* etiquetas pequenas: fonte do texto, espaçada, sem cara de código */
.mono{font-family:var(--f-body);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
video{display:block}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* logo: vem de conteudo.json. "recorte" serve para o arquivo atual, que tem muita margem
   (1600×2000, a marca ocupa ~55–1545 × 805–1250); um logo já recortado aparece inteiro */
.logo-box{display:block;position:relative}
.logo-box img{display:block;width:100%;height:auto;filter:brightness(1.3) saturate(1.05)}
.logo-box.recorte{aspect-ratio:1490/445;overflow:hidden}
.logo-box.recorte img{position:absolute;width:107.38%;max-width:none;left:-3.69%;top:-180.9%}
.brand{display:block;width:clamp(140px,14vw,190px);text-decoration:none}

/* filtros */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:rgba(36,0,32,.78);border-radius:999px;padding:7px 13px;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--muted);transition:border-color .2s,color .2s;white-space:nowrap}
.chip b{font-family:var(--f-mono);font-weight:500;font-size:.7rem;opacity:.7}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--paper))}
.chip[aria-pressed="true"]{color:var(--paper);border-color:var(--c,var(--paper))}
.chip:hover{color:var(--paper)}
.filter-select{display:none;appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:rgba(36,0,32,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fbefe6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border-radius:999px;padding:8px 32px 8px 14px;font-size:.85rem;font-weight:600}

/* ---------- PALCO ---------- */
.stage{position:relative;height:clamp(560px,86vh,880px);overflow:hidden;isolation:isolate;background:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
/* vídeo do case atrás da lâmpada (dois vídeos que se revezam com fusão) */
.proj{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.4s ease}
.proj.pronto{opacity:1}
.proj-slot{position:absolute;inset:0;opacity:1;z-index:1;transition:opacity .5s ease}
.proj-slot.topo{z-index:2}
.proj-slot.saindo{opacity:0}
.proj-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj-slot .fill{display:none;filter:blur(28px);transform:scale(1.15)}
.proj-slot.quadro .fill{display:block}
.proj-slot.quadro .main{inset:5% auto 5% var(--cx,50%);width:auto;height:90%;aspect-ratio:9/16;transform:translateX(-50%);border-radius:16px}
.proj-vig{position:absolute;inset:0;background:radial-gradient(ellipse 70% 85% at var(--cx,50%) var(--cy,50%),rgba(18,0,16,.36) 0%,rgba(18,0,16,.6) 55%,rgba(18,0,16,.92) 100%)}
.stage canvas:active{cursor:grabbing}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(18,0,16,.9) 0%,rgba(18,0,16,.4) 34%,rgba(18,0,16,0) 52%),linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,.55) 14%,rgba(18,0,16,0) 32%)}
.labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.overlay{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:20px var(--gut) 18px}
.overlay > *{pointer-events:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.nav{display:flex;gap:22px}
.nav a{text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:600}
.nav a:hover{color:var(--paper)}
.hero-copy{align-self:center;max-width:min(620px,46vw);pointer-events:none;padding-block:12px}
.eyebrow{color:var(--orange);margin:0 0 16px}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,min(4.4vw,7.4vh),4.4rem);line-height:.98;letter-spacing:-.03em;margin:0;white-space:nowrap}
.lede{color:#dcc8d2;max-width:40ch;margin:20px 0 0;font-size:1.02rem}
.bottombar{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:18px}
.hint{display:flex;align-items:center;gap:10px;color:var(--muted);margin:14px 0 0}

.scroll-cue{justify-self:center;display:grid;justify-items:center;gap:8px;text-decoration:none;color:var(--paper);padding:6px 10px}
.scroll-cue .mono{color:var(--muted);transition:color .2s}
.scroll-cue:hover .mono{color:var(--paper)}
.mouse{width:24px;height:38px;border:2px solid rgba(251,239,230,.7);border-radius:14px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--orange);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* slide em cartaz */
.now{justify-self:end;display:grid;gap:6px;justify-items:end;text-align:right;min-width:0;max-width:24rem}
.now .mono{color:var(--muted);display:flex;gap:10px;align-items:center}
.now .mono::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.now-title{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.now-sub{color:#dcc8d2;font-size:.9rem}
.now button{margin-top:6px;border:0;background:var(--grad);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap}
.now button:hover{filter:brightness(1.1)}
.now.swap .now-title,.now.swap .now-sub{animation:fadein .45s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.dots{display:flex;gap:5px;margin-top:2px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(251,239,230,.25);transition:background .3s,transform .3s}
.dots i.on{background:var(--orange);transform:scale(1.3)}
.fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);z-index:0;text-align:center;padding:0 24px}

/* pontos de campanha */
.hs{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;will-change:transform;transition:opacity .25s;touch-action:pan-y}
.hs-dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--c);flex:none;position:relative;transition:transform .2s}
.hs-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--c);box-shadow:0 0 10px 2px var(--c)}
.hs.feat .hs-dot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--c);animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(.7);opacity:1}to{transform:scale(1.5);opacity:0}}
.hs-txt{display:grid;text-align:left;line-height:1.15;white-space:nowrap;padding:6px 10px;border-radius:8px;background:rgba(18,0,16,.8);border:1px solid rgba(255,255,255,.08);transition:opacity .25s}
.hs-txt b{font-family:var(--f-display);font-weight:500;font-size:.88rem}
.hs-txt small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hs.back .hs-txt{opacity:0;pointer-events:none}
.hs:hover .hs-dot,.hs.feat .hs-dot{transform:scale(1.2)}
.hs.feat .hs-txt{background:var(--grad);border-color:transparent;box-shadow:0 6px 24px rgba(204,49,111,.45)}
.hs.feat .hs-txt small{color:rgba(255,255,255,.85)}
.hs.off{opacity:.12!important;pointer-events:none}

.grab{position:absolute;left:0;top:0;z-index:2;pointer-events:none;display:grid;justify-items:center;gap:8px;transition:opacity .5s;opacity:0}
.grab.show{opacity:1}
.grab.gone{opacity:0!important}
.grab .hand{width:46px;height:46px;border-radius:50%;background:rgba(18,0,16,.6);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;animation:swipe 2.6s ease-in-out infinite}
.grab .lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(18,0,16,.7);white-space:nowrap}
@keyframes swipe{0%,15%{transform:translateX(-34px)}50%,65%{transform:translateX(34px)}100%{transform:translateX(-34px)}}

/* ---------- SEÇÕES ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(56px,9vw,112px)}
#reel{padding-top:clamp(20px,3vw,36px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:28px}
h2{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
.sec-head p{margin:0;color:var(--muted)}

/* showreel: horizontal ocupa a tela; vertical fica no centro com fundo desfocado */
.reel{position:relative;aspect-ratio:2.39/1;max-width:100%;border-radius:18px;overflow:hidden;background:#000;cursor:pointer;border:0;padding:0;width:100%;display:block}
.slot{position:absolute;inset:0;transition:opacity .7s ease}
.slot.hide{opacity:0}
.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .fill{display:none;filter:blur(28px) brightness(.5);transform:scale(1.2)}
.slot.vert .fill{display:block}
.slot.vert .main{inset:0 auto 0 50%;width:auto;height:100%;aspect-ratio:9/16;transform:translateX(-50%)}
.reel-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 22px;background:linear-gradient(0deg,rgba(18,0,16,.75) 0%,rgba(18,0,16,0) 42%),linear-gradient(180deg,rgba(18,0,16,.45) 0%,rgba(18,0,16,0) 25%);text-align:left}
.reel-ui .row{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.85)}
.reel-ui .row span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3b30;margin-right:8px;vertical-align:1px}
.reel-ui strong{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1}
.reel-ui small{display:block;color:rgba(255,255,255,.78);margin-top:6px;font-size:.9rem}
.reel-bar{height:3px;background:rgba(255,255,255,.18);margin-top:14px;border-radius:3px;overflow:hidden}
.reel-bar i{display:block;height:100%;width:0;background:var(--grad)}
.tc{font-variant-numeric:tabular-nums}

/* mosaico: horizontais 16:10 e verticais 9:16 lado a lado */
.work-filters{margin-bottom:22px}
.grid{columns:3 260px;column-gap:clamp(12px,1.6vw,18px)}
.card{break-inside:avoid;margin-bottom:clamp(12px,1.6vw,18px)}
.card[hidden]{display:none}
.card button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;position:relative;border-radius:14px;overflow:hidden;background:var(--plum)}
.card .media{position:relative;display:block;aspect-ratio:16/10;max-width:100%}
.card.vert .media{aspect-ratio:9/16}
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s;filter:saturate(.85) brightness(.82)}
.card button:hover video,.card button:focus-visible video,.card.playing video{transform:scale(1.06);filter:none}
.card .tcb{position:absolute;left:12px;top:12px;padding:4px 8px;border-radius:6px;background:rgba(18,0,16,.6);color:rgba(255,255,255,.9)}
.card .meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:40px 14px 14px;background:linear-gradient(0deg,rgba(18,0,16,.9) 0%,rgba(18,0,16,0) 100%)}
.card .meta > span:first-child{min-width:0}
.card .meta b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:-.01em;line-height:1.15}
.card .meta span span{color:#dcc8d2;font-size:.85rem}
.card .cat{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#dcc8d2;font-size:.75rem}
.card .cat i{width:8px;height:8px;border-radius:50%;background:var(--c)}

.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px)}
.svc h3{font-family:var(--f-display);font-weight:700;font-size:1.5rem;margin:0 0 6px;display:flex;align-items:center;gap:12px}
.svc h3 small{font-family:var(--f-mono);font-weight:400;font-size:.7rem;color:var(--orange);letter-spacing:.08em}
.svc p{color:var(--muted);margin:0 0 18px;max-width:46ch}
.svc ul{list-style:none;margin:0;padding:0;display:grid}
.svc li{padding:12px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.svc li span{color:var(--muted);font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;text-align:right}

.contact .logo-box{width:min(620px,100%);margin-bottom:clamp(28px,4vw,48px)}
.contact h2{font-size:clamp(2.4rem,7vw,5.6rem);line-height:.95;max-width:13ch}
.contact .lede{margin-top:18px}
.contact-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}
.mail{font-family:var(--f-mono);font-size:1rem;padding:14px 18px;border:1px solid var(--line);border-radius:12px;user-select:all;background:var(--plum);overflow-wrap:anywhere}
.btn{border:0;border-radius:12px;padding:14px 20px;font-weight:700;cursor:pointer;background:var(--grad);color:#fff;text-decoration:none;display:inline-block}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--paper)}
footer{border-top:1px solid var(--line);padding-block:26px;color:var(--muted);font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- CASE EM TELA CHEIA ---------- */
.case{position:fixed;inset:0;z-index:30;background:var(--ink);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.case.open{opacity:1;visibility:visible;transition:opacity .45s ease}
.case-hero{position:relative;height:min(86vh,920px);min-height:460px;overflow:hidden}
.c-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;filter:blur(40px) brightness(.45) saturate(1.2);transform:scale(1.25)}
.c-media{position:absolute;inset:0;overflow:hidden}
.c-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease-out}
.case.open .c-media video{transform:scale(1)}
.case-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,.55) 30%,rgba(18,0,16,0) 60%),linear-gradient(180deg,rgba(18,0,16,.6) 0%,rgba(18,0,16,0) 22%)}
.case-top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 0}
.case-top .count{color:rgba(255,255,255,.8)}
.close{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.3);background:rgba(18,0,16,.5);border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:700;font-size:.85rem}
.close:hover{border-color:#fff}
.case-title{position:absolute;z-index:2;left:0;right:0;bottom:clamp(28px,5vw,56px);padding-inline:var(--gut)}
.case-title .tag{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem;color:var(--c)}
.case-title .tag i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.case-title h2{font-size:clamp(2.6rem,8vw,7rem);line-height:.92;letter-spacing:-.035em;margin:14px 0 10px;max-width:14ch}
.case-title p{margin:0;color:#e6d6de;font-size:1.05rem}
.case-title .btn{margin-top:18px}
/* case vertical no computador: vídeo em pé à direita, título à esquerda */
@media (min-width:861px){
  .case.vert .c-bg{display:block}
  .case.vert .c-media{inset:auto;top:50%;right:calc(var(--gut) + 4vw);height:80%;aspect-ratio:9/16;transform:translateY(-50%);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6);z-index:1}
  .case.vert .case-hero::after{background:linear-gradient(90deg,rgba(18,0,16,.7) 0%,rgba(18,0,16,0) 55%),linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,0) 25%)}
  .case.vert .case-title{top:50%;bottom:auto;transform:translateY(-50%);right:auto;max-width:52%}
}
/* assistindo ao filme completo: some o título e o degradê para o vídeo ficar limpo */
.case.watching .case-title,.case.watching .case-hero::after{opacity:0;pointer-events:none;transition:opacity .4s}
.case.watching .c-media video{object-fit:contain;background:#000}
.case.watching .c-bg{filter:blur(40px) brightness(.25)}
.case-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);padding-block:clamp(36px,6vw,72px)}
.case-desc{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.3;margin:0 0 28px;max-width:30ch;text-wrap:pretty}
.p-label{color:var(--muted);margin:0 0 12px}
.deliv{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.deliv li{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.88rem}
.slate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.slate div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:3px;min-width:0}
.slate div:nth-child(2n){border-right:0}
.slate div:nth-last-child(-n+2){border-bottom:0}
.slate small{color:var(--muted)}
.slate strong{font-family:var(--f-mono);font-weight:500;font-size:.9rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--plum);border-radius:14px;padding:16px}
.stat strong{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;color:var(--c)}
.stat span{color:var(--muted);font-size:.88rem}
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.frames.vert{grid-template-columns:repeat(3,minmax(0,240px))}
.frames div{aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:var(--plum);position:relative}
.frames.vert div{aspect-ratio:9/16}
.frames video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frames span{position:absolute;left:8px;bottom:8px;color:rgba(255,255,255,.88);text-shadow:0 1px 6px #000}
.sample{font-size:.8rem;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:9px 12px;margin-top:18px}
.next{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;height:clamp(200px,30vw,340px);cursor:pointer;overflow:hidden;margin-top:clamp(36px,6vw,72px)}
.next video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(.8);transition:filter .5s,transform .8s}
.next:hover video,.next:focus-visible video{filter:brightness(.7);transform:scale(1.03)}
.next .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-inline:var(--gut)}
.next .in span{color:rgba(255,255,255,.78)}
.next .in strong{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,5.4vw,4.4rem);letter-spacing:-.03em;line-height:1;margin-top:10px}

@media (max-width:860px){
  .stage{height:clamp(600px,88svh,820px)}
  .vignette{background:linear-gradient(180deg,rgba(18,0,16,.92) 0%,rgba(18,0,16,0) 40%),linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,.8) 26%,rgba(18,0,16,0) 48%)}
  .hero-copy{align-self:start;max-width:100%;margin-top:22px}
  h1{font-size:clamp(2.1rem,9vw,3.1rem)}
  .lede,.nav,.hint,.dots{display:none}
  .hs-txt small{display:none}
  .hs-txt b{font-size:.74rem}
  .hs:not(.feat) .hs-txt{padding:4px 8px}
  .bottombar{grid-template-columns:1fr;grid-template-areas:"now" "cue";gap:12px;align-items:center}
  .hero-filter{display:none}
  .now{grid-area:now;justify-self:stretch;justify-items:start;text-align:left;max-width:none;grid-template-columns:1fr auto;column-gap:12px;align-items:end}
  .now .mono,.now-title,.now-sub{grid-column:1}
  .now button{grid-column:2;grid-row:2 / span 2;align-self:end;margin:0}
  .now-title{font-size:1.35rem}
  .scroll-cue{grid-area:cue;padding:0;grid-auto-flow:column;align-items:center;gap:10px}
  .mouse{width:18px;height:28px}
  .work-filters{display:none}
  .filter-select{display:inline-block;margin-bottom:18px}
  .grid{columns:2;column-gap:10px}
  .card{margin-bottom:10px}
  .card .cat,.card .tcb{display:none}
  .card .meta{padding:30px 10px 10px}
  .card .meta b{font-size:.95rem}
  .card .meta span span{font-size:.75rem}
  .reel{aspect-ratio:16/10}
  .services,.case-body{grid-template-columns:1fr}
  .frames,.frames.vert{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frames div:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .case,.hs,.hs-txt,.card video,.c-media video,.slot{transition:none}
  .now.swap .now-title,.now.swap .now-sub,.hs.feat .hs-dot::before,.mouse::after,.grab .hand{animation:none}
}

/* ---------- topo mais limpo ----------
   Só o case em cartaz mostra o nome; os outros são pontos de luz (o nome aparece ao passar o mouse).
   "Em cartaz" mostra só título, cliente e botão. */
.hs-txt small{display:none}
/* os outros cases ficam apagadinhos, para mostrar que girar passa por eles */
.hs:not(.feat) .hs-txt{opacity:.42;transition:opacity .25s}
.hs:not(.feat):hover .hs-txt,.hs:not(.feat):focus-visible .hs-txt{opacity:1}
.hs.back .hs-txt{opacity:0!important}
.hs-dot{width:18px;height:18px;border-color:transparent}
.hs.feat .hs-dot{border-color:var(--c)}
.hs .hs-txt{background:rgba(18,0,16,.55);border-color:transparent}
.hs.feat .hs-txt{padding:7px 12px}
#now-slide,.dots{display:none!important}
.now{gap:4px}
.now button{margin-top:10px}
.card .tcb{display:none}
.scroll-cue{padding:4px}

/* ---------- composição de pôster ----------
   Lâmpada no centro, slogan embaixo à esquerda como título de filme,
   e o selo do case em cartaz (ao lado da lâmpada) é o botão "Ver case". */
.now{display:none!important}
.overlay{grid-template-rows:auto minmax(0,1fr) auto}
.hero-copy{grid-row:3;align-self:end;max-width:min(640px,60vw);padding-block:0}
.bottombar{grid-row:3;grid-template-columns:1fr auto;align-self:end;pointer-events:none}
.bottombar > *{pointer-events:auto}
.hero-filter{display:none}
.scroll-cue{grid-column:2;justify-self:end}
h1{font-size:clamp(2rem,min(3.8vw,7vh),4rem)}
.vignette{background:
  radial-gradient(ellipse 60% 55% at 0% 100%,rgba(18,0,16,.85) 0%,rgba(18,0,16,0) 70%),
  linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,.35) 18%,rgba(18,0,16,0) 38%)}
.hs .hs-cta{display:none;font-family:var(--f-body);font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:#fff}
.hs.feat .hs-cta{display:block}
.hs.feat .hs-txt small.hs-cta{color:rgba(255,255,255,.92)}
.hs.feat{cursor:pointer}
.hs.feat .hs-txt{padding:8px 14px}
@media (max-width:860px){
  .hero-copy{grid-row:2;align-self:start}
  .bottombar{grid-template-columns:1fr;grid-template-areas:none}
  .scroll-cue{grid-column:1;justify-self:center}
  .vignette{background:linear-gradient(180deg,rgba(18,0,16,.9) 0%,rgba(18,0,16,0) 38%),linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,0) 30%)}
}
/* slogan e barra de baixo dividem a mesma célula (sem isso o grid cria uma segunda coluna) */
.overlay > .hero-copy,.overlay > .bottombar,.overlay > .topbar{grid-column:1}

/* bolinha some junto com o nome */
.hs.back{opacity:0!important;pointer-events:none}
/* indicador de rolagem no centro, embaixo */
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);grid-column:auto}
/* lâmpada à esquerda: o slogan vai para a direita */
html[data-lampada="esquerda"] .hero-copy{justify-self:end;text-align:right}
html[data-lampada="esquerda"] .vignette{background:
  radial-gradient(ellipse 60% 55% at 100% 100%,rgba(18,0,16,.85) 0%,rgba(18,0,16,0) 70%),
  linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,.35) 18%,rgba(18,0,16,0) 38%)}
@media (max-width:860px){
  html[data-lampada="esquerda"] .hero-copy{justify-self:start;text-align:left}
  .scroll-cue{bottom:14px}
}

/* vídeo mais visível: camada escura bem mais leve no meio, mais forte só nas bordas */
.proj-vig{background:radial-gradient(ellipse 80% 90% at 55% 45%,rgba(18,0,16,.16) 0%,rgba(18,0,16,.32) 55%,rgba(18,0,16,.78) 100%)}
html[data-lampada="esquerda"] .vignette{background:
  radial-gradient(ellipse 48% 50% at 100% 100%,rgba(18,0,16,.8) 0%,rgba(18,0,16,0) 75%),
  linear-gradient(0deg,var(--ink) 0%,rgba(18,0,16,.25) 14%,rgba(18,0,16,0) 30%),
  linear-gradient(180deg,rgba(18,0,16,.55) 0%,rgba(18,0,16,0) 16%)}
/* nomes do lado esquerdo da lâmpada: texto antes do ponto */
.hs.esq{flex-direction:row-reverse}
.hs.esq .hs-txt{text-align:right}
/* o escurecimento fica sempre por cima dos dois vídeos */
.proj-vig{z-index:3}

/* grade no celular organizada em linhas (o site.js marca .full e .solo) */
@media (max-width:860px){
  .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;columns:auto}
  .card{margin:0}
  .card.full{grid-column:span 2}
  .card.full:not(.vert) .media{aspect-ratio:16/9}
  .card.solo .media{aspect-ratio:4/5}
  .card.full .meta b{font-size:1.1rem}
  .card.full .meta span span{font-size:.82rem}
}
/* a capa aparece enquanto o vídeo carrega (e no modo economia do iPhone) */
.card video,.slot video,.c-media video,.proj-slot video{background:#120010 center/cover no-repeat}

/* botão de assistir mais visível */
#c-play{font-size:1rem;padding:14px 22px;box-shadow:0 10px 30px rgba(204,49,111,.35)}
/* celular, case horizontal: o vídeo aparece inteiro (16:9) no topo e o título vem embaixo */
@media (max-width:860px){
  .case:not(.vert) .case-hero{height:auto;min-height:0;padding-top:calc(64px + env(safe-area-inset-top,0px));overflow:visible}
  .case:not(.vert) .c-media{position:relative;inset:auto;aspect-ratio:16/9;width:100%}
  .case:not(.vert) .c-media video{object-fit:contain;background:#000}
  .case:not(.vert) .case-hero::after{background:none}
  .case:not(.vert) .case-title{position:relative;bottom:auto;padding-top:22px}
  .case:not(.vert) .case-title h2{font-size:clamp(2.2rem,10vw,3.2rem)}
  .case:not(.vert).watching .case-title{opacity:1;pointer-events:auto}
}