/**
 * Maths Made Easy — mathematical theme layer
 * Graph grid, floating symbols, geometry, cosmic accents
 */

:root {
  --bg-deep: #040612;
  --bg-mid: #0a1030;
  --accent-gold: #f5c842;
  --accent-cyan: #3ee8ff;
  --accent-math: #7b9fff;
  --gradient-brand: linear-gradient(135deg, #5b8cff 0%, #9d6bff 38%, #ff6b9d 72%, #f5c842 100%);
  --gradient-hero: linear-gradient(145deg, rgba(91, 140, 255, 0.18) 0%, rgba(157, 107, 255, 0.1) 45%, rgba(62, 232, 255, 0.06) 100%);
  --math-grid-color: rgba(91, 140, 255, 0.07);
  --math-grid-major: rgba(91, 140, 255, 0.12);
  --font-display: "Syne", "Outfit", system-ui, sans-serif;
}

/* Richer cosmic maths backdrop — body gradient lives in style.css */

.bg-scene {
  z-index: 0;
}

/* Coordinate grid */
.bg-math-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--math-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--math-grid-color) 1px, transparent 1px),
    linear-gradient(var(--math-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--math-grid-major) 1px, transparent 1px);
  background-size:
    24px 24px,
    24px 24px,
    120px 120px,
    120px 120px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 20%, transparent 75%);
  opacity: 0.9;
}

/* Soft light rays from top */
.bg-math-rays {
  position: absolute;
  inset: -20% -10%;
  background: conic-gradient(
    from 200deg at 50% 0%,
    transparent 0deg,
    rgba(91, 140, 255, 0.06) 30deg,
    transparent 60deg,
    rgba(157, 107, 255, 0.05) 120deg,
    transparent 150deg,
    rgba(62, 232, 255, 0.04) 220deg,
    transparent 260deg
  );
  animation: rays-spin 120s linear infinite;
  opacity: 0.7;
}

@keyframes rays-spin {
  to { transform: rotate(360deg); }
}

/* Formula ring watermark */
.bg-math-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(140vw, 900px);
  height: min(140vw, 900px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(91, 140, 255, 0.12);
  box-shadow:
    inset 0 0 80px rgba(91, 140, 255, 0.04),
    0 0 0 40px rgba(91, 140, 255, 0.02),
    0 0 0 80px rgba(157, 107, 255, 0.015);
  animation: ring-pulse 8s ease-in-out infinite;
}

.bg-math-ring::before {
  content: "a²+b²=c² · πr² · ½×b×h · n! · f(x) · y=mx+c";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(245, 200, 66, 0.08);
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.8vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  color: rgba(168, 178, 217, 0.22);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8%;
  text-align: center;
  text-transform: uppercase;
  animation: ring-pulse 8s ease-in-out infinite reverse;
}

@keyframes ring-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.03); }
}

/* Floating math symbols */
.bg-math-symbol {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  text-shadow: 0 0 30px rgba(91, 140, 255, 0.15);
  pointer-events: none;
  animation: symbol-float 22s ease-in-out infinite;
}

.bg-math-symbol--1 { top: 8%; left: 6%; font-size: 3.2rem; color: rgba(91, 140, 255, 0.14); animation-delay: 0s; }
.bg-math-symbol--2 { top: 14%; right: 8%; font-size: 2.4rem; color: rgba(157, 107, 255, 0.12); animation-delay: -3s; }
.bg-math-symbol--3 { top: 38%; left: 4%; font-size: 2.8rem; color: rgba(62, 232, 255, 0.11); animation-delay: -6s; }
.bg-math-symbol--4 { top: 55%; right: 5%; font-size: 2.2rem; animation-delay: -9s; }
.bg-math-symbol--5 { bottom: 28%; left: 10%; font-size: 2rem; color: rgba(245, 200, 66, 0.13); animation-delay: -12s; }
.bg-math-symbol--6 { bottom: 18%; right: 12%; font-size: 2.6rem; color: rgba(94, 224, 168, 0.11); animation-delay: -15s; }
.bg-math-symbol--7 { top: 72%; left: 18%; font-size: 1.8rem; animation-delay: -4s; }
.bg-math-symbol--8 { top: 22%; left: 42%; font-size: 1.6rem; color: rgba(255, 179, 71, 0.12); animation-delay: -8s; }
.bg-math-symbol--9 { bottom: 42%; right: 22%; font-size: 2rem; color: rgba(255, 107, 157, 0.1); animation-delay: -11s; }
.bg-math-symbol--10 { top: 48%; right: 38%; font-size: 1.5rem; animation-delay: -14s; }
.bg-math-symbol--11 { bottom: 8%; left: 38%; font-size: 2.3rem; color: rgba(91, 140, 255, 0.1); animation-delay: -7s; }
.bg-math-symbol--12 { top: 62%; left: 72%; font-size: 1.7rem; animation-delay: -18s; }

@keyframes symbol-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.65; }
  25% { transform: translate(8px, -12px) rotate(4deg); opacity: 1; }
  50% { transform: translate(-6px, 8px) rotate(-3deg); opacity: 0.75; }
  75% { transform: translate(10px, 6px) rotate(2deg); opacity: 0.9; }
}

/* Extra orb — gold accent */
.bg-orb--4 {
  width: 180px;
  height: 180px;
  top: 15%;
  right: 25%;
  background: rgba(245, 200, 66, 0.18);
  animation-delay: -9s;
  opacity: 0.4;
}

/* Wireframe geometry */
.bg-math-geo {
  position: absolute;
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  opacity: 0.35;
  animation: geo-drift 40s ease-in-out infinite;
}

.bg-math-geo__tri,
.bg-math-geo__circle,
.bg-math-geo__sq {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.bg-math-geo__tri {
  stroke: rgba(62, 232, 255, 0.2);
  stroke-dasharray: 8 6;
}

.bg-math-geo__circle {
  stroke: rgba(157, 107, 255, 0.18);
}

.bg-math-geo__sq {
  stroke: rgba(245, 200, 66, 0.15);
  stroke-dasharray: 4 8;
}

@keyframes geo-drift {
  0%, 100% { transform: translate(-50%, -48%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -46%) rotate(6deg) scale(1.04); }
}

/* Header — maths hero card */
.header.hero {
  background:
    var(--gradient-hero),
    var(--gradient-surface);
  border-color: rgba(91, 140, 255, 0.22);
  box-shadow:
    var(--shadow),
    0 0 50px rgba(91, 140, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.header.hero::after {
  content: "∑ ∫ π √ ∞";
  position: absolute;
  right: -8px;
  bottom: -6px;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(91, 140, 255, 0.06);
  pointer-events: none;
  line-height: 1;
}

.header__title {
  font-family: var(--font-display);
  background: linear-gradient(135deg, #fff 0%, #b8d4ff 40%, var(--accent-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.header__logo {
  background: linear-gradient(145deg, #5b8cff 0%, #9d6bff 50%, #3ee8ff 100%);
  box-shadow:
    0 8px 32px rgba(91, 140, 255, 0.5),
    0 0 0 3px rgba(245, 200, 66, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Dashboard cards — maths sparkle border */
.dashboard__card {
  border-color: rgba(91, 140, 255, 0.15);
}

.dashboard__card::before {
  background: linear-gradient(
    145deg,
    rgba(91, 140, 255, 0.35),
    rgba(245, 200, 66, 0.15) 40%,
    transparent 70%
  );
  opacity: 0.75;
}

.dashboard__card--tutorial {
  background:
    linear-gradient(160deg, rgba(91, 140, 255, 0.12) 0%, transparent 55%),
    var(--gradient-surface);
}

.dashboard__card--test {
  background:
    linear-gradient(160deg, rgba(255, 179, 71, 0.1) 0%, transparent 55%),
    var(--gradient-surface);
}

.dashboard__card--games {
  background:
    linear-gradient(160deg, rgba(157, 107, 255, 0.12) 0%, transparent 55%),
    var(--gradient-surface);
}

.dashboard__card--progress {
  background:
    linear-gradient(160deg, rgba(255, 107, 157, 0.1) 0%, transparent 55%),
    var(--gradient-surface);
}

.dashboard__label {
  font-family: var(--font-display);
}

/* Modal — maths frame */
.modal {
  background: linear-gradient(165deg, #1a2248 0%, #0e1430 55%, #12102a 100%);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(91, 140, 255, 0.15),
    0 0 80px rgba(157, 107, 255, 0.15);
}

.modal__content::before {
  height: 4px;
  background: linear-gradient(90deg, #5b8cff, #9d6bff, #f5c842, #3ee8ff);
}

.modal__title {
  font-family: var(--font-display);
}

/* Auth card glow */
.auth-card {
  background:
    linear-gradient(160deg, rgba(91, 140, 255, 0.14) 0%, transparent 50%),
    var(--gradient-surface);
  border-color: rgba(91, 140, 255, 0.25);
  box-shadow:
    var(--shadow),
    0 0 60px rgba(91, 140, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.auth-card__title {
  font-family: var(--font-display);
  background: linear-gradient(135deg, #fff, #a8c8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-btn--primary {
  background: var(--gradient-brand);
  box-shadow: 0 8px 32px rgba(91, 140, 255, 0.4);
}

/* Role dashboards */
.role-header .header__title {
  font-family: var(--font-display);
}

.role-panel {
  border-color: rgba(91, 140, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(91, 140, 255, 0.06) 0%, transparent 40%),
    var(--gradient-surface);
}

.role-stat-card {
  border-color: rgba(91, 140, 255, 0.1);
}

/* Tutorial lesson cards */
.lesson {
  border-color: rgba(91, 140, 255, 0.1);
}

.lesson__heading {
  font-family: var(--font-display);
}

.tutorial__title {
  font-family: var(--font-display);
  background: linear-gradient(135deg, #fff 30%, #9ec5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rewards bar maths chip */
.rewards-bar {
  border-color: rgba(245, 200, 66, 0.25);
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.12), rgba(245, 200, 66, 0.08));
}

.rewards-bar__avatar {
  background: linear-gradient(145deg, #5b8cff, #f5c842);
}

/* User nav */
.user-nav {
  border-color: rgba(91, 140, 255, 0.15);
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.08), rgba(0, 0, 0, 0.2));
}

@media (prefers-reduced-motion: reduce) {
  .bg-math-rays,
  .bg-math-ring,
  .bg-math-symbol,
  .bg-math-geo {
    animation: none;
  }
}

@media (max-width: 480px) {
  .bg-math-symbol {
    opacity: 0.5;
  }

  .bg-math-symbol--8,
  .bg-math-symbol--10,
  .bg-math-symbol--12 {
    display: none;
  }
}