/* Brand background system
 * A: home scene illustration (handled in home.css)
 * B: explore / reward — gradient + thematic decor
 * C: ops / data — low-contrast gradient + soft glows
 *
 * Layers: .site-bg (base + glows) → .site-scrim (decor) → .page / glass
 */

.site-body {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg);
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--page-bg-start, var(--cream-50));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.site-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.site-body .page {
  position: relative;
  z-index: 1;
}

/* ---------- A: Home keeps its own hero scene ---------- */
.site-body--home .site-bg,
.site-body--home .site-scrim {
  display: none;
}

/* ---------- Inner pages: CSS gradients, not scene photos ---------- */
.site-body--inner .site-bg {
  opacity: 1;
  filter: none;
  transform: none;
  background-image: none;
  background:
    radial-gradient(circle at 90% 10%, var(--page-glow-a) 0%, transparent 32%),
    radial-gradient(circle at 8% 90%, var(--page-glow-b) 0%, transparent 36%),
    linear-gradient(
      180deg,
      var(--page-bg-start) 0%,
      var(--page-bg-middle) 52%,
      var(--page-bg-end) 100%
    );
}

.site-body--inner .site-scrim {
  background: none;
  opacity: var(--page-decor-opacity);
}

/* Soft ambient orbs live on .site-bg so decor opacity does not mute them */
.site-body--inner .site-bg::before,
.site-body--inner .site-bg::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}

.site-body--inner .site-bg::before {
  width: min(520px, 70vw);
  height: min(520px, 70vw);
  right: -120px;
  top: -160px;
  background: rgba(255, 208, 86, 0.28);
}

.site-body--inner .site-bg::after {
  width: min(420px, 60vw);
  height: min(420px, 60vw);
  left: -100px;
  bottom: -120px;
  background: rgba(111, 165, 221, 0.18);
}

/* Legacy site-bg--0N photo classes: neutralize (gradients win) */
.site-body--inner.site-bg--01 .site-bg,
.site-body--inner.site-bg--02 .site-bg,
.site-body--inner.site-bg--03 .site-bg,
.site-body--inner.site-bg--04 .site-bg,
.site-body--inner.site-bg--05 .site-bg {
  background-image: none;
}

/* ---------- C-tier: Practice / catalog / question bank ---------- */
.site-body--practice,
.site-body--learning,
.site-body--grades {
  --page-bg-start: #fffdf9;
  --page-bg-middle: #fffaf0;
  --page-bg-end: #f7faff;
  --page-glow-a: rgba(255, 208, 92, 0.18);
  --page-glow-b: rgba(104, 164, 255, 0.12);
  --page-decor-opacity: 0.045;
}

.site-body--practice .site-scrim,
.site-body--learning .site-scrim,
.site-body--grades .site-scrim {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%239aa3ad' stroke-width='1.2' opacity='0.55'%3E%3Ccircle cx='36' cy='42' r='3'/%3E%3Ccircle cx='88' cy='28' r='2'/%3E%3Ccircle cx='160' cy='48' r='2.5'/%3E%3Ccircle cx='210' cy='30' r='2'/%3E%3Cpath d='M28 120h40M34 112v16'/%3E%3Cpath d='M120 150c12-18 36-18 48 0'/%3E%3Cpath d='M170 170l18-8 6 18'/%3E%3Cpath d='M60 190c20 0 28-12 40-12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* ---------- C-tier: Parent center ---------- */
.site-body--parent {
  --page-bg-start: #faf9f6;
  --page-bg-middle: #fffaf0;
  --page-bg-end: #f1f6fb;
  --page-glow-a: rgba(255, 207, 92, 0.2);
  --page-glow-b: rgba(118, 165, 224, 0.15);
  --page-decor-opacity: 0.055;
}

.site-body--parent .site-bg {
  background:
    radial-gradient(circle at 75% 12%, var(--page-glow-a) 0%, transparent 32%),
    radial-gradient(circle at 15% 82%, var(--page-glow-b) 0%, transparent 38%),
    linear-gradient(140deg, var(--page-bg-start) 0%, var(--page-bg-middle) 48%, var(--page-bg-end) 100%);
}

.site-body--parent .site-scrim {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%238a93a0' stroke-width='1' opacity='0.5'%3E%3Cpath d='M20 60h240M20 120h240M20 180h240M20 240h240'/%3E%3Cpath d='M40 220c40-50 80-30 120-70 30-30 55-20 80-40'/%3E%3Ccircle cx='220' cy='70' r='28'/%3E%3Ccircle cx='220' cy='70' r='16'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  background-repeat: repeat;
}

/* ---------- B-tier: Ability map ---------- */
.site-body--ability-map {
  --page-bg-start: #fffdf8;
  --page-bg-middle: #fff8e7;
  --page-bg-end: #f4f8ff;
  --page-glow-a: rgba(255, 214, 93, 0.34);
  --page-glow-b: rgba(123, 184, 255, 0.22);
  --page-decor-opacity: 0.11;
}

.site-body--ability-map .site-bg {
  background:
    radial-gradient(circle at 78% 18%, var(--page-glow-a) 0%, transparent 34%),
    radial-gradient(circle at 12% 75%, var(--page-glow-b) 0%, transparent 38%),
    linear-gradient(135deg, var(--page-bg-start) 0%, var(--page-bg-middle) 48%, var(--page-bg-end) 100%);
}

.site-body--ability-map .site-scrim {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480'%3E%3Cg fill='none' stroke='%23c4a574' stroke-width='2' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M60 360C140 300 180 340 260 280c70-55 110-20 180-70 55-40 90-20 140-50' stroke-dasharray='6 10'/%3E%3Ccircle cx='60' cy='360' r='10' fill='%23e8d5a8' stroke='%23c4a574'/%3E%3Ccircle cx='260' cy='280' r='12' fill='%23e8d5a8' stroke='%23c4a574'/%3E%3Ccircle cx='440' cy='210' r='10' fill='%23e8d5a8' stroke='%23c4a574'/%3E%3Ccircle cx='580' cy='160' r='11' fill='%23e8d5a8' stroke='%23c4a574'/%3E%3C/g%3E%3Cg fill='%23a8c8e8' opacity='0.45'%3E%3Cellipse cx='120' cy='90' rx='42' ry='18'/%3E%3Cellipse cx='150' cy='90' rx='28' ry='14'/%3E%3Cellipse cx='500' cy='70' rx='36' ry='16'/%3E%3C/g%3E%3Cg fill='%23f0d060' opacity='0.55'%3E%3Cpath d='M320 48l4 12 12 1-9 8 3 12-10-6-10 6 3-12-9-8 12-1z'/%3E%3Cpath d='M560 300l3 9 9 1-7 6 2 9-7-5-7 5 2-9-7-6 9-1z'/%3E%3Cpath d='M90 200l3 9 9 1-7 6 2 9-7-5-7 5 2-9-7-6 9-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: min(720px, 110vw) auto;
  background-repeat: no-repeat;
  background-position: center 58%;
}

/* ---------- B-tier: Achievements ---------- */
.site-body--achievements {
  --page-bg-start: #fffdf8;
  --page-bg-middle: #fff4cf;
  --page-bg-end: #f5f9ff;
  --page-glow-a: rgba(255, 205, 62, 0.34);
  --page-glow-b: rgba(255, 148, 86, 0.18);
  --page-decor-opacity: 0.12;
}

.site-body--achievements .site-bg {
  background:
    radial-gradient(circle at 50% 18%, var(--page-glow-a) 0%, transparent 34%),
    radial-gradient(circle at 92% 82%, var(--page-glow-b) 0%, transparent 32%),
    radial-gradient(circle at 8% 72%, rgba(105, 169, 255, 0.14) 0%, transparent 32%),
    linear-gradient(145deg, var(--page-bg-start) 0%, var(--page-bg-middle) 50%, var(--page-bg-end) 100%);
}

.site-body--achievements .site-scrim {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='520' viewBox='0 0 720 520'%3E%3Cg fill='%23f0c44a' opacity='0.7'%3E%3Cpath d='M48 70l6 18 18 2-14 12 4 18-14-9-14 9 4-18-14-12 18-2z'/%3E%3Cpath d='M660 90l5 15 15 2-12 10 3 15-11-7-11 7 3-15-12-10 15-2z'/%3E%3Cpath d='M90 430l4 12 12 1-9 8 3 12-10-6-10 6 3-12-9-8 12-1z'/%3E%3Cpath d='M640 400l5 14 14 2-11 9 3 14-11-7-11 7 3-14-11-9 14-2z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f5a05e' stroke-width='3' opacity='0.45'%3E%3Cpath d='M20 120c40 20 60-10 100 10M600 60c30 25 70 10 100 30'/%3E%3Cpath d='M30 380c50-20 80 20 120 0M580 440c40-25 80 5 110-15'/%3E%3C/g%3E%3Cg fill='%23f5b927' opacity='0.35'%3E%3Cpath d='M360 36l8-20 8 20h22l-18 14 7 22-19-13-19 13 7-22-18-14z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: min(780px, 120vw) auto;
  background-repeat: no-repeat;
  background-position: center top;
}

/* Generic child pages (subject home etc.) — soft cream like map, quieter */
.site-body--child:not(.site-body--ability-map):not(.site-body--achievements):not(.site-body--home) {
  --page-bg-start: #fffdf8;
  --page-bg-middle: #fff8e8;
  --page-bg-end: #f5f8fc;
  --page-glow-a: rgba(255, 214, 93, 0.22);
  --page-glow-b: rgba(123, 184, 255, 0.14);
  --page-decor-opacity: 0.05;
}

.brand-logo {
  display: block;
  height: auto;
  background: transparent;
}

.brand-logo--header {
  width: min(180px, 52vw);
  margin-bottom: 8px;
}

.brand-logo--home {
  width: min(240px, 62vw);
  margin-bottom: 12px;
}

.glass-panel {
  background-color: var(--glass-fill);
  background-image: var(--glass-gradient);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}