/* 02b-antes-depois · bruto e editado lado a lado, no mesmo relógio. Classes bd-* (o prefixo ad- em classe some com bloqueador de anúncio), keyframes ad-*.
   Só transform e opacity se mexem. Os vídeos tocam só com a seção na tela (o JS cuida). */

/* ---------- seção ---------- */
.bd{position:relative;isolation:isolate;padding:104px 0 100px}
.bd::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 74% 50%,rgba(255,106,43,.11),transparent 72%)}
.bd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"head stage" "info stage";column-gap:76px;row-gap:36px;align-items:center}
.bd-head{grid-area:head;align-self:end}
.bd-head .eyebrow{margin-bottom:18px}
.bd-head .sub{margin-top:20px;max-width:470px}
.bd-info{grid-area:info;align-self:start;max-width:500px}
.bd-stage{grid-area:stage;position:relative}

/* ---------- os dois celulares ---------- */
.bd-par{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bd-fone{position:relative;margin:0;min-width:0}
.bd-tela{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#0a0504;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 0 0 7px #170c0a,0 0 0 8px rgba(255,255,255,.07),0 36px 70px -34px rgba(0,0,0,.95)}
.bd-editado .bd-tela{box-shadow:0 0 0 1px rgba(255,220,200,.2),0 0 0 7px #1d0e0a,0 0 0 8px rgba(255,176,136,.34),0 36px 70px -34px rgba(0,0,0,.95),0 30px 90px -40px rgba(255,90,40,.7)}
.bd-tela img,.bd-tela video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* o vídeo só aparece depois que os dois têm quadro pra mostrar; até lá fica o pôster */
.bd-tela video{opacity:0;transition:opacity .35s var(--e-out)}
.bd.is-live .bd-tela video{opacity:1}
/* ilha do aparelho */
.bd-tela::after{content:"";position:absolute;left:50%;top:9px;width:26%;height:3.2%;min-height:9px;transform:translateX(-50%);border-radius:99px;background:#050302;box-shadow:0 0 0 1px rgba(255,255,255,.05);z-index:3}

.bd-selo{position:absolute;left:12px;top:30px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:99px;
  font:800 10.5px/1 var(--fb);letter-spacing:.13em;color:#f3e4dc;background:rgba(13,7,6,.86);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.bd-selo b{font-size:11.5px;line-height:1;letter-spacing:0;padding-left:8px;border-left:1px solid rgba(255,255,255,.2);color:var(--mut)}
.bd-editado .bd-selo{color:#fff;background:linear-gradient(120deg,#ff9a55 0%,#ff6a2b 50%,#d92a17 100%);box-shadow:0 8px 20px -8px rgba(255,106,43,.9),0 0 0 1px rgba(255,220,200,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.bd-editado .bd-selo b{color:#fff;border-left-color:rgba(255,255,255,.45)}

.bd-fone figcaption{margin-top:18px;text-align:center;font:600 13px/1.4 var(--fb);color:var(--mut2)}
.bd-editado figcaption{color:var(--v1)}

/* seta entre os dois */
.bd-seta{position:absolute;left:50%;top:calc((100% - 37px)/2);z-index:4;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#ffb088 0%,#ff6a2b 52%,#b8260f 100%);box-shadow:0 0 0 5px rgba(13,7,6,.92),0 10px 24px -6px rgba(255,106,43,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.bd-seta svg{animation:ad-seta 2.4s var(--e-inout) infinite;animation-play-state:paused}
.bd.is-on .bd-seta svg{animation-play-state:running}
@keyframes ad-seta{0%,55%,100%{transform:translateX(0)}28%{transform:translateX(3px)}}

/* entrada dos aparelhos (cascata própria, não usa .reveal) */
.js .bd-fone,.js .bd-seta,.js .bd-relogio{opacity:0}
.js .bd-fone{transform:translateY(26px)}
.js .bd-seta{transform:scale(.4)}
.js .bd-stage.is-in .bd-fone{opacity:1;transform:none;transition:opacity .7s var(--e-out),transform .9s var(--e-reveal);transition-delay:calc(var(--i,0)*140ms)}
.js .bd-stage.is-in .bd-seta{opacity:1;transform:none;transition:opacity .4s var(--e-out) .5s,transform .6s var(--e-spring) .5s}
.js .bd-stage.is-in .bd-relogio{opacity:1;transition:opacity .6s var(--e-out) .55s}

/* ---------- relógio único ---------- */
.bd-relogio{display:none;align-items:center;gap:14px;margin-top:20px;padding:0 4px}
.js .bd-relogio{display:flex}
.bd-play{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tx);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2);transition:background var(--d-ui) var(--e-out),transform var(--d-ui) var(--e-out)}
.bd-play:hover{background:rgba(255,106,43,.2)}
.bd-play:active{transform:scale(.94)}
.bd-play{position:relative}
.bd-play svg{width:20px;height:20px;grid-area:1/1;transition:opacity var(--d-fast) var(--e-out)}
/* carregando: anel girando em volta do botão, só enquanto os arquivos chegam */
.bd-gira{position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:var(--v1);border-right-color:rgba(255,176,136,.35);opacity:0;pointer-events:none;animation:ad-gira .9s linear infinite;animation-play-state:paused}
.bd-play[aria-busy=true] .bd-gira{opacity:1;animation-play-state:running}
.bd-play[aria-busy=true] svg{opacity:.45}
@keyframes ad-gira{to{transform:rotate(360deg)}}
.bd-play[data-state=pause] .bd-i-play,.bd-play[data-state=play] .bd-i-pause{display:none}
.bd-prog{position:relative;flex:1;height:4px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.1)}
.bd-prog i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#ffd8c4,#ff6a2b);transform-origin:left center;transform:scaleX(0);will-change:transform}
.bd-tc{flex:none;font-size:12px;line-height:1;letter-spacing:0;color:var(--mut2);min-width:122px;text-align:right;white-space:nowrap}
.bd-tc-rot{font-family:var(--fb);font-weight:600;color:var(--mut2)}
.bd-tc-t{color:var(--tx)}

/* ---------- comparação das durações ---------- */
.bd-comp{padding:22px 24px 24px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px var(--line)}
.bd-comp-t{margin-bottom:16px;font:700 10px/1.3 var(--fb);letter-spacing:.15em;text-transform:uppercase;color:var(--mut2)}
.bd-linha{display:grid;grid-template-columns:68px minmax(0,1fr) 46px;align-items:center;gap:14px}
.bd-linha+.bd-linha{margin-top:14px}
.bd-nome{font:700 13px/1.2 var(--fb);color:var(--mut)}
.bd-l-edit .bd-nome{color:var(--tx)}
.bd-tempo{font-size:17px;line-height:1;letter-spacing:-.02em;text-align:right;color:var(--mut)}
.bd-l-edit .bd-tempo{color:var(--v1)}
.bd-trilho{position:relative;display:block;height:22px;border-radius:7px;--ad-p:52.4%}
.bd-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:7px;transform-origin:left center;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 2px,rgba(255,255,255,.1) 2px 7px)}
.bd-l-edit .bd-fill{width:var(--ad-p);background:linear-gradient(90deg,#ffb088,#ff6a2b 60%,#e8321f);box-shadow:0 6px 18px -6px rgba(255,106,43,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.bd-resto{position:absolute;left:calc(var(--ad-p) + 5px);right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px dashed rgba(255,176,136,.34);overflow:hidden;
  font:700 10.5px/1 var(--fb);letter-spacing:.02em;white-space:nowrap;color:var(--mut)}
/* enche ao entrar na tela */
.js .bd-comp:not(.is-in) .bd-fill{transform:scaleX(0)}
.js .bd-comp:not(.is-in) .bd-resto,.js .bd-comp:not(.is-in) .bd-tempo{opacity:0}
.bd-comp.is-in .bd-fill{transform:none;transition:transform 1.1s var(--e-inout)}
.bd-comp.is-in .bd-l-edit .bd-fill{transition-duration:.8s;transition-delay:.25s}
.bd-comp.is-in .bd-tempo{opacity:1;transition:opacity .5s var(--e-out) .9s}
.bd-comp.is-in .bd-resto{opacity:1;transition:opacity .5s var(--e-out) 1.05s}

.bd-frase{margin-top:24px;font:400 16px/1.65 var(--fb);color:var(--mut);text-wrap:pretty}
.bd-frase b{color:var(--tx);font-weight:700}

/* ================= RESPONSIVO ================= */
@media (max-width:1050px){
  .bd{padding:88px 0 84px}
  .bd-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "info";row-gap:40px;justify-items:center}
  .bd-head{text-align:center;align-self:auto}
  .bd-head .eyebrow{justify-content:center}
  .bd-head .sub{margin-inline:auto;max-width:520px}
  .bd-stage{width:min(520px,100%)}
  .bd-info{width:min(560px,100%);max-width:none;align-self:auto}
  .bd-frase{text-align:center}
}
@media (max-width:760px){
  .bd{padding:64px 0 60px}
  .bd-grid{row-gap:30px}
  .bd-head .eyebrow{margin-bottom:14px}
  .bd-head .sub{margin-top:14px}
  .bd-par{gap:14px}
  .bd-tela{border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 0 0 4px #170c0a,0 0 0 5px rgba(255,255,255,.07),0 26px 50px -26px rgba(0,0,0,.95)}
  .bd-editado .bd-tela{box-shadow:0 0 0 1px rgba(255,220,200,.2),0 0 0 4px #1d0e0a,0 0 0 5px rgba(255,176,136,.34),0 26px 50px -26px rgba(0,0,0,.95),0 24px 60px -30px rgba(255,90,40,.7)}
  .bd-tela::after{top:6px;min-height:6px}
  .bd-selo{left:8px;top:20px;gap:6px;padding:5px 8px;font-size:10px;letter-spacing:.08em}
  .bd-selo b{font-size:11px;padding-left:6px}
  .bd-comp-t{font-size:11px;letter-spacing:.13em}
  .bd-tc{min-width:118px}
  .bd-fone figcaption{margin-top:12px;font-size:12px}
  .bd-seta{width:32px;height:32px;margin:-16px 0 0 -16px;top:calc((100% - 29px)/2);box-shadow:0 0 0 4px rgba(13,7,6,.92),0 8px 18px -6px rgba(255,106,43,.7),inset 0 1px 0 rgba(255,255,255,.4)}
  .bd-seta svg{width:14px;height:14px}
  .bd-relogio{margin-top:14px;gap:12px;padding:0}
  .bd-comp{padding:18px 16px 20px;border-radius:16px}
  .bd-linha{grid-template-columns:58px minmax(0,1fr) 40px;gap:10px}
  .bd-tempo{font-size:15px}
  .bd-trilho{height:20px}
  .bd-frase{margin-top:20px;font-size:15px}
}
@media (max-width:380px){
  .bd-par{gap:10px}
  .bd-selo{left:6px;gap:5px;padding:5px 7px;font-size:9.5px;letter-spacing:.04em}
  .bd-selo b{font-size:10.5px;padding-left:5px}
  .bd-linha{grid-template-columns:52px minmax(0,1fr) 38px;gap:8px}
  .bd-resto{font-size:9.5px;letter-spacing:0}
}

/* ---------- movimento reduzido: pôsteres parados, barras cheias, nada entra deslizando ---------- */
@media (prefers-reduced-motion:reduce){
  .bd-seta svg{animation:none}
  .bd-gira{animation:none;border-color:rgba(255,176,136,.5)}
  .bd-play svg{transition:none}
  .js .bd-fone,.js .bd-seta,.js .bd-relogio{opacity:1;transform:none;transition:none}
  .js .bd-stage.is-in .bd-fone,.js .bd-stage.is-in .bd-seta,.js .bd-stage.is-in .bd-relogio{transition:none}
  .js .bd-comp:not(.is-in) .bd-fill{transform:none}
  .js .bd-comp:not(.is-in) .bd-resto,.js .bd-comp:not(.is-in) .bd-tempo{opacity:1}
  .bd-comp.is-in .bd-fill,.bd-comp.is-in .bd-tempo,.bd-comp.is-in .bd-resto{transition:none}
  .bd-tela video,.bd-play{transition:none}
  .bd-prog i{will-change:auto}
}