/**
 * The key rack's own visual system: ambient glow, accent threads, star
 * glints, and the hover/focus states. Enqueued after front-page.css —
 * see functions.php.
 *
 * All DOM manipulation (building the actual <path>/<use> elements this
 * CSS targets) happens in assets/js/key-rack.js. The static markup this
 * file styles lives in template-parts/key-rack.php.
 */

.outline {
  fill: none;
  stroke-width: 0.8;
  opacity: 0;
  animation: outline-in 3s ease-out forwards;
  animation-delay: 0.8s;
}
@keyframes outline-in { to { opacity: 1; } }

/* Each key contour carries its own soft, always-on glow — this is what
   makes the keys themselves feel luminous rather than lit from outside.
   It breathes slowly and unevenly (randomised duration/delay per path,
   set in key-rack.js) so the six paths never pulse in unison. This runs
   *alongside* .outline's own fade-in (both are listed here explicitly,
   since a class rule setting animation-name only replaces the single
   winning declaration, it doesn't merge with the other rule's) — the
   fade-in brings the element on, then breathing takes over. */
.key-glow {
  stroke-width: 1.4;
  filter: url(#soft-glow);
  mix-blend-mode: screen;
  animation-name: outline-in, key-breathe;
  animation-timing-function: ease-out, ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
}
@keyframes key-breathe {
  0%, 100% { stroke-opacity: 0.34; }
  50%      { stroke-opacity: 0.58; }
}

/* A thread is a brighter accent gliding over a contour that is already
   glowing — never the sole source of its light. At rest it is fully
   invisible; every appearance is a single, JS-triggered swell (see
   key-rack.js), eased like a tide rather than a switch. */
.thread {
  fill: none;
  stroke-linecap: round;
  filter: url(#soft-glow);
  mix-blend-mode: screen;
  opacity: 0;
}

/* A star glint: a tiny four-point twinkle that appears in place and
   fades — never a moving particle. Positioned at runtime on a random
   point along a key's own contour (see key-rack.js). */
.star-glint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#glint-glow);
  mix-blend-mode: screen;
}

/* Each key is a single hoverable/focusable unit (see key-rack.js for
   how hovering/focusing its nav link toggles .hover here) so it can dip
   and brighten as one piece, as if it really were hanging from the hook
   above it. transform-origin is set per key in key-rack.js, at that
   key's own hook point, so the dip rotates from the right pivot instead
   of the shape's centre. */
.key-group {
  transform-box: view-box;
  transition: transform 420ms cubic-bezier(0.34, 1.2, 0.4, 1);
}
.key-group .key-glow {
  transition: stroke-width 420ms ease-out, filter 420ms ease-out;
}
.key-group.hover .key-glow {
  stroke-width: 2.3;
  filter: url(#soft-glow) brightness(1.4);
}
.key-group[data-key="stories"].hover { transform: translateY(3px) rotate(1.8deg); }
.key-group[data-key="about"].hover   { transform: translateY(3px) rotate(-1.5deg); }

.label {
  fill: #cfd6e6;
  opacity: 0;
  animation: label-in 2.2s ease-out forwards;
  animation-delay: 2.4s;
}
@keyframes label-in { to { opacity: 0.26; } }

@media (prefers-reduced-motion: reduce) {
  .outline { animation: none; opacity: 1; }
  .key-glow { animation: none; stroke-opacity: 0.46; }
  .key-group, .key-group .key-glow { transition: none; }
  .key-group.hover { transform: none; }
  .label { animation: none; opacity: 0.26; }
}