/*
  Unified glass surface system
  ────────────────────────────
  One acrylic / liquid-glass / frosted look for the whole site. This replaces the
  old split between "acrylic-pastel" and "liquid-glass": there is now a single
  glassy surface language, driven entirely by custom properties.

  Theming contract (do not rename — the per-theme files under css/themes/
  override these):
    --ap-panel / --ap-panel-strong   surface fill gradients
    --ap-panel-border / --ap-panel-highlight      surface edges + top sheen
    --ap-panel-shadow / --ap-panel-shadow-flat    surface elevation
    --ap-panel-blur                            backdrop-filter for surfaces
    --ap-local-tint / --ap-local-tint-strong      accent wash inside a surface
    --theme-*                               page texture, motion, hover feel
    --ap-page-base*                            dark-mode page base colors

  Apply the `.glass` class to any element to get the surface; the site chrome
  (cards, panels, controls) picks it up automatically via the selectors below.
*/

:root {
  --ap-text: #2f2948;
  --ap-text-soft: rgba(47, 41, 72, 0.72);
  --ap-text-faint: rgba(47, 41, 72, 0.54);

  --ap-page-base: #fff7fb;
  --ap-page-base-2: #f7fbff;
  --ap-page-base-3: #f8fffb;

  --ap-panel: linear-gradient(155deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.28) 55%,
      rgba(255, 255, 255, 0.16) 100%);
  --ap-panel-strong: linear-gradient(155deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.34) 52%,
      rgba(255, 255, 255, 0.2) 100%);
  --ap-panel-border: rgba(255, 255, 255, 0.52);
  --ap-panel-highlight: rgba(255, 255, 255, 0.72);
  --ap-panel-shadow:
    0 24px 60px rgba(138, 116, 177, 0.16),
    0 10px 24px rgba(118, 145, 185, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --ap-panel-shadow-flat:
    0 24px 60px rgba(138, 116, 177, 0.16),
    0 10px 24px rgba(118, 145, 185, 0.12);
  --ap-panel-blur: blur(24px) saturate(1.45);
  --ap-local-tint: color-mix(in srgb, var(--accent-color) 24%, transparent);
  --ap-local-tint-strong: color-mix(in srgb, var(--accent-color) 36%, transparent);

  --theme-page-texture: none;
  --theme-surface-pattern: none;
  --theme-surface-alpha: 0.26;
  --theme-control-alpha: 0.26;
  --theme-hover-transform: translateY(-2px);
  --theme-text-effect: none;
  --theme-backdrop-filter: blur(28px) saturate(1.25);
  --theme-bg-animation: siteGradientDrift;
}

/* Motion-cost cutbacks on touch / reduced-motion */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    will-change: auto !important;
  }

  body::after {
    filter: blur(24px) !important;
  }

  :root {
    --site-surface-blur: blur(8px) saturate(1.1) !important;
    --glass-filter: blur(6px) saturate(1.1) !important;
    --ap-panel-blur: blur(6px) saturate(1.1) !important;
  }
}

html[data-theme-mode="dark"] {
  --ap-text: #f5f0ff;
  --ap-text-soft: rgba(245, 240, 255, 0.76);
  --ap-text-faint: rgba(245, 240, 255, 0.56);

  --ap-page-base: #0f1222;
  --ap-page-base-2: #111826;
  --ap-page-base-3: #0d1a1e;

  --ap-panel: linear-gradient(155deg,
      rgba(28, 32, 52, 0.74) 0%,
      rgba(20, 25, 44, 0.58) 55%,
      rgba(14, 18, 34, 0.5) 100%);
  --ap-panel-strong: linear-gradient(155deg,
      rgba(32, 36, 58, 0.82) 0%,
      rgba(22, 28, 48, 0.66) 52%,
      rgba(14, 18, 34, 0.58) 100%);
  --ap-panel-border: rgba(255, 255, 255, 0.12);
  --ap-panel-highlight: rgba(255, 255, 255, 0.1);
  --ap-panel-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 12px 30px rgba(10, 14, 28, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ap-panel-shadow-flat:
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 12px 30px rgba(10, 14, 28, 0.42);
  --ap-panel-blur: blur(24px) saturate(1.3);
  --ap-local-tint: color-mix(in srgb, var(--accent-color) 14%, transparent);
  --ap-local-tint-strong: color-mix(in srgb, var(--accent-color) 22%, transparent);
  --theme-surface-alpha: 0.54;
  --theme-control-alpha: 0.54;
}

/* ── Site-wide glass shell ────────────────────────────────────────────────
   Applied to <body> directly (every page carries the glass look), so the old
   `.theme-acrylic-pastel` gate is gone. */
body {
  --text-color: var(--ap-text);
  --embed-bg: rgba(255, 255, 255, 0.34);
  --embed-text-color: var(--ap-text);
  --embed-left-bar-color: var(--accent-color);
  --box-shadow: var(--ap-panel-shadow);
  --embed-shadow: 0 18px 40px rgba(139, 122, 181, 0.12);
  --embed-shadow-hover:
    0 30px 70px rgba(136, 118, 176, 0.2),
    0 12px 28px rgba(129, 172, 201, 0.16);
  --shadow-sm: 0 8px 20px rgba(124, 143, 182, 0.1);
  --shadow-md:
    0 16px 38px rgba(130, 148, 186, 0.12),
    0 8px 18px rgba(149, 122, 183, 0.08);
  --shadow-lg:
    0 24px 56px rgba(140, 123, 182, 0.14),
    0 10px 24px rgba(127, 168, 194, 0.1);
  --shadow-xl:
    0 34px 78px rgba(140, 120, 182, 0.18),
    0 16px 36px rgba(120, 169, 201, 0.12);
  --shadow-2xl:
    0 44px 110px rgba(138, 119, 180, 0.2),
    0 20px 46px rgba(114, 164, 199, 0.12);
  --border: 1px solid var(--ap-panel-border);
  --site-surface-border: 1px solid var(--ap-panel-border);
  --site-surface-background:
    var(--theme-surface-pattern),
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 18%, transparent) 0%, transparent 38%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--secondary-color) 14%, transparent) 0%, transparent 36%),
    rgba(255, 255, 255, var(--theme-surface-alpha));
  --site-surface-shadow: var(--ap-panel-shadow);
  --site-surface-blur: var(--theme-backdrop-filter);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  background: transparent;
  isolation: isolate;
}

html[data-theme-mode="dark"] body {
  --embed-bg: rgba(17, 22, 38, 0.58);
  --embed-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
  --embed-shadow-hover:
    0 34px 78px rgba(0, 0, 0, 0.36),
    0 14px 32px rgba(14, 22, 40, 0.3);
  --shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.18);
  --shadow-md:
    0 18px 40px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(10, 14, 28, 0.2);
  --shadow-lg:
    0 26px 58px rgba(0, 0, 0, 0.26),
    0 12px 26px rgba(10, 14, 28, 0.24);
  --shadow-xl:
    0 36px 84px rgba(0, 0, 0, 0.32),
    0 16px 36px rgba(10, 14, 28, 0.28);
  --shadow-2xl:
    0 48px 120px rgba(0, 0, 0, 0.38),
    0 22px 48px rgba(10, 14, 28, 0.3);
  --site-surface-background:
    var(--theme-surface-pattern),
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 10%, transparent) 0%, transparent 38%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--secondary-color) 8%, transparent) 0%, transparent 36%),
    color-mix(in srgb, var(--ap-page-base) calc(var(--theme-surface-alpha) * 100%), transparent);
}

/* Animated frosted page background (orbs + gradient wash + per-theme texture) */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: 0;
  background:
    var(--theme-page-texture),
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent-color) 36%, transparent), transparent 30%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--secondary-color) 30%, transparent), transparent 28%),
    radial-gradient(circle at 26% 82%, color-mix(in srgb, var(--primary-color) 26%, transparent), transparent 30%),
    radial-gradient(circle at 90% 82%, color-mix(in srgb, var(--color-5) 60%, transparent), transparent 26%),
    radial-gradient(circle at 0% 18%,
      color-mix(in srgb, var(--accent-color) 28%, transparent) 0%,
      transparent 18%),
    radial-gradient(circle at 100% 86%,
      color-mix(in srgb, var(--primary-color) 22%, transparent) 0%,
      transparent 20%),
    linear-gradient(145deg, var(--color-1) 0%, var(--color-2) 32%, var(--color-3) 62%, var(--color-4) 100%);
  background-size: 120% 120%, 132% 132%, 128% 128%, 118% 118%, 140% 140%, 136% 136%, 100% 100%;
  animation: var(--theme-bg-animation) var(--site-bg-motion-duration) ease-in-out infinite alternate;
  will-change: transform, background-position;
}

body::after {
  border-radius: var(--radius-pill);
  filter: blur(54px);
  right: -120px;
  bottom: 4vh;
  width: min(34rem, 42vw);
  height: min(34rem, 42vw);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color) 28%, transparent),
      color-mix(in srgb, var(--color-5) 48%, transparent));
  animation: siteGradientFloat var(--site-bg-orb-duration) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

html[data-theme-mode="dark"] body::before {
  background:
    var(--theme-page-texture),
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 30%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--secondary-color) 18%, transparent), transparent 28%),
    radial-gradient(circle at 26% 82%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 30%),
    radial-gradient(circle at 90% 82%, color-mix(in srgb, var(--color-5) 28%, transparent), transparent 26%),
    radial-gradient(circle at 0% 18%,
      color-mix(in srgb, var(--accent-color) 14%, transparent) 0%,
      transparent 18%),
    radial-gradient(circle at 100% 86%,
      color-mix(in srgb, var(--primary-color) 12%, transparent) 0%,
      transparent 20%),
    linear-gradient(145deg, var(--color-5) 0%, var(--color-1) 26%, var(--color-2) 58%, var(--color-4) 100%);
  background-size: 120% 120%, 132% 132%, 128% 128%, 118% 118%, 140% 140%, 136% 136%, 100% 100%;
}

html[data-theme-mode="dark"] body::after {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color) 14%, transparent),
      color-mix(in srgb, var(--color-5) 18%, transparent));
}

body > * {
  position: relative;
  z-index: 1;
}

/* ── The single glass surface ─────────────────────────────────────────────
   `.glass` is the one reusable frosted surface (replaces the old .pastel-acrylic
   / .liquid-glass / .ap-surface / .ap-panel aliases). */
.glass {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--ap-panel-border);
  background:
    radial-gradient(circle at top left, var(--ap-local-tint) 0%, transparent 44%),
    var(--ap-panel);
  backdrop-filter: var(--ap-panel-blur);
  -webkit-backdrop-filter: var(--ap-panel-blur);
  box-shadow: var(--ap-panel-shadow);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--ap-panel-highlight) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
  opacity: 0.9;
}

html:not([data-hover-effects="off"]) .glass:hover,
.glass:focus-within {
  box-shadow:
    0 36px 86px rgba(136, 118, 176, 0.22),
    0 14px 32px rgba(128, 169, 199, 0.18);
  border-color: var(--ap-panel-highlight);
}

/* ── Site chrome inherits the glass surface automatically ──────────────────
   Selectors are prefixed with `body ` so they out-specify the per-page card
   rules (in projects.css / index.css / etc.) that set a fainter background —
   the glass surface is the intended winner, and this keeps cards visually
   distinct on every theme without relying on a body-class gate. */
body :is(
  .content,
  .home-surface,
  .site-hero-card,
  .projects-card,
  .formats-card,
  .image-box,
  .upload-form,
  .images-toolbar,
  .toggle-label,
  .test-card,
  .toetsen-stats,
  .component-card,
  .general-limits,
  .limit-item
) {
  border: var(--site-surface-border);
  background: var(--site-surface-background);
  box-shadow: var(--site-surface-shadow);
  backdrop-filter: var(--site-surface-blur);
  -webkit-backdrop-filter: var(--site-surface-blur);
}

body :is(.site-hero-card, .projects-card, .formats-card, .discord-hub-card) {
  box-shadow: var(--ap-panel-shadow);
}

body :is(
  .home-card,
  .home-connect-panel,
  .home-stats-panel,
  .home-stat,
  .home-social__link,
  .hero-chip,
  .projects-section-link,
  .repo-card,
  .repo-card__link,
  .repo-card__pill,
  .projects-gists__item,
  .projects-gists__pill,
  .site-paginator__button,
  .jump-nav,
  .jump-nav a,
  .filter-btn,
  .filter-toggle
) {
  border: 1px solid var(--ap-panel-border);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 16%, transparent) 0%, transparent 44%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary-color) 14%, transparent) 0%, transparent 42%),
    rgba(255, 255, 255, var(--theme-control-alpha));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 32px rgba(137, 119, 178, 0.12);
  backdrop-filter: blur(18px) saturate(1.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.34);
}

html[data-theme-mode="dark"] body :is(
  .home-card,
  .home-connect-panel,
  .home-stats-panel,
  .home-stat,
  .home-social__link,
  .hero-chip,
  .projects-section-link,
  .repo-card,
  .repo-card__link,
  .repo-card__pill,
  .projects-gists__item,
  .projects-gists__pill,
  .site-paginator__button,
  .jump-nav,
  .jump-nav a,
  .filter-btn,
  .filter-toggle
) {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 8%, transparent) 0%, transparent 44%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, transparent 42%),
    color-mix(in srgb, var(--ap-page-base) calc(var(--theme-control-alpha) * 100%), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.24);
}

html:not([data-hover-effects="off"]) body :is(
  .home-social__link,
  .home-stat,
  .repo-card,
  .projects-gists__item,
  .hero-chip,
  .projects-section-link,
  .filter-btn,
  .filter-toggle
):hover,
html:not([data-hover-effects="off"]) body .site-paginator__button:hover:not(:disabled),
body :is(
  .home-social__link,
  .home-stat,
  .repo-card,
  .projects-gists__item,
  .hero-chip,
  .projects-section-link,
  .filter-btn,
  .filter-toggle
):focus-visible,
body .repo-card:focus-within,
body .site-paginator__button:focus-visible:not(:disabled) {
  transform: var(--theme-hover-transform);
  border-color: var(--ap-panel-highlight);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 20px 42px rgba(136, 118, 176, 0.18);
}

.home-title {
  text-shadow: var(--theme-text-effect);
}

.upload-form button[type="submit"],
.filter-btn.active {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-color) 86%, white 8%),
      color-mix(in srgb, var(--secondary-color) 84%, white 6%));
  color: #fffdfd;
  border-color: var(--ap-panel-border);
}