/* ==========================================================================
   Growthway Capital — FX cluster "transicoes"
   1) MPA sem flash — cross-document View Transitions (wipe editorial)
   2) Dock de vidro imortal — o dock persiste vivo entre páginas
   3) Cortina do underscore — CTAs data-curtain: o _ engole a tela
   4) PROTOCOLADO_ — a página sai carimbada nas rotas marcadas
   Progressive enhancement puro: sem JS/sem suporte, navegação normal.
   ========================================================================== */

/* ---------- 1 · cross-document View Transitions ---------- */
/* opt-in canônico: só liga quando o usuário aceita movimento */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-old(root) {
  animation: 480ms cubic-bezier(0.7, 0, 0.2, 1) both gwfx-page-out;
}
::view-transition-new(root) {
  animation: 560ms cubic-bezier(0.7, 0, 0.2, 1) both gwfx-page-in;
}
@keyframes gwfx-page-out {
  to { transform: translateY(-6%); filter: brightness(0.92); opacity: 0.6; }
}
@keyframes gwfx-page-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* compliance: banner CVM fora da coreografia — nunca anima, nunca some */
.topbar { view-transition-name: gw-topbar; }
::view-transition-group(gw-topbar) { z-index: 210; animation: none; }
::view-transition-old(gw-topbar),
::view-transition-new(gw-topbar) { animation: none; }

/* ---------- 2 · dock de vidro imortal ---------- */
/* o snapshot "old" é imagem achatada (vidro congelado = feio): some com ele.
   o "new" é o elemento VIVO — o backdrop-filter continua refratando as duas
   páginas deslizando por baixo. Se o retângulo mudou (dock mini → cheio),
   o browser interpola a geometria do grupo sozinho. */

.dock { view-transition-name: gw-dock; }
::view-transition-group(gw-dock) {
  z-index: 220;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0, 1);
}
::view-transition-old(gw-dock) { display: none; }
::view-transition-new(gw-dock) { animation: none; }

/* ---------- 3 · cortina do underscore ---------- */
/* injetada por JS — sem JS este elemento nem existe no DOM */

.gwfx-curtain {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: none;
  z-index: 9990;
  background: #0b0b0c;
  pointer-events: none;
  border-radius: 2px;
}

.gwfx-curtain-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: #faf9f6;
  opacity: 0;
  white-space: nowrap;
}

.gwfx-curtain-cursor {
  color: #e8622a;
  font-weight: inherit;
  font-style: normal;
  animation: gwfx-blink 1.1s steps(1) infinite;
}
@keyframes gwfx-blink { 50% { opacity: 0; } }

/* estado "página nasce coberta" (classe posta por snippet inline ou pelo módulo).
   O ::before cobre antes mesmo do elemento existir — zero flash. */
html.gwfx-covered::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9989;
  background: #0b0b0c;
  /* válvula de compliance: se o JS morrer, a página se descobre sozinha */
  animation: gwfx-safety 0.35s 1.5s forwards;
}
@keyframes gwfx-safety { to { opacity: 0; visibility: hidden; } }

/* ---------- 4 · PROTOCOLADO_ (carimbo de saída) ---------- */
/* elemento exit-only: vive escondido, é revelado no pageswap para entrar no
   snapshot "old"; os keyframes fazem a batida no ::view-transition-old dele */

.gwfx-stamp {
  position: fixed;
  left: 50%;
  top: 45%;
  translate: -50% -50%;
  rotate: -7deg;
  z-index: 9980;
  view-transition-name: gw-carimbo;
  pointer-events: none;
  color: #e8622a;
  border: 3px double currentColor;
  border-radius: 6px;
  padding: 0.42em 0.95em 0.5em;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 54px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  background: transparent;
  /* tinta irregular de carimbo real, sem asset externo */
  -webkit-mask-image: radial-gradient(130% 95% at 32% 36%, #000 52%, rgba(0, 0, 0, 0.72) 78%, #000 100%);
  mask-image: radial-gradient(130% 95% at 32% 36%, #000 52%, rgba(0, 0, 0, 0.72) 78%, #000 100%);
}

.gwfx-stamp[hidden] { display: none; }

.gwfx-stamp .gwfx-stamp-meta {
  display: block;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-top: 0.35em;
  text-transform: none; /* o wordmark growthway_ é sempre minúsculo */
}

::view-transition-group(gw-carimbo) { z-index: 150; }
::view-transition-new(gw-carimbo) { animation: none; }
::view-transition-old(gw-carimbo) {
  animation: 420ms cubic-bezier(0.2, 1.4, 0.3, 1) both gwfx-stamp-hit;
}
@keyframes gwfx-stamp-hit {
  from { transform: scale(2.1); opacity: 0; filter: blur(8px); }
  35%  { transform: scale(0.98) translateY(2px); opacity: 1; filter: none; }
  55%  { transform: scale(1.01); }
  to   { transform: scale(1); opacity: 1; }
}

/* a página arquivada desce para a gaveta — só quando a rota velha era carimbada
   (atributo posto no <html> da página NOVA durante o pagereveal) */
html[data-gwfx-stamp-in]::view-transition-old(root) {
  animation: 560ms cubic-bezier(0.7, 0, 0.2, 1) both gwfx-file-away;
}
@keyframes gwfx-file-away {
  30% { transform: none; opacity: 1; }
  to  { transform: translateY(26px) scale(0.96); opacity: 0; filter: saturate(0.7) brightness(0.94); }
}

/* ---------- acessibilidade: tudo desliga ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .gwfx-curtain, .gwfx-stamp { display: none !important; }
  html.gwfx-covered::before { animation-delay: 0s; animation-duration: 0.01s; }
}