/* ═══════════════════════════════════════════════════════════════════════
   LIQUID GLASS — jaaskel.com shared theme
   Apple Liquid Glass design language (iOS 26 / macOS Tahoe)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Animated Gradient Mesh — Dark ─────────────────────────────────── */
body.glass-dark {
  background: #0a0a1a !important;
  position: relative;
}
body.glass-dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 700px 700px at 15% 15%, rgba(94,92,230,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 80% 10%, rgba(10,132,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 65% 80%, rgba(48,209,88,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 550px 550px at 10% 75%, rgba(255,159,10,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 50% 50%, rgba(100,210,255,0.06) 0%, transparent 60%);
  animation: glassOrbDrift 25s ease-in-out infinite alternate;
}

/* ── Animated Gradient Mesh — Light ────────────────────────────────── */
body.glass-light {
  background: #f2f2f7 !important;
  position: relative;
}
body.glass-light::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 700px 700px at 20% 15%, rgba(90,200,250,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 75% 10%, rgba(0,122,255,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 60% 75%, rgba(52,199,89,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 10% 80%, rgba(255,149,0,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 50% 45%, rgba(88,86,214,0.05) 0%, transparent 60%);
  animation: glassOrbDrift 25s ease-in-out infinite alternate;
}

@keyframes glassOrbDrift {
  0%   { transform: scale(1)    translate(0, 0); }
  33%  { transform: scale(1.05) translate(15px, -10px); }
  66%  { transform: scale(0.98) translate(-10px, 15px); }
  100% { transform: scale(1.03) translate(5px, -5px); }
}

/* ── Dark Glass Panels ─────────────────────────────────────────────── */
body.glass-dark .card,
body.glass-dark .scard,
body.glass-dark .kpi-card,
body.glass-dark .result-card,
body.glass-dark .ai-card,
body.glass-dark .breakdown-card,
body.glass-dark .result-box,
body.glass-dark .weather-box,
body.glass-dark .detail-panel,
body.glass-dark .list-panel,
body.glass-dark .from,
body.glass-dark .to,
body.glass-dark .delta-summary,
body.glass-dark .arch-item,
body.glass-dark .ai-box {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

body.glass-dark .card:hover,
body.glass-dark .scard:hover,
body.glass-dark .kpi-card:hover,
body.glass-dark .result-card:hover,
body.glass-dark .ai-card:hover,
body.glass-dark .result-box:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

/* ── Light Glass Panels ────────────────────────────────────────────── */
body.glass-light .card,
body.glass-light .rk-card,
body.glass-light .icard,
body.glass-light .rcard,
body.glass-light .detail-panel,
body.glass-light .list-panel,
body.glass-light .result-box,
body.glass-light .ai-box {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

body.glass-light .card:hover,
body.glass-light .rk-card:hover,
body.glass-light .icard:hover,
body.glass-light .rcard:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ── Dark Nav Glass ────────────────────────────────────────────────── */
body.glass-dark nav,
body.glass-dark .nav {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

body.glass-light nav,
body.glass-light .nav {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

/* ── Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.glass-dark::before,
  body.glass-light::before {
    animation: none;
  }
}