/* Hero da home: a linha de inspeção.
   Uma linha ciano desce pelo hero uma vez; o título passa de apagado para sólido quando ela passa.
   A ampola 3D (ampola-3d.js) usa o mesmo tempo: SCAN_DELAY 250 ms, SCAN_DUR 1500 ms. */
.vh-scan{z-index:1;animation:vh-scan 1.5s linear .25s both}
.vh-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--color-primary) 14%,var(--color-primary) 86%,transparent);
  box-shadow:0 0 14px 1px color-mix(in oklch,var(--color-primary) 55%,transparent)}
.vh-scan::after{content:"";position:absolute;left:0;right:0;top:-140px;height:140px;
  background:linear-gradient(to bottom,transparent,color-mix(in oklch,var(--color-primary) 6%,transparent))}
@keyframes vh-scan{
  from{transform:translateY(0);opacity:0}
  4%{opacity:1}
  90%{opacity:1}
  to{transform:translateY(100%);opacity:0}
}

/* Título: máscara 3× mais alta que o h1; a borda entre sólido e apagado desce junto com a linha.
   --vh-in / --vh-dur (medidos pelo ampola-el.js na <section>) são o momento em que a linha chega no topo
   do h1 e quanto tempo leva para atravessá-lo. Os valores depois da vírgula valem se o JS não rodar. */
.vh-title{
  -webkit-mask-image:linear-gradient(to bottom,#000 0 47%,rgba(0,0,0,.13) 53% 100%);
          mask-image:linear-gradient(to bottom,#000 0 47%,rgba(0,0,0,.13) 53% 100%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-position:0 0;mask-position:0 0;
  animation:vh-title var(--vh-dur,.62s) linear var(--vh-in,.62s) backwards}
@keyframes vh-title{
  from{-webkit-mask-position:0 81%;mask-position:0 81%}
  to{-webkit-mask-position:0 19%;mask-position:0 19%}
}
@media (width<=1023px){ .vh-title{animation-delay:var(--vh-in,.42s);animation-duration:var(--vh-dur,.42s)} }

@media (prefers-reduced-motion:reduce){
  .vh-scan{display:none}
  .vh-title{animation:none;-webkit-mask-image:none;mask-image:none}
}