/* Tuigo V6: efeitos novos */
/* topo: vídeo no lugar da foto, um pouco mais claro que a foto escurecida */
.fx video.vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
 filter:saturate(.5) brightness(.32);transform:scale(1.06);transition:filter 1.1s ease,transform 1.5s ease}
.fx.on video.vbg{filter:saturate(1.05) brightness(.78);transform:scale(1)}
.fx video.vbg~img.bg,.fx img.bg.temvid{opacity:0}

/* Hélice no bloco Laserway */
.par .foto.hx{background:#0A1C3E;min-height:clamp(380px,46vw,620px)}
.hx-shader{position:absolute;inset:0;z-index:0}
.hx-shader>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hx-logo{position:absolute;left:50%;top:50%;width:min(34%,230px);transform:translate(-50%,-50%);z-index:2;opacity:.72;pointer-events:none;
 filter:drop-shadow(0 6px 26px rgba(0,10,30,.55))}
.par .foto .hx-logo img,.hx-logo img{display:block;width:100%!important;height:auto!important;min-height:0!important;object-fit:contain!important}
.hx-cap{position:absolute;left:clamp(18px,3vw,34px);bottom:clamp(16px,2.4vw,28px);z-index:2;color:#CFE6FF;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85;text-shadow:0 1px 10px rgba(0,8,24,.9)}
.foto.hx .no-gl{background:radial-gradient(60% 60% at 60% 40%,#1f4f9a,#0A1C3E)}

/* Pontilhado no alto do bloco Treinamentos */
.pt-stage{position:absolute;left:0;right:0;top:0;height:clamp(300px,34vw,470px);z-index:0;pointer-events:none;
 -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.pt-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pt-sec>.w{position:relative;z-index:2}
@media(max-width:860px){.pt-stage{top:auto;bottom:0;height:240px;-webkit-mask-image:linear-gradient(0deg,#000 70%,transparent);mask-image:linear-gradient(0deg,#000 70%,transparent)}}

/* Nebulosa no fundo do Contato */
.nb-stage{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55}
.nb-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nb-sec>.w{position:relative;z-index:2}
.nb-sec .tit{text-shadow:0 1px 2px rgba(0,0,0,.35),0 0 28px rgba(0,0,0,.45)}

/* Roda de obras */
.ww-root{position:relative;width:100%;height:clamp(460px,52vw,660px);margin-top:26px;overflow:hidden;isolation:isolate;
 --ww-fg:#0A1A2F;--ww-muted:#6B809B;--ww-card:#DCE4EF;--ww-shadow:rgba(10,26,47,.28);--ww-chip:rgba(0,53,123,.92);
 color:var(--ww-fg);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ww-root *,.ww-root *::before,.ww-root *::after{box-sizing:border-box}
.ww-stage{position:absolute;inset:0;cursor:grab;touch-action:pan-y;outline:none}
.ww-stage:active{cursor:grabbing}
.ww-stage:focus-visible{outline:2px solid #1A70AF;outline-offset:-4px}
.ww-wheel{position:absolute;top:50%;left:50%;transform-style:preserve-3d}
.ww-card{position:absolute;top:0;left:0;display:block;color:inherit;text-decoration:none;outline:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-user-drag:none}
.ww-face{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:8px;background:var(--ww-card);box-shadow:0 22px 44px -20px var(--ww-shadow)}
.ww-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;-webkit-user-drag:none}
.ww-action{position:absolute;right:12px;bottom:12px;padding:5px 12px;border-radius:999px;background:var(--ww-chip);color:#fff;font-size:12px;font-weight:600;
 opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
@media(hover:hover){.ww-card:hover .ww-action{opacity:1;transform:none}}
.ww-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-style:italic;letter-spacing:-.02em;color:#00357B;white-space:nowrap;pointer-events:none}
.ww-title{position:absolute;top:50%;left:4%;max-width:22%;font-weight:700;letter-spacing:-.02em;line-height:1.08;opacity:0;transform:translateY(-50%);pointer-events:none;color:#0A1A2F}
.ww-index{position:absolute;top:6%;right:1.5%;margin:0;padding:0;list-style:none;text-align:right;line-height:1.8;color:var(--ww-muted);z-index:150}
.ww-index button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;transition:color .15s}
.ww-index button[aria-current]{color:#00357B;font-weight:700}
.ww-dica{display:none;align-items:center;gap:8px;margin-top:18px;color:#1A70AF;font-size:14px;font-weight:600}
.ww-dica svg{flex:none;animation:wwd 1.6s ease-in-out infinite}
@keyframes wwd{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.ww-usou~.ww-dica,.ww-dica.some{opacity:0;transition:opacity .4s}
@media(max-width:860px){
 .ww-root{height:440px}
 .ww-index{display:none}
 .ww-title{left:50%;top:auto;bottom:4%;max-width:90%;transform:translateX(-50%);text-align:center}
 .ww-dica{display:flex}
}
@media(prefers-reduced-motion:reduce){.ww-dica svg{animation:none}}

/* Rodapé: nome em retícula */
.hwf{position:relative;height:clamp(150px,19vw,280px);margin-top:20px;overflow:hidden;cursor:crosshair}
.hwf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rod{padding-bottom:18px!important}

/* faixa 02 (foto): aproximação lenta, luzes acendendo, cor da marca e névoa (sem vídeo, sem custo) */
.fx[data-cena="1"] img.bg{transform-origin:58% 47%}
.fx[data-cena="1"].on img.bg{animation:fxDolly 9s cubic-bezier(.25,.1,.25,1) both}
@keyframes fxDolly{0%{transform:scale(1.02);filter:saturate(.7) brightness(.34)}
 35%{filter:saturate(.9) brightness(.6)}100%{transform:scale(1.2);filter:saturate(1) brightness(.66)}}
.fx .fxTint,.fx .fxFog,.fx .fxLuz{position:absolute;inset:0;pointer-events:none;z-index:1}
.fx .fxTint{background:linear-gradient(180deg,#0B3D8C 0%,#1A70AF 45%,#061A3A 100%);mix-blend-mode:color;opacity:.85}
.fx .fxFog{opacity:0;transition:opacity 1.2s;mix-blend-mode:screen;
 background:radial-gradient(40% 18% at 30% 78%,rgba(120,190,255,.22),transparent 70%),radial-gradient(45% 16% at 75% 84%,rgba(140,210,255,.18),transparent 70%);
 background-size:200% 100%;animation:fxFog 14s linear infinite}
.fx.on .fxFog{opacity:1}
@keyframes fxFog{from{background-position:0% 0,100% 0}to{background-position:-100% 0,0% 0}}
.fx .fxLuz{opacity:0;mix-blend-mode:screen;background:radial-gradient(14% 22% at 58% 47%,rgba(170,220,255,.55),rgba(60,140,230,.12) 45%,transparent 70%)}
.fx.on .fxLuz{animation:fxLuz 9s ease-out both}
@keyframes fxLuz{0%{opacity:0;transform:scale(.6)}30%{opacity:1}60%{opacity:.75}100%{opacity:.9;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.fx[data-cena="1"].on img.bg,.fx.on .fxLuz,.fx .fxFog{animation:none}}

/* Obras: Progressive Blur Card (Profitize), grade de cartões quadrados do mesmo tamanho */
.pbg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:28px auto 0;max-width:min(100%,900px)}
.pbc{position:relative;margin:0;aspect-ratio:1;padding:8px;border-radius:24px;background:#fff;box-shadow:0 2px 8px rgba(10,26,47,.08),0 18px 40px -24px rgba(10,26,47,.35);
 overflow:hidden;opacity:0;transform:translateY(34px) scale(.96);transition:box-shadow .5s cubic-bezier(.4,0,.2,1),scale .5s cubic-bezier(.4,0,.2,1)}
.pbg.ve .pbc{animation:pbcIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*110ms)}
@keyframes pbcIn{to{opacity:1;transform:none}}
.pbc-ft{position:absolute;inset:8px;display:block;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#DCE4EF}
.pbc-img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .7s cubic-bezier(.4,0,.2,1);animation:pbcKb 14s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-2.3s)}
@keyframes pbcKb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,-1.2%)}}
.pbc-blur{position:absolute;left:8px;right:8px;bottom:8px;height:40%;border-radius:0 0 16px 16px;pointer-events:none;
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 -webkit-mask-image:linear-gradient(to top,#000 0%,#000 60%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.2) 90%,transparent 100%);
 mask-image:linear-gradient(to top,#000 0%,#000 60%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.2) 90%,transparent 100%)}
.pbc-shade{position:absolute;left:8px;right:8px;bottom:8px;height:45%;border-radius:0 0 16px 16px;pointer-events:none;background:linear-gradient(to top,rgba(3,10,22,.62),rgba(3,10,22,0));transition:background .5s}
.pbc-tx{position:absolute;left:26px;right:84px;bottom:24px;margin:0;color:#fff;pointer-events:none;transition:translate .3s cubic-bezier(.4,0,.2,1)}
.pbc-tx b{display:block;font-size:clamp(16px,1.35vw,19px);font-weight:700;line-height:1.2;transition:font-size .3s}
.pbc-tx small{display:block;margin-top:3px;font-size:13.5px;font-weight:400;color:rgba(255,255,255,.78);transition:color .3s}
.pbc-go{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#fff;color:#0A1A2F;
 box-shadow:0 0 0 1px rgba(10,26,47,.12);transition:background-color .3s,color .3s,scale .3s,rotate .3s}
.pbc-go svg{width:20px;height:20px;transition:translate .3s}
@media(hover:hover){
 .pbc:hover{scale:1.02;box-shadow:0 8px 40px rgba(10,26,47,.3)}
 .pbc:hover .pbc-img{scale:1.05}
 .pbc:hover .pbc-shade{background:linear-gradient(to top,rgba(3,10,22,.72),rgba(3,10,22,0))}
 .pbc:hover .pbc-tx{translate:0 -2px}.pbc:hover .pbc-tx b{font-size:clamp(17px,1.5vw,21px)}.pbc:hover .pbc-tx small{color:#fff}
 .pbc-go:hover{rotate:-45deg;scale:1.08;color:#1A70AF}.pbc-go:hover svg{translate:2px 0}}
.pbc-lb{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(3,10,22,.9);padding:4vw;cursor:zoom-out}
.pbc-lb[hidden]{display:none}
.pbc-lb img{max-width:min(1100px,92vw);max-height:84vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pbcLb .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pbcLb{from{opacity:0;transform:scale(.94)}}
.pbc-x{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;border-radius:999px;background:#fff;color:#0A1A2F;font-size:28px;line-height:1;cursor:pointer}
@media(max-width:860px){.pbg{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none}
 .pbc{padding:5px;border-radius:18px}.pbc-ft{inset:5px;border-radius:13px}.pbc-blur,.pbc-shade{left:5px;right:5px;bottom:5px}
 .pbc-tx{left:14px;right:12px;bottom:14px}.pbc-tx b{font-size:14px}.pbc-tx small{font-size:11.5px}.pbc-go{display:none}}
@media(prefers-reduced-motion:reduce){.pbc{opacity:1;transform:none}.pbg.ve .pbc,.pbc-img{animation:none}}

/* Sala técnica: as 5 etapas do rack em foto (Flow), no lugar do rack 3D */
#rackimg{position:absolute;left:-2%;top:calc(50% + 36px);width:60vw;height:84vh;transform:translateY(-50%);z-index:2;pointer-events:none;will-change:transform}
#rackimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease;
 -webkit-mask-image:radial-gradient(ellipse 46% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 46% 50% at 50% 50%,#000 62%,transparent 100%)}
#rackimg img.on{opacity:1}
@media(max-width:1000px){
 #rackimg{order:2;position:relative;left:auto;top:auto;transform:none;width:100%;height:min(62vh,500px);margin:8px 0 0}
 #rackimg img{-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000 60%,transparent 100%)}
}
html:not(.js) #rackimg img:last-child,.semgsap #rackimg img:last-child{opacity:1}
