/* ============================================================
   BASE — reset, body, ambient atmosphere
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--teal); color: var(--bg-deep); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--g-border-strong); background-clip: padding-box; border: 2px solid transparent; }

/* ============================================================
   AMBIENT ATMOSPHERE — fixed, behind everything
   ============================================================ */
.atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 45%, var(--bg-rise) 100%);
}
.atmo-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-step)),
    repeating-linear-gradient(90deg, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-step));
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
}
.atmo-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--grid-line-strong) 0, var(--grid-line-strong) 1px, transparent 1px, transparent calc(var(--grid-step) * 5)),
    repeating-linear-gradient(90deg, var(--grid-line-strong) 0, var(--grid-line-strong) 1px, transparent 1px, transparent calc(var(--grid-step) * 5));
}
.atmo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
  transition: transform 1.2s var(--ease-out);
}
[data-theme="dark"] .orb-teal  { background: rgba(61,187,176,0.20); }
[data-theme="dark"] .orb-amber { background: rgba(245,158,11,0.13); }
[data-theme="dark"] .orb-rose  { background: rgba(244,63,94,0.10); }
[data-theme="dark"] .orb-blue  { background: rgba(96,165,250,0.12); }
[data-theme="light"] .orb-teal  { background: rgba(13,143,134,0.18); }
[data-theme="light"] .orb-amber { background: rgba(217,119,6,0.13); }
[data-theme="light"] .orb-rose  { background: rgba(225,29,72,0.09); }
[data-theme="light"] .orb-blue  { background: rgba(37,99,235,0.10); }

.orb-1 { width: 620px; height: 620px; top: -8%; left: -8%; }
.orb-2 { width: 520px; height: 520px; top: 25%; right: -10%; }
.orb-3 { width: 420px; height: 420px; top: 60%; left: 12%; }
.orb-4 { width: 460px; height: 460px; top: 75%; right: 8%; }
.orb-5 { width: 360px; height: 360px; top: 38%; left: 48%; }

.atmo-grain {
  position: absolute;
  inset: 0;
  opacity: 0.30;
  mix-blend-mode: overlay;
  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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 256px;
}
.atmo-fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, transparent 30%, var(--bg-deep) 100%);
}
[data-theme="light"] .atmo-fade {
  background: radial-gradient(ellipse 90% 70% at 50% 35%, transparent 30%, var(--bg-deep) 100%);
}

/* App root sits above ambient — flex column so chrome-main fills remaining height */
.app-root {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Mobile shell — must sit above the ambient layer (same as .app-root) */
.mobile-shell {
  position: relative;
  z-index: 1;
}

/* ============================================================
   GLASS SYSTEM — primitives
   ============================================================ */
.glass {
  background: linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  border: 1px solid var(--g-border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--g-inset-top), inset 0 -1px 0 var(--g-inset-bottom);
}
.glass-spatial {
  background: var(--g-spatial);
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-1);
}
.glass-elevated {
  background: linear-gradient(180deg, var(--g-elevated), var(--g-frosted));
  border: 1px solid var(--g-border-strong);
  border-radius: var(--r-xl);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--sh-4), inset 0 1px 0 var(--g-inset-top);
}
.glass-focus {
  background: linear-gradient(180deg, var(--g-focus), rgba(61,187,176,0.04));
  border: 1px solid rgba(88,239,224,0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-2), var(--sh-glow-teal), inset 0 1px 0 rgba(88,239,224,0.16);
}
[data-theme="light"] .glass-focus {
  background: linear-gradient(180deg, rgba(13,143,134,0.07), rgba(13,143,134,0.02));
  border-color: rgba(13,143,134,0.18);
}

/* Z-DEPTH PARALLAX — panels float at slight tilts; lift on hover */
.z-float {
  transform: translateZ(0) rotateX(0) rotateY(0);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.z-float:hover {
  transform: translateY(calc(-2px * var(--depth))) rotateX(0.5deg);
  box-shadow: var(--sh-4), var(--sh-glow-teal), inset 0 1px 0 var(--g-inset-top);
}
.z-tilt-l { transform: perspective(1400px) rotateY(calc(0.6deg * var(--depth))); }
.z-tilt-r { transform: perspective(1400px) rotateY(calc(-0.6deg * var(--depth))); }
.z-stack-back  { transform: perspective(1400px) translateZ(calc(-20px * var(--depth))) scale(0.985); opacity: 0.92; }
.z-stack-front { transform: perspective(1400px) translateZ(calc(12px * var(--depth))); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .atmo-orb { display: none; }
}