/* ═══════════════════════════════════════════════════════════
   THEOREMA.DIGITAL · MOTION SYSTEM · GLOBAL (todas as páginas)
   Importar uma vez no Layout: import "../styles/motion.css"
   Requer os tokens TH-S03 já existentes em :root
   ═══════════════════════════════════════════════════════════ */

/* tokens de easing (se ainda não existirem no global.css, mantêm-se aqui) */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-in-out-quart:cubic-bezier(.76,0,.24,1);
}

/* Lenis */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

::selection{background:var(--orange);color:var(--off-white)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ── grain overlay ─────────────────────────────── */
.grain{
  position:fixed;inset:-100%;z-index:9000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  20%{transform:translate(-12%,4%)}30%{transform:translate(6%,-14%)}
  40%{transform:translate(-4%,12%)}50%{transform:translate(-12%,7%)}
  60%{transform:translate(12%,0)}70%{transform:translate(0,10%)}
  80%{transform:translate(3%,14%)}90%{transform:translate(-8%,8%)}
}

/* ── cursor customizado (o ponto laranja vive) ── */
.th-cursor,.th-cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9500;will-change:transform}
.th-cursor{width:10px;height:10px;border-radius:50%;background:var(--orange);transform:translate(-50%,-50%)}
.th-cursor-ring{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(232,93,44,.55);
  transform:translate(-50%,-50%) scale(.6);
  display:flex;align-items:center;justify-content:center;
  transition:width .35s var(--ease-out-expo),height .35s var(--ease-out-expo),
             background-color .3s,border-color .3s;
}
.th-cursor-ring .cr-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.14em;color:var(--off-white);opacity:0;transform:scale(.5);
  transition:opacity .25s,transform .35s var(--ease-out-expo);white-space:nowrap;
}
.th-cursor-ring.is-link{background:rgba(232,93,44,.12);border-color:var(--orange)}
.th-cursor-ring.is-view{width:88px;height:88px;background:var(--orange);border-color:var(--orange)}
.th-cursor-ring.is-view .cr-label{opacity:1;transform:scale(1)}
.th-cursor-hidden .th-cursor,.th-cursor-hidden .th-cursor-ring{opacity:0}
@media (pointer:coarse){.th-cursor,.th-cursor-ring{display:none}}

/* ── preloader ─────────────────────────────────── */
.preloader{
  position:fixed;inset:0;z-index:9990;display:flex;
  align-items:center;justify-content:center;pointer-events:none;
}
.preloader__panel{position:absolute;left:0;width:100%;height:50.5%;background:var(--ink)}
.preloader__panel--t{top:0}
.preloader__panel--b{bottom:0}
.preloader__wm{
  position:relative;z-index:2;font-family:'Archivo Black',sans-serif;
  font-size:clamp(28px,5.4vw,72px);letter-spacing:-.06em;
  color:var(--off-white);display:flex;align-items:baseline;gap:.04em;
}
.preloader__wm .pw-digital{font-family:Fraunces,serif;font-style:italic;font-weight:400;color:var(--orange)}
.preloader__wm .pw-dot{
  width:.17em;height:.17em;border-radius:50%;background:var(--orange);
  align-self:flex-end;margin:0 .05em .09em .03em;flex-shrink:0;transform:scale(0);
}
.pl-mask{display:inline-block;overflow:hidden}
.pl-mask .ch{display:inline-block;transform:translateY(115%)}
.preloader__count{
  position:absolute;z-index:2;bottom:34px;left:6vw;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.22em;color:rgba(250,250,247,.5);
}
.preloader__count strong{color:var(--orange);font-weight:600;font-size:26px;letter-spacing:.05em;margin-right:12px}
.preloader__meta{
  position:absolute;z-index:2;bottom:38px;right:6vw;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(250,250,247,.35);
}
/* variante rápida (páginas internas): só cortinas, sem contador */
body[data-preload="quick"] .preloader__wm,
body[data-preload="quick"] .preloader__count,
body[data-preload="quick"] .preloader__meta{display:none}
body[data-preload="none"] .preloader{display:none}

/* ── header auto-hide (classes aplicadas via JS) ─ */
.site-header{transition:transform .55s var(--ease-out-expo),background-color .4s,padding .4s,backdrop-filter .4s}
.site-header.is-hidden{transform:translateY(-110%)}
.site-header.is-scrolled{
  background:rgba(245,240,232,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(26,26,26,.06);
}

/* ── vocabulário de reveal (qualquer página) ───── */
.hw-mask{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hw-mask .ch{display:inline-block;will-change:transform}
.w-mask{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:bottom}
.w-mask .w{display:inline-block;will-change:transform}
.hl-sweep{position:relative;display:inline-block}
.hl-sweep::before{
  content:"";position:absolute;inset:.02em -.06em -.04em;
  background:var(--orange);z-index:-1;opacity:.14;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out-expo) .2s;
}
.hl-sweep.is-on::before{transform:scaleX(1)}

/* ── ticker (opcional em qualquer página) ──────── */
.ticker-wrap{display:flex;width:max-content;will-change:transform}

/* ── reduced motion ────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{display:none}
}
html.no-motion .preloader{display:none}
html.no-motion .ch,html.no-motion .w,html.no-motion .mn-inner{transform:none!important}

/* ── páginas internas: assinaturas v13 ─────────── */
/* quando o cursor laranja unificado está ativo, esconde o cursor nativo do build */

/* o cursor nativo do build (.cursor, 16px, criado via JS) é escondido
   quando o nosso cursor laranja unificado (.th-cursor + ring) está ativo */
body.th-cursor-on .cursor{ display:none !important; }

/* linha viva do fluxo (automação) */
.wflow{ position:relative; }
.th-wflow-line{
  position:absolute; left:50%; top:0; width:2px; height:100%;
  background:linear-gradient(to bottom, var(--orange), rgba(232,93,44,.15));
  transform-origin:top center; transform:scaleY(0);
  pointer-events:none; z-index:0; opacity:.5;
}

/* brilho no foco dos campos (contato) */
.th-field-active{
  box-shadow:0 0 0 2px rgba(232,93,44,.35) !important;
  border-color:var(--orange) !important;
  transition:box-shadow .3s, border-color .3s;
}

/* máscara genérica de título do hero (usada por pages.js) */
.th-hmask{ display:inline-block; overflow:hidden; vertical-align:bottom; }

/* ── logo do header/menu: garante ponto laranja na base ───
   Sobrescreve qualquer resíduo (cache/tema) para o dot ficar
   sempre ember e alinhado à base, colado no "theorema". */
.wm{ align-items:baseline !important; }
.wm .dot,
.mobile-nav__logo .dot,
.site-header .dot{
  background:var(--orange) !important;
  align-self:baseline !important;
  width:.15em !important; height:.15em !important;
  margin:0 .05em 0 .03em !important;
  border-radius:50% !important;
  animation:none !important;
}

/* ── hover animado dos links do topo (igualar à home) ───
   As páginas internas (build) não tinham o sublinhado que cresce
   no hover. Replicamos aqui, respeitando a cor de hover delas. */
.site-nav a:not(.nav-cta){
  position:relative;
}
.site-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  height:1.5px; width:100%;
  background:var(--orange);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
  pointer-events:none;
}
.site-nav a:not(.nav-cta):hover::after{
  transform:scaleX(1); transform-origin:left;
}
/* link ativo (página atual) já nasce sublinhado, discreto */
.site-nav a.nav-active::after{
  transform:scaleX(1); transform-origin:left;
  opacity:.5;
}

/* ── dot-accent dos títulos internos: ponto redondo, não quadrado ───
   No build, o "." dos títulos (Casebook. Sobre.) é um caractere de
   texto em Archivo Black, que renderiza quadrado e grande demais.
   Convertemos para um ponto redondo ember, proporcional ao título,
   alinhado à base — coerente com o ponto da marca. */
.dot-accent{
  color:transparent !important;        /* esconde o glifo "." mantendo o tamanho de fonte */
  position:relative;
  display:inline-block;
  width:.2em;                          /* .em relativo ao tamanho herdado do título */
  vertical-align:baseline;
  align-self:baseline;
  margin-left:.02em;
  flex-shrink:0;
}
.dot-accent::before{
  content:"";
  position:absolute; left:0; bottom:.02em;
  width:.18em; height:.18em;
  background:var(--orange);
  border-radius:50%;
}
/* dentro do título com split, o dot-accent fica no mask inline-block;
   garante que não estique nem quebre linha */
.th-hmask > .dot-accent{ margin-left:0; }