/* ==========================================================================
   COCOON — Canvas Layer (Tendril + Illumination Engine)
   Extracted from projects/parallax-trip/index.html (V11.37)

   What this layer provides:
   - Full-viewport <canvas id="energy-canvas"> positioning
   - .tendril-lit class for gold illumination cascade on text elements
     when organic tendrils pass nearby

   What this layer does NOT provide (already in cocoon/website/index.html):
   - Palette CSS variables (live in the main :root block)
   - Film grain overlay (body::after)
   - Background radials (.bg-radials)

   Z-INDEX CONTRACT (must be respected in index.html):
     .bg-radials  : 0   (background wash)
     #energy-canvas: 2   (this layer — sits above radials, below grain)
     body::after  : 3   (film grain — MUST be raised from 1 to 3 for correct stacking)
     main         : 10  (content)
   ========================================================================== */


/* ===== CANVAS ELEMENT ===== */
#energy-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
}


/* ===== TENDRIL ILLUMINATION ===== */
/* When a tendril passes within 120px of a target text element, the JS engine
   adds .tendril-lit to that element for a brief window (~300ms of illumination
   before the tendril drifts away). This cascades a gold text-shadow glow that
   mimics ink catching candlelight. */

.tendril-lit {
  text-shadow:
    0 0 8px rgba(212, 168, 71, 0.7),
    0 0 20px rgba(212, 168, 71, 0.4),
    0 0 40px rgba(212, 168, 71, 0.15) !important;
  color: #fff !important;
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

/* Boxed/bordered targets get an additional box-shadow ring when illuminated.
   Apply this modifier list to any Cocoon element that renders with a border
   or card background that should catch the light (e.g., a badge-style tag). */
.tendril-lit.art-card-name,
.tendril-lit.lineup-artist {
  box-shadow:
    0 0 20px rgba(212, 168, 71, 0.3),
    0 0 40px rgba(212, 168, 71, 0.1),
    inset 0 0 10px rgba(212, 168, 71, 0.06);
  border-color: rgba(212, 168, 71, 0.5) !important;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    text-shadow 0.3s ease,
    color 0.3s ease;
}

/* When a target is NOT currently lit, fade the glow out slowly (1s) so the
   cascade feels like candlelight receding rather than a hard cut. */
.hero-title:not(.tendril-lit),
.section-heading:not(.tendril-lit),
.day-name:not(.tendril-lit),
.lineup-artist:not(.tendril-lit),
.art-card-name:not(.tendril-lit),
.person-name:not(.tendril-lit),
.footer-logo:not(.tendril-lit) {
  transition:
    text-shadow 1s ease,
    color 1s ease,
    box-shadow 1s ease;
}