/* Cross-document view transitions: the browser cross-fades between pages
   instead of tearing one down and painting the next, which is what makes a
   plain multi-page site feel like it blinks. Ignored where unsupported. */
@view-transition {
  navigation: auto;
}

/* Shared shell for catsonacid.dev: the marbled background, the page frame
   and the footer. Page-specific styling stays inline in each page.
   The SVG filters this references are inline markup — see any page. */

html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden; /* NOT overflow:hidden — that kills pull-to-refresh */
  background: #ffffff;
}

/* --face is the rotating title face and is used by ONE thing: the name on the
   home page. Everything else — menu, page copy, footer — uses --ui, a fixed,
   legible face from the same pack, so the gimmick stays a gimmick. */
:root {
  --ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  position: relative;
  font-family: var(--ui);
}

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(45vmax 40vmax at 15% 18%, rgba(60, 255, 90, 0.95), transparent 58%),
    radial-gradient(38vmax 34vmax at 32% 82%, rgba(223, 173, 92, 0.9), transparent 60%),
    radial-gradient(42vmax 36vmax at 82% 22%, rgba(120, 170, 255, 0.92), transparent 58%),
    radial-gradient(36vmax 34vmax at 72% 68%, rgba(178, 42, 255, 0.94), transparent 58%),
    radial-gradient(28vmax 28vmax at 88% 82%, rgba(255, 70, 210, 0.95), transparent 55%),
    radial-gradient(22vmax 20vmax at 56% 57%, rgba(255, 255, 255, 0.95), transparent 45%),
    linear-gradient(135deg, #ffffff 0%, #eef6ff 30%, #fff7fb 68%, #fffdf6 100%);
}

/* Distorted marbling surface */
.marble {
  position: absolute;
  will-change: transform; /* keeps the one-off filter result on its own layer */
  inset: -8%;
  filter: url(#marble-distort) saturate(1.45) contrast(1.18);
  transform: scale(1.08);
}

.marble::before,
.marble::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55vmax 48vmax at 14% 20%, rgba(45, 255, 85, 0.96), transparent 52%),
    radial-gradient(52vmax 42vmax at 79% 20%, rgba(105, 155, 255, 0.93), transparent 52%),
    radial-gradient(48vmax 42vmax at 68% 63%, rgba(163, 35, 255, 0.95), transparent 50%),
    radial-gradient(42vmax 34vmax at 87% 88%, rgba(255, 45, 205, 0.96), transparent 52%),
    radial-gradient(34vmax 30vmax at 18% 78%, rgba(205, 148, 72, 0.92), transparent 50%),
    radial-gradient(26vmax 20vmax at 36% 38%, rgba(255,255,255,0.98), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 35%, #fffaff 70%, #fffdf7 100%);
  mix-blend-mode: normal;
}

/* subtle highlight wash */
.shine {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40vmax 20vmax at 18% 24%, rgba(255,255,255,0.62), transparent 60%),
    radial-gradient(34vmax 18vmax at 60% 60%, rgba(255,255,255,0.32), transparent 60%),
    radial-gradient(26vmax 15vmax at 83% 32%, rgba(255,255,255,0.38), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(20px);
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh; /* dvh where supported: excludes the mobile URL bar */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically centred as one block */
  align-items: flex-start;   /* typed from the left margin */
  padding: 32px clamp(24px, 7vw, 120px) 88px; /* bottom clears the fixed footer */
  box-sizing: border-box;
}

/* §5 DDG: the Impressum must be reachable from every page, so the footer is
   fixed above the marbling rather than sitting after a full-viewport hero. */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 14px 20px;
  text-align: center;
  font-size: clamp(0.85rem, 3.4vw, 0.95rem);
  line-height: 1.7;
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255,255,255,0.75);
}

.footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer .sep {
  margin: 0 0.5em;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .marble {
    inset: -14%;
    transform: scale(1.14);
  }

  .footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .footer a {
    display: inline-block;
    padding: 4px 2px; /* a finger-sized target, not a 13px word */
  }

  .footer .sep {
    margin: 0 0.35em;
  }
}

/* glossy contour lines like your reference */
.marble::after {
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,0.00) 0 8px,
      rgba(0,0,0,0.075) 8px 10px,
      rgba(255,255,255,0.00) 10px 18px
    ),
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0.00) 0 12px,
      rgba(255,255,255,0.22) 12px 14px,
      rgba(0,0,0,0.06) 14px 16px,
      rgba(255,255,255,0.00) 16px 30px
    );
  opacity: 0.55;
  mix-blend-mode: multiply;
  filter: blur(0.5px) url(#marble-distort-2);
}