/* ==========================================================================
   CLAREAR — MOTION
   Animações com a linguagem da limpeza: vidro limpo por um rodo, poeira que
   sai, brilho, bolhas. Só ligam quando o JS adiciona html.motion e respeitam
   prefers-reduced-motion.
   ========================================================================== */

@property --p{ syntax:"<number>"; inherits:true; initial-value:0; }

/* barra de progresso de leitura */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--blue),#8fd0f5);
  transform-origin:0 50%; transform:scaleX(0);
  z-index:1001; pointer-events:none;
}

/* header compacta ao rolar */
.header{ transition:box-shadow .3s ease, background .3s ease; }
.nav{ transition:min-height .3s ease; }
.brand img{ transition:height .3s ease; }
.header.scrolled{ box-shadow:0 10px 30px rgba(12,18,31,.08); }
.header.scrolled .nav{ min-height:68px; }
.header.scrolled .brand img{ height:46px; }

/* ---------- "Vidro limpo": névoa de poeira varrida por um rodo ---------- */

.hero-frame, .hero-media{ isolation:isolate; }

.haze, .squeegee{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.hero-frame .tag{ z-index:2; }

.haze{
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 64%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 71% 31%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 78%, rgba(255,255,255,.8), transparent 60%),
    rgba(226,220,204,.62);
  background-size:140px 140px, 190px 190px, 120px 120px, 170px 170px, auto;
  -webkit-backdrop-filter:blur(9px) saturate(.55) contrast(.9);
  backdrop-filter:blur(9px) saturate(.55) contrast(.9);
  clip-path:polygon(calc(var(--p) * 1% - 18%) 0, 100% 0, 100% 100%, calc(var(--p) * 1% - 38%) 100%);
}

.squeegee{
  left:calc(var(--p) * 1% - 18%);
  right:auto; width:3px;
  background:linear-gradient(180deg,transparent,#fff 15%,#fff 85%,transparent);
  box-shadow:0 0 22px 6px rgba(255,255,255,.7), 0 0 60px 18px rgba(143,208,245,.45);
  transform:skewX(-9deg);
  opacity:0;
}

.wipe .haze,
.wipe .squeegee{ animation:wipe 2.1s cubic-bezier(.65,.05,.25,1) .35s both; }
.wipe .squeegee{ animation:wipe 2.1s cubic-bezier(.65,.05,.25,1) .35s both, wipeFlash 2.1s linear .35s both; }

@keyframes wipe{ from{ --p:0; } to{ --p:150; } }
@keyframes wipeFlash{ 0%{opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{opacity:0} }

.wipe-done .haze,
.wipe-done .squeegee{ animation:none; --p:150; }
.wipe-done .squeegee{ opacity:0; }
.hero-frame.wipe-done{ cursor:pointer; }

.wipe-hint{
  position:absolute; right:18px; top:18px; z-index:4;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:rgba(12,18,31,.55); padding:7px 12px; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-6px); transition:.35s ease; pointer-events:none;
}
.wipe-done:hover .wipe-hint{ opacity:1; transform:none; }

/* brilho que pisca quando o vidro fica limpo */
.sparkle{
  position:absolute; width:26px; height:26px; z-index:4; pointer-events:none;
  background:#fff;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity:0; transform:scale(0);
}
.wipe-done .sparkle{ animation:twinkle 2.6s ease-in-out infinite; animation-delay:var(--sd,0s); }
@keyframes twinkle{
  0%,70%,100%{ opacity:0; transform:scale(0) rotate(0); }
  80%{ opacity:1; transform:scale(1) rotate(45deg); }
  90%{ opacity:.9; transform:scale(.55) rotate(90deg); }
}

/* ---------- Revelação ao rolar ---------- */

.motion [data-r]{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.motion [data-r].in{ opacity:1; transform:none; }

/* títulos: palavra por palavra subindo de uma máscara */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.w > span{ display:inline-block; }
.motion .split .w > span{
  transform:translateY(115%) rotate(3deg);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i) * 55ms + var(--base, 0ms));
}
.motion .split.in .w > span{ transform:none; }
.motion [data-r="split"]{ opacity:1; transform:none; }

/* fotos e vídeos: cortina que abre + zoom que assenta */
.motion [data-r="media"]{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s cubic-bezier(.7,0,.2,1);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.motion [data-r="media"].in{ clip-path:inset(0 0 0 0); }
.motion [data-r="media"] img,
.motion [data-r="media"] video{
  transform:scale(1.22);
  transition:transform 1.8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.motion [data-r="media"].in img,
.motion [data-r="media"].in video{ transform:scale(1); }
.motion .case:hover [data-r="media"].in img,
.motion .case:hover [data-r="media"].in video,
.motion .work:hover [data-r="media"].in img{ transform:scale(1.045); transition-duration:.5s; transition-delay:0s; }

/* linha da timeline desenha sozinha */
.motion .timeline::before{
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.6s cubic-bezier(.6,0,.2,1) .2s;
  background:var(--blue); height:2px; top:10px;
}
.motion .timeline.in::before{ transform:scaleX(1); }
.motion .tl-step .dot{ transition:background .4s ease .5s, color .4s ease .5s, border-color .4s ease .5s; }
.motion .tl-step.in .dot{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- Microinterações ---------- */

/* botões: reflexo de vidro passando */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg); transition:left .7s ease; pointer-events:none;
}
.btn:hover::after{ left:130%; }
.btn-outline::after{ display:none; }

/* cartões: linha azul que passa na base */
.diff, .feature, .model{ position:relative; transition:background .35s ease; }
.diff::after, .feature::after, .model::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--blue),#8fd0f5);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .55s cubic-bezier(.6,0,.2,1);
}
.diff:hover::after, .feature:hover::after, .model:hover::after{ transform:scaleX(1); }
.diff:hover, .feature:hover, .model:hover{ background:#fff; }

.stat{ transition:background .3s ease; }
.stat:hover{ background:var(--blue-tint); }

/* status "ao vivo" pulsando */
.case-status .dot{ position:relative; }
.case-status .dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--blue);
  animation:ping 2s ease-out infinite;
}
@keyframes ping{ from{ transform:scale(.5); opacity:1; } to{ transform:scale(1.9); opacity:0; } }

/* grade de planta andando devagar */
.blueprint{ animation:grid 24s linear infinite; }
@keyframes grid{ to{ background-position:64px 64px, 64px 64px; } }

/* WhatsApp respira */
.whats-btn{ position:relative; }
.whats-btn::after{
  content:""; position:absolute; inset:0; border-radius:18px; border:2px solid #25D366;
  animation:ping 2.6s ease-out infinite;
}

/* ---------- Bolhas de sabão na faixa final ---------- */

.bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bubble{
  position:absolute; bottom:-60px; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.75), rgba(143,208,245,.18) 38%, rgba(255,255,255,.05) 70%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 0 12px rgba(143,208,245,.25);
  animation:rise var(--t,14s) linear var(--dl,0s) infinite;
}
@keyframes rise{
  0%{ transform:translate3d(0,0,0) scale(.7); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translate3d(var(--x,30px),-250px,0) scale(1); }
  100%{ transform:translate3d(calc(var(--x,30px) * -1),-560px,0) scale(1.1); opacity:0; }
}
.cta .container{ position:relative; z-index:1; }
.cta .blueprint{ opacity:.12; filter:invert(1); }

/* ---------- Acessibilidade ---------- */

@media (prefers-reduced-motion:reduce){
  .motion [data-r], .motion .split .w > span,
  .motion [data-r="media"], .motion [data-r="media"] img, .motion [data-r="media"] video{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
  .haze, .squeegee, .sparkle, .bubbles, .progress, .wipe-hint{ display:none !important; }
  .whats-btn::after, .case-status .dot::after{ display:none; }
  .blueprint{ animation:none; }
}

@media (max-width:640px){
  .wipe-hint{ display:none; }
}