/* glass.css — Style B glassmorphism finishes + background mesh
 * Per docs/FRONTEND_TRD_v2.md §6 + §6.7 (v1.2).
 *
 * Component-level glass: scoped to nav, hero card, feature cards, sticky audit
 * progress bar, booking modal, deal score badge, FOMO ticker.
 * Page-wide layout (headings, body containers, footer, grid) stays FLAT.
 */

/* ============================================================
 * §6.7 — Background Mesh (load-bearing visual element)
 * Vivid-violet stops at ≤20% opacity (currently 18%)
 * Periwinkle stops at ≤10% opacity (currently 8%)
 * Stop centers positioned to keep ≥200px clearance from glass panels per breakpoint.
 * ============================================================ */
body[data-route="students"] {
  background:
    radial-gradient(at 20% 30%, rgba(158, 55, 159, 0.18), transparent 50%),
    radial-gradient(at 80% 70%, rgba(232, 106, 240, 0.12), transparent 50%),
    radial-gradient(at 50% 50%, rgba(123, 179, 255, 0.08), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
  animation: mesh-drift 60s ease-in-out infinite alternate;
  min-height: 100vh;
}

@keyframes mesh-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  100% { background-position: 10% 5%, 90% 95%, 55% 45%; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="students"] {
    animation: none;
  }
}

/* ============================================================
 * Glass panel base — every glass surface includes mandatory scrim
 * ============================================================ */
.glass-panel {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-scrim);
  pointer-events: none;
  z-index: 1;
}
.glass-panel > * {
  position: relative;
  z-index: 2;
}

/* ============================================================
 * .c-btn--b — Primary CTA (pink, glowing)
 * ============================================================ */
.c-btn--b {
  background: var(--color-cta);
  color: var(--color-cta-text);
  box-shadow: 0 0 20px var(--color-cta-glow);
}
.c-btn--b:hover {
  background: var(--color-cta-hover);
  box-shadow: 0 0 36px var(--color-cta-glow), 0 4px 16px rgba(0, 0, 0, 0.4);
}
.c-btn--b:active {
  box-shadow: 0 0 12px var(--color-cta-glow);
}

/* Secondary CTA (periwinkle outline) */
.c-btn--b--secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 1.5px solid var(--color-secondary);
  box-shadow: none;
}
.c-btn--b--secondary:hover {
  background: rgba(123, 179, 255, 0.12);
  box-shadow: 0 0 20px var(--color-cta-2-glow);
  color: var(--color-secondary);
}

/* ============================================================
 * .c-card--b — Glass feature card (composes glass-panel base)
 * ============================================================ */
.c-card--b {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.c-card--b::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-scrim);
  pointer-events: none;
  z-index: 1;
}
.c-card--b > * {
  position: relative;
  z-index: 2;
}
.c-card--b:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(232, 106, 240, 0.32);
}

/* ============================================================
 * .c-badge--b — pink/periwinkle pill
 * ============================================================ */
.c-badge--b {
  background: rgba(232, 106, 240, 0.18);
  color: var(--color-primary);
  border: 1px solid rgba(232, 106, 240, 0.32);
}
.c-badge--b--secondary {
  background: rgba(123, 179, 255, 0.18);
  color: var(--color-secondary);
  border: 1px solid rgba(123, 179, 255, 0.32);
}
.c-badge--b--success { background: rgba(109, 170, 69, 0.18); color: var(--color-success); border-color: rgba(109, 170, 69, 0.32); }
.c-badge--b--warning { background: rgba(253, 171, 67, 0.18); color: var(--color-warning); border-color: rgba(253, 171, 67, 0.32); }
.c-badge--b--error   { background: rgba(255, 107, 107, 0.18); color: var(--color-error); border-color: rgba(255, 107, 107, 0.32); }

/* ============================================================
 * .c-ticker--b — FOMO Ticker (animated marquee, pink dot)
 * Pairs with .c-ticker__list--marquee from components.css.
 * ============================================================ */
.c-ticker--b {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: var(--glass-border);
  border-bottom: var(--glass-border);
  color: var(--color-text);
  position: relative;
}
.c-ticker--b::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-scrim);
  pointer-events: none;
  z-index: 1;
}
.c-ticker--b > * {
  position: relative;
  z-index: 2;
}
.c-ticker--b .c-ticker__item::before {
  content: "●";
  color: var(--color-primary);
  margin-right: var(--space-2);
  text-shadow: 0 0 8px var(--color-cta-glow);
}

/* ============================================================
 * Stat card — pink glow feature stat for /students hero
 * ============================================================ */
.stat-card-b {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat-card-b::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-scrim);
  pointer-events: none;
  z-index: 1;
}
.stat-card-b > * {
  position: relative;
  z-index: 2;
}
.stat-card-b .stat-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--color-text);
  display: block;
  line-height: 1;
}
.stat-card-b .stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-2);
}

/* ============================================================
 * R1 mitigation — Low-DPI blur cap for sub-$300 Android GPUs
 * @media (max-resolution: 1.5dppx) and (max-width: 430px) → drop blur to 6px
 * ============================================================ */
@media (max-resolution: 1.5dppx) and (max-width: 430px) {
  :root, [data-theme="dark"] {
    --glass-blur: blur(6px);
  }
}

/* ============================================================
 * Reduced-motion fallback — glass falls to solid, hover transforms removed
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .glass-panel,
  .c-card--b,
  .c-ticker--b,
  .stat-card-b {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-surface-2);
  }
}

/* ============================================================
 * @supports fallback — older browsers without backdrop-filter
 * ============================================================ */
@supports not (backdrop-filter: blur(1px)) {
  .glass-panel,
  .c-card--b,
  .c-ticker--b,
  .stat-card-b {
    background: rgba(26, 26, 50, 0.92);
  }
}

/* ============================================================
 * R2 mitigation — Forced-colors mode (Windows High Contrast)
 * Glass blur strips in high-contrast; restore visibility with explicit borders.
 * ============================================================ */
@media (forced-colors: active) {
  .c-card--b,
  .glass-panel,
  .c-ticker--b,
  .stat-card-b {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .c-card--b::before,
  .glass-panel::before,
  .c-ticker--b::before,
  .stat-card-b::before {
    display: none;
  }
  .c-btn--b {
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  body[data-route="students"] {
    background: Canvas;
    animation: none;
  }
}