/* =====================================================================
   AIZ · Hero "O Foco no Alvo"
   ---------------------------------------------------------------------
   Três camadas de profundidade sobre fundo escuro:
     fundo  (.alvo__fundo)  foto aérea do ativo + mapa ilustrativo do pátio
     meio   (.alvo__meio)   mira travada na máquina, eixos e radar
     frente (.alvo__frente) HUD: visor, dados, fontes cruzadas, zoom
   Mouse e rolagem movem as camadas em velocidades diferentes; ao rolar,
   a câmera se afasta (zoom-out) e mostra a dimensão do pátio.

   Estados:
     sem JS        foto em tela cheia + texto (sem HUD)
     .alvo--js     JS posiciona câmera, mira e HUD
     html.alvo-on  movimento permitido: palco fixo durante o zoom-out
   ===================================================================== */

:root{--alvo-topo:84px;--alvo-ease:cubic-bezier(.16,1,.3,1)}

.alvo{position:relative;background:var(--c-navy-950);color:var(--c-white)}
.alvo__palco{position:relative;height:max(580px, 50svh);overflow:hidden;isolation:isolate;background:var(--c-navy-950)}

/* ---------- camada de fundo ---------- */
.alvo__fundo{position:absolute;inset:0;z-index:0;will-change:transform}
.alvo__mapa{position:absolute;inset:0;width:100%;height:100%;display:block}
.alvo__mundo{position:absolute;inset:0}
.alvo__foto{position:absolute;inset:0}
.alvo__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.16) brightness(.66)}
.alvo__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(27,106,152,.42),rgba(20,33,61,.55));mix-blend-mode:multiply;pointer-events:none}

.alvo--js .alvo__mundo{inset:auto;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.alvo--js .alvo__foto{inset:auto;left:-500px;top:-333.5px;width:1000px;height:667px;
  -webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 64% 64% at 50% 50%,#000 62%,transparent 100%)}

/* tom cinematográfico: foco no alvo + leitura do texto + grão */
.alvo__tom{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at var(--ax,66%) var(--ay,48%),rgba(10,18,38,0) 0,rgba(10,18,38,0) calc(var(--ar,260px) * .7),rgba(10,18,38,.74) calc(var(--ar,260px) * 2.1)),
    linear-gradient(90deg,rgba(10,18,38,.9) 0%,rgba(10,18,38,.62) 30%,rgba(10,18,38,0) 56%)}
.alvo__tom::before{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.alvo__tom::after{content:"";position:absolute;inset:-50%;opacity:.13;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:alvo-grao 1s steps(6) infinite}
@keyframes alvo-grao{0%{translate:0 0}20%{translate:-6% 4%}40%{translate:5% -3%}60%{translate:-3% -6%}80%{translate:6% 5%}100%{translate:0 0}}

/* ---------- camadas de interface ---------- */
.alvo__meio,.alvo__frente{position:absolute;inset:0;pointer-events:none;display:none;will-change:transform}
.alvo--js .alvo__meio,.alvo--js .alvo__frente{display:block}
.alvo__meio{z-index:2}
.alvo__frente{z-index:3}
.alvo__meio>*{position:absolute;left:0;top:0;margin:0}

.alvo__canto{width:30px;height:30px;border:0 solid var(--c-white)}
.alvo__canto--tl{border-top-width:2px;border-left-width:2px}
.alvo__canto--tr{border-top-width:2px;border-right-width:2px}
.alvo__canto--bl{border-bottom-width:2px;border-left-width:2px}
.alvo__canto--br{border-bottom-width:2px;border-right-width:2px}

.alvo__eixo{display:block;transform-origin:0 0}
.alvo__eixo--e,.alvo__eixo--d{width:100%;height:1px}
.alvo__eixo--c,.alvo__eixo--b{width:1px;height:100%}
.alvo__eixo--e{background:linear-gradient(90deg,rgba(124,196,234,0),rgba(124,196,234,.55))}
.alvo__eixo--d{background:linear-gradient(90deg,rgba(124,196,234,.55),rgba(124,196,234,0))}
.alvo__eixo--c{background:linear-gradient(180deg,rgba(124,196,234,0),rgba(124,196,234,.55))}
.alvo__eixo--b{background:linear-gradient(180deg,rgba(124,196,234,.55),rgba(124,196,234,0))}

.alvo__radar{width:600px;height:600px;border-radius:50%;transform-origin:50% 50%;
  background:
    repeating-radial-gradient(circle,transparent 0 59px,rgba(124,196,234,.16) 59px 60px),
    radial-gradient(circle,transparent 69.6%,rgba(124,196,234,.35) 69.8% 70%,transparent 70.2%);
  -webkit-mask-image:radial-gradient(circle,#000 0 50%,transparent 70.5%);mask-image:radial-gradient(circle,#000 0 50%,transparent 70.5%)}
.alvo__radar::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(124,196,234,0) 0deg,rgba(124,196,234,0) 290deg,rgba(124,196,234,.12) 358deg,rgba(124,196,234,.3) 360deg);
  animation:alvo-varre 4.2s linear infinite}
@keyframes alvo-varre{to{rotate:360deg}}

.alvo__centro{width:18px;height:18px}
.alvo__centro::before,.alvo__centro::after{content:"";position:absolute;background:var(--c-amber)}
.alvo__centro::before{left:8px;top:0;width:2px;height:18px}
.alvo__centro::after{top:8px;left:0;height:2px;width:18px}

.alvo__tag{white-space:nowrap;font-size:.68rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c-white);display:flex;align-items:center;gap:.55rem}
.alvo__tag--baixo{color:var(--fg-claro-2);font-weight:400}
.alvo__tag--coord{color:var(--c-sky-400);justify-content:flex-end;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.alvo__ponto{width:7px;height:7px;border-radius:50%;background:var(--c-amber);animation:alvo-pulso 1.6s ease-out infinite}
@keyframes alvo-pulso{0%{box-shadow:0 0 0 0 rgba(242,183,5,.6)}100%{box-shadow:0 0 0 10px rgba(242,183,5,0)}}
.alvo__tag--cima .alvo__status{transition:color .3s ease}
.alvo--travado .alvo__tag--cima .alvo__status{color:var(--c-amber)}

/* HUD (frente) */
.alvo__visor{position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.45)}
.alvo__visor--tl{left:18px;top:18px;border-top-width:1px;border-left-width:1px}
.alvo__visor--tr{right:18px;top:18px;border-top-width:1px;border-right-width:1px}
.alvo__visor--bl{left:18px;bottom:18px;border-bottom-width:1px;border-left-width:1px}
.alvo__visor--br{right:18px;bottom:18px;border-bottom-width:1px;border-right-width:1px}

.alvo__hud{position:absolute;margin:0;font-size:.66rem;line-height:1.7;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c-white)}
.alvo__hud span{display:block;font-weight:400;color:var(--c-slate-400)}
.alvo__hud--tl{left:calc(var(--gutter) + 0px);top:30px}
.alvo__hud--tr{right:calc(var(--gutter) + 0px);top:30px;text-align:right}

.alvo__painel{position:absolute;right:var(--gutter);bottom:78px;width:250px;padding:1rem 1.1rem;
  background:rgba(10,18,38,.62);border:1px solid rgba(124,196,234,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.alvo__painel .etiqueta{color:var(--c-sky-400);margin:0 0 .6rem}
.alvo__painel .etiqueta::before{display:none}
.alvo__painel li{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;padding:.32rem 0;border-top:1px solid rgba(255,255,255,.08);color:var(--fg-claro-2)}
.alvo__painel li::after{content:"✓";color:var(--c-amber);font-weight:700}
.alvo__painel li{opacity:0;animation:alvo-item .5s var(--alvo-ease) both;animation-delay:calc(var(--i) * 170ms + 900ms)}
@keyframes alvo-item{from{opacity:0;translate:8px 0}to{opacity:1;translate:0 0}}

.alvo__leitura{position:absolute;right:var(--gutter);bottom:34px;display:flex;align-items:center;gap:1.25rem;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-slate-400);font-variant-numeric:tabular-nums}
.alvo__leitura b{color:var(--c-white);font-weight:700;letter-spacing:.08em}
.alvo__regua{display:flex;align-items:center;gap:.6rem}
.alvo__regua i{display:block;height:7px;width:var(--rw,80px);border:1px solid var(--c-white);border-top:0}

.alvo__chamada{position:absolute;right:var(--gutter);bottom:84px;text-align:right;max-width:330px;opacity:var(--alvo-ch,0);translate:0 calc((1 - var(--alvo-ch,0)) * 18px)}
.alvo__chamada .sobrelinha{justify-content:flex-end;margin-bottom:.6rem}
.alvo__m2{margin:0;font-family:var(--f-serif);font-size:clamp(2.6rem,1.6rem + 3vw,4.6rem);line-height:.95;color:var(--c-white)}
.alvo__m2 small{font-size:.4em;color:var(--c-sky-400);margin-left:.1em;vertical-align:.9em}
.alvo__chamada p:last-child{margin:.6rem 0 0;font-size:var(--fs-small);color:var(--fg-claro-2)}

/* ---------- texto ---------- */
.alvo__texto{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:center;will-change:transform}
.alvo__texto>div{max-width:min(560px,41vw)}
.alvo__texto .sobrelinha{color:var(--c-sky-400)}
.alvo__titulo{font-size:clamp(2.4rem,1.2rem + 3.5vw,4.7rem);line-height:1.02;margin:0;text-wrap:balance}
.alvo__sub{font-size:var(--fs-lead);color:var(--fg-claro-2);max-width:46ch;margin:1.4rem 0 2rem}
.alvo__acoes{display:flex;flex-wrap:wrap;gap:.75rem}

/* entrada */
@keyframes alvo-sobe{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes alvo-surge{from{opacity:0}to{opacity:1}}
.alvo-on .alvo__texto>div>*{animation:alvo-sobe 1.1s var(--alvo-ease) both;animation-delay:calc(var(--k,0) * 110ms + 200ms)}
.alvo-on .alvo__frente{animation:alvo-surge 1s ease both .5s}
.alvo-on .alvo__fundo{animation:alvo-surge 1.4s ease both}

/* hero baixo (pouca altura): HUD enxuto */
.alvo--baixo .alvo__painel{display:none}
@media (min-width:900px){.alvo--baixo .alvo__hud--tl,.alvo--baixo .alvo__hud--tr{display:none}}

/* ---------- celular ---------- */
@media (max-width:899.98px){
  .alvo__palco{height:max(690px, 50svh)}
  .alvo__tom{background:
    radial-gradient(circle at var(--ax,50%) var(--ay,32%),rgba(10,18,38,0) 0,rgba(10,18,38,0) calc(var(--ar,200px) * .7),rgba(10,18,38,.7) calc(var(--ar,200px) * 2)),
    linear-gradient(0deg,rgba(10,18,38,.95) 0%,rgba(10,18,38,.85) 36%,rgba(10,18,38,0) 58%)}
  .alvo__texto{justify-content:flex-end;padding-bottom:2.4rem}
  .alvo__texto>div{max-width:none}
  .alvo__titulo{font-size:clamp(2.1rem,8.6vw,2.9rem)}
  .alvo__sub{font-size:1rem;margin:1rem 0 1.4rem}
  .alvo__acoes .btn{padding:.8rem 1.1rem;font-size:.92rem}
  .alvo__painel,.alvo__leitura,.alvo__hud--tr,.alvo__tag--baixo{display:none}
  .alvo__hud--tl{top:24px;opacity:calc(1 - var(--alvo-ch,0))}
  .alvo__texto .sobrelinha .sep,.alvo__texto .sobrelinha span:last-child{display:none}
  .alvo__chamada{left:var(--gutter);right:auto;top:62px;bottom:auto;text-align:left}
  .alvo__chamada .sobrelinha{justify-content:flex-start}
  .alvo__m2{font-size:2.4rem}
  .alvo__chamada p:last-child{display:none}
}
@media (max-width:899.98px) and (max-height:700px){
  .alvo__acoes .btn--linha-claro{display:none}
  .alvo__sub{margin-bottom:1.1rem}
}
@media (min-width:900px) and (max-height:760px){
  .alvo__titulo{font-size:clamp(2.2rem,1rem + 2.9vw,3.7rem)}
  .alvo__sub{margin:1.1rem 0 1.5rem}
  .alvo__painel{display:none}
}

/* faixa logo abaixo: sem borda dupla */
.alvo + .fx-faixa{border-top:0}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .alvo__tom::after,.alvo__radar::after,.alvo__ponto{animation:none}
  .alvo__painel li{animation:none;opacity:1}
}