/* datx-fx – Effekte für alle datx.space-Seiten (Gegenstück zu datx-fx.js) */
@font-face { font-family: 'Space Grotesk'; src: url(/__brand/fonts/spacegrotesk.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/__brand/fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/__brand/fonts/jetbrainsmono.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --fx-bg: #07080B;
  --fx-ink: #E8EAF0;
  --fx-ink-2: #AEB3C2;
  --fx-muted: #8A90A0;
  --fx-line: rgba(255, 255, 255, .08);
  --fx-line-2: rgba(255, 255, 255, .14);
  --fx-accent: #4ADE80;
  --fx-ascii-base: #3B4356;
  --fx-glass: rgba(18, 21, 30, .58);
  --fx-radius: 16px;
  --fx-ease: cubic-bezier(.2, .8, .2, 1);
  --fx-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fx-display: 'Space Grotesk', system-ui, sans-serif;
  --fx-body: 'Inter', system-ui, sans-serif;
}

/* ---------- ASCII-Hintergrund ---------- */
.fx-ascii {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
.fx .fx-ascii { opacity: 1; }
/* Canvas liegt hinter allem: <html> trägt die Hintergrundfarbe, <body> bleibt transparent */
html.fx { background: var(--fx-bg); }
html.fx body { background: transparent; }
/* Weicher Verlauf über dem ASCII-Feld, damit Text ruhig lesbar bleibt */
.fx-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, transparent 0%, rgba(7, 8, 11, .55) 70%, rgba(7, 8, 11, .85) 100%),
    linear-gradient(180deg, rgba(7, 8, 11, 0) 0%, rgba(7, 8, 11, .35) 100%);
}

/* ---------- Glas ---------- */
.glass {
  --mx: -400px; --my: -400px;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), var(--fx-glass);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 20px 50px -24px rgba(0, 0, 0, .7);
}
/* Lichtpunkt im Glas */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-accent) 11%, transparent), transparent 45%);
  opacity: 0; transition: opacity .35s ease;
}
/* leuchtende Kante in Cursornähe */
.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-accent) 65%, transparent), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.fx-fine .glass:hover::before, .fx-fine .glass:hover::after, .glass:focus-within::after { opacity: 1; }
.fx-no-webgl .glass, .fx-reduce .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 21, 30, .92); }

/* 3D-Neigung (nur Maus) */
.fx-tilt { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--fx-ease), border-color .2s; will-change: transform; }
.fx-fine .fx-tilt:hover { transition: transform .12s linear, border-color .2s; }

/* Magnetische Buttons */
.fx-magnet { --tx: 0px; --ty: 0px; transform: translate(var(--tx), var(--ty)); transition: transform .35s var(--fx-ease); }
.fx-fine .fx-magnet:hover { transition: transform .1s linear; }

/* ---------- Liquid Metal ---------- */
.fx-metal {
  background: linear-gradient(100deg,
    #8C93A3 0%, #F4F6FA 14%, #6E7586 26%, #DDE2EC 40%, #7D8496 52%, #FFFFFF 63%,
    #9AA1B1 74%, color-mix(in srgb, var(--fx-accent) 55%, #E8ECF4) 86%, #8C93A3 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: fx-metal-flow 9s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .06));
}
.fx-metal.is-liquid { filter: url(#fx-liquid) drop-shadow(0 1px 0 rgba(255, 255, 255, .06)); }
@keyframes fx-metal-flow { to { background-position: -260% 0; } }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .fx-metal { color: var(--fx-ink); -webkit-text-fill-color: currentColor; } }

/* ---------- Text-Spotlight ---------- */
.fx-glow {
  --gx: -999px; --gy: -999px;
  color: var(--fx-ink-2);
}
.fx-fine:not(.fx-reduce) .fx-glow {
  background: radial-gradient(170px circle at var(--gx) var(--gy), var(--fx-ink) 0%, color-mix(in srgb, var(--fx-accent) 70%, var(--fx-ink)) 18%, var(--fx-ink-2) 62%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.fx-fine:not(.fx-reduce) .fx-glow a, .fx-fine:not(.fx-reduce) .fx-glow code, .fx-fine:not(.fx-reduce) .fx-glow strong { -webkit-text-fill-color: currentColor; }

/* ---------- Spot (nur Lichtpunkt, ohne Glas) ---------- */
.fx-spot { --mx: -400px; --my: -400px; position: relative; }
.fx-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-accent) 10%, transparent), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
.fx-fine .fx-spot:hover::before { opacity: 1; }

/* ---------- Einblenden ---------- */
.fx-in { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease); transition-delay: calc(var(--i, 0) * 60ms); }
.fx-in.is-in { opacity: 1; transform: none; }
.fx-reduce .fx-in { opacity: 1; transform: none; transition: none; }

/* ---------- Seitenübergang (Barba) ---------- */
.fx-page-out { animation: fx-page-out .32s cubic-bezier(.4,0,.6,1) forwards; pointer-events: none; }
.fx-page-in { animation: fx-page-in .62s var(--fx-ease) both; }
@keyframes fx-page-out {
  to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(8px); }
}
@keyframes fx-page-in {
  from { opacity: 0; transform: translateY(22px) scale(.99); filter: blur(10px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-metal { animation: none; }
  .fx-tilt, .fx-magnet { transform: none !important; }
  .fx-page-out, .fx-page-in { animation: none; }
}