/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * ANHAD CORE UI SYSTEM
 * Unified glass nav · iOS back button · Page transitions · Offline banner
 * Import this ONCE per page — works with or without trendora-premium.css
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────────────────
   SUBTLE AMBIENT ORBS — Behind Header + Greeting (ONLY SKY BLUE)
   Matches "Your Practice" card color exactly
   ───────────────────────────────────────────────────────────────────────────── */

/* Header must be positioned for orb */
.header {
  position: relative !important;
}

/* Greeting section must be positioned for orbs */
.greeting {
  position: relative !important;
  overflow: visible !important;
}

/* Greeting content above orbs */
.greeting__content {
  position: relative;
  z-index: 2;
}

.time-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.5;
  transition: opacity 0.8s ease;
  max-width: 100vw;
  overflow: hidden;
}

/* Show orbs only in DAY and NIGHT auto mode */
[data-theme-mode="auto"][data-time-of-day="day"] .time-orb,
[data-theme-mode="auto"][data-time-of-day="night"] .time-orb {
  opacity: 0.5;
}

/* Hide orbs in other modes */
[data-theme-mode="light"] .time-orb,
[data-theme-mode="dark"] .time-orb,
[data-theme-mode="auto"][data-time-of-day="morning"] .time-orb,
[data-theme-mode="auto"][data-time-of-day="evening"] .time-orb {
  opacity: 0;
  display: none !important;
}

/* DAY TIME — Sky Blue ambient orb contained strictly inside viewport bounds */
[data-theme-mode="auto"][data-time-of-day="day"] .time-orb-1 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(112, 181, 245, 0.45) 0%, rgba(70, 155, 235, 0.2) 50%, transparent 75%);
  top: -60px;
  right: 0px;
}

[data-theme-mode="auto"][data-time-of-day="day"] .time-orb-2 {
  display: none !important;
  opacity: 0;
}

/* NIGHT TIME — Dark Blue ambient orb */
[data-theme-mode="auto"][data-time-of-day="night"] .time-orb-1 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(28, 45, 61, 0.8) 0%, rgba(42, 61, 74, 0.5) 50%, transparent 75%);
  top: -60px;
  left: 0px;
}

[data-theme-mode="auto"][data-time-of-day="night"] .time-orb-2 {
  display: none !important;
  opacity: 0;
}

/* HEADER ORB — Behind title bar */
.time-orb-header {
  width: 100%;
  max-width: 400px;
  height: 150px;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none !important;
}

[data-theme-mode="auto"][data-time-of-day="day"] .time-orb-header {
  background: radial-gradient(ellipse, rgba(112, 181, 245, 0.4) 0%, rgba(70, 155, 235, 0.15) 50%, transparent 75%);
}

[data-theme-mode="auto"][data-time-of-day="night"] .time-orb-header {
  background: radial-gradient(ellipse, rgba(28, 45, 61, 0.8) 0%, rgba(42, 61, 74, 0.5) 50%, transparent 75%);
}

/* ─── Design token fallbacks (resolved by trendora-premium.css if loaded) ─── */
:root {
  --ac-gold:          #D4943A;
  --ac-gold-glow:     rgba(212, 148, 58, 0.22);
  --ac-gold-border:   rgba(212, 148, 58, 0.18);
  --ac-safe-top:      max(env(safe-area-inset-top, 24px), 24px);
  --ac-safe-bottom:   max(env(safe-area-inset-bottom, 16px), 16px);
  --ac-safe-left:     env(safe-area-inset-left,    0px);
  --ac-safe-right:    env(safe-area-inset-right,   0px);
  --ac-nav-height:    56px;
  --ac-blur:          blur(24px) saturate(180%);
  --ac-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ac-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
  --ac-ios:           cubic-bezier(0.32, 0.72, 0, 1);
  --ac-radius:        14px;

  /* Dark defaults */
  --ac-nav-bg:        rgba(18, 18, 22, 0.80);
  --ac-nav-border:    rgba(255, 255, 255, 0.07);
  --ac-nav-text:      rgba(255, 255, 255, 0.92);
  --ac-nav-sub:       rgba(255, 255, 255, 0.50);
  --ac-btn-bg:        rgba(255, 255, 255, 0.08);
  --ac-btn-hover:     rgba(255, 255, 255, 0.13);
  --ac-btn-active:    rgba(255, 255, 255, 0.18);
  --ac-offline-bg:    rgba(255, 59, 48, 0.90);
  --ac-online-bg:     rgba(48, 209, 88, 0.90);
  --ac-glass-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

/* Light theme overrides */
[data-theme="light"] {
  --ac-nav-bg:     rgba(248, 248, 252, 0.82);
  --ac-nav-border: rgba(0, 0, 0, 0.07);
  --ac-nav-text:   rgba(0, 0, 0, 0.88);
  --ac-nav-sub:    rgba(60, 60, 67, 0.55);
  --ac-btn-bg:     rgba(0, 0, 0, 0.05);
  --ac-btn-hover:  rgba(0, 0, 0, 0.09);
  --ac-btn-active: rgba(0, 0, 0, 0.13);
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLASS NAV BAR
────────────────────────────────────────────────────────────────────────────── */
.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: calc(var(--ac-nav-height) + var(--ac-safe-top));
  padding-top: var(--ac-safe-top);
  background: var(--ac-nav-bg);
  backdrop-filter: var(--ac-blur);
  -webkit-backdrop-filter: var(--ac-blur);
  border-bottom: 0.5px solid var(--ac-nav-border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-left: calc(var(--ac-safe-left) + 4px);
  padding-right: calc(var(--ac-safe-right) + 4px);
  /* REMOVED: will-change and transform that caused scroll rendering glitches */
  transition: background 0.25s var(--ac-smooth),
              border-color 0.25s var(--ac-smooth);
}

/* Thin gold hairline on scroll compact state */
.glass-nav.compact {
  border-bottom-color: var(--ac-gold-border);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.10);
}

/* ─── Back Button ─────────────────────────────────────────────────────────── */
.glass-nav__back,
.glass-back-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px 0 6px;
  border: none;
  background: var(--ac-btn-bg);
  color: var(--ac-gold);
  font-size: 15px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.2px;
  border-radius: 22px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ac-smooth),
              transform  0.15s var(--ac-spring),
              box-shadow 0.15s var(--ac-smooth);
  /* touch target */
  touch-action: manipulation;
  user-select: none;
}

.glass-nav__back:hover,
.glass-back-btn:hover {
  background: var(--ac-btn-hover);
}

.glass-nav__back:active,
.glass-back-btn:active {
  background: var(--ac-btn-active);
  transform: scale(0.94);
}

/* Chevron SVG inside back button */
.glass-nav__back .back-chevron,
.glass-back-btn .back-chevron {
  width: 9px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glass-nav__back .back-label,
.glass-back-btn .back-label {
  line-height: 1;
}

/* ─── Nav Title ───────────────────────────────────────────────────────────── */
.glass-nav__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ac-nav-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0 8px;
}

/* ─── Right Action Button ─────────────────────────────────────────────────── */
.glass-nav__action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.glass-nav__action-btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--ac-btn-bg);
  color: var(--ac-nav-text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ac-smooth),
              transform  0.15s var(--ac-spring);
  touch-action: manipulation;
  user-select: none;
}

.glass-nav__action-btn:hover,
.icon-btn:hover {
  background: var(--ac-btn-hover);
}

.glass-nav__action-btn:active,
.icon-btn:active {
  background: var(--ac-btn-active);
  transform: scale(0.90);
}

/* ─── Nav spacer — pushes content below the fixed glass nav ──────────────── */
.glass-nav-spacer {
  height: calc(var(--ac-nav-height) + var(--ac-safe-top) + 8px);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAPPABLE SPRING FEEDBACK
────────────────────────────────────────────────────────────────────────────── */
.tappable {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s var(--ac-spring),
              opacity  0.15s var(--ac-smooth);
}

.tappable:active {
  transform: scale(0.97);
  opacity: 0.88;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE TRANSITIONS
────────────────────────────────────────────────────────────────────────────── */
@keyframes ac-page-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ac-page-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
}

/* No will-change here. `will-change: transform` makes the element a containing
   block for its position:fixed descendants — and .page-enter sits on Home's
   <main class="app"> and Favorites' #app, which contain the radio sheet, its
   overlay and the "New Note" FAB. Those anchored to the content box instead of
   the viewport, so the radio sheet opened below the fold while still locking
   body scroll, and the FAB drifted off-screen. */
/* Container fades only; the staggered children below still slide. Animating
   transform on the page container makes it a containing block for its
   position:fixed descendants (sheets, overlays, FABs) — see the note on
   @keyframes glassReveal in trendora-premium.css. */
@keyframes ac-page-enter-container {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.page-enter {
  animation: ac-page-enter-container 0.48s var(--ac-spring) both;
}

.page-exiting {
  animation: ac-page-exit 0.18s var(--ac-smooth) both;
  pointer-events: none !important;
}

/* Staggered children */
.page-enter > *:nth-child(1)  { animation: ac-page-enter 0.48s var(--ac-spring) 0.00s both; }
.page-enter > *:nth-child(2)  { animation: ac-page-enter 0.48s var(--ac-spring) 0.04s both; }
.page-enter > *:nth-child(3)  { animation: ac-page-enter 0.48s var(--ac-spring) 0.08s both; }
.page-enter > *:nth-child(4)  { animation: ac-page-enter 0.48s var(--ac-spring) 0.12s both; }
.page-enter > *:nth-child(5)  { animation: ac-page-enter 0.48s var(--ac-spring) 0.16s both; }

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL SOOTHING LOADER (Glassmorphism)
────────────────────────────────────────────────────────────────────────────── */
.nav-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-system, 800);
  background: rgba(18, 18, 22, 0.35); /* More transparent dark */
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ac-smooth), visibility 0.3s var(--ac-smooth);
  pointer-events: none;
}

.nav-loading-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-loading-overlay__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--ac-nav-border);
  border-top-color: var(--ac-gold);
  border-radius: 50%;
  animation: ac-spin 0.8s linear infinite;
}

[data-theme="light"] .nav-loading-overlay {
  background: rgba(255, 255, 255, 0.45);
}

.nav-loading-overlay__shimmer {
  position: absolute;
  inset: 0;
  background: var(--ac-glass-shimmer);
  background-size: 200% 100%;
  animation: ac-shimmer 2s infinite linear;
  pointer-events: none;
}

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

@keyframes ac-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GPU ACCELERATED SCROLLING
────────────────────────────────────────────────────────────────────────────── */
.gpu-accelerated,
.scroll-container,
.main-content {

  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

body.page-loading {
  cursor: wait;
}


/* ─────────────────────────────────────────────────────────────────────────────
   OFFLINE BANNER
────────────────────────────────────────────────────────────────────────────── */
.ac-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-system, 800);
  padding: 10px 16px calc(10px + var(--ac-safe-top));
  padding-top: calc(var(--ac-safe-top) + 10px);
  background: var(--ac-offline-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.1px;
  text-align: center;
  transform: translateY(-110%);
  transition: transform 0.35s var(--ac-ios);
  will-change: transform;
  pointer-events: none;
}

.ac-offline-banner.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.ac-offline-banner.online {
  background: var(--ac-online-bg);
}

.ac-offline-banner__icon {
  margin-right: 6px;
  font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLASS CARD — shared utility
────────────────────────────────────────────────────────────────────────────── */
.ac-glass-card {
  background: var(--ac-btn-bg);
  border: 0.5px solid var(--ac-nav-border);
  border-radius: var(--ac-radius);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   GOLD DIVIDER — section separator
────────────────────────────────────────────────────────────────────────────── */
.ac-divider {
  height: 0.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ac-gold-border) 20%,
    var(--ac-gold-border) 80%,
    transparent 100%);
  margin: 12px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION — respect user accessibility preference
────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-enter,
  .page-enter > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .page-exiting {
    animation: none;
  }

  .glass-nav,
  .glass-nav__back,
  .glass-back-btn,
  .glass-nav__action-btn,
  .icon-btn,
  .tappable,
  .ac-offline-banner {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PWA UPDATE SECTION — Manual Update Check Button (Static, below cards)
────────────────────────────────────────────────────────────────────────────── */
.pwa-update-section {
  position: relative;
  margin: 24px auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
}

.pwa-update-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ac-btn-bg);
  border: 0.5px solid var(--ac-nav-border);
  border-radius: 20px;
  color: var(--ac-nav-sub);
  font-size: 12px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--ac-smooth), transform 0.2s var(--ac-smooth);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.pwa-update-btn:hover {
  background: var(--ac-btn-hover);
}

.pwa-update-btn:active {
  background: var(--ac-btn-active);
  transform: scale(0.96);
}

.pwa-update-btn.checking {
  color: var(--ac-gold);
  border-color: var(--ac-gold-border);
}

.pwa-update-btn.checking .pwa-update-btn__icon {
  animation: spin 1s linear infinite;
}

.pwa-update-btn.available {
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
  border-color: rgba(48, 209, 88, 0.3);
}

.pwa-update-btn.uptodate {
  color: rgba(255, 255, 255, 0.4);
}

.pwa-update-btn.error {
  color: #ff453a;
  border-color: rgba(255, 69, 58, 0.3);
}

.pwa-update-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.pwa-update-btn__icon {
  font-size: 14px;
  display: inline-block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pwa-update-status {
  font-size: 11px;
  font-weight: 500;
  color: var(--ac-nav-sub);
  opacity: 0;
  transition: opacity 0.2s var(--ac-smooth);
}

.pwa-update-status.checking,
.pwa-update-status.available,
.pwa-update-status.uptodate,
.pwa-update-status.error {
  opacity: 1;
}

.pwa-update-status.available {
  color: #30d158;
}

.pwa-update-status.error {
  color: #ff453a;
}

.pwa-update-lastcheck {
  font-size: 10px;
  color: var(--ac-nav-sub);
  opacity: 0.6;
}

/* Light theme overrides */
[data-theme="light"] .pwa-update-btn.uptodate {
  color: rgba(0, 0, 0, 0.4);
}

/* Desktop: center in main content */
@media screen and (min-width: 1024px) {
  .pwa-update-section {
    margin-left: 120px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PWA UPDATE PROMPT — Install dialog
────────────────────────────────────────────────────────────────────────────── */
.pwa-update-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-system, 800);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ac-smooth);
  padding: 20px;
}

.pwa-update-prompt.visible {
  opacity: 1;
}

.pwa-update-prompt__content {
  background: var(--ac-nav-bg);
  border: 0.5px solid var(--ac-nav-border);
  border-radius: var(--ac-radius);
  padding: 24px;
  max-width: 320px;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.3s var(--ac-spring);
}

.pwa-update-prompt.visible .pwa-update-prompt__content {
  transform: scale(1);
}

.pwa-update-prompt__icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.pwa-update-prompt__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ac-nav-text);
  margin-bottom: 8px;
}

.pwa-update-prompt__text {
  font-size: 14px;
  color: var(--ac-nav-sub);
  line-height: 1.5;
  margin-bottom: 20px;
}

.pwa-update-prompt__actions {
  display: flex;
  gap: 10px;
}

.pwa-update-prompt__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s var(--ac-smooth), transform 0.15s var(--ac-smooth);
}

.pwa-update-prompt__btn--primary {
  background: var(--ac-gold);
  color: #000;
}

.pwa-update-prompt__btn--primary:hover {
  background: #e5a547;
}

.pwa-update-prompt__btn--secondary {
  background: var(--ac-btn-bg);
  color: var(--ac-nav-text);
}

.pwa-update-prompt__btn--secondary:hover {
  background: var(--ac-btn-hover);
}

/* Hide update section when install banner is shown */
.install-banner:not([style*="display: none"]) ~ .app .pwa-update-section,
.install-banner:not(.hidden) ~ .app .pwa-update-section {
  margin-bottom: 80px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UNIVERSAL GURU IMAGE REFINEMENT — Premium Circular Framing
────────────────────────────────────────────────────────────────────────────── */
img[src*="guruimages/"] {
  object-fit: cover !important;
  object-position: center 25% !important; /* Premium face-centric cropping */
  transform: scale(1.4) !important;       /* Increased zoom to focus on Guru's face */
  border-radius: 50% !important;
  transition: transform 0.3s var(--ac-spring) !important;
}

/* Specific adjustment for vertical/taller portraits */
img[src*="gurutegbahadursahebji.jpeg"],
img[src*="gurugobindsinghsahebji.jpeg"] {
  object-position: center 20% !important;
}

/* Specific adjustment for Guru Hargobind Saheb Ji (to show swords) */
img[src*="guruhargobindsahebji.jpeg"] {
  transform: scale(1.2) !important;
  object-position: center 20% !important;
}

/* Specific adjustment for landscape/wider images */
img[src*="gurugranthsahebji.jpeg"] {
  object-position: center 40% !important;
  transform: scale(1.15) !important;
}

/* Ensure parent containers don't show the scaled overflow */
.greeting__guru-portrait,
.event-card__guru-img-wrapper,
.bani-icon {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix Visualizer transform origin for GPU scale */
.viz-bar {
  transform-origin: bottom center !important;
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INSTANT THEME TRANSITION
────────────────────────────────────────────────────────────────────────────── */
html.theme-changing,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: none !important;
}

/* -- Theme Switching: suppress color/bg transitions only, NOT transforms ------
   Added by global-theme.js - removed after 1 rAF (replaces global * transition kill) */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition-property: none !important;
}
/* Restore transform/opacity so tappable elements stay animated during switch */
.theme-switching .hero-card,
.theme-switching .nav-tab,
.theme-switching .practice-card,
.theme-switching .quick-card,
.theme-switching .tappable {
  transition: transform 0.15s var(--ac-spring), opacity 0.15s var(--ac-smooth) !important;
}

/* -- Nav Icon Spring Animation (used by setActive, no forced reflow needed) --- */
@keyframes iconSpring {
  0%   { transform: scale3d(1, 1, 1); }
  30%  { transform: scale3d(1.25, 0.85, 1); }
  50%  { transform: scale3d(0.90, 1.10, 1); }
  70%  { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}
.nav-icon-wrap.spring-animate {
  animation: iconSpring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* -- Progress bar: scaleX keeps animation on compositor layer ---------- */
.progress-inline__fill,
.mini-player__progress-fill {
  transform-origin: left center;
}