/* =====================================================================
   PEIXARIA — TELA DE SOFT OPENING
   Tela única (100svh, sem scroll). Substitui a landing até a inauguração.
   Fundo: shader WebGL navy herdado (webgl.js) — o herói.
   Vulto: massa/névoa grafite com leve cor, persistente, fundida na navy.
   "Estado, não data": sem countdown, sem badge gritado. Tokens do DS.
   ===================================================================== */
@import url('design-system/styles.css');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* dark suave — mesma sala da landing ("escura, mas nem tanto") */
:root[data-theme="dark"] { --surface: #0f2147; --surface-bright: #17305e; --ink-faint: #8294bd; }
:root { --margin: clamp(20px, 5vw, 72px); --maxw: 1100px; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body), system-ui, sans-serif;
  height: 100svh; overflow: hidden;          /* tela única, sem scroll */
}
img { display: block; max-width: 100%; }
.mhead, .so { position: relative; z-index: 2; }

/* ---------- fundo vivo: WebGL (herói) ---------- */
.bg { position: fixed; inset: 0; z-index: 0; background: var(--surface); pointer-events: none; }
.bgcanvas { display: block; width: 100%; height: 100%; animation: veil 1.6s ease both; }
@keyframes veil { from { opacity: 0; } to { opacity: 1; } }

/* ---------- vulto grafite (persistente) ---------- */
/* massa/névoa grafite com leve cor (fria + quente), fundida na navy.
   Layer acima do shader, abaixo do texto. Não depende de cursor. */
.vulto {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center;
}
.vulto-abs {
  width: min(1040px, 96vw); height: min(680px, 80vh);
  background:
    radial-gradient(40% 46% at 45% 44%, rgba(140, 158, 196, .62), transparent 70%),
    radial-gradient(32% 40% at 60% 60%, rgba(79, 147, 255, .28), transparent 72%),
    radial-gradient(28% 32% at 38% 62%, rgba(201, 138, 79, .16), transparent 72%),
    radial-gradient(22% 26% at 54% 36%, rgba(176, 198, 255, .22), transparent 74%);
  filter: blur(50px); opacity: .92;
  /* assimétrico (off-center) + drift lento → respira junto com o shader */
  -webkit-mask: radial-gradient(ellipse 74% 74% at 46% 46%, #000 22%, transparent 82%);
          mask: radial-gradient(ellipse 74% 74% at 46% 46%, #000 22%, transparent 82%);
  animation: vultoDrift 26s ease-in-out infinite alternate;
}
@keyframes vultoDrift {
  from { transform: translate(-4%, -7%) scale(1); }
  to   { transform: translate(4%, -3%) scale(1.07); }
}

/* ---------- header minimal ---------- */
.mhead {
  position: fixed; inset: 0 0 auto 0;
  display: flex; justify-content: center;
  padding: clamp(20px, 4vh, 40px) var(--margin);
}
.mh-mark {
  font-family: var(--font-wordmark), serif; font-weight: 600;
  font-size: 1.15rem; letter-spacing: .42em; padding-left: .42em;
  color: #fff;                               /* cor fixa: difference oscila sobre o shader */
  text-shadow: 0 1px 16px rgba(0, 16, 49, .55);
}

/* ---------- conteúdo central ---------- */
.so {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 14vh var(--margin); max-width: var(--maxw); margin-inline: auto;
}
/* scrim: garante contraste do texto sobre as faixas claras do shader em movimento.
   Fica acima do shader/fragmento (z<2) e abaixo do conteúdo do .so. */
.so::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 44% 28% at 50% 52%, rgba(0, 16, 49, .58), transparent 70%);
}
.so-over {
  font-family: var(--font-label), monospace; font-size: .72rem; font-weight: 500;
  letter-spacing: .42em; text-transform: lowercase; color: var(--azure-frost);
  text-shadow: 0 1px 12px rgba(0, 16, 49, .55);
}
.so-title {
  font-family: var(--font-display), sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.05rem); line-height: 1.04; letter-spacing: -.03em;
  /* overline mais perto do título (margin-top menor); respiro abaixo mantido */
  text-transform: lowercase; margin: clamp(.8rem, 1.8vw, 1.3rem) 0 clamp(1.3rem, 3vw, 2rem);
  text-wrap: balance;
}
.so-state {
  font-family: var(--font-body), sans-serif; color: var(--ink-soft);
  font-size: clamp(1rem, 2.2vw, 1.22rem); letter-spacing: .01em; max-width: 32ch;
  text-shadow: 0 1px 12px rgba(0, 16, 49, .5);
}
.so-cta {
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-label), monospace; font-size: .76rem;
  letter-spacing: .2em; text-transform: lowercase; color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(176, 198, 255, .36);  /* maçaneta insinuada, não invisível */
  background: rgba(176, 198, 255, .04); border-radius: var(--r, .25rem);
  padding: .95rem 1.5rem; transition: color .5s, background .5s, border-color .5s, box-shadow .5s;
}
.so-cta .so-wa { color: currentColor; opacity: .85; transition: opacity .5s; }
.so-cta:hover, .so-cta:focus-visible {
  color: #fff; background: var(--azure-bright, #1470e8);
  border-color: var(--azure); box-shadow: 0 0 46px -6px var(--azure);
  outline: 2px solid var(--azure); outline-offset: 3px;   /* foco robusto p/ teclado + forced-colors */
}
.so-cta:hover .so-wa, .so-cta:focus-visible .so-wa { opacity: 1; }
.so-foot {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  font-family: var(--font-label), monospace; font-size: .66rem;
  letter-spacing: .18em; text-transform: lowercase; color: var(--ink-soft);
  text-shadow: 0 1px 10px rgba(0, 16, 49, .5);
}

/* ---------- entrada cinematográfica (stagger) ---------- */
.anim .rv { opacity: 0; transform: translateY(16px); }
.anim.ready .rv {
  opacity: 1; transform: none;
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.anim.ready .so-over  { transition-delay: .35s; }
.anim.ready .so-title { transition-delay: .55s; }
.anim.ready .so-state { transition-delay: .85s; }
.anim.ready .so-cta   { transition-delay: 1.1s; }
.anim.ready .so-foot  { transition-delay: 1.35s; }

@media (max-width: 600px) {
  .so { padding-inline: clamp(28px, 8vw, 44px); }   /* mais respiro lateral — título não encosta */
  .so-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .mhead { padding: 22px var(--margin); }
  .vulto-abs { opacity: .78; filter: blur(40px); }
}
/* válvula de segurança: telas muito baixas (landscape de celular) — libera scroll
   pra CTA/rodapé nunca ficarem cortados pelo overflow:hidden */
@media (max-height: 560px) {
  body { height: auto; min-height: 100svh; overflow-y: auto; }
  .so { padding: 9vh var(--margin); }
  .so-title { font-size: clamp(2rem, 7vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bgcanvas { animation: none; }
  .vulto-abs { animation: none; transform: translate(-2%, -6%); }
  .anim .rv, .anim.ready .rv { opacity: 1; transform: none; transition: none; }
  .so-cta { transition: none; }
}