/* ==========================================================================
   Line Express — /macbook/takes  (versão B)
   MacBook parado, com a tela trocando de take. Depende de css/style.css.
   ========================================================================== */

.sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================== ABERTURA ============================== */
.mbhero{
  /* PINTA POR CIMA do palco, que sobe 20vh para dentro dela (ver `.mbhero +
     .pin`). O fundo dela é opaco, então o que invade fica escondido — e o
     aparelho, que mora 20vh abaixo do topo do palco, aparece logo depois da
     frase em vez de esperar meia tela. */
  position:relative; z-index:2;
  padding:calc(clamp(96px,15vh,140px) + 96px) 0 clamp(20px,3vh,36px);
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(255,150,60,.10),transparent 60%),
    var(--black);
  text-align:center;
}
.mbhero .display{ margin-bottom:22px; }
.mbhero .lede{ margin-bottom:0; }

/* ============================ SEÇÃO FIXA ============================ */
/* SOBE E ENCOSTA NA ABERTURA.

   O vão que havia aqui não era margem: o palco tem 100vh e o conteúdo é
   centralizado nele, então metade da folga sobrava em cima — 196px numa tela
   de 700 e quase 500px numa de 1300, porque a folga cresce com a altura da
   janela e o MacBook não.

   Subir o palco resolve nas duas pontas: o vão encolhe na mesma proporção em
   que nasceu (é medida em vh, como ele), e a composição continua centrada
   quando o palco prende — que é o quadro que a pessoa passa mais tempo vendo.
   Quem esconde o pedaço que invade a abertura é o fundo opaco dela.
   Mesma ideia da /acessorios/, onde a seção seguinte sobe sobre a cauda do
   trilho. */
.mbhero + .pin{ margin-top:-20vh; }
.pin{
  position:relative;
  height:215vh; height:215svh;
  background:var(--black);
}
.pin__stage{
  position:sticky; top:0;
  /* dvh e não svh: com svh o palco fica menor que a tela quando a barra do
     navegador some, e sobra uma faixa preta. O trilho acima segue em svh,
     porque é ele que define a distância de rolagem. */
  /* lvh, e não dvh: o valor que segue a barra do navegador chega com
     atraso enquanto ela desliza, e nesses quadros sobra faixa embaixo.
     Ver a nota longa em css/style.css, no .hero__stage. */
  height:100vh; height:100dvh; height:100lvh;
  display:flex; align-items:center;
  overflow:clip;               /* clip, nunca hidden: hidden quebra o sticky */
}
.pin__grid{
  width:100%; max-width:1340px;
  /* o respiro de cima é o que separa o aparelho da frase da abertura — e,
     quando o palco prende, o que o separa da nav */
  margin:0 auto; padding:56px clamp(20px,3vw,48px) 0;
  display:grid; grid-template-columns:1.32fr .68fr;
  align-items:center; gap:clamp(24px,3.4vw,56px);
}

/* ------------------------------ o aparelho ------------------------------ */
.device{ position:relative; width:100%; }
.device__chassis{ display:block; width:100%; height:auto; }
/* a tela fica exatamente sobre a área de tela da foto da carcaça */
.device__screen{
  position:absolute;
  left:10.23%; top:2.61%; width:79.49%; height:85.52%;
  display:block;
  border-radius:.6vw;
}
/* O vídeo ocupa exatamente a área do canvas, por cima dele. Começa invisível:
   quem manda na opacidade é o mesmo peso que o canvas usaria para desenhá-lo. */
.device__video{
  object-fit:cover;
  opacity:0;
  pointer-events:none;
}
/* O BRILHO DE VIDRO saiu de dentro do canvas para cá. Desenhado lá, ele ficava
   por baixo do vídeo e só valia para os outros dois takes; aqui vale para os
   três, porque está acima de ambos. É o mesmo degradê, na mesma diagonal. */
.device__vidro{
  position:absolute;
  left:10.23%; top:2.61%; width:79.49%; height:85.52%;
  border-radius:.6vw;
  pointer-events:none;
  background:linear-gradient(to bottom right,
             rgba(255,255,255,.06) 0%,
             rgba(255,255,255,.012) 42%,
             rgba(255,255,255,0) 43%);
}
/* O ENTALHE FICTÍCIO, no topo e no meio da área de tela.

   As medidas são relativas ao APARELHO, não à tela, porque é o aparelho que é
   o bloco posicionado. A conta: 9,8% da largura da tela (que é 79,49% da do
   aparelho) dá 7,79%; a altura é a da barra de menu do macOS, 3,1% da altura
   da tela, que é 2,65% da do aparelho. O centro da tela cai em 49,98% do
   aparelho — meio pixel do meio, então `left:50%` serve.

   Vive acima do vídeo e do vidro: no aparelho de verdade o entalhe é recorte
   da tela, não reflexo em cima dela. */
.device__entalhe{
  position:absolute;
  top:2.61%; left:50%; transform:translateX(-50%);
  width:7.79%; height:2.65%;
  background:#000;
  border-radius:0 0 .3vw .3vw;
  pointer-events:none;
}

.device__glow{
  position:absolute; inset:auto 8% -14% 8%; height:36%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,150,60,.16),transparent 70%);
  filter:blur(24px);
  pointer-events:none;
}

/* ------------------------------- o texto ------------------------------- */
.pin__copy{ position:relative; }

.pills{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 clamp(22px,3vh,34px);
  padding:0;
}
.pill{
  appearance:none;
  padding:7px 15px;
  border:1px solid var(--line); border-radius:980px;
  background:none; color:var(--text-dim);
  font:inherit; font-size:12.5px; font-weight:500;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.pill:hover{ color:var(--text); border-color:rgba(255,255,255,.28); }
.pill.is-on{
  color:#000; background:var(--text); border-color:var(--text);
}

.takes{ display:grid; }
.take{
  grid-area:1/1;
  opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.take.is-on{ opacity:1; transform:none; pointer-events:auto; }
.take__idx{
  margin:0 0 14px;
  font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent-b);
}
.take__title{
  margin:0 0 16px;
  font-size:clamp(26px,3.4vw,44px);
  font-weight:600; letter-spacing:-.03em; line-height:1.06;
}
.take__text{
  margin:0 0 24px; max-width:30em;
  font-size:clamp(15px,1.7vw,18px); line-height:1.6;
  color:var(--text-dim);
}
.take__spec{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.take__spec li{
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--text-mid);
}
.take__spec li::before{
  content:""; flex:none;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent-b);
  transform:translateY(-2px);
}

/* =========================== COMPARADOR A/B =========================== */
.ab{
  position:fixed; right:16px; bottom:16px; z-index:120;
  display:flex; align-items:center; gap:2px;
  padding:5px;
  border:1px solid var(--line); border-radius:980px;
  background:rgba(10,10,12,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  font-size:12px;
}
.ab a{
  padding:6px 13px; border-radius:980px;
  color:var(--text-dim);
  transition:color .25s ease, background .25s ease;
}
.ab a:hover{ color:var(--text); }
.ab a.is-on{ background:var(--text); color:#000; font-weight:500; }

/* a seção seguinte entra logo depois do último take, sem vão morto */
.pin + .section{ padding-top:clamp(30px,4vh,54px); }

/* ============================ RESPONSIVO ============================ */
@media (max-width:900px){
  .pin{ height:205vh; height:205svh; }
  .pin__grid{
    grid-template-columns:1fr;
    gap:clamp(20px,4vh,34px);
    padding-top:104px;
    align-content:center;
  }
  .pills{ justify-content:center; margin-bottom:18px; order:-1; }
  .pin__copy{ text-align:center; }
  .take__text{ margin-left:auto; margin-right:auto; }
  .take__spec{ align-items:center; }
  .device__glow{ display:none; }
}
@media (max-width:640px){
  .take__text{ font-size:15px; }
  .take__spec li{ font-size:13px; }
  .ab{ right:10px; bottom:10px; font-size:11.5px; }
}

@media (prefers-reduced-motion:reduce){
  .pin{ height:auto; }
  .pin__stage{ position:relative; height:auto; padding:60px 0; }
  .take{ position:static; opacity:1; transform:none; }
  .takes{ display:block; }
  .take + .take{ margin-top:34px; }
}