html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem; /* offset for the fixed h-16 header when jumping to an anchor */
}

/* ===== Hero (dark) — makes the atom pop instead of fading into a white/glass backdrop ===== */
.hero-dark {
  background:
    radial-gradient(ellipse 900px 700px at 75% 20%, rgba(0, 87, 63, 0.35), transparent 60%),
    linear-gradient(180deg, #0a1a13 0%, #050b08 100%);
}

.hero-gradient-text {
  background: linear-gradient(90deg, var(--electron-color), var(--nucleus-p));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Atom hero graphic — colors pulled from the Stitch design tokens
   (primary-fixed / primary-fixed-dim = light mint greens, secondary = crimson red) ===== */
:root {
  --ring-color: #8dd5b6;
  --electron-color: #a9f2d1;
  --glow-rgb: 61, 220, 151;
  --nucleus-p: #ff4d5e;      /* brighter than brand secondary, for glow legibility */
  --nucleus-n: #00573f;      /* primary-container */
}

.atom-ambient {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.4), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* الذرة SVG: النسخة الاحتياطية داخل الهيرو (تظهر إذا تعذّر WebGL أو عند تفضيل تقليل الحركة) */
.atom-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.atom-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.4), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.atom-svg {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.ring {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: 3;
  stroke-opacity: 0.95;
}

.nucleus .proton { fill: var(--nucleus-p); }
.nucleus .neutron { fill: var(--nucleus-n); }

.electron {
  fill: var(--electron-color);
  cursor: pointer;
  pointer-events: auto;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.electron:hover,
.electron:focus-visible {
  transform: scale(1.45);
  filter: url(#electronGlow) drop-shadow(0 0 6px var(--electron-color));
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .atom-wrap { transform: none !important; }
}