/* ============================================================
   SIMLEV PROJECTS — home.css (v2.0)
   Background golden spiral + hero (home page only)
   ============================================================ */

.spiral-stage {
  position: fixed; inset: 0; z-index: 0;
  display: grid; place-items: center;
  pointer-events: none; overflow: hidden;
}
.spiral-svg {
  width: min(135vmin, 1300px);
  height: min(135vmin, 1300px);
  opacity: 0.26;
  transform: rotate(-8deg);
}
.spiral-path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spiral-seed { fill: var(--gold); }

.page { position: relative; z-index: 1; }

.hero {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s6) 1.6rem var(--s5); position: relative;
}
.hero .eyebrow { margin-bottom: var(--s4); }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: var(--s4); max-width: 46ch; color: var(--mute); }

.scroll-cue {
  position: absolute; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
}
.scroll-cue .arrow { color: var(--gold); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .spiral-path { stroke-dashoffset: 0 !important; }
  .scroll-cue .arrow { animation: none; }
}