/* ============================================================
   FBGE — motion.css
   Cursor autoral, intro de carregamento, transição de página,
   micro-interações. Respeita prefers-reduced-motion (tokens.css).
   ============================================================ */

/* ---------- CURSOR — "MIRA" (reticle) ---------- */
@media (hover: hover) and (pointer: fine) {
  body, a, button, .node, .orbit-node { cursor: none; }

  .cx {
    position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
    width: 46px; height: 46px; margin: -23px 0 0 -23px;
    will-change: transform; opacity: 0; transition: opacity .2s ease;
  }
  .cx.is-ready { opacity: 1; }
  .cx.is-hidden { opacity: 0; }
  .cx-corner {
    position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--paper);
    transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .15s ease;
  }
  .cx-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
  .cx-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
  .cx-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
  .cx-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
  .cx-label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--paper); opacity: 0; transition: opacity .2s ease, color .15s ease;
    text-align: center; white-space: nowrap;
  }
  /* fundo claro sob o cursor → inverte pra escuro */
  .cx.theme-light .cx-corner { border-color: var(--ink); }
  .cx.theme-light .cx-label { color: var(--ink); }

  .cx.is-hover .cx-corner.tl { transform: translate(-4px,-4px); }
  .cx.is-hover .cx-corner.tr { transform: translate(4px,-4px); }
  .cx.is-hover .cx-corner.bl { transform: translate(-4px,4px); }
  .cx.is-hover .cx-corner.br { transform: translate(4px,4px); }
  .cx.is-hover .cx-label { opacity: 1; }
}

/* ---------- INTRO / LOADER ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10000; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .7s cubic-bezier(.76,0,.24,1);
}
.intro-mark {
  width: 56px; height: 56px; opacity: 0;
  animation: introMark 1s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.intro.intro-out { transform: translateY(-100%); }
@keyframes introMark { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
body.intro-active { overflow: hidden; }

/* ---------- PAGE TRANSITION ---------- */
.pt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
.pt-overlay.pt-out { transform: scaleY(1); transform-origin: bottom; transition: transform .5s cubic-bezier(.76,0,.24,1); }

/* ---------- HERO STAGGER ---------- */
.stagger-line { overflow: hidden; display: block; }
.stagger-line span {
  display: inline-block;
  transform: translateY(110%);
  animation: lineUp .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-play-state: paused;
}
.stagger-fade { opacity: 0; transform: translateY(16px); animation: fadeUp .8s cubic-bezier(.16,1,.3,1) forwards; animation-play-state: paused; }
body.intro-done .stagger-line span, body.intro-done .stagger-fade { animation-play-state: running; }
@keyframes lineUp { to { transform: translateY(0); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---------- MAGNETIC BUTTON ---------- */
.magnetic { transition: transform .25s cubic-bezier(.16,1,.3,1); will-change: transform; }

/* ---------- HERO PARALLAX ---------- */
.hero-bg img { will-change: transform; }

/* ---------- SYSTEM GRID — entrada em cascata ---------- */
.tl-step { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.tl-track.in .tl-step { opacity: 1; transform: translateY(0); }
.tl-track.in .tl-step:nth-child(1) { transition-delay: .05s; }
.tl-track.in .tl-step:nth-child(2) { transition-delay: .13s; }
.tl-track.in .tl-step:nth-child(3) { transition-delay: .21s; }
.tl-track.in .tl-step:nth-child(4) { transition-delay: .29s; }
.tl-track.in .tl-step:nth-child(5) { transition-delay: .37s; }
.tl-track.in .tl-step:nth-child(6) { transition-delay: .45s; }

/* ---------- MARCOS — foco no hover ---------- */
.marcos-grid.grid-hover .marco:not(.is-active) { opacity: .4; }
.marco { transition: opacity .3s ease; }
.marco h3 { transition: color .25s ease; }
.marco.is-active h3 { color: var(--red); }

/* ---------- ORBIT (ecossistema) ---------- */
.orbit-ring { animation: orbitSpin 90s linear infinite; transform-origin: 50% 50%; }
.orbit-ring.r2 { animation-duration: 130s; animation-direction: reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.orbit-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); }
.orbit-wrap.in .orbit-line { stroke-dashoffset: 0; }
.orbit-node { opacity: 0; transform: translate(-50%,-50%) scale(.5); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1), border-color .25s ease; }
.orbit-wrap.in .orbit-node { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.orbit-wrap.in .orbit-node:nth-child(4)  { transition-delay: .55s; }
.orbit-wrap.in .orbit-node:nth-child(5)  { transition-delay: .62s; }
.orbit-wrap.in .orbit-node:nth-child(6)  { transition-delay: .69s; }
.orbit-wrap.in .orbit-node:nth-child(7)  { transition-delay: .76s; }
.orbit-wrap.in .orbit-node:nth-child(8)  { transition-delay: .83s; }
.orbit-wrap.in .orbit-node:nth-child(9)  { transition-delay: .90s; }
.orbit-wrap.in .orbit-node:nth-child(10) { transition-delay: .97s; }
.orbit-wrap.in .orbit-node:nth-child(11) { transition-delay: 1.04s; }
.orbit-wrap.in .orbit-node:nth-child(12) { transition-delay: 1.11s; }
.orbit-wrap.in .orbit-node:nth-child(13) { transition-delay: 1.18s; }
.orbit-hub { opacity: 0; transform: translate(-50%,-50%) scale(.7); transition: opacity .5s ease .2s, transform .6s cubic-bezier(.34,1.56,.64,1) .2s; }
.orbit-wrap.in .orbit-hub { opacity: 1; transform: translate(-50%,-50%) scale(1); }