/* PLANÍVEO — camada de animações. Remover este arquivo e animations.js volta o site ao estático. */

/* Barra de progresso de leitura */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:#145caf;transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}

/* Header fixo com sombra ao rolar */
header{position:sticky;top:0;z-index:50;transition:box-shadow .3s,height .3s,background .3s}
header.is-scrolled{box-shadow:0 8px 24px rgba(22,27,34,.08);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
header .brand img{transition:transform .3s}
header.is-scrolled .brand img{transform:scale(.9);transform-origin:left center}

/* Entrada do hero */
.anim .hero-copy>*{opacity:0;transform:translateY(28px);animation:pv-up .9s cubic-bezier(.2,.7,.2,1) forwards}
.anim .hero-copy>*:nth-child(1){animation-delay:.1s}
.anim .hero-copy>*:nth-child(2){animation-delay:.22s}
.anim .hero-copy>*:nth-child(3){animation-delay:.38s}
.anim .hero-copy>*:nth-child(4){animation-delay:.52s}
.anim .hero-copy>*:nth-child(5){animation-delay:.66s}
.anim .hero h1 em{display:inline-block;background:linear-gradient(90deg,#145caf,#3f8be0,#145caf);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pv-shine 6s linear infinite}
.anim .hero-image{clip-path:inset(0 0 0 100%);animation:pv-wipe 1.3s cubic-bezier(.7,0,.2,1) .15s forwards}
.anim .hero-image img{transform:scale(1.18);animation:pv-settle 2.2s cubic-bezier(.2,.7,.2,1) .15s forwards;will-change:transform}
.anim .image-label{opacity:0;animation:pv-up .8s ease 1.2s forwards}

@keyframes pv-up{to{opacity:1;transform:none}}
@keyframes pv-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes pv-settle{to{transform:scale(1.04)}}
@keyframes pv-shine{to{background-position:-200% 0}}
@keyframes pv-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Faixa de princípios: linha que corre */
.principles{position:relative;overflow:hidden}
.principles::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#145caf;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.principles.in::after{transform:scaleX(1)}

/* Revelação ao rolar */
.anim .rv{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.anim .rv.rv-left{transform:translateX(-40px)}
.anim .rv.rv-right{transform:translateX(40px)}
.anim .rv.rv-zoom{transform:scale(.94)}
.anim .rv.in{opacity:1;transform:none}

/* Imagens: revelação em cortina */
.anim .rv-img{clip-path:inset(12% 12% 12% 12% round 6px);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.anim .rv-img img{transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.anim .rv-img.in{clip-path:inset(0 0 0 0 round 0)}
.anim .rv-img.in img{transform:none}

/* Títulos: palavras sobem */
.anim .split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.anim .split-words .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--w,0) * 45ms)}
.anim .split-words.in .w>span{transform:none}

/* Hover vivo */
.button{position:relative;overflow:hidden;isolation:isolate}
.button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;z-index:-1}
.button:hover::after{transform:translateX(120%)}
.text-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s ease,color .2s}
.text-link:hover{background-size:100% 1px}
.product-render,.application figure,.accessory-card,.supply-card{overflow:hidden}
.product-render img,.application img,.accessory-card img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.product-render:hover img,.application figure:hover img,.accessory-card:hover img{transform:scale(1.04)}
.supply-card,.accessory-card,.roller-choice,.steps article,.benefits article{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .2s,border-color .2s}
.supply-card:hover,.accessory-card:hover,.roller-choice:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(22,27,34,.1)}
.steps article:hover,.benefits article:hover{transform:translateY(-4px)}
.steps article>span,.benefits article>span{transition:letter-spacing .35s}
.steps article:hover>span,.benefits article:hover>span{letter-spacing:3px}

/* Trocas de conteúdo (abas, fotos, roldanas) */
.swap-anim{animation:pv-pop .55s cubic-bezier(.2,.7,.2,1)}

/* O caminho da água: linha que escoa */
.water-route ol{position:relative}
.water-route li{position:relative}
.anim .water-route li{opacity:0;transform:translateX(-18px);transition:opacity .7s,transform .7s;transition-delay:calc(var(--i,0) * 220ms)}
.anim .water-route.in li{opacity:1;transform:none}
.water-route.in ol::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:2px;background:linear-gradient(#145caf 0 40%,transparent 40% 100%) 0 0/2px 22px;animation:pv-flow 1s linear infinite;opacity:.7}
@keyframes pv-flow{to{background-position:0 22px}}

/* Vídeo e mídia flutuando suavemente */
.installation-video-player{transition:transform .6s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  .anim .hero-copy>*,.anim .image-label{opacity:1;transform:none;animation:none}
  .anim .hero-image,.anim .hero-image img{clip-path:none;transform:none;animation:none}
  .anim .hero h1 em{animation:none}
  .anim .rv,.anim .rv-img,.anim .rv-img img,.anim .water-route li,.anim .split-words .w>span{opacity:1;transform:none;clip-path:none}
  .scroll-progress,.water-route.in ol::before{display:none}
}

/* Menu superior 30% mais baixo (92 → 64 px; celular 80 → 56 px) */
header{height:64px}
header .planiveo-brand img{width:172px}
header .button.small{padding:8px 15px}
html{scroll-padding-top:68px}
section[id]{scroll-margin-top:70px}
@media (max-width:1100px){header .planiveo-brand img{width:158px}}
@media (max-width:720px){header{height:56px}header .planiveo-brand img{width:130px}header .button.small{padding:7px 11px}}
@media (max-width:380px){header .planiveo-brand img{width:114px}}

/* Faixa "Seja um distribuidor" (versão clássica) */
.dist-band{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:70px 6%;background:linear-gradient(135deg,#145caf,#0f4887);color:#fff}
.dist-band .eyebrow{color:#cfe0f5}
.dist-band h2{color:#fff;margin-bottom:12px}
.dist-band h2 em{color:#cfe0f5}
.dist-band p:not(.eyebrow){color:#dbe8f7;max-width:560px;margin:0}
.dist-band .button{background:#fff!important;color:#145caf!important;border-color:#fff!important}