/* ============================================================
   CAMPUS MATRIX — GLASSMORPHIC THEME LAYER
   Additive visual layer over design-system.css + app.css.
   Adds an animated gradient-mesh backdrop, frosted-glass
   surfaces, gradient accents and premium micro-interactions.
   Pure CSS — no markup/logic changes. Theme-aware (light+dark).
   ============================================================ */

/* ---------- Animated gradient-mesh backdrop ---------- */
body.app { position: relative; background: var(--bg); }
body.app::before {
  content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 520px at 6% -8%, rgba(99, 102, 241, .26), transparent 58%),
    radial-gradient(680px 520px at 102% 2%, rgba(6, 182, 212, .18), transparent 56%),
    radial-gradient(760px 620px at 48% 114%, rgba(139, 92, 246, .20), transparent 58%),
    radial-gradient(600px 500px at 88% 96%, rgba(47, 82, 224, .14), transparent 60%);
  filter: saturate(1.15);
  animation: cmMesh 22s ease-in-out infinite alternate;
}
@keyframes cmMesh {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(1.5%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1.5%, 1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { body.app::before { animation: none; } }
:root[data-theme="dark"] body.app::before { opacity: .55; }

/* keep the real app above the backdrop */
#app-root, .app-shell, .topbar, .sidebar, #app-modals { position: relative; z-index: 1; }

/* ---------- Frosted-glass surfaces ---------- */
.sidebar,
.topbar,
.panel,
.stat-card,
.kpi,
.overlay .modal,
.drawer,
.qa-btn,
.pick-row {
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: color-mix(in srgb, var(--text) 9%, transparent) !important;
}
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .overlay .modal,
:root[data-theme="dark"] .drawer {
  background: color-mix(in srgb, var(--surface) 62%, transparent) !important;
  border-color: color-mix(in srgb, #fff 12%, transparent) !important;
}

.panel { border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.sidebar { border-right: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.topbar { -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }

/* ---------- KPI / stat cards: gradient accent + lift ---------- */
.kpi, .stat-card {
  border-radius: var(--r-lg); position: relative; overflow: hidden;
  transition: transform var(--dur-norm) var(--ease), box-shadow var(--dur-norm);
}
.kpi::after, .stat-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand); opacity: .9;
}
.kpi:hover, .stat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-glow); }
.kpi-ico, .sc-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.kpi-val, .sc-val { letter-spacing: -.02em; }

/* ---------- Buttons: gradient primary + micro-interaction ---------- */
.btn { transition: transform var(--dur-btn) var(--ease), box-shadow var(--dur-fast), filter var(--dur-fast); }
.btn-primary {
  background-image: var(--grad-brand); border: none;
  box-shadow: 0 8px 22px -8px rgba(99, 102, 241, .6);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(99, 102, 241, .7); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary:hover, .btn-ghost:hover { transform: translateY(-1px); }

/* ---------- Sidebar nav polish ---------- */
.snav { border-radius: 12px; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.snav:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); transform: translateX(2px); }
.snav.active { background: var(--grad-brand); box-shadow: var(--sh-glow); }

/* ---------- Tables inside glass panels ---------- */
.data thead th { background: color-mix(in srgb, var(--surface) 40%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.data tbody tr { transition: background var(--dur-btn); }
.data tbody tr:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }

/* ---------- Badges / pills subtle depth ---------- */
.badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent); }

/* ---------- Page header: airy gradient wash ---------- */
.page-head { position: relative; }
.page-head h1, .page-head h2 { letter-spacing: -.025em; }

/* ---------- Modals / drawers: deeper glass ---------- */
.overlay { background: color-mix(in srgb, var(--navy-900) 42%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.overlay .modal { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.drawer { box-shadow: var(--sh-lg); }

/* ---------- Empty states: soft gradient orb ---------- */
.empty-state .empty-ico, .empty .empty-ico {
  background: var(--grad-brand-soft);
}

/* ---------- Inputs: subtle glass focus ---------- */
.input:focus, .select:focus, .textarea:focus {
  box-shadow: var(--ring);
  border-color: var(--brand);
}

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 40%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 55%, transparent); background-clip: padding-box; }

/* ---------- Route enter animation refinement ---------- */
.route { animation: cmRouteIn var(--dur-slow) var(--ease-out); }
@keyframes cmRouteIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   UNIVERSAL (marketing + auth + app) — dynamic, Lovable-style
   ============================================================ */

/* ---- Button micro-interactions everywhere ---- */
.btn { position: relative; overflow: hidden; }
.btn .cm-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); animation: cmRipple .6s var(--ease); pointer-events: none; }
:root[data-theme="dark"] .btn .cm-ripple { background: rgba(255, 255, 255, .28); }
@keyframes cmRipple { to { transform: scale(2.8); opacity: 0; } }
.btn-secondary, .btn-ghost, .btn-outline { transition: transform var(--dur-btn) var(--ease), box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.btn-secondary:hover, .btn-outline:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }

/* ---- Marketing surfaces: glass + hover lift ---- */
.nav {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.nav-item { transition: color var(--dur-fast), transform var(--dur-fast); }
.nav-item:hover { transform: translateY(-1px); }
.price-card, .role-card, .tcard, .stat-tile, .float-card, .mock-window, .dropdown, .mobile-menu {
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow), border-color var(--dur-slow);
}
.price-card, .role-card, .tcard, .stat-tile {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.price-card:hover, .role-card:hover, .tcard:hover, .stat-tile:hover {
  transform: translateY(-7px); box-shadow: var(--sh-lg); border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.price-card.price-badge, .price-card.featured { box-shadow: var(--sh-glow); }

/* ---- Marketing hero: soft animated mesh behind ---- */
body:not(.app) .hero, body:not(.app) .page-hero { position: relative; }
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 12% -10%, rgba(99, 102, 241, .18), transparent 60%),
    radial-gradient(560px 420px at 100% 0%, rgba(6, 182, 212, .14), transparent 58%);
  animation: cmMesh 20s ease-in-out infinite alternate;
}
.hero > *, .page-hero > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero::before, .page-hero::before { animation: none; } }

/* ---- Auth pages: glass card + mesh ---- */
body[data-page] .auth-visual { position: relative; overflow: hidden; }
.auth-card, .card { transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow); }

/* ---- Scroll-reveal (driven by enhance.js) ---- */
.cm-reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.cm-reveal.cm-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) { .cm-reveal, .cm-reveal.cm-in { opacity: 1 !important; transform: none !important; } }

/* ---- Gradient heading utility ---- */
.cm-grad-text, .hero h1 .grad, .page-hero h1 .grad {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Links & interactive polish ---- */
a { transition: color var(--dur-btn); }
.tab-btn, .tabs button { transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }

/* ============================================================
   HERO — visible entrance + floating cards (Lovable/Wix vibe)
   ============================================================ */
@media (min-width: 861px) {
  body:not(.app) .hero-layout > *:nth-child(1) { animation: cmHeroIn .7s var(--ease) both; }
  body:not(.app) .hero-layout > *:nth-child(2) { animation: cmHeroIn .7s var(--ease) .12s both; }
}
@keyframes cmHeroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Floating cards + mock window gently bob — clearly "alive" */
.float-card { animation: cmFloatY 6s ease-in-out infinite; will-change: transform; }
.float-card:nth-of-type(2) { animation-duration: 7.5s; animation-delay: -1.2s; }
.float-card:nth-of-type(3) { animation-duration: 8.5s; animation-delay: -2.4s; }
.hero-visual .mock-window, .hero-visual .phone { animation: cmFloatY 9s ease-in-out infinite; }
@keyframes cmFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .float-card, .hero-visual .mock-window, .hero-visual .phone, body:not(.app) .hero-layout > * { animation: none !important; }
}

/* Stronger, clearly visible hero mesh */
.hero::before, .page-hero::before {
  background:
    radial-gradient(680px 460px at 10% -6%, rgba(99, 102, 241, .30), transparent 60%),
    radial-gradient(620px 460px at 100% 4%, rgba(6, 182, 212, .22), transparent 58%),
    radial-gradient(560px 520px at 62% 110%, rgba(139, 92, 246, .22), transparent 60%);
}

/* Floating cards get a crisper glass so the effect reads */
.float-card {
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--sh-lg);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* ============================================================
   BOLD — dramatic, unmistakable Lovable-style pass
   ============================================================ */

/* Full-gradient hero + section headings */
body:not(.app) .hero h1, body:not(.app) .page-hero h1 {
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--royal-500) 52%, var(--violet-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] body:not(.app) .hero h1,
:root[data-theme="dark"] body:not(.app) .page-hero h1 {
  background: linear-gradient(120deg, #ffffff 0%, var(--indigo-400) 55%, var(--violet-400) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Animated gradient primary buttons + shimmer sweep */
.btn-primary {
  background-image: var(--grad-brand); background-size: 200% 200%;
  animation: cmGrad 7s ease infinite;
}
@keyframes cmGrad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .7s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { .btn-primary { animation: none; } .btn-primary::after { display: none; } }

/* Gradient-ring cards on hover (clearly premium) */
.price-card:hover, .role-card:hover, .tcard:hover, .stat-tile:hover, .feature:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent), var(--sh-lg);
}

/* Animated gradient CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--royal-500), var(--indigo-500) 50%, var(--violet-500)) !important;
  background-size: 220% 220%; animation: cmGrad 10s ease infinite; color: #fff !important;
}
.cta-band * { color: #fff !important; }

/* Section headings: bolder, tighter, with a gradient kicker underline */
body:not(.app) section h2 { letter-spacing: -.03em; }

/* Nav CTA + logo hover pop */
.nav .btn-primary { box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .7); }
.nav .brand:hover, .school-logo:hover { transform: translateY(-1px); }
.nav .brand, .school-logo { transition: transform var(--dur-fast); }

/* Whole marketing page gets a faint fixed mesh (behind translucent sections) */
body:not(.app)::after {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 560px at 4% 8%, rgba(99, 102, 241, .10), transparent 60%),
    radial-gradient(720px 560px at 98% 40%, rgba(6, 182, 212, .08), transparent 58%),
    radial-gradient(720px 620px at 40% 100%, rgba(139, 92, 246, .10), transparent 60%);
  animation: cmMesh 26s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { body:not(.app)::after { animation: none; } }

/* ============================================================
   DECORATIVE IMAGERY — dot-grid texture, blobs, patterns
   Pure CSS/SVG (always render, no external assets)
   ============================================================ */

/* Dot-grid texture behind hero & CTA (adds depth like Lovable) */
.hero::after, .page-hero::after, .cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 16%, transparent) 1px, transparent 0);
  background-size: 26px 26px; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.cta-band::after { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .22) 1px, transparent 0); opacity: .6; }
.cta-band { position: relative; overflow: hidden; }
.cta-band > * { position: relative; z-index: 1; }

/* Floating gradient blob accents on hero (SVG data-URI, animated) */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; z-index: 0; width: 320px; height: 320px; right: -6%; top: -8%;
  background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .55), rgba(139, 92, 246, .35) 45%, transparent 70%);
  filter: blur(14px); border-radius: 50%; animation: cmFloatY 10s ease-in-out infinite; pointer-events: none;
}
.hero-visual > * { position: relative; z-index: 1; }

/* Soft blob accent on feature/pricing sections headers */
body:not(.app) section { position: relative; }

/* Logo cloud / trust: subtle animated shimmer on grayscale logos */
.logo-cloud img, .hero-trust img { transition: filter var(--dur-slow), transform var(--dur-slow); }
.logo-cloud img:hover, .hero-trust img:hover { filter: none; transform: scale(1.06); }

/* Avatars & icon tiles get a soft gradient sheen */
.avatar, .feature-icon, .kpi-ico, .sc-ico, .dd-ico, .qa-ico {
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 60%);
}
@media (prefers-reduced-motion: reduce) { .hero-visual::before { animation: none; } }

/* ---- Auth pages: bold animated gradient panel + glass card ---- */
.auth-visual {
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--indigo-600) 52%, var(--violet-500) 100%) !important;
  background-size: 220% 220%; animation: cmGrad 16s ease infinite;
}
.auth-card {
  border-radius: var(--r-lg);
}
@media (prefers-reduced-motion: reduce) { .auth-visual { animation: none; } }

/* ---- 404 / error pages ---- */
.error-code, .err-code { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }