/* ═══════════════════════════════════════════════════════════════════
   dashboard-v2.css — overlay refresh (loads LAST, wins by source order)
   ───────────────────────────────────────────────────────────────────
   Owns: unified spacing/glass tokens · 3D parallax panda scene ·
   hero compaction + CTA promotion · aurora layer · reveal fail-safe.
   Does NOT touch: .bento-* (app mode), inline-script ID contract.
   Depth stack: aurora(-3) → blobs(-2) → panda scene(0) → content(1).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Single gap scale (was 1.5rem / 1.25rem / 12px mix) ────────── */
.dash-shell { gap: var(--b-space-5, 1.25rem); }
.dash-main {
  display: flex;
  flex-direction: column;
  gap: var(--b-space-5, 1.25rem);
}
.dash-quest-row { gap: var(--b-space-5, 1.25rem); }
#weak-areas-mount { margin-top: 0; }

/* ── 2. One glass recipe for every surface ────────────────────────── */
.dash-hero,
.quest-card,
.dash-skill-tree,
.dash-access-banner,
.dash-sidebar .lesson-library {
  border-radius: var(--b-radius-xl, 20px);
  border: 1px solid rgba(232, 160, 32, 0.10);
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  box-shadow: var(--b-shadow-3, 0 10px 28px rgba(0,0,0,0.5));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (max-width: 768px) {
  .dash-hero, .quest-card, .dash-skill-tree, .dash-sidebar .lesson-library {
    backdrop-filter: blur(8px); /* cheaper on mobile GPUs */
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ── 3. Entrance animations — CSS-only, zero JS dependency.
       The dashboard's inline script REPLACES section nodes after data load,
       which detaches IntersectionObserver/class-based reveals (verified live:
       .lesson-library stayed at opacity:0 even with .is-revealed). A pure
       animation always ends visible — and simply re-plays if a node is
       re-created, which doubles as a pleasant "content arrived" cue. */
.dash-hero,
.dash-quest-row,
.dash-skill-tree,
#weak-areas-mount,
.dash-sidebar .lesson-library {
  animation: v2EnterUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dash-quest-row              { animation-delay: 90ms; }
.dash-skill-tree             { animation-delay: 160ms; }
#weak-areas-mount            { animation-delay: 220ms; }
.dash-sidebar .lesson-library{ animation-name: v2EnterSide; animation-delay: 120ms; }
@keyframes v2EnterUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes v2EnterSide { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dash-hero, .dash-quest-row, .dash-skill-tree, #weak-areas-mount,
  .dash-sidebar .lesson-library { animation: none; }
}

/* ── 4. 🐼 3D panda scene ─────────────────────────────────────────────
   Two depth layers inside .dash-bg-scene; ambient-motion.js drives them
   with mouse (desktop) / gyro (mobile). Base drifts slow+opposite, the
   cut-out panda follows faster — the speed gap reads as real depth. */
.dash-bg-scene {
  transform-style: preserve-3d;
  will-change: transform;
}
.dash-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
.dash-bg-layer--base {
  background-image: url("/assets/dashboard-bg.png");
  background-image: image-set(
    url("/assets/dashboard-bg.webp") type("image/webp"),
    url("/assets/dashboard-bg.png") type("image/png")
  );
  /* cinematic depth-of-field: the environment recedes — dark + soft blur.
     scale(1.1) hides both parallax travel AND the blur's edge fringe. */
  transform: scale(1.1);
  filter: saturate(0.85) brightness(0.55) blur(7px);
  z-index: 1;
}
.dash-bg-layer--panda {
  background-image: url("/assets/dashboard-bg-panda.png");
  background-image: image-set(
    url("/assets/dashboard-bg-panda.webp") type("image/webp"),
    url("/assets/dashboard-bg-panda.png") type("image/png")
  );
  transform: scale(1.04);
  z-index: 2;
  /* the panda must sit BEHIND the glass cards, not fight them:
     dimmed + warm gold rim-light that separates it from the blurred bg */
  opacity: 0.55;
  filter: brightness(0.82) contrast(1.05)
          drop-shadow(0 0 34px rgba(232,160,32,0.22));
  animation: pandaBreathe 8s ease-in-out infinite;
}
/* keep the existing wash + vignette ABOVE the layers */
.dash-bg-scene::before, .dash-bg-scene::after { z-index: 3; }
/* extra content scrim: vertical falloff behind the main column so text on
   glass cards stays readable while the panda peeks through the gaps */
.dash-bg-scene .dash-bg-layer--panda::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(3,2,10,0.30) 0%,
    rgba(3,2,10,0.12) 35%,
    rgba(3,2,10,0.38) 100%);
}

@keyframes pandaBreathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.012; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-bg-layer--panda { animation: none; }
  .dash-bg-scene, .dash-bg-layer { transform: none !important; }
}

/* ── 5. Hero compaction + CTA promotion ───────────────────────────────
   Visual order via flex `order` — DOM (and the inline script's IDs)
   untouched. The "continue lesson" CTA moves above the fold. */
.dash-hero { display: flex; flex-direction: column; }
.dash-hero-upper    { order: 1; }
.dash-hero-lesson,
#heroLesson         { order: 2; }
.dash-hero-divider  { order: 3; }
.dash-extras-toggle { order: 4; }

/* CTA: dominant, warm, breathing glow */
#heroLessonBtn {
  background: var(--b-grad-cta, linear-gradient(135deg, #FCD34D, #E8A020));
  color: #0a0a10;
  font-weight: 800;
  box-shadow: 0 8px 28px rgba(232,160,32,0.35);
  animation: ctaGlow 3.6s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 8px 28px rgba(232,160,32,0.30); }
  50%      { box-shadow: 0 10px 38px rgba(232,160,32,0.55); }
}
@media (prefers-reduced-motion: reduce) { #heroLessonBtn { animation: none; } }

/* ── 6. Collapsible activity (streak + heatmap) ───────────────────── */
.dash-extras-toggle { border: 0; }
.dash-extras-summary {
  display: none; /* desktop: always open, no toggle UI */
  cursor: pointer;
  list-style: none;
  user-select: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(245,241,230,0.75);
}
.dash-extras-summary::-webkit-details-marker { display: none; }
.dash-extras-chev { margin-inline-start: auto; transition: rotate 200ms ease; }
.dash-extras-toggle[open] .dash-extras-chev { rotate: 180deg; }
@media (max-width: 768px) {
  .dash-extras-summary { display: flex; }
  .dash-extras-toggle:not([open]) { margin-bottom: 0; }
}

/* ── 7. Mobile hero rhythm — greeting+stats+CTA ≤ ~60vh @390px ────── */
@media (max-width: 768px) {
  .dash-hero { padding: var(--b-space-5, 1.25rem) var(--b-space-4, 1rem); }
  .dash-hero-name { font-size: clamp(1.35rem, 5.5vw, 1.8rem); }
  .dash-hero-stats { gap: var(--b-space-4, 1rem); }
  .dash-hero-divider { margin-block: var(--b-space-4, 1rem); }
  .quest-card.weekly { padding: var(--b-space-4, 1rem); }
}

/* ── 8. Aurora — slow tri-color drift behind everything ───────────── */
.dashboard-main::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 75% 12%, rgba(232,160,32,0.07), transparent 70%),
    radial-gradient(35% 30% at 15% 85%, rgba(139,92,246,0.06), transparent 70%),
    radial-gradient(30% 25% at 50% 50%, rgba(6,182,212,0.04), transparent 70%);
  animation: v2Aurora 36s ease-in-out infinite alternate;
}
@keyframes v2Aurora {
  from { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  to   { transform: translate3d(2%,-2%,0) rotate(3deg) scale(1.06); }
}
@media (max-width: 768px)              { .dashboard-main::before { animation-duration: 60s; } }
@media (prefers-reduced-motion: reduce){ .dashboard-main::before { animation: none; } }

/* ── 9. Sidebar polish + perceived performance ────────────────────── */
.dash-sidebar .lib-header .lib-title { display: none; } /* duplicate heading */
.dash-skill-tree,
#weak-areas-mount {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}