/* Hero scene — homepage isometric animation.
   Adapted from animation/style.css. All selectors scoped under
   .hero-scene so the standalone's body/page-level styles don't
   leak onto the rest of noxen.app. */

.hero-scene {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 32px auto 0;
  /* 16:9 to match the SVG viewBox (1600×900). aspect-ratio holds
     the box dimensions before the SVG paints, so layout doesn't
     jump when the script populates the scene. */
  aspect-ratio: 1600 / 900;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, #111116 0%, #0a0a0c 70%);
  border: 1px solid #1d1d23;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 24px 60px rgba(0, 0, 0, 0.45);
}

.hero-scene .scene {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Background --- */
.hero-scene .grid {
  opacity: 0; /* WAAPI fades it in */
}

/* --- Table --- */
.hero-scene .table {
  stroke-width: 1.25;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
}

/* --- Devices --- */
.hero-scene .device {
  opacity: 0;
}

.hero-scene .face-front { fill: url(#frontFace); stroke: #2a2a30; stroke-width: 0.6; }
.hero-scene .face-side  { fill: url(#sideFace);  stroke: #2a2a30; stroke-width: 0.6; }
.hero-scene .face-top   { fill: url(#topFace);   stroke: #3a3a42; stroke-width: 0.6; }

.hero-scene .edge {
  stroke: #33d9cc;
  stroke-width: 0.8;
  opacity: 0;
  pointer-events: none;
}

.hero-scene .led {
  fill: #33d9cc;
  filter: drop-shadow(0 0 1.5px rgba(51, 217, 204, 0.75));
  opacity: 0.3;
}

/* --- Leaders --- */
.hero-scene .leader {
  stroke: #3a3a42;
  stroke-width: 0.85;
  stroke-dasharray: 3 4;
  opacity: 0;
  fill: none;
}

.hero-scene .leader-dot {
  fill: #33d9cc;
  opacity: 0;
}

/* --- Pills --- */
.hero-scene foreignObject { overflow: visible; }

.hero-scene .pill-card {
  width: 240px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1c1c22 0%, #16161a 100%);
  border: 1px solid #2a2a30;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color: #f0f0f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 8px 28px rgba(0, 0, 0, 0.45);
  transition: none;
  overflow: hidden;
}

.hero-scene .pill-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #f0f0f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  text-align: center;
}

.hero-scene .pill-body {
  font-size: 15px;
  color: #a0a0a8;
  line-height: 1.5;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  text-align: left;
}

/* Reduced-motion: skip straight to final frame.
   Each animation track inside hero-scene.js handles this in JS,
   but these CSS overrides cover the static case (no JS / no
   WAAPI support) so the scene still has all elements visible. */
@media (prefers-reduced-motion: reduce) {
  .hero-scene .grid { opacity: 1; }
  .hero-scene .table { opacity: 1; stroke-dashoffset: 0 !important; }
  .hero-scene .device { opacity: 1; }
  .hero-scene .leader, .hero-scene .leader-dot { opacity: 1; }
  .hero-scene .edge { opacity: 0.5; }
}

/* Mobile: hide the entire "Where it works" animation section.
   On real iOS Safari the SVG has rendering quirks (pills sometimes
   render off-screen, leader lines occasionally don't draw, the
   timing of the IntersectionObserver vs Safari's lazy SVG paint
   produces inconsistent first-frame state) that aren't worth the
   engineering cost to chase down. Mobile users get
   hero → dashboard → features → comparison → why-this-exists →
   footer; the animation is reserved for desktop where it renders
   cleanly. The lede + headline of the section also disappear
   because without the animation centrepiece the copy reads as
   set-up-without-payoff. */
@media (max-width: 720px) {
  .section[aria-label="What Noxen audits"] {
    display: none;
  }
}