/* Independent interface ink; no blend modes or artwork backing panels. */
body {
  --hud-ink: #f5f5f0;
  --sound-off: #d58a80;
  --sound-on: #8bbaa0;
  --hud-edge: clamp(18px, 2.8vw, 44px);
  --hud-left: max(var(--hud-edge), calc(env(safe-area-inset-left, 0px) + 12px));
  --hud-right: max(var(--hud-edge), calc(env(safe-area-inset-right, 0px) + 12px));
  --hud-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
}
body[data-ui-tone='dark'] { --hud-ink: #151515; --sound-off: #a14b43; --sound-on: #467958; }
.controls, .scroll-cue, .story-edge {
  position: fixed; z-index: 30; color: var(--hud-ink);
  transition: color 200ms ease;
}
.controls, .scroll-cue {
  bottom: var(--hud-bottom); font: 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .15em; text-transform: uppercase;
}
.controls { left: var(--hud-left); display: flex; align-items: center; gap: 18px; }
.controls button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0; gap: 8px;
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit;
  white-space: nowrap; cursor: pointer; opacity: .82;
  transition: opacity 180ms ease; -webkit-tap-highlight-color: transparent;
}
.controls button::after {
  content: ''; position: absolute; left: 0; bottom: 10px; width: 8px; height: 1px;
  background: currentColor; opacity: 0; transform: translateX(-3px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.controls button:hover, .controls button:focus-visible { opacity: 1; }
.controls button:hover::after, .controls button:focus-visible::after { opacity: .65; transform: none; }
.controls button:focus-visible, .scroll-cue:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sound-wave { display: flex; gap: 2px; align-items: center; width: 10px; height: 12px; color: var(--sound-off); transition: color 180ms ease; }
.sound-wave i { width: 2px; height: 10px; background: currentColor; transform: scaleY(.25); }
.sound-wave i:nth-child(2) { transform: scaleY(.5); }
#music[data-playing='true'] .sound-wave { color: var(--sound-on); }
#music[data-playing='true'] .sound-wave i { animation: hud-wave 2300ms ease-in-out infinite alternate; }
#music[data-playing='true'] .sound-wave i:nth-child(2) { animation-duration: 3100ms; animation-delay: -1300ms; }
#music[data-playing='true'] .sound-wave i:nth-child(3) { animation-duration: 2700ms; animation-delay: -700ms; }
@keyframes hud-wave { from { transform: scaleY(.3); } to { transform: scaleY(.85); } }

.story-edge {
  /* Persistent shell layer above transition covers, below the brand. */
  z-index: 105;
  color: var(--edge-ink, var(--hud-ink));
  right: max(12px, env(safe-area-inset-right, 0px));
  top: max(32px, calc(env(safe-area-inset-top, 0px) + 12px));
  bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  width: 20px; pointer-events: none; overflow: hidden;
}
.edge-field { position: absolute; top: -96px; right: 0; width: 100%; height: calc(100% + 192px); }
.edge-pattern { position: absolute; inset: 0 0 0 auto; width: 20px; height: 100%; transform-origin: right center; }
.edge-accent { position: absolute; right: 0; top: 50%; width: 20px; height: 2px; border-radius: 1px; background: currentColor; opacity: .96; }
.scroll-cue { right: var(--hud-right); width: 24px; height: 44px; opacity: 0; }
.scroll-cue[data-ready='false'] { pointer-events: none; }
.cue-mark {
  position: absolute; top: 16px; right: 11px; width: 1px; height: 12px;
  background: currentColor; opacity: .7; animation: hud-arrive 180ms ease both;
}
.cue-mark::after { content: ''; position: absolute; left: -2px; bottom: 0; width: 5px; height: 1px; background: currentColor; }
.cue-label {
  position: absolute; right: 24px; top: 17px; white-space: nowrap;
  opacity: .85; transition: opacity 180ms ease;
}
.scroll-cue:focus-visible .cue-label { opacity: 1; }
@media (hover: hover) {
  .scroll-cue:hover .cue-label { opacity: 1; }
}
body[data-scene='opening'] .cue-label { right: 0; }
body[data-scene='opening'] .cue-mark { display: none; }
@keyframes hud-arrive { from { opacity: 0; } to { opacity: .7; } }

/* The opening keeps its existing assets; the permanent mark is always red/white. */
.is-ready .brand.is-corner .brand-mark-dark { opacity: 0; }
.is-ready .brand.is-corner .brand-mark-white { opacity: 1; }
body[data-edge-tone='dark'] { --edge-ink: #151515; }
body[data-edge-tone='light'] { --edge-ink: #f5f5f0; }
.brand.is-corner .brand-mark img { transition-duration: 200ms; }
.brand.is-corner { top: max(clamp(13px, 1.8vw, 30px), calc(env(safe-area-inset-top, 0px) + 8px)); left: max(clamp(13px, 1.8vw, 30px), calc(env(safe-area-inset-left, 0px) + 8px)); }
@media (max-width: 700px) {
  body { --hud-edge: 16px; }
  .controls { gap: 12px; }
  .controls, .scroll-cue { font-size: 9px; letter-spacing: .11em; }
  .story-edge { width: 14px; right: max(8px, env(safe-area-inset-right, 0px)); top: max(28px, calc(env(safe-area-inset-top, 0px) + 12px)); bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px)); }
  .edge-pattern { transform: scaleX(.75); }
  .edge-accent { width: 14px; }
  /* The reused narrow Contact form extends further right than the story HUD. */
  body[data-scene='contact'] .story-edge { right: max(2px, env(safe-area-inset-right, 0px)); width: 8px; }
  body[data-scene='contact'] .edge-pattern { transform: scaleX(.5); }
  body[data-scene='contact'] .edge-accent { width: 8px; }
  .brand.is-corner { top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px)); }
}
@media (max-width: 350px) { .controls { gap: 8px; } .controls button { gap: 5px; } }
@media (prefers-reduced-motion: reduce) {
  .controls, .controls button, .controls button::after, .scroll-cue, .cue-label, .sound-wave, .brand.is-corner .brand-mark img { transition: none; }
  #music[data-playing='true'] .sound-wave i, .cue-mark { animation: none; }
}