/* Halloway wordmark — the canonical brand lockup.
 *
 * "HALLOWAY" with a key standing in for the O. This stylesheet + wordmark.js
 * are the ONE source of truth for that lockup; never hand-inline the spans and
 * key SVG again. Render it with the <halloway-wordmark> element or
 * window.HallowayWordmark.html() (see wordmark.js).
 *
 * Resizable by design: every metric here is in `em`, so the lockup scales with
 * whatever `font-size` it inherits — set font-size on the element (or a parent)
 * to make it bigger or smaller; the key tracks the cap height automatically.
 * Colour comes from `currentColor`, so it takes the ink of its context.
 *
 * Shell-only (not part of the hunt-engine layer); never required by a hunt engine. */

halloway-wordmark,
.halloway-wordmark {
  /* Inline so the lockup is layout-transparent — it flows exactly like the bare
     letters would, which keeps centred/justified contexts honest. */
  display: inline;
  font-weight: 600;
  letter-spacing: 0.42em;
  white-space: nowrap;
  color: inherit;
}

.halloway-wordmark--noevil {
  letter-spacing: 0.28em;
}

.halloway-wordmark--noevil .halloway-wordmark__key {
  height: 1.04em;
  margin-left: -0.3em;
  margin-right: 0.05em;
}

/* The key that takes the O's place. Sized to the cap height of the letters and
   seated so the top of its bow meets the cap line; the shaft reads as a slight
   descender. The SVG also carries width/height attributes (wordmark.js) as a
   no-CSS fallback, so it can never balloon to the default replaced-element box.
   These four values are the hardened look — change them only deliberately. */
.halloway-wordmark__key {
  display: inline-block;
  width: auto;
  height: 0.96em;
  vertical-align: -0.24em;
  margin-left: -0.38em;
  margin-right: 0.1em;
  /* Where a tilt scene publishes --hall-x (e.g. the entry hall), the key turns
     in its bow like a key in a lock; everywhere else --hall-x is 0 and it sits
     still — the lockup looks identical, just static. */
  transform: rotate(calc(var(--hall-x, 0) * 7deg));
  transform-origin: 50% 27%;
  transition: transform 200ms ease;
}

/* A tap turns the key once in its bow, then it settles back to its tilt rest.
   The keyframes fold in --hall-x so the turn starts and ends wherever the lean
   currently holds it, instead of snapping to flat. */
.halloway-wordmark__key.is-turning {
  animation: halloway-wordmark-turn 420ms ease-in-out;
}
@keyframes halloway-wordmark-turn {
  0% { transform: rotate(calc(var(--hall-x, 0) * 7deg)); }
  45% { transform: rotate(calc(var(--hall-x, 0) * 7deg + 24deg)); }
  100% { transform: rotate(calc(var(--hall-x, 0) * 7deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .halloway-wordmark__key {
    transform: none;
    transition: none;
  }
  /* The note still plays on tap (sound has its own Settings toggle); only the
     visible turn is stilled. */
  .halloway-wordmark__key.is-turning {
    animation: none;
  }
}