/* ==========================================================================
   Line Express — /iphone/
   Abertura com o vídeo avançando no scroll e, abaixo, a linha atual
   e os seminovos agrupados por geração.
   ========================================================================== */

.iphero{
  position:relative;
  height:200vh; height:200svh;   /* trilho da sequência de quadros */
}
.iphero__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;
  overflow:clip;                 /* nunca hidden: quebraria o sticky */
  background:var(--black);
}
#ipCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
/* esmaecimento: cobre a imagem antes da palavra entrar */
.iphero__veu{
  position:absolute; inset:0;
  opacity:0;
  background:var(--black);
}
/* OS SELOS DO TOPO: logo abaixo da nav (63px), na faixa preta que o quadro
   de abertura deixa acima do modelo. Acima do véu e da copy, como a dica. */
.iphero__selos{
  position:absolute; left:0; right:0; z-index:5;
  top:calc(63px + clamp(14px,2.6vh,30px));
  margin:0; padding:0 16px;
}
/* sai de uma vez aos 10% do trilho (js/iphone-hero.js), não aos poucos */
.iphero__selos{ transition:opacity .25s ease, visibility 0s linear 0s; }
.iphero__selos.is-fora{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.iphero__copy{
  /* NÃO RECEBE TOQUE. Ela cobre o palco inteiro (`inset:0`) para centralizar o
     título, e por isso ficava na frente da dica "Explore": o clique morria
     nela, e era só nesta página. Não há nada clicável aqui dentro — só o
     título e a linha de baixo. Medido com elementFromPoint no meio da dica:
     quem respondia era esta div. */
  pointer-events:none;
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  /* O bloco desce um pouco do centro: assim o vão entre ele e a seção seguinte
     encurta sem depender de uma margem negativa gigante, que varia com a altura
     da tela. O que sobra acima é preto durante o esmaecimento, então não pesa. */
  padding:13vh var(--pad) 0;
}
.iphero__title{
  margin:0;
  font-size:clamp(52px,13vw,168px);
  font-weight:700; line-height:.94; letter-spacing:-.045em;
  opacity:0;
}
.iphero__sub{
  margin:clamp(16px,2.6vh,30px) 0 0;
  max-width:34ch;
  color:var(--text-mid);
  font-size:clamp(15px,1.9vw,21px); line-height:1.5;
  opacity:0;
}

/* a seção seguinte come a sobra preta do fim do trilho */
.iphero + .section{
  /* Come a cauda do trilho (14%) E o vão vazio abaixo do texto revelado, que é
     inerente a um bloco centralizado num palco de altura cheia. Com só a cauda
     sobravam ~300px de preto antes da próxima seção. */
  margin-top:-28vh;
  position:relative; z-index:2;
  padding-top:clamp(30px,4vh,54px);
}

@media (max-width:640px){
  .iphero{ height:190vh; height:190svh; }
  .iphero + .section{ margin-top:-30vh; }
}
@media (prefers-reduced-motion:reduce){
  .iphero{ height:100vh; height:100svh; }
  .iphero__stage{ position:relative; }
  .iphero + .section{ margin-top:0; }
}


/* a dica fica acima do véu e da copy, e junto com o link
   de "seminovos" da linha de baixo, é o que se clica no palco */
.iphero .hero__hint{ z-index:5; pointer-events:auto; }

/* "SEMINOVOS" NA LINHA DE BAIXO É LINK (30/09, pedido dele), no degradê da
   marca. A copy inteira segue sem toque (ver .iphero__copy); só a palavra
   volta a receber o clique. */
.iphero__semi{
  pointer-events:auto;
  font-weight:600;
  background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  border-bottom:1px solid rgba(255,194,71,.45);
  text-decoration:none;
  transition:border-color .2s ease;
}
.iphero__semi:hover,
.iphero__semi:focus-visible{ border-bottom-color:var(--accent-b); }

/* A LINHA DE CONFIGURAÇÃO (ex.: "256GB") maior SÓ AQUI — pedido dele. No
   /mac/ e no /macbook/ ela carrega bem mais texto ("24GB RAM · 512GB SSD ·
   12CPU 16GPU") e aumentar junto ficaria desproporcional; no iPhone é uma
   palavra curta e ganha destaque sem pesar no card. `#modelos` (só existe
   nesta página) dá a especificidade para vencer css/prods.css, que carrega
   depois de css/iphone.css. 10px -> 14px é os +40% pedidos. */
#modelos .prod__cfg{ font-size:14px; }