/* ==========================================================================
   FKRCCI homepage — recurring 3D treatment beyond the hero (section-3d.css)
   Pairs with js/section-3d.js. Loaded only by index.html, after hero-3d.css,
   so services.html / gallery.html / news.html / become-member.html are
   unaffected. Two pieces:
     1. .eyebrow-glow — a small always-visible CSS glow dot placed before each
        major section's eyebrow, echoing the hero marker language throughout
        the page. Pure CSS, no WebGL, so it never depends on script gating.
     2. .section3d-canvas — the single shared full-viewport canvas that
        js/section-3d.js draws the 3D heading "echo" text into. Positioned
        fixed and pointer-events:none so it never intercepts input; if the
        script never mounts it, this canvas is simply never created.
   ========================================================================== */

body.home-3d .eyebrow-glow {
  position: relative;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  margin-right: 0.55rem;
  margin-bottom: 0.0625rem;
  border-radius: 999px;
  vertical-align: middle;
  background: var(--sc, var(--turmeric));
  box-shadow: 0 0 0 3px rgb(246 238 221 / 0.7), 0 0 10px 2px var(--sc, var(--turmeric));
  animation: eyebrowGlowPulse 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.home-3d .eyebrow-glow { animation: none; }
}
@keyframes eyebrowGlowPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

.section3d-canvas {
  position: fixed;
  inset: 0;
  z-index: 5; /* above section content (auto/0), below the fixed navbar (50) and any modal (1000+) */
  width: 100%;
  height: 100%;
  pointer-events: none;
}