/* maloy.studio – gemeinsame Grundlage für Landingpage und Portfolio */

/* Unbounded ExtraBold (SIL Open Font License), lateinischer Zeichensatz */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("fonts/unbounded-800-latin.woff2") format("woff2");
}

/* Syncopate Bold (SIL Open Font License): breite, gesperrte Überschriften */
@font-face {
  font-family: "Syncopate";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/syncopate-700-latin.woff2") format("woff2");
}

:root {
  --font-head: "Syncopate", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  /* Akzent: UV-Violett – das Licht einer Schwarzlichtlampe */
  --accent: #7c4dff;
  --accent-rgb: 124 77 255;
  --accent-core: #e6dcff;
  --silver: #c9ccd3;
  --silver-hi: #eef0f4;
  --muted: #8b8e97;
  --font: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Unbounded", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

/* Vergleichsvariante: sattes Signalrot (?accent=red) */
:root[data-accent="red"] {
  --accent: #e1192d;
  --accent-rgb: 225 25 45;
  --accent-core: #ffd3d8;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Lautsprecher-Schalter: steuert Ambient + Hover/Klick gemeinsam */
.sound-toggle {
  pointer-events: auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .3s ease;
}
.sound-toggle:hover { color: var(--silver); }
.sound-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sound-toggle svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 0 #000); }
.sound-toggle .off { display: none; }
.sound-toggle[data-muted="true"] .on { display: none; }
.sound-toggle[data-muted="true"] .off { display: inline; }

/* feines Korn für den matten Metall-Look */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}