/* owned by the chrome-ui agent: the seal, HUD, wordmark, veil, turn-again states */

/* ---------- the seal (nav) ---------- */
#seal.seal {
  position: fixed;
  top: var(--gutter);
  right: var(--gutter);
  width: 88px;
  height: 88px;
  z-index: 30;
  --seal: 0;
  --red: 0;
}
.seal__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.seal__ghost { fill: none; stroke: var(--color-rule); stroke-width: 0.7; opacity: 0.9; }
.seal__cut, .seal__red {
  fill: none;
  stroke-linecap: square;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.seal__cut { stroke: var(--color-bone); stroke-width: 1.25; opacity: 0.86; transition: stroke-dashoffset 900ms var(--ease-in-out), stroke var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out); }
.seal__side.is-carved .seal__cut { stroke-dashoffset: 0; }
.seal__side.is-current .seal__cut { stroke: var(--color-cinnabar-hi); opacity: 1; }
/* hover / focus: an uncut side previews its cut faintly; a cut side brightens */
.seal__side.is-hover .seal__cut { stroke-dashoffset: 0; opacity: 0.4; transition-duration: 0ms; }
.seal__side.is-carved.is-hover .seal__cut { opacity: 1; stroke-width: 1.6; }
.seal__red { stroke: var(--color-cinnabar); stroke-width: 1.6; }
.seal__glyph {
  fill: var(--color-cinnabar);
  transform-origin: 50px 50px;
  transform: scale(calc(0.35 + 0.65 * var(--seal)));
  opacity: var(--seal);
}
#seal.is-sealed .seal__ghost { opacity: 0; }

.seal__btn {
  position: absolute;
  width: 37%;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* the focus ring hugs the carved line (the hit box itself stays generous) */
.seal__btn::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
  outline: 2px solid transparent;
  outline-offset: 0;
}
.seal__btn:focus { outline: none; }
.seal__btn:focus-visible::before { outline-color: var(--color-focus); }
.seal__btn:active::before { outline: 1px solid var(--color-cinnabar); }
.seal__btn:disabled { cursor: not-allowed; opacity: 0.4; }

.seal__label {
  position: absolute;
  right: calc(100% + var(--space-xs));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 400 var(--text-2xs) / 1 var(--font-text);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-bone);
  background: var(--color-scrim);
  padding: var(--space-3xs) var(--space-2xs);
  border-left: var(--rule-hair) solid var(--color-rule);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
#seal.is-labelled .seal__label { opacity: 1; }

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  bottom: var(--gutter);
  z-index: 30;
  margin: 0;
  font: 400 var(--text-2xs) / 1 var(--font-text);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--color-ash);
}
#bearing.hud--bearing { left: var(--gutter); padding: var(--space-2xs) 0; border-top: var(--rule-hair) solid var(--color-rule); min-width: 15ch; pointer-events: none; }

#sound.hud--sound {
  right: var(--gutter);
  min-height: 32px;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-none);
  background: var(--color-scrim);
  color: var(--color-ash);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { #sound.hud--sound:hover { color: var(--color-bone); border-color: var(--color-bone); } }
#sound.hud--sound:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; color: var(--color-bone); }
#sound.hud--sound:active { background: var(--color-surface); }
#sound.hud--sound[aria-pressed="true"] { color: var(--color-bone); border-color: var(--color-cinnabar); }
#sound.hud--sound:disabled { opacity: 0.4; cursor: not-allowed; }
#sound[hidden] { display: none; }

/* ---------- wordmark ---------- */
#wordmark.wordmark {
  position: fixed;
  top: var(--gutter);
  left: var(--gutter);
  z-index: 30;
  margin: 0;
  font: 400 2.25rem / 0.85 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--color-bone);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid);
}
#wordmark.wordmark.is-shown { opacity: 1; visibility: visible; transition: opacity var(--dur-mid) var(--ease-out), visibility 0s; }

/* ---------- loading veil ---------- */
#veil.veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-void);
  pointer-events: none;
  transition: opacity 600ms var(--ease-in-out);
}
#veil.veil.is-gone { opacity: 0; }

/* ---------- turn again (behaviour in ui.js; states here) ---------- */
#turn-again {
  border-radius: var(--radius-none);
  cursor: pointer;
}
#turn-again:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
#turn-again:disabled { opacity: 0.4; cursor: not-allowed; }
#copy h1:focus { outline: none; }
#copy h1:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- phones ---------- */
@media (max-width: 600px) {
  #seal.seal { width: 72px; height: 72px; }
  .seal__btn { height: 24px; }
  #wordmark.wordmark { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .seal__cut, .seal__label, #wordmark.wordmark, #sound.hud--sound { transition: none; }
  #veil.veil { transition-duration: 200ms; }
}
html.is-reduced .seal__cut { transition: none; }