/* Cenas — o site se comporta como a apresentação: uma ideia por tela, tipografia de projeção */
.scenes{scroll-snap-type:none}
.scene{min-height:auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.2vh,26px);
  padding:clamp(38px,4.6vh,62px) var(--gut);position:relative}
.scene:first-of-type{min-height:auto;padding-top:clamp(96px,12vh,140px);padding-bottom:clamp(40px,5vh,70px);justify-content:flex-start}
.scene.bare{padding-block:clamp(30px,4vh,50px)}
@media (max-height:620px){.scenes{scroll-snap-type:none}.scene{min-height:auto}}

/* tipografia de cena */
.scene h1{font-size:clamp(38px,6.6vw,104px);line-height:.92;max-width:18ch}
.scene h1.big{font-size:clamp(44px,9.4vw,150px);line-height:.88;max-width:13ch}
.scene h2{font-size:clamp(28px,4.6vw,72px);line-height:.98;max-width:20ch}
.scene h2.big{font-size:clamp(36px,7.4vw,112px);line-height:.9;max-width:14ch}
.scene .line{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--sun);
  font-size:clamp(20px,3.4vw,52px);line-height:1;margin:0}
.scene .say{font-size:clamp(16px,1.9vw,26px);line-height:1.38;max-width:40ch;color:#D3CCC0;margin:0}
.scene .tiny{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke);font-size:clamp(12px,1.2vw,18px);margin:0}

/* entrada encadeada dentro da cena */
.js .scene .in{opacity:0;transform:translateY(26px)}
.js .scene.on .in{animation:rise .85s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i,0) * 130ms + 90ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .scene .in{opacity:1;transform:none;animation:none}}

/* números de projeção */
.giants{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.giant{display:grid;gap:6px}
.giant .n{font-family:var(--display);font-weight:900;font-size:clamp(56px,11vw,150px);line-height:.85;
  color:var(--sun);font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
/* quatro colunas: o algarismo não pode invadir o vizinho */
@media(min-width:900px){.giant .n{font-size:min(clamp(56px,7.4vw,150px),13vh)}}
.giant:nth-child(even) .n{color:var(--pink)}
.giant .l{font-size:clamp(14px,1.5vw,20px);line-height:1.3;color:var(--paper);max-width:22ch}

/* três ofícios em tela cheia */
.oficios{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));flex:1;align-content:stretch}
@media(min-width:900px){.oficios{grid-template-columns:1.4fr 1fr 1fr}}
.of{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;
  border:1px solid var(--line);padding:clamp(22px,2.6vw,40px);text-decoration:none;min-height:min(46svh,420px);
  background:#090807;isolation:isolate}
.of::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--bg);background-size:cover;
  background-position:center;opacity:.2;filter:grayscale(.55);transition:opacity .4s,filter .4s,transform .6s}
.of:hover::after{opacity:.4;filter:none;transform:scale(1.04)}
.of h3{font-size:clamp(24px,3vw,46px);line-height:.95}
.of p{margin:0;color:#D3CCC0;font-size:clamp(14px,1.5vw,18px);line-height:1.4;max-width:32ch}
.of .go{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sun);font-size:15px}
.of.main{border:2px solid var(--sun)}
.of.main .go{color:var(--pink)}
.of.main h3{font-size:clamp(28px,4vw,62px)}

/* cena do sistema: o diagrama ocupa a tela */
.scene .system{margin-top:0}
.scene .cells{max-height:52svh}

/* parede de obras correndo atrás da abertura */
.bgwall{position:absolute;inset:0;z-index:-1;display:grid;gap:14px;align-content:center;overflow:hidden;
  opacity:.4;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 55%,transparent 100%)}
.bgwall .wrow{overflow:hidden}
.bgwall .wtrack{display:flex;gap:14px;width:max-content;animation:slide 30s linear infinite}
.bgwall .wrow.rev .wtrack{animation-duration:24s;animation-direction:reverse}
.bgwall img{height:clamp(150px,22vh,280px);width:auto;filter:grayscale(.3) contrast(1.05)}
@media (prefers-reduced-motion:reduce){.bgwall .wtrack{animation:none}}

/* tira de fotos da casa */
.stills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-top:10px}
.stills img{aspect-ratio:3/2;object-fit:cover;filter:grayscale(.35) contrast(1.03);transition:filter .4s}
.stills img:hover{filter:none}

/* cenas com conteúdo: altura pelo conteúdo, sem tampo preto */
.scene.flow{padding-block:clamp(38px,4.6vh,62px)}
/* frase de impacto, sozinha na tela */
.hit{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--sun);
  font-size:clamp(40px,9vw,140px);line-height:.9;max-width:14ch;margin:0}
.scene .hit + .hit{margin-top:.2em}
/* sintomas em caixas que entram uma a uma */
.symptoms{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.sy{border:1px solid var(--line);border-left:4px solid var(--pink);padding:clamp(20px,2.4vw,30px);background:#090807}
.sy b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.02;
  font-size:clamp(18px,2vw,27px);color:var(--paper);margin-bottom:10px}
.sy p{margin:0;color:var(--smoke);font-size:clamp(14px,1.4vw,17px);line-height:1.45}
/* parede de uma faixa só */
.bgwall.one{grid-template-rows:1fr}
.bgwall.one img{height:clamp(200px,34vh,420px)}
/* a tira de fotos também anda */
.stills{display:flex;gap:12px;width:max-content;animation:slide 26s linear infinite}
.stillswrap{overflow:hidden;margin-inline:calc(var(--gut) * -1)}
.stills img{height:clamp(130px,20vh,230px);width:auto;aspect-ratio:auto}

/* promessa, destacada da prosa */
.pledge{margin:clamp(14px,2vh,26px) 0 0;border-left:4px solid var(--pink);padding:14px 0 14px 20px;
  font-size:clamp(16px,1.9vw,24px);line-height:1.35;max-width:38ch;color:var(--paper)}

/* headline longa: corpo menor, para caber em duas ou três linhas */
.scene h1.sm{font-size:clamp(34px,6.4vw,92px);max-width:16ch}

/* etiquetas: as frentes como peças, não como frase */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.chips>*{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(15px,1.8vw,26px);line-height:1;padding:12px 18px;border:2px solid var(--line);color:var(--paper);
  transition:border-color .25s,color .25s,background .25s}
.chips>*:nth-child(3n+1){border-color:var(--sun);color:var(--sun)}
.chips>*:nth-child(3n+2){background:var(--sun);border-color:var(--sun);color:var(--ink)}
.chips>*:nth-child(3n){border-color:var(--pink);color:var(--pink)}
.chips>*:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---- disposição: duas colunas quando a cena tem apoio a sustentar ---- */
.lead,.aside{display:flex;flex-direction:column;gap:clamp(12px,1.8vh,22px);min-width:0}
@media(min-width:980px){
  .scene.split{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    column-gap:clamp(40px,5vw,92px);align-items:start}
  .scene.split>.lead{grid-column:1}
  .scene.split>.aside{grid-column:2;padding-top:clamp(6px,1.4vh,16px)}
  .scene.split>.full{grid-column:1/-1}
}

/* ---- os quatro campos: uma lista com ordem, não quatro gritos iguais ---- */
.terms{display:flex;flex-wrap:wrap;gap:0;align-items:baseline}
.terms span{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1;
  font-size:clamp(22px,3.1vw,46px);color:var(--paper);padding:0}
.terms span+span::before{content:"/";color:var(--line);margin:0 .4em;font-weight:500}
.terms span:nth-child(1){color:var(--sun)}
.terms span:nth-child(3){color:var(--pink)}

/* ---- apoio: medida curta e um degrau abaixo da headline ---- */
.scene .say{max-width:34ch}
.scene .aside .say{font-size:clamp(16px,1.5vw,20px)}
.pledge{max-width:34ch}

.chips a{text-decoration:none;cursor:pointer}
.chips a:focus-visible{outline:3px solid var(--paper);outline-offset:3px}

/* ---- telas grandes: a frase respira na largura, não na altura ---- */
@media(min-width:1100px){
  .scene h1{max-width:32ch}
  .scene h1.big{max-width:21ch}
  .scene h2{max-width:34ch}
  .scene h2.big{max-width:21ch}
  .hit{max-width:20ch}
  .scene .say{max-width:46ch}
  .scene .aside .say{max-width:38ch}
  .pledge{max-width:40ch}
}

/* os quatro campos cabem numa linha só ao lado da headline */
@media(min-width:980px){
  .split .terms span{font-size:clamp(18px,1.75vw,30px)}
  .split .terms span+span::before{margin:0 .32em}
}

/* ---- coluna de apoio: um bloco só, ancorado na base da headline ---- */
@media(min-width:980px){
  .scene.split{align-items:end}
  .scene.split>.aside{padding-top:0;padding-bottom:6px;
    border-left:3px solid var(--pink);padding-left:clamp(22px,2.4vw,36px);
    gap:clamp(14px,1.8vh,22px)}
  .scene.split>.aside .pledge{border-left:0;padding:0;margin:0}
  .scene.split>.full{margin-top:clamp(26px,4vh,52px)}
}

@media(min-width:980px){.split .terms{flex-wrap:nowrap;white-space:nowrap}}