/* src/styles/genband.css */
/* seltzdesign — generative band motion styles (Instatic style code asset)
   Companion to genband.js. The site CSS imported at Super-Import time
   predates the interactive band, so these rules ship as a supplement
   asset. If the site styles are ever re-imported from
   website/assets/css/style.css this asset becomes redundant (harmless
   duplication) and can be removed. Token vars carry literal fallbacks
   in case the design tokens are renamed. */

/* Tooltip anchor (the imported .genband rule lacks position) */
.genband { position: relative; }

.genband__cell {
  transition: background-color 1s ease, border-radius 1s ease, transform .18s ease;
}

/* Neutral cells squash when pressed. The duration list maps onto the
   transition-property order above, so only transform snaps fast. */
div.genband__cell:active { transform: scale(.78); transition-duration: 1s, 1s, .06s; }

/* Orange cells are links to projects (built in genband.js). Mouse-only
   easter egg: the band is aria-hidden and the anchors tabindex="-1",
   since every target duplicates a real link in the content below. */
a.genband__cell { cursor: pointer; position: relative; }
a.genband__cell:hover { transform: scale(1.45); z-index: 2; }

/* Windows High Contrast / forced-colors strips backgrounds — keep the
   band legible and the link cells visibly distinct via borders. */
@media (forced-colors: active) {
  a.genband__cell { border: 1px solid LinkText; }
  div.genband__cell { border: 1px solid GrayText; }
}

/* Hairline ring used by the one-shot entrance ping */
a.genband__cell::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1.5px solid var(--c-orange, #F89000);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* Motion: staggered pop-in, plane-wave breathe (neutral cells only,
   phase-offset per cell so a 16s opacity wave rolls left to right),
   and the entrance ping cadence. Delays are set per-cell in JS.
   Channel plan: breathe owns opacity, the automaton (JS) owns
   background-color, transitions own transform. */
@media (prefers-reduced-motion: no-preference) {
  .genband__grid.is-live .genband__cell {
    animation: genband-pop .55s cubic-bezier(.2, .7, .3, 1.4) backwards;
  }
  .genband__grid.is-live div.genband__cell {
    animation: genband-pop .55s cubic-bezier(.2, .7, .3, 1.4) backwards,
               genband-breathe 16s ease-in-out infinite;
  }
  .genband__grid.is-cadence a.genband__cell::after {
    animation: genband-ping .7s ease-out both;
    animation-delay: var(--ping, 0ms);
  }
  /* JS toggles .is-paused while the band is scrolled offscreen */
  .genband__grid.is-paused .genband__cell { animation-play-state: paused; }
}
@keyframes genband-pop { from { opacity: 0; transform: scale(.2); } }
@keyframes genband-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .85; } }
@keyframes genband-ping {
  from { opacity: .9; transform: scale(.6); }
  to   { opacity: 0;  transform: scale(2); }
}

/* Floating label above a hovered orange cell */
.genband__tip {
  position: absolute;
  z-index: 5;
  padding: 4px 9px;
  background: var(--c-ink, #1a1a1a);
  color: var(--c-surface, #fbfaf7);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) rotate(-2deg);
  transition: opacity .15s ease;
}
.genband__tip.is-visible { opacity: 1; }