/* =====================================================================
   Superradiance layer — additive on hexolabs-style/styles.css
   Subtle motifs that evoke coherent collective emission:
   emitter lattices, dipole emission lobes, the superradiant burst,
   phase-locking, and in-phase shimmer. Load AFTER styles.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Extended tokens (do not override base tokens)
   --------------------------------------------------------------------- */
:root {
  --amber: #ffb02e;   /* hot coherent core   */
  --flame: #f25b45;   /* superradiant peak   */

  /* coherent-emission ramp: dark field heats to amber core, cools to blush */
  --grad-emission: radial-gradient(
    120% 120% at 50% 120%,
    #000 0%, var(--espresso) 38%, var(--flame) 58%,
    var(--amber) 70%, var(--coral) 82%, var(--blush) 100%);

  /* dipole emission lobe — directional glow */
  --grad-lobe: radial-gradient(
    closest-side, var(--amber) 0%, var(--coral) 45%, rgba(255,125,69,0) 72%);

  --lattice:      rgba(0,0,0,.06);          /* emitter dots on light */
  --lattice-dark: rgba(255,177,177,.10);    /* emitter dots on dark  */
  --lattice-gap:  26px;
}

/* ---------------------------------------------------------------------
   2. Coherent (emission-ramp) clipped word — brightest moment, use once
   --------------------------------------------------------------------- */
.grad--emission {
  background: linear-gradient(96deg,
    var(--flame) 0%, var(--amber) 38%, var(--coral) 68%, var(--blush) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------------
   3. Phase grid — faint regular emitter lattice (decorative)
   --------------------------------------------------------------------- */
.phase-grid { position: relative; isolation: isolate; }
.phase-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--lattice) 1.4px, transparent 1.5px);
  background-size: var(--lattice-gap) var(--lattice-gap);
  /* fade the lattice out toward edges so it never competes with content */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 80%);
}
.phase-grid--dark::before {
  background-image: radial-gradient(var(--lattice-dark) 1.4px, transparent 1.5px);
}

/* ---------------------------------------------------------------------
   4. Emission lobe — dipole-pattern glow (replaces base corner glow)
   --------------------------------------------------------------------- */
.emission-lobe { position: relative; overflow: hidden; }
.emission-lobe::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  right: -8%; bottom: -30%;
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  background: var(--grad-lobe);
  opacity: .5; filter: blur(14px);
  /* squash into a two-lobe / peanut suggestion */
  transform: rotate(-18deg) scaleY(.72);
}
.emission-lobe > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   5. Burst curve — the superradiant pulse line (divider / underline)
   --------------------------------------------------------------------- */
.burst { display: block; width: clamp(140px, 18vw, 240px); aspect-ratio: 6 / 1; height: auto; }
/* resting state: full solid curve (the pulse already emitted) */

/* underline variant that "fires" once (draws on, then stays) */
.burst--fire path {
  stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: burst-draw 1.1s cubic-bezier(.2,.8,.2,1) .2s forwards;
}
.burst--fire { filter: drop-shadow(0 0 0 rgba(255,176,46,0)); animation: burst-glow 1.4s ease-out .2s 1; }
@keyframes burst-draw { to { stroke-dashoffset: 0; } }
@keyframes burst-glow {
  0%   { filter: drop-shadow(0 0 0px rgba(255,176,46,0)); }
  55%  { filter: drop-shadow(0 0 10px rgba(255,176,46,.65)); }
  100% { filter: drop-shadow(0 0 0px rgba(255,176,46,0)); }
}

/* ---------------------------------------------------------------------
   6. Interference hairline — constructive-interference fringe rule
   --------------------------------------------------------------------- */
.fringe-rule {
  border: 0; height: 2px;
  background-image: repeating-linear-gradient(90deg,
    var(--coral) 0 6px, transparent 6px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  opacity: .55;
}

/* ---------------------------------------------------------------------
   7. Phase-lock reveal — incoherent → aligned, as a group
   --------------------------------------------------------------------- */
.phase-lock > * {
  opacity: 0;
  transform: translateY(10px) translateX(var(--jx, 0)) rotate(var(--jr, 0deg));
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.2,.8,.2,1);
}
/* give a few children small, varied "incoherent" offsets via :nth-child */
.phase-lock > *:nth-child(3n+1) { --jx: -6px; --jr: -1.2deg; }
.phase-lock > *:nth-child(3n+2) { --jx:  5px; --jr:  1deg; }
.phase-lock > *:nth-child(3n)   { --jx: -3px; --jr:  .6deg; }
.phase-lock.is-visible > * {
  opacity: 1; transform: none;            /* all snap into phase together */
}
.phase-lock.is-visible > *:nth-child(2) { transition-delay: .04s; }
.phase-lock.is-visible > *:nth-child(3) { transition-delay: .08s; }

/* ---------------------------------------------------------------------
   8. In-phase shimmer — a row pulsing opacity in unison (one shared phase)
   --------------------------------------------------------------------- */
.in-phase > * { animation: in-phase 3s ease-in-out infinite; }
@keyframes in-phase {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

/* ---------------------------------------------------------------------
   9. Collective intensify — hover any member, the whole group emits
   --------------------------------------------------------------------- */
.collective:hover > * { color: var(--flame); transition: color .25s ease; }
.collective > * { transition: color .25s ease; }

/* ---------------------------------------------------------------------
   10. Reduced motion — collapse everything to the calm, in-phase state
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .phase-lock > * { opacity: 1; transform: none; transition: none; }
  .in-phase > *   { animation: none; opacity: 1; }
  .burst--fire path { stroke-dashoffset: 0; animation: none; }
  .burst--fire { animation: none; filter: none; }
}