/* ==========================================================================
   YADEA · hero da campanha — Black November (até a data de YADEA_CAMPANHA)
   --------------------------------------------------------------------------
   Recriação do "Hero Black November Yadea" (Claude Design, 07/11/2026,
   projeto/hero_black_november) na arquitetura do Hero Black do Chefe: palco,
   título com impacto, duas motos entrando pelos lados, selos de preço em 3D
   e CTA de WhatsApp com traço neon. A coreografia toca UMA vez; o último
   quadro de cada animação é o próprio layout.

   Liga e desliga sozinho: este arquivo só é linkado enquanto o build traz a
   campanha (marcadores campanha:inicio/fim no fonte/index.html), e quem troca
   um hero pelo outro é a classe `em-campanha` no <html>, posta no <head> só
   até o fim da data. Passou a data: a classe não entra e o hero de sempre
   volta, mesmo sem publicar de novo.

   Medidas: tudo dentro da CENA (caixa de proporção fixa, encaixada na área
   útil abaixo do header) é posicionado em % e medido em cqi — escala junto.
   Valores, cores e tempos são os da referência (fidelidade alta).
   ========================================================================== */

/* ── Fontes da campanha (do próprio domínio, subconjunto latin) ──────────
   Só baixam quando o hero está na tela (fonte declarada e não usada não é
   baixada); o <head> faz o preload enquanto a campanha vale. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/barlow-condensed-900i-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Troca de hero ──────────────────────────────────────────────────────── */

.ybn { display: none; }
.em-campanha .ybn { display: block; }
.em-campanha .hero { display: none; }

/* ── Seção ──────────────────────────────────────────────────────────────
   Como o hero de sempre: ocupa a primeira tela e sobe por baixo do header
   (transparente no topo). A área útil começa 12 px abaixo dele. */
.ybn {
  --ybn-reserva: 0px;             /* faixa livre embaixo (botão flutuante do WhatsApp) */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  margin-top: calc(var(--yd-header) * -1);
  background: #070707;
  color: #f9f6f2;
  font-family: "DM Sans", "Archivo", Arial, sans-serif;
  font-stretch: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
}
.ybn *, .ybn *::before, .ybn *::after { box-sizing: border-box; }

/* Palco: o fundo é CSS (não <img>) para não baixar nada quando o hero está
   escondido; o <head> faz o preload com prioridade alta enquanto vale. */
.ybn__fundo { position: absolute; inset: 0; z-index: 0; }
.ybn__palco {
  position: absolute;
  inset: 0;
  background: #070707 url("../img/campanha/black-november-palco.webp") 50% 50% / cover no-repeat;
}
/* Véu: escurece a esquerda (legibilidade do título) e a vinheta fecha as bordas. */
.ybn__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(0, 0, 0, .6)),
    linear-gradient(90deg, rgba(5, 3, 2, .78) 0%, rgba(5, 3, 2, .45) 32%, transparent 55%);
}
.ybn__apagao {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.ybn__area {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--yd-header) + 12px);
  bottom: var(--ybn-reserva);
  z-index: 2;
  display: grid;
  place-items: center;
  container-type: size;
}
/* Cena: a proporção da arte (1163 × 660 deitada), encaixada (contain). */
.ybn__cena {
  position: relative;
  width: min(100cqw, 100cqh * 1.7621);
  aspect-ratio: 1163 / 660;
  container-type: inline-size;
}

/* ── Peças: posição em % da cena (tabela do README do handoff) ──────── */
.ybn__p { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.ybn__p--titulo  { --x: 4%;  --y: 9%;  --w: 40%; z-index: 4; container-type: inline-size; }
.ybn__p--a       { --x: 37%; --y: 10%; --w: 38%; z-index: 2; }
.ybn__p--b       { --x: 59%; --y: 19%; --w: 36%; z-index: 3; }
.ybn__p--selo-a  { --x: 35%; --y: 69%; --w: 23%; z-index: 5; }
.ybn__p--selo-b  { --x: 71%; --y: 73%; --w: 23%; z-index: 5; }
.ybn__p--cta     { --x: 5%;  --y: 71%; --w: 27%; z-index: 6; container-type: inline-size; }

/* "11" de novembro, só contorno, atrás de tudo. */
.ybn__onze {
  --x: 44%;
  --y: -4%;
  width: auto;
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 62cqi;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 124, 63, .16);
  user-select: none;
  pointer-events: none;
}

/* ── Título ─────────────────────────────────────────────────────────── */
.ybn__flash {
  position: absolute;
  left: -15%;
  top: -8%;
  width: 130%;
  height: 110%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 246, 216, .95), rgba(255, 140, 60, .55) 30%, rgba(255, 103, 40, 0) 65%);
}
.ybn__flare {
  position: absolute;
  left: -30%;
  top: 46%;
  width: 160%;
  height: 1.8cqi;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, #fff 0, rgba(255, 220, 190, .85) 22%, rgba(255, 120, 40, 0) 70%);
}
.ybn__faiscas { position: absolute; inset: 0; pointer-events: none; }
.ybn__faiscas span {
  position: absolute;
  border-radius: 50%;
  background: #ffb07a;
  box-shadow: 0 0 6px #ff8a3c;
  opacity: 0;
}
.ybn__faiscas span.is-clara { background: #fff4ea; }

.ybn__eyebrow {
  display: flex;
  align-items: center;
  gap: 2.6cqi;
  margin: 0 0 3.4cqi;
  font-size: max(9px, 2.9cqi);
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #ebd6c9;
}
.ybn__eyebrow::before { content: ""; display: block; flex: none; width: 6cqi; height: 2px; background: #ff6728; }
/* Prazo da oferta ({{campanha-ate}}: a mesma data do hero e do preço). */
.ybn__prazo { color: #ffa16e; }
/* Celular pequeno (coluna do título < 270 px, ex.: 360×640 e 375×667): a
   fonte já está no mínimo de 9 px e "YADEA Campinas · Válido até 30/11"
   passava a coluna em até 35 px. Só o espaçamento cede (igual ao CTA).
   "YADEA Itapetininga" tem 4 letras a mais: com .12em ainda passava 11 px
   em 360×640 (medido em 13/11/2026); .05em cabe. Entre 270 e 310 px de
   coluna (ex.: 412×757) a fonte ainda está nos 9 px e com .26em passava 9
   px: .16em. */
@container (max-width: 310px) {
  .ybn__eyebrow { letter-spacing: .16em; }
}
@container (max-width: 270px) {
  .ybn__eyebrow { letter-spacing: .05em; }
}

.ybn__titulo {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 900;
  line-height: .8;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #f9f6f2;
}
/* Letras cromadas com extrusão: o gradiente fica no texto (background-clip)
   e a profundidade é uma cadeia de drop-shadow, sem duplicar o conteúdo.
   O BRILHO que atravessa o título é a primeira camada do mesmo fundo (uma
   faixa num fundo 3× mais largo, fora da caixa nos dois extremos): passa só
   dentro das letras. Na referência ele era uma caixa com color-dodge por
   cima do título inteiro — clareava o fundo escuro e o corte na borda da
   caixa aparecia como um retângulo. */
.ybn__black,
.ybn__november {
  display: block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 300% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
}
.ybn__black {
  font-size: 40cqi;
  letter-spacing: -.02em;
  padding-right: .06em;
  background-image:
    linear-gradient(100deg, transparent 40%, rgba(255, 236, 214, .95) 50%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f4efea 40%, #a9a29d 57%, #fff 74%, #d6cec8 100%);
  filter:
    drop-shadow(-.007em .007em 0 #9a928d)
    drop-shadow(-.007em .007em 0 #7d7570)
    drop-shadow(-.007em .007em 0 #605854)
    drop-shadow(-.007em .007em 0 #453e3a)
    drop-shadow(-.007em .007em 0 #2c2522)
    drop-shadow(-.02em .03em .04em rgba(0, 0, 0, .6));
}
.ybn__november {
  margin-top: 1.6cqi;
  font-size: 23cqi;
  letter-spacing: -.01em;
  padding-right: .08em;
  background-image:
    linear-gradient(100deg, transparent 40%, rgba(255, 244, 230, .95) 50%, transparent 60%),
    linear-gradient(180deg, #ffe1cf 0%, #ffa16e 28%, #ff6728 56%, #e04a10 82%, #ff7938 100%);
  filter:
    drop-shadow(-.01em .01em 0 #c8460f)
    drop-shadow(-.01em .01em 0 #a8380a)
    drop-shadow(-.01em .01em 0 #882c07)
    drop-shadow(-.01em .01em 0 #6a2104)
    drop-shadow(-.01em .01em 0 #4c1702)
    drop-shadow(0 0 .22em rgba(255, 103, 40, .5));
}
.ybn__sub {
  margin: 4.4cqi 0 0;
  max-width: 88%;
  font-size: max(12px, 3.6cqi);
  font-weight: 500;
  line-height: 1.5;
  color: #cfc8c3;
  text-wrap: pretty;
}
.ybn__sub strong { color: #fff; font-weight: 800; }

/* Brilhos que atravessam a peça uma vez (faixa num fundo 3× mais largo). */
.ybn__brilho {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 300% 100%;
}

/* ── Motos ──────────────────────────────────────────────────────────── */
.ybn__moto { position: relative; }
.ybn__sombra {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 9%;
  height: 9%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .9), transparent 70%);
  filter: blur(6px);
}
.ybn .ybn__img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .65));
}
/* A própria moto é a máscara do brilho (o endereço vem no style do HTML). */
.ybn__brilho--moto {
  mix-blend-mode: screen;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 236, 214, .6) 50%, transparent 60%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── Selo de preço: placa neon em 3D (o .mcbf-selo da Black do Chefe,
   recolorido para o laranja YADEA) ─────────────────────────────────── */
.ybn__p--selo-a,
.ybn__p--selo-b { container-type: inline-size; perspective: 160cqi; }
.ybn-selo {
  position: relative;
  aspect-ratio: 1000 / 380;
  transform: rotateZ(-7deg) rotateY(-13deg) rotateX(6deg);
  transform-origin: 40% 55%;
}
.ybn .ybn-selo__placa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  filter:
    drop-shadow(0 0 .5cqi rgba(255, 214, 170, .95))
    drop-shadow(0 0 3cqi rgba(255, 103, 40, .85))
    drop-shadow(0 0 10cqi rgba(255, 72, 0, .5));
}
.ybn-selo__texto {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1cqi;
  padding: 0 12cqi 0 8cqi;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 900;
  line-height: .86;
  text-transform: uppercase;
  white-space: nowrap;
}
.ybn-selo__topo,
.ybn-selo__valor,
.ybn-selo__fim {
  padding-right: .05em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ybn-selo__topo {
  font-size: 11cqi;
  letter-spacing: .02em;
  background-image: linear-gradient(180deg, #fff 0%, #fbf3ef 40%, #d9ccc6 72%, #b0a29c 100%);
  filter:
    drop-shadow(-.012em .002em 0 #8c7774)
    drop-shadow(-.012em .002em 0 #6e5956)
    drop-shadow(-.012em .002em 0 #3a2a27)
    drop-shadow(-.03em 0 .06em rgba(0, 0, 0, .55));
}
/* Valor e "off" pela LINHA DE BASE, com vão: a extrusão do "O" vai para a
   esquerda e, colada, cobriria o último zero ("R$ 4.00("). */
.ybn-selo__linha { display: flex; align-items: baseline; gap: 2.4cqi; }
.ybn-selo__valor,
.ybn-selo__fim {
  background-image: linear-gradient(180deg, #fff3e8 0%, #ffc29a 30%, #ff8a4c 62%, #ff6728 100%);
  filter:
    drop-shadow(-.012em .002em 0 #d9540f)
    drop-shadow(-.012em .002em 0 #b0420a)
    drop-shadow(-.012em .002em 0 #883106)
    drop-shadow(-.012em .002em 0 #5e2003)
    drop-shadow(-.03em 0 .06em rgba(0, 0, 0, .55));
}
.ybn-selo__valor { font-size: 19cqi; letter-spacing: -.01em; }
.ybn-selo__fim { font-size: 14cqi; }
.ybn__brilho--selo {
  border-radius: 3cqi;
  mix-blend-mode: color-dodge;
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 236, 214, .8) 50%, transparent 65%);
}

/* ── CTA (WhatsApp) ─────────────────────────────────────────────────── */
.ybn .ybn__cta {
  position: relative;
  display: block;
  color: #1b0900;
  text-decoration: none;
  transform: skewX(-8deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.ybn .ybn__cta:hover { color: #1b0900; transform: skewX(-8deg) scale(1.035); filter: drop-shadow(0 0 18px rgba(255, 120, 50, .6)); }
.ybn .ybn__cta:active { transform: skewX(-8deg) scale(.985); }
.ybn .ybn__cta:focus-visible { outline: 3px solid #ff6728; outline-offset: 6px; }
.ybn__cta-corpo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqi;
  padding: 4.6cqi 4.6cqi 4.6cqi 7cqi;
  overflow: hidden;
  color: #1b0900;
  background: linear-gradient(180deg, #ffa16e 0%, #ff7938 30%, #ff6728 62%, #d9450c 100%);
  clip-path: polygon(0 0, calc(100% - 5cqi) 0, 100% 5cqi, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ybn__cta-textos { display: flex; flex-direction: column; gap: 1.4cqi; transform: skewX(8deg); }
.ybn__cta-titulo {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 8.6cqi;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ybn__cta-sub {
  font-size: max(9px, 3.3cqi);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* CTA estreito (até ~250 px: 360 px em pé, iPhone SE, celular deitado): a
   fonte já está no mínimo de 9 px e o espaçamento largo estourava a caixa
   em 3–7 px. Só o espaçamento cede. */
@container (max-width: 250px) {
  .ybn__cta-sub { letter-spacing: .1em; }
}
.ybn__cta-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 11cqi;
  height: 11cqi;
  color: #ff7938;
  background: #1b0900;
  transform: skewX(8deg);
}
.ybn .ybn__cta-icone svg { width: 55%; height: 55%; }
.ybn__brilho--cta { background-image: linear-gradient(100deg, transparent 38%, rgba(255, 244, 230, .45) 50%, transparent 62%); }
.ybn .ybn__neon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #ffb38a) drop-shadow(0 0 9px #ff6728);
}
.ybn__neon path { fill: none; vector-effect: non-scaling-stroke; opacity: 0; }
.ybn__neon-traco { stroke: #ffe0cc; stroke-width: 1.5; stroke-dasharray: 100 100; }
.ybn__neon-cometa { stroke: #fff4ea; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 82; }
.ybn__outros {
  margin: 3.4cqi 0 0 1cqi;
  font-size: max(9px, 2.9cqi);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-wrap: pretty;               /* sem o "OFF" sozinho na segunda linha */
  color: #a99c95;
}
.ybn__outros span { color: #ffa16e; }

/* ── Retrato (celular e tablet em pé): a arte 9:16 da referência ──────
   O handoff troca de layout quando a seção fica mais estreita que 0,9 da
   altura; aqui é a proporção da tela, sem JavaScript.
   Ajustes de encaixe (não de desenho), medidos de 360 a 430 px:
   · 80 px livres embaixo: o botão flutuante do WhatsApp (56 px a 16 px da
     borda) cobria o fim do CTA a 360, 390, 412 e 430 px;
   · subtítulo na largura toda do título e a Owin 2% mais baixa: com a fonte
     mínima de 12 px o subtítulo ganhava linha e passava por cima do espelho;
     abaixo de ~380 px ele ainda cruza a moto, e a sombra curta o descola dela;
   · a linha de cima não quebra (a 375 px "2026" ia sozinho para baixo).
   O mínimo de altura (640 px) fica: menor que isso, as fontes mínimas (9 e
   12 px) não cabem na cena e o CTA corta o texto. Mesmo motivo do mínimo de
   600 px no celular deitado, que também fica. */
@media (max-aspect-ratio: 9 / 10) {
  .ybn__eyebrow { white-space: nowrap; }
  .ybn__sub { text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .7); }
  .ybn { --ybn-reserva: 80px; min-height: 640px; }
  .ybn__palco { background-position: 68% 50%; }
  .ybn__cena { width: min(100cqw, 100cqh * .5625); aspect-ratio: 9 / 16; }
  .ybn__onze      { --x: 14%; --y: 26%; font-size: 110cqi; }
  .ybn__p--titulo { --x: 9%;  --y: 2%;  --w: 82%; }
  .ybn__p--a      { --x: -8%; --y: 33%; --w: 64%; }
  .ybn__p--b      { --x: 40%; --y: 39%; --w: 64%; }
  .ybn__p--selo-a { --x: 1%;  --y: 62%; --w: 50%; }
  .ybn__p--selo-b { --x: 47%; --y: 71%; --w: 50%; }
  .ybn__p--cta    { --x: 9%;  --y: 84%; --w: 82%; }
  .ybn__sub { max-width: none; }
}

/* ── Estado armado: tudo apagado até a coreografia começar ────────────
   `ybn-armado` vem do <head>. A TRAVA por CSS (5 s) mostra tudo mesmo se
   nenhum script rodar; quando a coreografia começa, as animações dela
   substituem a trava (seletores mais específicos). */
.ybn-armado .ybn__apagao { opacity: 1; animation: ybn-trava-apagao 1ms linear 5s both; }
.ybn-armado .ybn__a { opacity: 0; animation: ybn-trava 1ms linear 5s both; }
@keyframes ybn-trava { to { opacity: 1; } }
@keyframes ybn-trava-apagao { to { opacity: 0; } }

/* ── Coreografia (ms: duração · atraso), ~4,4 s, uma vez ─────────────── */
.ybn.is-tocando .ybn__fundo   { animation: ybn-palco 2600ms cubic-bezier(.16, 1, .3, 1) 0ms both; }
.ybn.is-tocando .ybn__apagao  { animation: ybn-acende 1100ms linear 0ms both; }
.ybn.is-tocando .ybn__cena    { animation: ybn-tremor 460ms ease-out 1040ms both; }
.ybn.is-tocando .ybn__onze    { animation: ybn-fade 1600ms ease-out 900ms both; }

.ybn.is-tocando .ybn__p--titulo .ybn__a { animation: ybn-titulo 760ms linear 600ms both; }
.ybn.is-tocando .ybn__flash   { animation: ybn-flash 850ms cubic-bezier(.2, .7, .3, 1) 1010ms both; }
.ybn.is-tocando .ybn__flare   { animation: ybn-flare 1000ms cubic-bezier(.2, .7, .3, 1) 1020ms both; }
.ybn.is-tocando .ybn__faiscas span { animation-name: ybn-faisca; animation-timing-function: cubic-bezier(.15, .7, .3, 1); animation-fill-mode: both; }
.ybn.is-tocando .ybn__black,
.ybn.is-tocando .ybn__november { animation: ybn-brilho-letras 1000ms ease-in-out 1560ms both; }

.ybn.is-tocando .ybn__p--a .ybn__a { animation: ybn-entra-esq 950ms cubic-bezier(.16, 1, .3, 1) 1250ms both; }
.ybn.is-tocando .ybn__p--b .ybn__a { animation: ybn-entra-dir 950ms cubic-bezier(.16, 1, .3, 1) 1400ms both; }
.ybn.is-tocando .ybn__p--a .ybn__brilho--moto { animation: ybn-brilho 900ms ease-in-out 1950ms both; }
.ybn.is-tocando .ybn__p--b .ybn__brilho--moto { animation: ybn-brilho 900ms ease-in-out 2100ms both; }

.ybn.is-tocando .ybn__p--selo-a .ybn__a { animation: ybn-selo 700ms linear 2150ms both; }
.ybn.is-tocando .ybn__p--selo-b .ybn__a { animation: ybn-selo 700ms linear 2300ms both; }
.ybn.is-tocando .ybn__p--selo-a .ybn__brilho--selo { animation: ybn-brilho 900ms ease-in-out 2750ms both; }
.ybn.is-tocando .ybn__p--selo-b .ybn__brilho--selo { animation: ybn-brilho 900ms ease-in-out 2900ms both; }

/* O CTA entra com uma cortina (clip-path). `backwards`, não `both`: o
   clip-path NÃO pode ficar no quadro final (aparece um retângulo escuro em
   volta do botão) — terminada a entrada, vale o estilo normal, opacidade 1. */
.ybn.is-tocando .ybn__p--cta .ybn__a { opacity: 1; animation: ybn-cta 800ms cubic-bezier(.16, 1, .3, 1) 2500ms backwards; }
.ybn.is-tocando .ybn__neon-traco  { animation: ybn-neon-traco 1300ms cubic-bezier(.4, 0, .2, 1) 3000ms both; }
.ybn.is-tocando .ybn__neon-cometa { animation: ybn-neon-cometa 1300ms cubic-bezier(.4, 0, .2, 1) 3000ms both; }
.ybn.is-tocando .ybn__brilho--cta { animation: ybn-brilho 900ms ease-in-out 3350ms both; }

@keyframes ybn-palco { from { transform: scale(1.12); } to { transform: none; } }
@keyframes ybn-acende {
  0%, 16% { opacity: 1; }
  20% { opacity: .5; }
  24% { opacity: .92; }
  31% { opacity: .32; }
  35% { opacity: .8; }
  46% { opacity: .14; }
  100% { opacity: 0; }
}
@keyframes ybn-tremor {
  0% { transform: none; }
  15% { transform: translate3d(-.5%, .7%, 0); }
  32% { transform: translate3d(.45%, -.45%, 0); }
  50% { transform: translate3d(-.28%, .25%, 0); }
  70% { transform: translate3d(.12%, -.1%, 0); }
  100% { transform: none; }
}
/* Linear com a curva por trecho: o impacto cai em 55% junto do clarão. */
@keyframes ybn-titulo {
  0% { opacity: 0; transform: scale(2.4); filter: blur(18px) brightness(1); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  30% { opacity: 1; }
  55% { transform: scale(.955); filter: blur(0) brightness(1.9); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  78% { transform: scale(1.012); filter: blur(0) brightness(1.12); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ybn-flash {
  0% { opacity: 0; transform: scale(.55); }
  9% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes ybn-flare {
  0% { opacity: 0; transform: scaleX(.05); }
  28% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.3); }
}
@keyframes ybn-faisca {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.25); }
}
@keyframes ybn-brilho {
  0% { opacity: 1; background-position: 100% 0; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0; }
}
@keyframes ybn-brilho-letras {
  from { background-position: 100% 0, 0 0; }
  to { background-position: 0 0, 0 0; }
}
@keyframes ybn-entra-esq {
  0% { opacity: 0; transform: translate3d(-22%, 0, 0) scale(.93); filter: brightness(.15) blur(5px); }
  55% { opacity: 1; filter: brightness(1.12) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ybn-entra-dir {
  0% { opacity: 0; transform: translate3d(22%, 0, 0) scale(.93); filter: brightness(.15) blur(5px); }
  55% { opacity: 1; filter: brightness(1.12) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ybn-selo {
  0% { opacity: 0; transform: scale(.3) rotate(-9deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  50% { opacity: 1; transform: scale(1.07) rotate(1.5deg); animation-timing-function: ease-in-out; }
  76% { transform: scale(.98) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ybn-cta {
  0% { opacity: 0; transform: translate3d(-14%, 0, 0); clip-path: inset(-50% 100% -50% -50%); }
  100% { opacity: 1; transform: none; clip-path: inset(-50% -50% -50% -50%); }
}
@keyframes ybn-neon-traco {
  0% { opacity: 1; stroke-dashoffset: 100; }
  60% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes ybn-neon-cometa {
  0% { opacity: 0; stroke-dashoffset: 100; }
  8% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -18; }
}
@keyframes ybn-fade { from { opacity: 0; } to { opacity: 1; } }

/* Quem pede menos movimento vê o quadro final direto, sem trava nem espera. */
@media (prefers-reduced-motion: reduce) {
  .ybn-armado .ybn__a { opacity: 1; animation: none; }
  .ybn-armado .ybn__apagao { opacity: 0; animation: none; }
}