/* ============================================================================
   3D hero — canvas layer, glass overlay, and the CSS fallback that runs when
   WebGL is unavailable, the viewport is small, or reduced motion is requested.
   ============================================================================ */
.hero3d {
  position: absolute; inset: 0;
  overflow: hidden;              /* nothing here may cause horizontal scroll */
  pointer-events: none;          /* the hero text stays clickable */
  z-index: 0;
}
.hero3d-canvas {
  display: block; width: 100%; height: 100%;
  pointer-events: auto;          /* but the canvas itself receives the cursor */
  opacity: 0;
  transition: opacity .9s ease;
}
.hero3d[data-hero3d-state="live"] .hero3d-canvas { opacity: 1; }

/* ---- fallback: a still, glowing emblem. No JS, no WebGL, ~0 cost. ------- */
.hero3d-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: .85;
}
.hero3d[data-hero3d-state="live"] .hero3d-fallback { opacity: 0; transition: opacity .6s ease; }
.hero3d-fallback .emblem {
  width: min(360px, 44vw); height: auto;
  filter: drop-shadow(0 0 26px rgba(201, 162, 39, .22));
}

/* ---- glassmorphic overlay so the scene reads through the copy ---------- */
.hero-glass {
  position: relative; z-index: 1;
  background: rgba(15, 20, 32, .42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 30px 32px;
  max-width: 640px;
}
@supports not (backdrop-filter: blur(4px)) {
  /* Without backdrop-filter the text would sit on a transparent panel and
     become unreadable over the moving scene, so go opaque instead. */
  .hero-glass { background: rgba(15, 20, 32, .92); }
}

@media (max-width: 767px) {
  .hero-glass { padding: 22px 20px; backdrop-filter: blur(8px); }
  .hero3d-emblem { width: min(240px, 62vw); }
}
@media (prefers-reduced-motion: reduce) {
  .hero3d-canvas { transition: none; }
}

/* The emblem column moved into the 3D layer, so the copy keeps the left half
   and the scene shows through on the right instead of the grid collapsing. */
.hero-inner { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* Cyan bloom behind the hero object, per the brief. Sits under the 3D canvas
   and the fallback emblem alike, so the hero has depth either way. */
.hero3d::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 50%;
  width: min(720px, 60vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero3d::before { right: 50%; transform: translate(50%, -50%); width: min(520px, 90vw); }
}
.lede-note { display: block; margin-top: 10px; color: var(--cyan); font-weight: 600; font-size: 14px; }