/* ══════════════════════════════════════════════════════════════════════
   WeissGuitar Learn — Base Styles
   Reset, body, canvas, animations, scrollbar, focus, accessibility.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Document ──────────────────────────────────────────────────────── */
html { height: 100%; scroll-behavior: smooth; }

body {
  min-height: 100% !important;
  background: var(--bg-deep) !important;
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  line-height: 1.7;
  font-size: 16px;
}

/* ── Skip Nav (accessibility) ──────────────────────────────────────── */
.wg-skip-nav {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: 0.5rem 1rem; background: var(--purple); color: #fff;
  font-size: 0.875rem; font-weight: 600; border-radius: 0 0 6px 6px; text-decoration: none;
}
.wg-skip-nav:focus { top: 0; }

/* ── Background Canvas ─────────────────────────────────────────────── */
.bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-orb { position: absolute; border-radius: 50%; filter: blur(var(--orb-blur)); will-change: transform; }
.bg-orb-1 { width: 900px; height: 900px; top: -15%; left: 10%; background: radial-gradient(circle, var(--orb-1-color), transparent 70%); animation: orbFloat1 22s ease-in-out infinite; }
.bg-orb-2 { width: 700px; height: 700px; bottom: -5%; right: 5%; background: radial-gradient(circle, var(--orb-2-color), transparent 70%); animation: orbFloat2 28s ease-in-out infinite; }
.bg-orb-3 { width: 500px; height: 500px; top: 35%; left: 50%; background: radial-gradient(circle, var(--orb-3-color), transparent 70%); animation: orbFloat3 18s ease-in-out infinite; }
.bg-canvas::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: var(--orb-noise-opacity);
}

/* ── Keyframes ─────────────────────────────────────────────────────── */
@keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-50px, 40px) scale(1.08); } 66% { transform: translate(30px, -30px) scale(0.95); } }
@keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.1); } }
@keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, 50px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lessonFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes checkIn { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes completePulse { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 60% { transform: scale(0.98); } 100% { transform: scale(1); } }
@keyframes wgSpin { to { transform: rotate(360deg); } }

.lesson-entering { animation: lessonFadeUp 0.45s var(--ease-out) both; }

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ── Focus ─────────────────────────────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }

/* ── Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .bg-orb { animation: none !important; }
}

/* ── Backdrop Filter Fallback ──────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .header { background: rgba(30, 25, 45, 0.98) !important; }
  .sidebar { background: rgba(30, 25, 45, 0.98) !important; }
  .main { background: rgba(30, 25, 45, 0.85) !important; }
  .lesson-container { background: rgba(18, 14, 32, 0.85) !important; }
  .wg-insight-box, .wg-exercise-box, .wg-practice-tip, .wg-mentorship-moment { background: rgba(18, 14, 32, 0.92) !important; }
}
@supports not (backdrop-filter: blur(1px)) {
  [data-theme="light"] .header { background: rgba(255, 255, 255, 0.96) !important; }
  [data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.96) !important; }
  [data-theme="light"] .main { background: rgba(248, 246, 243, 0.95) !important; }
  [data-theme="light"] .lesson-container { background: rgba(255, 255, 255, 0.95) !important; }
}

/* ── Auth Loading Overlay ──────────────────────────────────────────── */
#wg-auth-loading {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); transition: opacity 0.3s ease;
}
#wg-auth-loading .wg-loader { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#wg-auth-loading .wg-loader-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(96, 54, 232, 0.2); border-top-color: #6036e8;
  border-radius: 50%; animation: wgSpin 0.8s linear infinite;
}
#wg-auth-loading .wg-loader-text {
  color: var(--text-muted); font-family: var(--font-body);
  font-size: 14px; font-weight: 400; letter-spacing: 0.02em;
}

/* ── Content hidden until authenticated ────────────────────────────── */
.lesson-content { opacity: 0; transition: opacity 0.4s ease; }

/* ── Locked overlay ────────────────────────────────────────────────── */
.wg-locked-overlay { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; }
.wg-locked-fullscreen { position: fixed; inset: 0; z-index: 9990; min-height: 100vh; background: rgba(5,5,16,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wg-locked-card {
  text-align: center; max-width: 480px; padding: 48px 40px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); backdrop-filter: var(--glass-blur);
}
.wg-locked-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 20px; background: rgba(96, 54, 232, 0.1); margin-bottom: 24px; }
.wg-locked-icon svg { stroke: #6036e8; }
.wg-locked-card h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.wg-locked-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 28px; }
.wg-unlock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 36px; background: linear-gradient(135deg, #6036e8, #7c5ce8);
  color: #fff; font-size: 1rem; font-weight: 600; border-radius: 12px;
  text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wg-unlock-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(96, 54, 232, 0.3); }
.wg-back-link { display: block; margin-top: 16px; color: var(--text-muted); font-size: 0.85rem; text-decoration: none; }
.wg-back-link:hover { color: var(--text-secondary); }

/* ── API error notice ──────────────────────────────────────────────── */
.wg-api-notice { padding: 16px 24px; margin: 20px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2); border-radius: 12px; text-align: center; }
.wg-api-notice p { color: var(--amber); font-size: 0.9rem; }
.wg-api-notice a { color: var(--amber); text-decoration: underline; }

/* ── Progress gradient (SVG) ───────────────────────────────────────── */
.wg-svg-defs { position: absolute; width: 0; height: 0; }


/* ══════════════════════════════════════════════════════════════════════
   PHASE 1: FEEL — Micro-interactions + Polish
   Making the platform feel alive without adding noise.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Universal button press scale ──────────────────────────────── */
button:active, a.continue-card:active, .roadmap-phase:active,
.ia-card:active, .hub-link-pink:active, .hub-link-purple:active,
.lesson-nav-btn:active, #mark-complete-btn:active,
.sidebar-lesson:active {
  transform: scale(0.97) !important;
  transition-duration: 60ms !important;
}

/* ── 6. Nav button arrow momentum on hover ────────────────────────── */
.lesson-nav-btn svg {
  transition: transform 0.2s var(--ease-out);
}
.lesson-nav-btn:hover svg {
  transform: translateX(3px);
}
.lesson-nav-btn.prev:hover svg {
  transform: translateX(-3px);
}

/* ── 8. Vimeo player fade-in on load ──────────────────────────────── */
.vimeo-embed iframe {
  opacity: 0;
  animation: vimeoFadeIn 0.6s ease 0.3s forwards;
}
@keyframes vimeoFadeIn {
  to { opacity: 1; }
}

/* ── Smooth progress bar transition ──────────────────────────────── */
.sidebar-progress-fill {
  transition: width 0.6s ease-out !important;
}

/* ── Page content entrance ───────────────────────────────────────── */
.lesson-content-area {
  animation: lessonFadeUp 0.4s var(--ease-out) both;
}

/* ── Page transition ─────────────────────────────────────────────── */
body {
  animation: pageEnter 0.35s ease both;
}
@keyframes pageEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.page-leaving {
  animation: pageLeave 0.2s ease both;
}
@keyframes pageLeave {
  from { opacity: 1; }
  to { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME — Apple-Level Overrides (Base)
   ══════════════════════════════════════════════════════════════════════ */

/* Locked fullscreen overlay: soft dim */
[data-theme="light"] .wg-locked-fullscreen { background: rgba(0,0,0,0.25); backdrop-filter: blur(8px); }

/* Background noise texture: much softer */
[data-theme="light"] .bg-canvas::after { opacity: 0.06; }

/* Error notice: warm amber instead of harsh */
[data-theme="light"] .wg-api-notice { background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.12); }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-deep); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(96,54,232,0.12); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(96,54,232,0.2); }