/* ============================================================================
 * chazon · elements · v28.css
 * Phase XX · Universe Final
 *
 * Styles for the Three.js Merkaba scene canvas and the existing pillar
 * grid below it. The canvas occupies full content width with cinematic
 * aspect, then the three pillar cards (Merkaba / Shalem / Chazon) sit
 * directly beneath as "enter" CTAs to the other chazon properties.
 * ============================================================================ */

/* ----- Universe Canvas ------------------------------------------------------ */

.universe-canvas {
  display: block;
  width: 100%;
  margin: 1.4rem auto 2.2rem;
  /* height set by JS based on viewport */
  background: transparent;
  /* Soft glow halo around the canvas — feels like the Merkaba radiates
   * just past its rendering boundary */
  filter: drop-shadow(0 0 32px rgba(230, 184, 0, 0.06));
  /* No pointer-events on the canvas itself — the section captures
   * parallax via the parent section's pointermove handler */
  cursor: default;
}

/* When the user hovers anywhere in the section, the canvas brightens
 * subtly — invitation to engage */
.universe-section:hover .universe-canvas {
  filter: drop-shadow(0 0 36px rgba(230, 184, 0, 0.10));
  transition: filter 600ms ease;
}

/* Universe header now sits above the canvas — pull it visually closer */
.universe-section .universe-header {
  margin-bottom: 0.4rem;
}

/* The grid below the canvas needs slight visual separation: a thin
 * gold hairline that suggests "and now you can enter" */
.universe-section .universe-grid {
  position: relative;
  padding-top: 1.6rem;
}
.universe-section .universe-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(230, 184, 0, 0.55) 50%,
              transparent 100%);
}

/* ----- Reduced motion: canvas still renders but parallax + pulse are
 *       handled by JS. CSS-side just suppresses any potential transitions. ---- */
@media (prefers-reduced-motion: reduce) {
  .universe-canvas { transition: none !important; }
}

/* ----- Mobile tuning ------------------------------------------------------- */
@media (max-width: 600px) {
  .universe-canvas {
    margin: 0.6rem auto 1.4rem;
    filter: drop-shadow(0 0 20px rgba(230, 184, 0, 0.05));
  }
  .universe-section .universe-grid {
    padding-top: 1.2rem;
  }
}

/* ----- Defensive: hide canvas if WebGL fails (in which case the section
 *       still has its existing header + grid content) ---------------------- */
.universe-canvas.webgl-failed {
  display: none;
}