/* ==========================================================================
   Camada de movimento do site (ST1). Tudo aqui some com "reduzir movimento":
   o JS só liga a classe .fx no <html> quando o movimento está liberado.
   ========================================================================== */

/* ---------- abertura da marca (uma vez por sessão) ---------- */
.intro { position: fixed; z-index: 300; inset: 0; display: none; place-items: center; background: #050505; }
.intro-on .intro { display: grid; animation: intro-out 700ms var(--nk-ease-standard) 2600ms forwards; }
.intro.out { animation: intro-out 620ms var(--nk-ease-standard) forwards !important; }
.intro__glow { position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 175, 55, .2), rgba(212, 175, 55, .04) 60%, transparent 75%); animation: intro-glow 1.8s var(--nk-ease-enter) both; }
.intro__in { position: relative; display: flex; align-items: center; gap: 18px; }
.intro .nk-anim { width: 96px; height: 96px; }
.intro .word-anim { width: 210px; height: auto; aspect-ratio: var(--word-ar); }
.intro__line { position: absolute; left: 50%; top: calc(50% + 78px); width: 180px; height: 2px; margin-left: -90px; overflow: hidden; border-radius: 2px; background: #1b1a16; }
.intro__line i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--nk-gold-300), transparent); animation: intro-load 1.2s var(--nk-ease-standard) 300ms infinite; }
.intro-on body { overflow: hidden; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; transform: scale(1.03); } }
@keyframes intro-glow { from { opacity: 0; transform: scale(.55); } }
@keyframes intro-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- campo de constelação do hero (canvas) ---------- */
.hero__fx { position: absolute; inset: 0; display: block; }
.fx-canvas .hero__stars { opacity: 0; }

/* ---------- título cinético ---------- */
.fx .hero__t .w { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(14px); transition: opacity .95s var(--nk-ease-enter), transform .95s var(--nk-ease-enter), filter .95s var(--nk-ease-enter); transition-delay: var(--d, 0ms); }
.fx .hero--in .hero__t .w { opacity: 1; transform: none; filter: none; }
.fx .hero__t em { display: inline-block; clip-path: inset(-.25em 100% -.25em 0); transition: clip-path 1.15s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--d, 0ms); }
.fx .hero--in .hero__t em { clip-path: inset(-.25em -.15em -.25em 0); }
.hero__t em { background-image: linear-gradient(100deg, transparent 38%, rgba(255, 249, 225, .95) 50%, transparent 62%), linear-gradient(180deg, var(--nk-gold-200) 8%, var(--nk-gold-500) 92%); background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat; }
.fx .hero--in .hero__t em { animation: hero-sheen 6.5s ease-in-out 2.4s infinite; }
@keyframes hero-sheen { 0% { background-position: 160% 0, 0 0; } 38%, 100% { background-position: -60% 0, 0 0; } }
.fx .hero__t .cur { opacity: 0; animation: none; transition: opacity .25s; }
.fx .hero--in .hero__t .cur { opacity: 1; transition-delay: var(--dc, 1.6s); animation: nk-caret 1.1s steps(1) calc(var(--dc, 1.6s) + .3s) infinite; }
.fx .hero:not(.hero--ready) .hero__t { visibility: hidden; }
.fx .hero .ann, .fx .hero .hero__sub, .fx .hero .hero__cta, .fx .hero .hero__fine, .fx .hero .tour { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--nk-ease-enter), transform .9s var(--nk-ease-enter); }
.fx .hero--in .ann, .fx .hero--in .hero__sub, .fx .hero--in .hero__cta, .fx .hero--in .hero__fine, .fx .hero--in .tour { opacity: 1; transform: none; }
.fx .hero--in .hero__sub { transition-delay: 900ms; }
.fx .hero--in .hero__cta { transition-delay: 1050ms; }
.fx .hero--in .hero__fine { transition-delay: 1200ms; }
.fx .hero--in .tour { transition-delay: 1300ms; transition-duration: 1.2s; }

/* ---------- cabeçalho vira ilha ao rolar (como a ilha do app) ---------- */
.hd__in { transition: max-width 520ms var(--nk-ease-standard), height 420ms var(--nk-ease-standard), margin 420ms var(--nk-ease-standard), padding 520ms var(--nk-ease-standard), background 420ms, box-shadow 420ms, border-radius 420ms; }
.fx .hd.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }
.fx .hd.is-scrolled .hd__in { max-width: 1060px; height: 56px; margin-top: 10px; padding: 0 10px 0 16px; border-radius: 18px; background: rgba(13, 13, 12, .84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--nk-shadow-island); backdrop-filter: blur(14px); }
.hd__prog { position: absolute; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--nk-gold-600), var(--nk-gold-300)); box-shadow: 0 0 12px rgba(240, 203, 92, .55); pointer-events: none; }

/* ---------- tour: entra inclinado e assenta com a rolagem ---------- */
.fx .tour__frame { transform-origin: 50% 0; transform: perspective(1900px) rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); }
.fx .tour::before { opacity: calc(.35 + var(--gl, 1) * .65); }

/* ---------- revelação ao rolar ---------- */
.fx .rv { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s var(--nk-ease-enter), transform .9s var(--nk-ease-enter), filter .9s var(--nk-ease-enter); transition-delay: var(--d, 0ms); }
.fx .rv.in { opacity: 1; transform: none; filter: none; }
.fx .h2.rv { clip-path: inset(0 0 100% 0); transform: translateY(14px); filter: none; transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), opacity .6s, transform 1s var(--nk-ease-enter); transition-delay: var(--d, 0ms); }
.fx .h2.rv.in { clip-path: inset(-.2em -.1em -.2em -.1em); }

/* ---------- brilho que segue o mouse nos cartões ---------- */
.has-gl { isolation: isolate; }
.gl { position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 320ms var(--nk-ease-standard); background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, .085), transparent 44%); }
.gl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 203, 92, .9), rgba(212, 175, 55, .25) 32%, transparent 56%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.has-gl:hover > .gl { opacity: 1; }

/* ---------- árvores das missões acendem na ordem da missão ---------- */
.tree .nd { transition: stroke 600ms var(--nk-ease-standard), fill 600ms var(--nk-ease-standard), filter 600ms; transition-delay: var(--d, 0ms); }
.tree .ln { transition: stroke 600ms var(--nk-ease-standard); transition-delay: var(--d, 0ms); }
.fx .tree:not(.lit) .nd { stroke: rgba(212, 175, 55, .18); }
.fx .tree:not(.lit) .ln { stroke: rgba(212, 175, 55, .12); }
.fx .tree.lit .nd { filter: drop-shadow(0 0 5px rgba(212, 175, 55, .45)); }
.fx .tree.lit .nd.p { fill: #1f1a0c; }

/* ---------- cartões vivos ---------- */
.nk-bar > i { transition: width 1.3s var(--nk-ease-standard); }
.fx [data-loop] .nk-bar > i { width: var(--w, 0%) !important; }
.fx [data-loop].in-view .nk-bar > i { width: var(--v) !important; }
.org__n { transition: box-shadow 420ms var(--nk-ease-standard), background 420ms, transform 420ms var(--nk-ease-spring); }
.org__n.lit { background: #16130b; box-shadow: inset 0 0 0 1px var(--nk-gold-edge), 0 0 22px rgba(212, 175, 55, .22); transform: translateY(-1px); }
.org__n.you.lit { background: rgba(212, 175, 55, .2); }
.time__m div { transition: box-shadow 420ms, background 420ms; }
.time__m div.on { background: #13110b; box-shadow: inset 0 0 0 1px var(--nk-gold-edge), 0 0 18px rgba(212, 175, 55, .14); }
.time__m div.on .nk-tag { background: var(--nk-gold-fill); box-shadow: inset 0 0 0 1px var(--nk-gold-edge); color: var(--nk-gold-300); }
.route { transition: box-shadow 420ms, background 420ms; }
.route.on { background: #13110b; box-shadow: inset 0 0 0 1px var(--nk-gold-edge); }
.rcpt span { transition: opacity 260ms; }
.rcpt.swap span { opacity: 0; }
.mesa i { transition: box-shadow 420ms, background 420ms; }
.mesa i em { transition: color 420ms; }
.loop-press { animation: loop-press 380ms var(--nk-ease-standard); }
@keyframes loop-press { 40% { transform: scale(.93); filter: brightness(1.25); } }
.mini-cmd .row .t .car { display: inline-block; width: 6px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--nk-gold-300); animation: nk-caret 1.1s steps(1) infinite; }
.atpop div { transition: background 260ms, color 260ms; }
.brw__page .gc { transition: left 900ms cubic-bezier(.45, .05, .2, 1), bottom 900ms cubic-bezier(.45, .05, .2, 1); }
.brw__page .bb { transition: transform 200ms, box-shadow 300ms; }
.brw__page .bb.hit { transform: scale(.95); box-shadow: 0 0 0 6px rgba(124, 200, 148, .18); }
.brw__page .agent { transition: opacity 300ms; }
.brw__page .rip { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--nk-gold-300); opacity: 0; pointer-events: none; }
.brw__page .rip.go { animation: tour-rip 520ms var(--nk-ease-exit); }
.term__b p { transition: opacity 240ms; }
.fx .term__b p.off { opacity: 0; }
.ssh-cur { display: inline-block; width: 7px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--nk-gold-300); animation: nk-caret 1.1s steps(1) infinite; }
.pz .nk-band { transition: background 420ms, box-shadow 420ms; }
.pz.run .nk-band { background: var(--nk-state-working-fill); box-shadow: inset 0 0 0 1px var(--nk-state-working-line); }
.pz.run .nk-band > .ico, .pz.run .nk-band strong { color: var(--nk-state-working-text); }
.pz .mesa i { transition: background 420ms, box-shadow 420ms; }
.board .ink { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx .ft.in-view .board .ink { animation: ink-loop 6s var(--nk-ease-standard) infinite; }
.board .bnote { transition: opacity 400ms, transform 400ms var(--nk-ease-spring); }
@keyframes ink-loop { 0% { stroke-dashoffset: 1; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.cnt { font-variant-numeric: tabular-nums; }

/* ---------- chamada final: a Rota se desenha ao aparecer ---------- */
.final__bg { transition: opacity 1.2s; }
.fx .final.in-view .final__bg { opacity: .11; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}

/* ---------- canvas da chamada final, grão e trilha dos passos ---------- */
.final__fx { position: absolute; z-index: -1; inset: 0; display: block; pointer-events: none; }
.fx-canvas .final__bg { display: none; }
.fx body::after { content: ""; position: fixed; z-index: 250; inset: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E"); }
.fx .steps::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1) .2s; }
.fx .steps.in::before { transform: scaleX(1); }
.fx .step__n { transition: box-shadow .6s, transform .6s var(--nk-ease-spring); }
.fx .steps:not(.in) .step__n { transform: scale(.6); box-shadow: inset 0 0 0 1.5px rgba(212, 175, 55, .25), 0 0 0 6px var(--nk-bg-0); }
.fx .steps.in .step:nth-child(2) .step__n { transition-delay: .7s; }
.fx .steps.in .step:nth-child(3) .step__n { transition-delay: 1.3s; }
@media (max-width: 960px) {
  .fx .steps::before { transform: scaleY(0); transform-origin: 50% 0; }
  .fx .steps.in::before { transform: scaleY(1); }
}