/* V4: a hero já mostra a V9 Max, e a mesma bike faz a transição até a seção
   "Bike em destaque". Hero, bike e destaque vivem na mesma seção presa.
   A foto da bike é o primeiro quadro do vídeo gerado no Google Flow, em
   assets/v9-sequencia (d = computador, m = celular). O fundo é a cor exata do
   fundo do vídeo depois da compressão WebP (#f2f3f7), para o retângulo do
   quadro não aparecer.
   hero-sequencia.js escreve na seção as variáveis de estado (--hero-out,
   --video-card, --video-wipe, --info, --progress, a pose da bike e a geometria
   do quadro do vídeo, --card-*); o CSS deriva delas a entrada e a saída de
   cada elemento, em cascata.
   Com menos movimento, a seção rola normal já no estado final.
   V5 (teste de 28.09): um vídeo ocupa a hero inteira (assets/hero-video). Ao
   rolar, ele encolhe até um quadro de canto cortado, no lugar e no tamanho em
   que a bike surge, e é recolhido como cortina, revelando a bike, que vai para
   o lado enquanto o destaque entra. A bike não desmonta mais: a versão com as
   peças e as etiquetas técnicas está em backups/desmontagem-e-pausa-antes-2026-09-28. */
.bike-track{--header-h:92px;--scrub:135vh;position:relative;height:calc(100svh - var(--header-h) + var(--scrub));background:#f2f3f7}
.bike-transition{--hero-out:0;--video-card:0;--video-wipe:0;--info:0;--progress:0;--card-cut:36px;--card-t:0px;--card-r:0px;--card-b:0px;--card-l:0px;--card-w:0px;--card-dx:0px;--card-dy:0px;--card-k:1;--bike-scale:.7;--bike-x:0px;--bike-y:calc((100svh - var(--header-h)) * -.035);position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:560px;overflow:clip;background:#f2f3f7}

/* Hero: cada linha sai um pouco depois da anterior (--i) e sobe enquanto some. */
.stage-hero{position:absolute;z-index:4;left:var(--gutter);top:50%;width:min(41vw,540px);transform:translateY(-50%)}
.stage-hero>*{--o:clamp(0,calc(var(--hero-out) * 1.6 - var(--i) * .15),1);opacity:calc(1 - var(--o));transform:translateY(calc(var(--o) * -56px))}
.stage-hero>:nth-child(1){--i:0}.stage-hero>:nth-child(2){--i:1}.stage-hero>:nth-child(3){--i:2}.stage-hero>:nth-child(4){--i:3}.stage-hero>:nth-child(5){--i:4}
.bike-transition.hero-gone .stage-hero{visibility:hidden}
.stage-hero:focus-within{visibility:visible}
.stage-hero:focus-within>*{opacity:1;transform:none}
.stage-hero .eyebrow{font-size:11px;letter-spacing:.14em;color:var(--text);white-space:nowrap}
.stage-hero h1{font-size:clamp(62px,6.2vw,100px);line-height:1.06;margin:22px 0;letter-spacing:.018em;color:var(--text)}
.stage-hero h1 .outline{color:transparent;-webkit-text-stroke:1.5px #151a22b3}
.stage-hero .hero-copy{font-size:17px;line-height:1.7;color:var(--muted);max-width:410px}
.stage-hero .hero-actions{display:flex;flex-direction:row;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.stage-hero .hero-actions .button{font-size:12px;padding:17px 22px;gap:24px}
.stage-hero .hero-trust{margin-top:28px;padding-top:20px;border-color:var(--line);max-width:440px;gap:27px}
.stage-hero .hero-trust strong{font-size:25px}.stage-hero .hero-trust strong span{font-size:16px}
.stage-hero .hero-trust small{color:var(--muted);font-size:12px}

/* Entrada da página: a hero sobe linha a linha e o vídeo acende e assenta por
   trás (a bike agora só aparece depois do vídeo, então não tem entrada própria).
   Usa as propriedades translate/scale, separadas do transform da rolagem, e
   fill-mode backwards, para não prender nenhum valor depois de terminar. */
@keyframes gb-rise{from{opacity:0;translate:0 28px}}
@keyframes gb-video-in{from{opacity:0;scale:1.07}}
.stage-hero>*{animation:gb-rise .95s cubic-bezier(.16,.8,.24,1) backwards;animation-delay:calc(.1s + var(--i) * .085s)}
.hero-video video{animation:gb-video-in 1.8s cubic-bezier(.16,.8,.24,1) backwards}

/* O tamanho de layout é o de escala 1; o script reduz com scale() e leva a
   bike de onde ela surge até o lado das informações do destaque. */
.bike-sequence{position:absolute;left:50%;top:48%;width:min(92vw,calc((100svh - var(--header-h) - 40px) * 1.387),1400px);aspect-ratio:1000/721;transform:translate(-50%,-50%) translate(var(--bike-x),var(--bike-y)) scale(var(--bike-scale));will-change:transform}
/* O fundo do vídeo varia 1 ou 2 tons entre o alto e o chão; a borda esfumada
   dissolve o retângulo do quadro no fundo. */
.bike-sequence{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.bike-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Convite para rolar: some junto com a hero. A linha desce três vezes e para. */
.scroll-cue{position:absolute;z-index:3;left:70%;bottom:28px;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:clamp(0,calc(1 - var(--hero-out) * 3),1);transform:translateX(-50%);pointer-events:none;animation:gb-rise .8s ease 1.1s backwards}
.scroll-cue span{position:relative;width:1px;height:30px;background:var(--line);overflow:hidden}
.scroll-cue span:after{content:'';position:absolute;inset:0;background:var(--royal-ink);animation:gb-cue 1.8s cubic-bezier(.6,0,.3,1) 1.6s 3 both}
@keyframes gb-cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* Vídeo da hero: cobre a seção inteira por cima da bike. A rolagem fecha o
   recorte até o quadro onde a bike vai surgir (--card-*, medidos pelo script) e
   o vídeo diminui junto, para o quadro mostrar a cena inteira. Depois a borda
   esquerda do quadro corre até a direita (--video-wipe) e descobre a bike, que
   está exatamente embaixo. O canto cortado repete o dos botões; perto do fim
   da cortina ele encolhe junto com o que sobra do quadro. */
.hero-video{--t:calc(var(--card-t) * var(--video-card));--r:calc(var(--card-r) * var(--video-card));--b:calc(var(--card-b) * var(--video-card));--l:calc(var(--card-l) * var(--video-card) + var(--card-w) * var(--video-wipe));--c:min(var(--card-cut) * var(--video-card),var(--card-w) * (1 - var(--video-wipe)));position:absolute;z-index:3;inset:0;container-type:size;background:var(--ink);clip-path:polygon(calc(var(--l) + var(--c)) var(--t),calc(100% - var(--r)) var(--t),calc(100% - var(--r)) calc(100% - var(--b) - var(--c)),calc(100% - var(--r) - var(--c)) calc(100% - var(--b)),var(--l) calc(100% - var(--b)),var(--l) calc(var(--t) + var(--c)))}
/* O elemento tem o tamanho do vídeo inteiro (16:9) cobrindo a seção, e não o
   da seção com object-fit: cover, que recortaria o vídeo na caixa do elemento;
   no celular, ao diminuir, sobraria uma tira vertical com faixas vazias. */
.hero-video video{position:absolute;left:50%;top:50%;width:max(100cqw,100cqh * 16 / 9);height:max(100cqh,100cqw * 9 / 16);object-fit:cover;transform:translate(-50%,-50%) translate(calc(var(--card-dx) * var(--video-card)),calc(var(--card-dy) * var(--video-card))) scale(calc(1 + (var(--card-k) - 1) * var(--video-card)))}
/* Sombra à esquerda (texto) e no pé (convite para rolar). Sai junto com o texto. */
.hero-video:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0e14e0,#0b0e14b3 28%,#0b0e1459 52%,#0b0e1400 74%),linear-gradient(0deg,#0b0e1473,#0b0e1400 24%);opacity:calc(1 - var(--hero-out));pointer-events:none}
.bike-transition.video-gone .hero-video{visibility:hidden}
/* A borda da cortina é uma linha lime; só existe enquanto a cortina corre. */
.bike-transition:after{content:'';position:absolute;z-index:3;left:calc(var(--card-l) + var(--card-w) * var(--video-wipe) - 1.5px);top:calc(var(--card-t) + min(var(--card-cut),var(--card-w) * (1 - var(--video-wipe))));bottom:var(--card-b);width:3px;background:var(--lime);opacity:clamp(0,min(var(--video-wipe),1 - var(--video-wipe)) * 25,1);pointer-events:none}

/* Texto da hero sobre o vídeo: branco, com o lime de volta como cor de texto
   (o marca-texto do tema claro não funciona sobre o escuro) e botão lime. Só
   com movimento permitido; com menos movimento o vídeo sai e vale o tema claro. */
@media(prefers-reduced-motion:no-preference){
  .stage-hero,.stage-hero .eyebrow,.stage-hero h1,.stage-hero .text-link{color:#fff}
  .stage-hero .mini-line{background:var(--lime)}
  .stage-hero h1 .outline{-webkit-text-stroke:1.5px #fff}
  .stage-hero h1 .lime{color:var(--lime);background:none;padding:0}
  .stage-hero .hero-copy{color:#ffffffeb}
  .stage-hero .hero-trust{border-color:#ffffff4d}
  .stage-hero .hero-trust small{color:#ffffffcc}
  .stage-hero .primary{background:var(--lime);color:var(--ink)}
  .stage-hero .primary span{color:inherit}
  .stage-hero .primary:hover{background:#fff}
  .stage-hero .text-link:hover{color:var(--lime)}
  .stage-hero a:focus-visible{outline-color:var(--lime)}
  .scroll-cue{color:#ffffffd9}
  .scroll-cue span{background:#ffffff4d}
  .scroll-cue span:after{background:var(--lime)}
}

/* Destaque: as linhas entram da direita, uma depois da outra. */
.featured-info{position:absolute;z-index:2;top:50%;right:var(--gutter);width:min(40vw,560px);transform:translateY(-50%);visibility:hidden}
.featured-info>*{--k:clamp(0,calc(var(--info) * 1.7 - var(--i) * .1),1);opacity:var(--k);transform:translateX(calc((1 - var(--k)) * 42px))}
.featured-info>:nth-child(1){--i:0}.featured-info>:nth-child(2){--i:1}.featured-info>:nth-child(3){--i:2}.featured-info>:nth-child(4){--i:3}.featured-info>:nth-child(5){--i:4}.featured-info>:nth-child(6){--i:5}.featured-info>:nth-child(7){--i:6}.featured-info>:nth-child(8){--i:7}
.bike-transition.info-on .featured-info,.featured-info:focus-within{visibility:visible}
.featured-info:focus-within>*{opacity:1;transform:none}
.featured-info .eyebrow{font-size:11px;letter-spacing:.15em;color:var(--royal-ink)}
.featured-info h2{font-size:clamp(52px,5vw,78px);margin:14px 0 10px}
.featured-tag{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.featured-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:24px 0 18px;border-top:1px solid var(--line)}
.featured-specs div{padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.featured-specs dt{font-size:11px;color:var(--muted);letter-spacing:.04em}
.featured-specs dd{margin:3px 0 0;font:400 21px/1.2 var(--display);letter-spacing:.02em;color:var(--text)}
.featured-battery,.featured-extras{font-size:14px;line-height:1.6}
.featured-extras{margin-top:4px}
.featured-info .button{margin-top:22px;font-size:12px;padding:17px 22px;gap:24px}
.featured-note{font-size:11px;line-height:1.5;margin-top:14px;max-width:440px}

/* Linha de progresso no pé da seção. */
.bike-progress{position:absolute;z-index:5;left:0;right:0;bottom:0;height:2px;background:#151a220f}
.bike-progress:after{content:'';position:absolute;inset:0;background:var(--royal-ink);transform-origin:left;transform:scaleX(var(--progress))}

@media(min-width:761px) and (max-width:1100px){
  .stage-hero{width:44vw}
  .stage-hero h1{font-size:clamp(54px,7vw,76px)}
  .stage-hero .eyebrow{font-size:9px;letter-spacing:.06em}
  .stage-hero .hero-copy{font-size:15px}
  .stage-hero .hero-actions{gap:14px}
  .stage-hero .hero-trust{gap:15px}.stage-hero .hero-trust strong{font-size:20px}.stage-hero .hero-trust strong span{font-size:13px}.stage-hero .hero-trust small{font-size:10px}
  .featured-info{width:46vw}
  .featured-specs dd{font-size:18px}
}
@media(max-width:760px){
  .bike-track{--header-h:76px;--scrub:130vh}
  .bike-transition{min-height:560px;--bike-scale:.9;--bike-x:0px;--bike-y:0px;--card-cut:22px}
  .bike-transition:after{width:2px}
  /* No celular o texto fica no alto: a sombra do vídeo desce de cima. */
  .hero-video:after{background:linear-gradient(180deg,#0b0e14e6,#0b0e14c7 42%,#0b0e1466 66%,#0b0e1433 84%,#0b0e1466)}
  /* Os selos da hero saem daqui: as informações de entrega aparecem de novo no destaque. */
  .stage-hero{top:22px;right:var(--gutter);width:auto;transform:none}
  .stage-hero>*{transform:translateY(calc(var(--o) * -40px))}
  .stage-hero .eyebrow{font-size:9px;letter-spacing:.07em;white-space:normal}
  .stage-hero h1{font-size:clamp(50px,13vw,72px);margin:14px 0 12px;line-height:1.05}
  .stage-hero .hero-copy{font-size:14px;line-height:1.6}
  .stage-hero .hero-actions{gap:16px;margin-top:16px}
  .stage-hero .hero-actions .button{font-size:12px;padding:15px 18px;gap:18px;flex:1;white-space:nowrap}
  .stage-hero .hero-actions .text-link{font-size:13px}
  .stage-hero .hero-trust{display:none}
  .bike-sequence{top:40%;width:96vw}
  .scroll-cue{display:none}
  .featured-info{top:auto;bottom:22px;left:var(--gutter);right:var(--gutter);width:auto;transform:none}
  .featured-info>*{transform:translateY(calc((1 - var(--k)) * 26px))}
  .featured-info h2{font-size:38px;margin:6px 0 4px}
  .featured-info .eyebrow,.featured-tag{font-size:9px}
  .featured-specs{margin:10px 0 8px;gap:0 16px}
  .featured-specs div{padding:5px 0}
  .featured-specs dt{font-size:10px}
  .featured-specs dd{font-size:16px}
  .featured-specs div:nth-child(n+7){display:none}
  .featured-battery,.featured-extras{font-size:12px;line-height:1.45}
  .featured-info .button{margin-top:10px;width:100%;padding:14px 18px}
  .featured-note{font-size:10px;margin-top:8px}
}
@media(max-width:370px){.stage-hero h1{font-size:46px}.stage-hero .hero-copy br{display:none}.featured-info h2{font-size:34px}}
/* Menos movimento: sem trilha presa e sem vídeo; a hero vem em cima e a bike
   fica ao lado das informações do destaque. */
@media(prefers-reduced-motion:reduce){
  .bike-track{height:auto}
  .bike-transition{position:relative;top:auto;height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:60px var(--gutter)}
  .stage-hero{position:static;grid-column:1/-1;width:auto;transform:none;visibility:visible}
  .stage-hero>*,.featured-info>*{opacity:1;transform:none}
  .bike-sequence{position:relative;left:auto;top:auto;width:100%;transform:none}
  .featured-info{position:static;width:auto;transform:none;visibility:visible}
  .scroll-cue,.bike-progress,.hero-video,.bike-transition:after{display:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.bike-transition{grid-template-columns:1fr;padding:30px var(--gutter)}.featured-specs div:nth-child(n+7){display:block}}