/* ==========================================================================
   fx.css · efeitos de movimento para murilosaez.com.br
   Ideias adaptadas de React Bits (reactbits.dev) para CSS/JS puro, sem build
   e compatíveis com a CSP estrita (sem estilos inline). Ver EFEITOS.md.
   ========================================================================== */

/* 1 · Entrada do hero (Blur Text / Animated Content) — CSS puro, roda uma vez.
   O número em data-fx-enter define a ordem; o itálico chega por último. */
[data-fx-enter] { animation: fx-enter .9s cubic-bezier(.2, .8, .2, 1) both; }
[data-fx-enter="1"] { animation-delay: .1s; }
[data-fx-enter="2"] { animation-delay: .22s; }
[data-fx-enter="3"] { animation-delay: .5s; animation-duration: 1.1s; }
[data-fx-enter="4"] { animation-delay: .38s; }
@keyframes fx-enter {
  from { opacity: 0; filter: blur(12px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.fx-off-enter [data-fx-enter], .fx-replay [data-fx-enter] { animation: none; }

/* 2 · Desfoque progressivo no topo (Gradual Blur) — aparece com a menubar flutuante */
.fx-edge {
  position: fixed; left: 0; right: 0; top: 0; z-index: 49; height: 88px;
  pointer-events: none; opacity: 0; transition: opacity .45s ease;
}
.is-floating .fx-edge { opacity: 1; }
.fx-off-edge .fx-edge { display: none; }
.fx-edge i { position: absolute; inset: 0; }
.fx-edge i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 40%, transparent 60%); mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 40%, transparent 60%); }
.fx-edge i:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 40%, #000 60%, transparent 80%); mask-image: linear-gradient(to top, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.fx-edge i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to top, transparent 40%, #000 60%, #000 80%, transparent 100%); mask-image: linear-gradient(to top, transparent 40%, #000 60%, #000 80%, transparent 100%); }
.fx-edge i:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to top, transparent 60%, #000 80%, #000 100%); mask-image: linear-gradient(to top, transparent 60%, #000 80%, #000 100%); }
.fx-edge i:nth-child(5) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to top, transparent 80%, #000 100%); mask-image: linear-gradient(to top, transparent 80%, #000 100%); }
.fx-edge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--canvas), rgba(0, 0, 0, 0)); opacity: .45; }

/* 3 · Vidro com refração (Glass Surface) — só Chromium; nos outros fica o .glass atual */
.fx-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
:root { --fx-refract-fill: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] { --fx-refract-fill: rgba(30, 30, 32, .56); }
:root:not(.fx-off-refract) .is-floating .menubar.fx-refract {
  background: var(--fx-refract-fill);
  -webkit-backdrop-filter: var(--fx-refract) blur(6px) saturate(180%);
  backdrop-filter: var(--fx-refract) blur(6px) saturate(180%);
}

/* 4 · Texto decifrado (Decrypted Text) — use apenas em texto mono para não "pular" */
[data-fx-decrypt] { font-variant-ligatures: none; }

/* 5 · Contadores (Count Up) + barras da trajetória sincronizadas */
[data-fx-count] { font-variant-numeric: tabular-nums; }
.fx-js .bar span { transform: scaleX(0); transform-origin: 100% 50%; transition: transform 1.3s cubic-bezier(.22, 1, .36, 1); }
.fx-js .bar.is-in span, .fx-off-count .bar span { transform: none; }
.fx-off-count .bar span { transition: none; }

/* 6 · Grade de pontos viva (Dot Grid) — só reage a mouse; no toque fica estática */
.fx-dots {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
}
.fx-has-dots > .tech-grid--dark { display: none; }
.fx-off-dots .fx-dots { display: none; }
.fx-off-dots .fx-has-dots > .tech-grid--dark { display: block; }

@media (prefers-reduced-motion: reduce) {
  [data-fx-enter] { animation: none; }
  .fx-js .bar span { transform: none; transition: none; }
  .fx-edge { transition: none; }
}