/* AVM Detailing · efeitos de glitch e transições (só na home).
   Tudo aqui é multiplicado por --glitch (1 no CH.00 → 0 no CH.06) e some com
   prefers-reduced-motion ou com o interruptor "Efeitos de glitch" desligado. */

/* Ruído digital (canvas 160x90 escalado) e linhas de varredura */
.noise{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;mix-blend-mode:screen;opacity:calc(.12 * var(--glitch))}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.9) 0 1px,transparent 1px 2px);opacity:calc(.08 * var(--glitch))}

/* Camadas temporárias da rajada (criadas e removidas pelo glitch.js) */
.gxl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform}
.gxl-a{filter:url(#avm-ch-a);mix-blend-mode:screen;opacity:.6}
.gxl-c{filter:url(#avm-ch-c);mix-blend-mode:screen;opacity:.6}
.gx.is-burst .gx-img{opacity:.82}

/* Texto com glitch: estabiliza em 400ms */
[data-gt].gt{position:relative}
[data-gt].gt::before,[data-gt].gt::after{content:attr(data-gt);position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit}
[data-gt].gt::before{color:var(--ciano);animation:gt-a .4s steps(4,end) both}
[data-gt].gt::after{color:var(--ambar);animation:gt-b .4s steps(4,end) both}
@keyframes gt-a{
  0%{transform:translate(calc(-7px * var(--gt,1)),0);clip-path:inset(0 0 62% 0);opacity:.9}
  35%{transform:translate(calc(5px * var(--gt,1)),0);clip-path:inset(38% 0 30% 0)}
  70%{transform:translate(calc(-3px * var(--gt,1)),0);clip-path:inset(70% 0 4% 0)}
  100%{transform:none;clip-path:inset(50% 0 50% 0);opacity:0}
}
@keyframes gt-b{
  0%{transform:translate(calc(7px * var(--gt,1)),0);clip-path:inset(55% 0 8% 0);opacity:.9}
  35%{transform:translate(calc(-5px * var(--gt,1)),0);clip-path:inset(8% 0 66% 0)}
  70%{transform:translate(calc(3px * var(--gt,1)),0);clip-path:inset(30% 0 42% 0)}
  100%{transform:none;clip-path:inset(50% 0 50% 0);opacity:0}
}

/* Corte de sinal: barra de varredura nas trocas de capítulo (250ms) */
.scanbar{position:fixed;left:0;right:0;top:0;z-index:35;height:3px;pointer-events:none;opacity:0;background:var(--ciano);box-shadow:0 0 18px 2px rgba(46,230,214,.55)}
.scanbar.is-run{animation:scanbar .25s linear both}
@keyframes scanbar{0%{transform:translateY(0);opacity:.9}90%{opacity:.5}100%{transform:translateY(100vh);opacity:0}}

/* CH.00: monitor sem sinal → sintonia */
.js-anim .ch-0.is-tuning .noise{opacity:.34;transition:none}
.js-anim .ch-0 .noise{transition:opacity .6s linear}
.js-anim .ch-0.is-tuning .gx-img{opacity:.25}
.js-anim .ch-0 .gx-img{transition:opacity .5s linear}
.js-anim .ch-0:not(.is-ready) .hero-sub,.js-anim .ch-0:not(.is-ready) .btns,.js-anim .ch-0:not(.is-ready) .hero-foot{opacity:0;transform:translateY(14px)}
.js-anim .ch-0 .hero-sub,.js-anim .ch-0 .btns,.js-anim .ch-0 .hero-foot{transition:opacity 1.200s var(--ease),transform 1.200s var(--ease)}
.js-anim .ch-0 .btns{transition-delay:.15s}
.js-anim .ch-0 .hero-foot{transition-delay:.3s}

/* CH.01: alertas */
.js-anim .dmg-lines line{stroke-dashoffset:2400;transition:stroke-dashoffset .7s var(--ease)}
.js-anim .dmg-lines line.is-on{stroke-dashoffset:0}
.js-anim .dmg-dot{transform:scale(0);transition:transform .5s var(--ease)}
.js-anim .dmg-dot.is-on{transform:scale(1)}
.js-anim .dmg-tag{opacity:0;transition:opacity .4s linear .35s}
.js-anim .dmg-tag.is-on{opacity:1}
.js-anim .dmg-list li{opacity:.35;transition:opacity .4s linear}
.js-anim .dmg-list li.is-on{opacity:1}
.dmg-dot.is-on::after{animation:ping 1.800s var(--ease) 1}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.200);opacity:0}}

/* CH.02: scanner (uma vez) e miras */
.scanner{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;opacity:0;background:linear-gradient(to bottom,transparent,rgba(46,230,214,.16) 92%,var(--ciano) 100%)}
.is-scan .scanner{animation:scanner 1.600s var(--ease) both}
@keyframes scanner{0%{transform:translateY(-64px);opacity:1}92%{opacity:1}100%{transform:translateY(calc(var(--h,600px)));opacity:0}}
.js-anim .hud-c{transition:transform 1.200s var(--ease),opacity .6s}
.js-anim .hud:not(.is-scan) .hud-c{opacity:0}
.js-anim .hud:not(.is-scan) .hud-c1{transform:translate(-18px,-18px)}.js-anim .hud:not(.is-scan) .hud-c2{transform:translate(18px,-18px)}
.js-anim .hud:not(.is-scan) .hud-c3{transform:translate(-18px,18px)}.js-anim .hud:not(.is-scan) .hud-c4{transform:translate(18px,18px)}
.js-anim .diag-aim path{transition:transform 1s var(--ease);transform:scale(2.400)}
.js-anim .diag-aim circle,.js-anim .diag-pt line,.js-anim .diag-pt text{opacity:0;transition:opacity .6s linear .3s}
.js-anim .diag.is-in .diag-aim path{transform:none}
.js-anim .diag.is-in .diag-aim circle,.js-anim .diag.is-in .diag-pt text{opacity:1}
.js-anim .diag.is-in .diag-pt line{opacity:.5}

/* CH.03: camada de "sujeira" que as gotas limpam */
.dirt{background:rgba(20,23,28,.38);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.dirt .noise-strong{opacity:.26}
.dirt .scan{opacity:.07}
.drops path{fill:rgba(214,246,255,.85)}

/* CH.04: lado "antes" com ruído sutil */
.ba-noise{opacity:.05}
.ba-scan{opacity:.035}

/* CH.05: tremor mínimo no hover (120ms) e depois o sheen */
@media (hover:hover){
  .prot-card:hover .prot-img img{animation:tremor .12s steps(2,end) 1}
}
@keyframes tremor{0%{transform:translateX(-2px)}50%{transform:translateX(2px)}100%{transform:none}}

/* CH.06: escuro → silhueta → sheen → título em fade lento, sem glitch */
.js-anim .mirror img{filter:brightness(0);transition:filter 1.600s var(--ease)}
.js-anim .mirror.is-rim img{filter:brightness(.42) contrast(1.500)}
.js-anim .mirror.is-lit img{filter:none}
.sheen-big{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%)}
.mirror.is-lit .sheen-big{transition:transform 1.400s var(--ease) .2s;transform:translateX(110%)}
.js-anim .mirror-txt>*{opacity:0;transition:opacity 2.200s var(--ease)}
.js-anim .mirror-txt.is-in>*{opacity:1!important;transform:none!important}
.js-anim .mirror-txt.is-in>.ch-text{transition-delay:.5s}
.js-anim .mirror-txt.is-in>.nums{transition-delay:.9s}
.js-anim .mirror-txt.is-in>.note{transition-delay:1.200s}

/* Interruptor desligado ou movimento reduzido: imagens estáticas e limpas */
.no-glitch .noise,.no-glitch .scan,.no-glitch .scanbar,.no-glitch .dirt,.no-glitch .gxl,.no-glitch .scanner{display:none!important}
.no-glitch [data-gt].gt::before,.no-glitch [data-gt].gt::after{display:none}
@media (prefers-reduced-motion:reduce){
  .noise,.scan,.scanbar,.dirt,.gxl,.scanner,.drops{display:none!important}
  [data-gt].gt::before,[data-gt].gt::after{display:none}
  .js-anim .mirror img{filter:none!important}
  .js-anim .dmg-lines line{stroke-dashoffset:0!important}
  .js-anim .dmg-dot{transform:none!important}
  .js-anim .dmg-tag,.js-anim .dmg-list li{opacity:1!important}
  .js-anim .hud .hud-c{opacity:1!important;transform:none!important}
  .js-anim .diag-aim path{transform:none!important}
  .js-anim .diag-aim circle,.js-anim .diag-pt text{opacity:1!important}
  .js-anim .ch-0 .hero-sub,.js-anim .ch-0 .btns,.js-anim .ch-0 .hero-foot,.js-anim .mirror-txt>*{opacity:1!important;transform:none!important}
  .js-anim .ch-0 .gx-img{opacity:1!important}
}