/* ============================================================================
   Psychodeli banded ring-stack wordmark — THE canonical brand mark.
   This is a faithful extraction of the brand-guide source (the single source of
   truth, owned by psychodeli-brand-guide):
       templates/logo-wordmark-banded-animated.html  (.nb ring stack)
   Stroke radii are the brand-guide's exact px-at-120px proportions converted to
   `em` so the mark scales with the host font-size. Do NOT retune them — the fat
   alternating dark/bright bands ARE the identity; thin rings read as flat
   outlined text (the failure mode).

   ⚠️  REQUIRES Nunito 900 — the radii are tuned to Nunito's heavy round letters.
   The @import below makes the font travel WITH the mark; never port these rules
   without it.

   Markup (brand string is lowercase `psychodeli` / `psychodeli+`):
     <h1 class="wordmark" aria-label="psychodeli" style="--hue:196">
       <span class="nb nb-ring nb-r10" aria-hidden="true">psychodeli</span>
       … r9 … r1 …
       <span class="nb nb-fill">psychodeli</span>
     </h1>
   Host owns only the .wordmark CONTAINER (font-size / position / --hue). One hue
   knob (`--hue`, 0–360) recolours the whole banded ramp; cyan 196 = the product
   mark, gold/magenta = studio. Rainbow lives ACROSS instances, never within one.
   ============================================================================ */
@import url('fonts/nunito.css');

.wordmark {
  position: relative; display: block; --hue: 196;
  line-height: 1.2;   /* canonical value — with line-height < 1 the in-flow fill's glyphs bleed
                         out of the line box and drift from the absolute rings (jumbled layers). */
}
.wordmark .nb {
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 900;
  font-size: inherit; letter-spacing: -0.0167em; line-height: 1.2; white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent; paint-order: stroke fill;
}
/* Outer wide rings carry a dark counter-fill so letter holes (p, o, e, d) stay open. */
.wordmark .nb-r10, .wordmark .nb-r9, .wordmark .nb-r8 { -webkit-text-fill-color: rgba(5,5,16,0.95); }
/* ALL visible layers are absolute at the same origin → pixel-perfect registration
   (no in-flow-vs-absolute baseline drift). A hidden in-flow .nb-sizer gives the
   container its box. This is what keeps the layers from jumbling. */
.wordmark .nb-ring, .wordmark .nb-fill { position: absolute; top: 0; left: 0; }
.wordmark .nb-sizer { position: static; visibility: hidden; }
/* Banded ramp — brand-guide px-at-120 ÷ 120 = em. Even rings = dark separators
   (hsl hue 45% 7%); r7/r5/r3/r1 = bright bands at rising lightness. */
.wordmark .nb-r10 { -webkit-text-stroke: 0.633em rgba(0,0,0,0.78); }
.wordmark .nb-r9  { -webkit-text-stroke: 0.567em hsl(var(--hue),45%,7%); }
.wordmark .nb-r8  { -webkit-text-stroke: 0.5em   hsl(var(--hue),45%,7%); }
.wordmark .nb-r7  { -webkit-text-stroke: 0.433em hsl(var(--hue),95%,46%); }
.wordmark .nb-r6  { -webkit-text-stroke: 0.367em hsl(var(--hue),45%,7%); }
.wordmark .nb-r5  { -webkit-text-stroke: 0.308em hsl(var(--hue),95%,58%); }
.wordmark .nb-r4  { -webkit-text-stroke: 0.25em  hsl(var(--hue),45%,7%); }
.wordmark .nb-r3  { -webkit-text-stroke: 0.192em hsl(var(--hue),95%,70%); }
.wordmark .nb-r2  { -webkit-text-stroke: 0.117em hsl(var(--hue),45%,7%); }
.wordmark .nb-r1  { -webkit-text-stroke: 0.05em  hsl(var(--hue),95%,82%); }
.wordmark .nb-fill { z-index: 10; -webkit-text-stroke: 0; -webkit-text-fill-color: hsl(var(--hue),92%,88%); }

/* Staggered ring-pulse: each bright band brightens at mid-cycle, delayed so the
   flare sweeps r7 → r1 (outer → letter). */
@keyframes nb-pulse-r7 { 0%,100% { -webkit-text-stroke-color: hsl(var(--hue),95%,46%); } 50% { -webkit-text-stroke-color: hsl(var(--hue),100%,66%); } }
@keyframes nb-pulse-r5 { 0%,100% { -webkit-text-stroke-color: hsl(var(--hue),95%,58%); } 50% { -webkit-text-stroke-color: hsl(var(--hue),100%,78%); } }
@keyframes nb-pulse-r3 { 0%,100% { -webkit-text-stroke-color: hsl(var(--hue),95%,70%); } 50% { -webkit-text-stroke-color: hsl(var(--hue),100%,88%); } }
@keyframes nb-pulse-r1 { 0%,100% { -webkit-text-stroke-color: hsl(var(--hue),95%,82%); } 50% { -webkit-text-stroke-color: hsl(var(--hue),100%,96%); } }
.wordmark .nb-r7 { animation: nb-pulse-r7 2.2s ease-in-out infinite 0s; }
.wordmark .nb-r5 { animation: nb-pulse-r5 2.2s ease-in-out infinite 0.16s; }
.wordmark .nb-r3 { animation: nb-pulse-r3 2.2s ease-in-out infinite 0.32s; }
.wordmark .nb-r1 { animation: nb-pulse-r1 2.2s ease-in-out infinite 0.48s; }
@media (prefers-reduced-motion: reduce) { .wordmark [class*="nb-r"] { animation: none; } }