/* =========================================================================
   Copparo — transicoes de pagina (View Transitions API nativa, cross-doc)
   100% CSS. Sem bibliotecas. Sem midia. ~2.3KB.
   Navegadores sem suporte (Firefox, Safari <18.2) ignoram tudo abaixo e
   navegam normal, sem custo nenhum. Em prefers-reduced-motion o
   @view-transition nem ativa: navegacao vira instantanea, sem animacao.
   ========================================================================= */
@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }
}

/* ---- Padrao: "camera continua" (pan + leve zoom) ---- */
::view-transition-group(root) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
::view-transition-old(root) { animation-name: cp-cam-out; }
::view-transition-new(root) { animation-name: cp-cam-in; }
@keyframes cp-cam-out {
  to   { transform: scale(1.035) translateY(-1.2%); opacity: 0; }
}
@keyframes cp-cam-in {
  from { transform: scale(.975) translateY(1.2%); opacity: 0; }
}

/* ---- Vapor: so ao entrar em /atendimento-construtoras/ (aba "Empresas").
   Marcado via JS no evento pagereveal -> viewTransition.types.add("vapor")
   (ver transitions-v1.js). So transform + opacity + filter — sem
   feTurbulence, leve na GPU de celular fraco. ---- */
html:active-view-transition-type(vapor) ::view-transition-group(root) {
  animation-duration: .7s;
}
html:active-view-transition-type(vapor) ::view-transition-old(root) {
  animation: cp-vapor-out .7s cubic-bezier(.4, 0, .2, 1) both;
}
html:active-view-transition-type(vapor) ::view-transition-new(root) {
  animation: cp-vapor-in .5s cubic-bezier(.4, 0, .2, 1) .3s both;
}
@keyframes cp-vapor-out {
  0%   { filter: blur(0);    transform: scale(1) rotate(0deg);     opacity: 1; }
  100% { filter: blur(38px); transform: scale(1.08) rotate(1deg);  opacity: 0; }
}
@keyframes cp-vapor-in {
  0%   { filter: blur(38px); transform: scale(.94) rotate(-1deg);  opacity: 0; }
  100% { filter: blur(0);    transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* ---- Modo economico: dados moveis lentos / Economia de dados ligada
   (classe aplicada via JS, so existe em navegadores com essa info —
   ver transitions-v1.js). Vira um fade simples e curto, sem vapor. ---- */
html.cp-lite ::view-transition-group(root) {
  animation-duration: .2s;
  animation-timing-function: linear;
}
html.cp-lite ::view-transition-old(root) { animation-name: cp-fade-out; }
html.cp-lite ::view-transition-new(root) { animation-name: cp-fade-in; }
@keyframes cp-fade-out { to   { opacity: 0; } }
@keyframes cp-fade-in  { from { opacity: 0; } }

/* ---- Ancoras internas (Metais/Torneiras/Tintas/Gabinetes dentro de
   Materiais): rolagem suave, desligada em reduced-motion. ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 84px; }

/* ---- Cabecalho (telefone/WhatsApp) sempre acima da transicao e clicavel,
   inclusive durante o efeito. ---- */
header.topo { z-index: 9999; }

/* ---- Vapor para link interno ("#duchas" dentro de Materiais): nao e
   navegacao cross-document, entao usa overlay real (3 divs) animado via
   Web Animations API — ver transitions-v1.js. CSS so estiliza. ---- */
.cp-vapor-ov {
  position: fixed; inset: 0; z-index: 130;
  pointer-events: none; opacity: 0; overflow: hidden;
}
.cp-vapor-c {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #d8d3ca 55%, transparent 72%);
  filter: blur(40px); opacity: 0; will-change: transform, opacity;
}
.cp-vapor-c1 { top: -20%; left: -15%; }
.cp-vapor-c2 { top: 10%; right: -25%; }
.cp-vapor-c3 { bottom: -25%; left: 20%; }
html.cp-lite .cp-vapor-c { filter: blur(14px); }
@media (prefers-reduced-motion: reduce) { .cp-vapor-ov { display: none; } }