/* Efeitos do site do Naveo: esquadrão interativo, revelação ao rolar, contadores e brilhos neon.
   Tudo só vale com a classe .fx no <html>, que effects.js aplica quando o JavaScript roda e o visitante
   não pediu movimento reduzido. Sem JavaScript, o site aparece completo e estático. */

/* ---------- barra de progresso da rolagem ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent), 0 0 18px var(--accent-2);
}

/* ---------- brilho que segue o mouse ---------- */
.fx-cursor {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 0;
  pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent) 55%, transparent);
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
}
.fx-cursor.on { opacity: 1; }
main, .foot { position: relative; z-index: 1; }

/* ---------- esquadrão do topo ---------- */
.squad-stage { position: relative; isolation: isolate; user-select: none; -webkit-tap-highlight-color: transparent; }
.squad-stage img { -webkit-user-drag: none; }
.squad-float { position: relative; max-width: 620px; margin-inline: auto; }
.squad-tilt {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.squad-stage.is-tracking .squad-tilt { transition-duration: .12s; }
.squad-tilt > img { display: block; width: 100%; height: auto; }
.art-frame.squad-stage .squad-base { max-width: none; transition: filter .35s; }

/* Halo neon atrás dos personagens: anda no sentido contrário do mouse (paralaxe). */
.squad-halo {
  position: absolute; z-index: -1; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%) translate3d(calc(var(--tx, 0px) * -1.6), calc(var(--ty, 0px) * -1.6), 0);
  border-radius: 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  background:
    radial-gradient(closest-side, transparent 64%, color-mix(in srgb, var(--accent) 55%, transparent) 66%, transparent 69%),
    radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 30%, transparent), color-mix(in srgb, var(--accent) 14%, transparent) 55%, transparent 72%);
  filter: blur(1px);
}
.squad-halo::after {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent-2) 55%, transparent); opacity: .55;
}
/* Luz no chão, embaixo das botas. */
.squad-floor {
  position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -2%; height: 14%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 50%, transparent), transparent);
  filter: blur(6px); opacity: .75;
}
/* Faixa holográfica que varre só os personagens (máscara com o recorte da própria imagem). */
.squad-sweep {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url("esquadrao.webp") center / 100% 100% no-repeat; mask: url("esquadrao.webp") center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--accent) 55%, transparent) 48%, rgba(255, 255, 255, .55) 50%, color-mix(in srgb, var(--accent-2) 50%, transparent) 52%, transparent 62%) 0 0 / 300% 100% no-repeat;
  opacity: .55;
}
/* Cópia iluminada da imagem, recortada no personagem em foco. */
/* O brilho fica no invólucro (aplicado depois do recorte), para seguir o contorno do personagem. */
.squad-lit-wrap {
  position: absolute; inset: 0; pointer-events: none;
  filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 26px color-mix(in srgb, var(--accent-2) 55%, transparent));
}
.squad-stage .squad-lit {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; pointer-events: none; opacity: 0;
  clip-path: inset(0 100% 0 0); transform-origin: 50% 100%;
  filter: brightness(1.22) saturate(1.15);
  transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.squad-stage[data-focus] .squad-base { filter: brightness(.55) saturate(.8); }
.squad-stage[data-focus] .squad-lit { opacity: 1; transform: translateY(-1.5%) scale(1.025); }
/* Recorte com bordas esfumadas (máscara em degradê), para não surgir uma linha dura entre os personagens. */
.squad-stage[data-focus] .squad-lit { clip-path: none; -webkit-mask-image: var(--m); mask-image: var(--m); }
.squad-stage[data-focus="0"] .squad-lit { --m: linear-gradient(90deg, transparent 1%, #000 6%, #000 31%, transparent 38%); transform-origin: 22% 100%; }
.squad-stage[data-focus="1"] .squad-lit { --m: linear-gradient(90deg, transparent 29%, #000 36%, #000 64%, transparent 71%); transform-origin: 50% 100%; }
.squad-stage[data-focus="2"] .squad-lit { --m: linear-gradient(90deg, transparent 61%, #000 68%, #000 95%, transparent 99%); transform-origin: 78% 100%; }

/* Zonas de mouse/toque e etiquetas no estilo HUD. */
.squad-hit { position: absolute; top: 0; bottom: 0; cursor: crosshair; background: none; border: 0; padding: 0; }
.squad-hit[data-i="0"] { left: 4%; width: 31%; }
.squad-hit[data-i="1"] { left: 35%; width: 30%; }
.squad-hit[data-i="2"] { left: 65%; width: 32%; }
.squad-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.squad-tag {
  position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, 8px); opacity: 0;
  font: 600 .74rem/1.25 var(--font-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--accent); box-shadow: var(--glow); padding: 7px 12px 7px 10px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.squad-tag b { display: block; color: var(--accent); font-size: .66rem; letter-spacing: .3em; margin-bottom: 2px; }
.squad-tag i { font-style: normal; color: var(--muted); margin-left: 8px; letter-spacing: .1em; }
.squad-tag[data-i="0"] { left: 21%; top: 8%; }
.squad-tag[data-i="1"] { left: 50%; top: -3%; border-color: var(--accent-2); box-shadow: var(--glow-2); }
.squad-tag[data-i="1"] b { color: var(--accent-2); }
.squad-tag[data-i="2"] { left: 80%; top: 5%; }
.squad-stage[data-focus="0"] .squad-tag[data-i="0"],
.squad-stage[data-focus="1"] .squad-tag[data-i="1"],
.squad-stage[data-focus="2"] .squad-tag[data-i="2"] { opacity: 1; transform: translate(-50%, 0); }
.squad-tag::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 26px; background: linear-gradient(currentColor, transparent);
  color: var(--accent); opacity: .8;
}
/* Faíscas subindo. */
.squad-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.squad-sparks span {
  position: absolute; bottom: 4%; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 14px var(--accent);
}
.squad-sparks span:nth-child(3n) { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2), 0 0 14px var(--accent-2); }

/* ---------- revelação ao rolar ---------- */
.fx .rv {
  opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .8s ease;
  transition-delay: var(--d, 0ms);
}
.fx .rv.rv-l { transform: translate3d(-56px, 0, 0); }
.fx .rv.rv-r { transform: translate3d(56px, 0, 0); }
.fx .rv.rv-z { transform: scale(.92); }
.fx .rv.in { opacity: 1; transform: none; filter: none; }

/* Título da seção ganha um traço neon que se desenha. */
.fx .section h2.rv { position: relative; }
.fx .section h2.rv::after {
  content: ""; display: block; height: 3px; width: 0; margin-top: 14px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent);
  transition: width 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + .35s);
}
.fx .section h2.rv.in::after { width: min(160px, 40%); }

/* Losango do marcador pulsa quando aparece. */
.fx .waypoint.in::before { animation: fx-ping 1.4s ease-out .2s 2; }
@keyframes fx-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent), var(--glow); }
  100% { box-shadow: 0 0 0 16px transparent, var(--glow); }
}

/* Capturas de tela: borda neon acende ao entrar e inclinam com o mouse. */
.fx .shot.rv.in img { animation: fx-frame 1.2s ease-out calc(var(--d, 0ms) + .3s) both; }
@keyframes fx-frame {
  0% { box-shadow: var(--shadow), 0 0 0 0 transparent; }
  40% { box-shadow: var(--shadow), 0 0 0 2px var(--accent), 0 0 40px var(--accent); }
  100% { box-shadow: var(--shadow), var(--glow); }
}
.fx .shot img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.fx .shot.is-tilting img { transition-duration: .1s; }
.shot-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: 10px; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 60%);
}
.shot.is-tilting .shot-glare { opacity: 1; }

/* Recursos: ícone acende ao passar o mouse. */
.fx .feature .ico { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.fx .feature:hover .ico { transform: translateY(-3px) rotate(-6deg); box-shadow: var(--glow); }
.fx .feature:hover .ico.alt { box-shadow: var(--glow-2); }

/* Números medidos: brilho quando terminam de contar. */
.fx .measures dd.done { animation: fx-flash .9s ease-out; }
@keyframes fx-flash { 0% { text-shadow: 0 0 2px var(--accent); } 35% { text-shadow: 0 0 26px var(--accent), 0 0 46px var(--accent); } 100% { text-shadow: var(--glow); } }

/* Botão principal: reflexo que atravessa. */
.fx .btn-primary:not([aria-disabled="true"]) { position: relative; overflow: hidden; }
.fx .btn-primary:not([aria-disabled="true"])::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
  animation: fx-shine 3.6s ease-in-out 1.2s infinite;
}
@keyframes fx-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
/* Botão desativado ("Em breve na Microsoft Store"): pulso neon discreto. */
.fx .btn[aria-disabled="true"] { animation: fx-wait 2.6s ease-in-out infinite; }
@keyframes fx-wait { 0%, 100% { box-shadow: inset 0 0 0 1px var(--line); } 50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } }

/* Faixa final: painel com borda animada. */
.fx .band .panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 25%, transparent), transparent) -100% 0 / 60% 100% no-repeat;
  animation: fx-scan 5s linear infinite;
}
@keyframes fx-scan { to { background-position: 220% 0; } }

/* ---------- entrada da página ---------- */
.fx .hero .eyebrow, .fx .hero h1, .fx .hero .lead, .fx .hero .cta, .fx .hero .meta, .fx .hero .availability {
  animation: fx-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.fx .hero h1 { animation-delay: .08s; } .fx .hero .lead { animation-delay: .18s; } .fx .hero .cta { animation-delay: .28s; }
.fx .hero .meta { animation-delay: .36s; } .fx .hero .availability { animation-delay: .42s; }
@keyframes fx-in { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.fx .hero .neon { animation: fx-flicker 2.4s steps(1) .6s 1 both; }
@keyframes fx-flicker { 0% { opacity: .25; } 8% { opacity: 1; } 12% { opacity: .4; } 16%, 100% { opacity: 1; } }

/* Esquadrão "materializa" de baixo para cima e depois flutua. */
.fx .squad-float { animation: fx-materialize 1.4s cubic-bezier(.2, .8, .2, 1) .15s both, fx-float 6s ease-in-out 1.6s infinite; }
@keyframes fx-materialize {
  0% { clip-path: inset(100% 0 0 0); filter: brightness(2.2) drop-shadow(0 0 30px var(--accent)); }
  60% { clip-path: inset(0 0 0 0); filter: brightness(1.5) drop-shadow(0 0 24px var(--accent)); }
  100% { clip-path: inset(-20% -20% -20% -20%); filter: none; }
}
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.fx .squad-halo { animation: fx-halo 9s linear infinite; }
.fx .squad-halo::after { animation: fx-spin 28s linear infinite; }
@keyframes fx-halo { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx .squad-floor { animation: fx-floor 6s ease-in-out 1.6s infinite; }
@keyframes fx-floor { 0%, 100% { opacity: .75; transform: scaleX(1); } 50% { opacity: .45; transform: scaleX(.9); } }
.fx .squad-sweep { animation: fx-sweep 5.5s ease-in-out 1.2s infinite; }
@keyframes fx-sweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
.fx .squad-sparks span { animation: fx-spark var(--t, 5s) linear var(--w, 0s) infinite; }
@keyframes fx-spark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--x, 0px), -420px, 0) scale(.3); }
}
/* Grade do chão do topo anda para a frente. */
.fx .hero::after { animation: fx-grid 2.8s linear infinite; }
@keyframes fx-grid { to { background-position: 0 60px, 0 0; } }

@media (max-width: 920px) {
  .squad-tag { font-size: .62rem; padding: 5px 9px; }
  .squad-tag i { display: none; }
}