/* Prévia "sites animados" (01/11/2026). Só transform e opacity no que se mexe; sem biblioteca.
   Tudo para com prefers-reduced-motion (bloco no fim). Copiado para usuario/assets e tecnologia/assets. */

/* Troca de cor da demonstração: o degradê é feito pelo animado.js só durante a troca (sem @property, que
   deixava a página inteira recalculando estilo e subia o TBT do Lighthouse). */

/* ---------- 1. Entrada ao rolar ([data-anim]: sobe, esq, dir, zoom) ---------- */
.anim-pre{opacity:0}
.anim-pre[data-anim="sobe"],.anim-pre[data-anim=""]{transform:translateY(36px)}
.anim-pre[data-anim="esq"]{transform:translateX(-48px)}
.anim-pre[data-anim="dir"]{transform:translateX(48px)}
.anim-pre[data-anim="zoom"]{transform:scale(.9)}
.anim-in{opacity:1;transform:none;transition:opacity .7s ease var(--atraso,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}

/* ---------- 2a. Celulares do topo balançam devagar (pausa só no clique/toque, 05/11/2026) ---------- */
@keyframes balanca{0%,100%{rotate:y -7deg}50%{rotate:y 7deg}}
.stage>.phone{animation:balanca 9s ease-in-out infinite;transform-origin:50% 60%}
.stage>.phone:nth-child(2){animation-delay:-3s}
.stage>.phone:nth-child(3){animation-delay:-6s}
.stage.pausado>.phone,.stage.fora>.phone{animation-play-state:paused}

/* ---------- 2b. Carrossel 3D com os prints reais ---------- */
.giro-sec{overflow:hidden;overflow:clip}
.giro{--w:150px;--r:150px;--p:calc(var(--w) * .034);--t:calc(var(--w) * .056);--rad:calc(var(--w) * .135);--h:calc((var(--w) - 2 * var(--p)) * 19.5 / 9 + 2 * var(--p));position:relative;display:grid;justify-items:center;gap:18px}
@media (min-width:700px){.giro{--w:190px;--r:195px}}
.giro-cena{width:100%;height:calc(var(--h) + 70px);perspective:1100px;perspective-origin:50% 40%;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.giro-centro{transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1));width:var(--w)}
.giro-anel{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;animation:gira 40s linear infinite}
@keyframes gira{to{transform:rotateY(-360deg)}}
.giro-item{position:absolute;inset:0;margin:0;transform:rotateY(calc(var(--i) * 72deg)) translateZ(var(--r));transform-style:preserve-3d}
/* Celular 3D genérico 19,5:9 (desenho próprio, sem marca, 02/11/2026). Corpo = 9 fatias com o mesmo contorno
   empilhadas na espessura (borda igual em toda a volta, cantos inclusive) + 4 faixas retas perpendiculares
   (borda vista de lado). Frente: vidro preto com borda fina igual, tela com barra de status e câmera furada,
   reflexo discreto. Costas: módulo de câmera. Botões de volume (esquerda) e bloqueio (direita) presos à borda. */
.p3d{position:absolute;inset:0;transform-style:preserve-3d}
.p3d>*{position:absolute}
.p3d-c{inset:0;border-radius:var(--rad);background:linear-gradient(100deg,#4d5057,#a9acb3 22%,#6d7077 48%,#b6b9bf 74%,#50535a);transform:translateZ(calc((var(--k) - 4) * var(--t) / 8))}
.p3d-c.btn::before,.p3d-c.btn::after{content:"";position:absolute;width:calc(var(--w) * .022);background:#7d8087;border-radius:2px}
.p3d-c.btn::before{left:calc(var(--w) * -.016);top:19%;height:13%;box-shadow:0 calc(var(--h) * .155) 0 #7d8087}
.p3d-c.btn::after{right:calc(var(--w) * -.016);top:26%;height:9%}
.p3d-b{background:linear-gradient(90deg,#5a5d64,#c1c4ca 46%,#676a71);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p3d-b.e,.p3d-b.d{top:var(--rad);height:calc(var(--h) - 2 * var(--rad));width:var(--t);left:calc(50% - var(--t) / 2)}
.p3d-b.e{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.p3d-b.d{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.p3d-b.s,.p3d-b.i{left:var(--rad);width:calc(var(--w) - 2 * var(--rad));height:var(--t);top:calc(50% - var(--t) / 2);background:linear-gradient(#5a5d64,#c1c4ca 46%,#676a71)}
.p3d-b.s{transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}
.p3d-b.i{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
.p3d-b.e::before,.p3d-b.d::before{content:"";position:absolute;left:16%;right:16%;border-radius:2px;background:#3b3d43}
.p3d-b.e::before{top:calc(var(--h) * .19 - var(--rad));height:calc(var(--h) * .13);box-shadow:0 calc(var(--h) * .155) 0 #3b3d43}
.p3d-b.d::before{top:calc(var(--h) * .26 - var(--rad));height:calc(var(--h) * .09)}
.p3d-frente,.p3d-costas{inset:0;border-radius:var(--rad);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p3d-frente{transform:translateZ(calc(var(--t) / 2 + .5px));padding:var(--p);background:#09090b;box-shadow:inset 0 0 0 1.2px #8f9299,inset 0 0 0 2.4px #1a1b1f,0 30px 46px -30px rgba(25,20,15,.6)}
.p3d-tela{position:relative;height:100%;display:flex;flex-direction:column;border-radius:calc(var(--rad) - var(--p));overflow:hidden;background:#000}
.p3d-status{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 10%;background:var(--sb);color:var(--sb-ink);font:600 calc(var(--w) * .056)/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;position:relative;transition:background .25s}
.p3d-status::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--w) * .05);aspect-ratio:1;border-radius:50%;background:#050506;box-shadow:0 0 0 1px rgba(255,255,255,.12);transform:translate(-50%,-50%)}
.p3d-ic{width:calc(var(--w) * .17);height:auto;fill:currentColor}
.p3d-app{position:relative;flex:none;aspect-ratio:480/967;line-height:0}
.p3d-app img{display:block;width:100%;height:100%}
.p3d-app .ink,.p3d-app .tint{position:absolute;inset:0;-webkit-mask-position:center;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:100% 100%;mask-repeat:no-repeat;transition:background .25s}
.p3d-app .tint{background:var(--app)}
.p3d-app .ink{background:var(--app-ink)}
.p3d-tela::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 24%,transparent 38%,transparent 78%,rgba(255,255,255,.06) 100%);pointer-events:none}
.p3d-costas{transform:rotateY(180deg) translateZ(calc(var(--t) / 2 + .5px));background:linear-gradient(150deg,#4a4c53,#2a2b30 55%,#3d3f45);box-shadow:inset 0 0 0 1.2px #878a91}
.p3d-cam{position:absolute;top:2.6%;left:7%;width:38%;aspect-ratio:1/1.08;border-radius:28%;background:radial-gradient(circle at 30% 27%,#060709 0 12%,#5a5d64 13% 16%,transparent 17%),radial-gradient(circle at 30% 70%,#060709 0 12%,#5a5d64 13% 16%,transparent 17%),radial-gradient(circle at 72% 27%,#f1ecdc 0 6%,transparent 7%),linear-gradient(145deg,#3a3c42,#1d1e22);box-shadow:inset 0 0 0 1.2px #75787f,0 5px 9px -5px rgba(0,0,0,.6)}
.giro-item figcaption{position:absolute;left:50%;top:calc(100% + 12px);translate:-50% 0;white-space:nowrap;font-size:.8rem;font-weight:600;color:var(--muted);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.giro.pausado .giro-anel,.giro.fora .giro-anel{animation-play-state:paused}
.giro-pausa{font:inherit;font-size:.85rem;font-weight:600;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);border-radius:99px;padding:8px 16px;cursor:pointer;margin-top:28px}
.giro-pausa:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.giro-nota{color:var(--muted);font-size:.85rem;text-align:center;max-width:46ch}

/* ---------- 3. Contadores ---------- */
.numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin:0;padding:0;list-style:none}
@media (max-width:760px){.numeros{grid-template-columns:1fr 1fr}}
.numeros li{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,28px);display:grid;gap:6px;align-content:start}
.numeros b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--accent-text);font-variant-numeric:tabular-nums}
.numeros span{font-weight:700}
.numeros small{color:var(--muted);font-size:.85rem}
.numeros-sec{padding-block:clamp(40px,6vw,72px)}

/* ---------- 4. Demonstração de marca: troca automática entre operadores fictícios ---------- */
.demo-auto{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font-size:.85rem;color:var(--muted)}
.demo-auto button{font:inherit;font-weight:600;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);border-radius:99px;padding:6px 14px;cursor:pointer}
.demo-auto button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.demo-auto .ex{font-weight:700;color:var(--fg)}
@keyframes troca{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.12)}100%{transform:translateX(-50%) scale(1)}}
.demo-stage.troca .chip-over{animation:troca .6s cubic-bezier(.2,.8,.2,1)}
@keyframes troca-btn{0%,100%{transform:none}40%{transform:scale(1.06)}}
.demo.troca .brandchip:not(.chip-over),.demo.troca .brandbtn{animation:troca-btn .6s cubic-bezier(.2,.8,.2,1)}
#demo-nome.digitando{caret-color:var(--app,#0F766E)}

/* ---------- 5. Transição entre páginas: reserva para quem não tem View Transitions entre documentos ---------- */
@keyframes fb-entra{from{opacity:0;transform:translateY(14px)}}
html.vt-fb main#conteudo{animation:fb-entra .38s cubic-bezier(.2,.8,.2,1) both}
html.vt-saindo main#conteudo{opacity:0;transform:translateY(-8px);transition:opacity .16s ease,transform .16s ease}
/* Navegador com suporte: o logotipo fica parado e o resto desliza (o refino já cuida do conteúdo) */
.top .logo{view-transition-name:logo}

/* ---------- Movimento reduzido: nada gira, nada conta, nada entra se mexendo ---------- */
@media (prefers-reduced-motion:reduce){
  .anim-pre{opacity:1;transform:none}
  .stage>.phone{animation:none}
  .giro-cena{height:auto;perspective:none;cursor:auto;overflow-x:auto;justify-items:start}
  .giro-centro{transform:none;width:auto}
  .giro-anel{animation:none;display:flex;gap:16px;width:auto;aspect-ratio:auto;padding-bottom:36px}
  .giro-item{position:relative;flex:none;width:var(--w);height:var(--h);transform:none}
  .p3d-frente{transform:none}.p3d-costas,.p3d-c,.p3d-b{display:none}
  .giro-pausa,.demo-auto{display:none}
  html.vt-fb main#conteudo{animation:none}
  html.vt-saindo main#conteudo{opacity:1;transform:none}
}