.badge-scene {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.badge-scene > canvas { display: block; width: 100%; height: 100%; }
.badge-handle {
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 18px;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.is-dragging .badge-handle { cursor: grabbing; }
.badge-handle:focus-visible { outline: 1px solid #cdbcd8; outline-offset: 8px; }
.badge-scene.is-leaving .badge-handle { pointer-events: none; }
.badge-scene[hidden], .intro-screen[hidden] { display: none; }
.scroll-hint {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  color: #96969e;
  text-align: center;
  white-space: nowrap;
  font: 400 12px/16px Arial, sans-serif;
  pointer-events: none;
}
body[data-phase="leaving"] .scroll-hint,
body[data-phase="intro"] .scroll-hint,
body[data-phase="returning"] .scroll-hint { visibility: hidden; }
.contact-dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 180px;
  height: 52px;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 260ms ease, translate 360ms ease, visibility 260ms;
}
.contact-dock.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.say-hi {
  position: absolute;
  left: 20px;
  top: 0;
  min-width: 140px;
  min-height: 52px;
  padding: 14px 32px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #090a0d;
  font: 500 16px/24px Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), background-color 150ms ease;
}
.contact-options { position: absolute; inset: 0; pointer-events: none; }
.contact-option {
  position: absolute;
  left: 64px;
  top: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #090a0d;
  opacity: 0;
  transform: translateX(0) scale(.75);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, background-color 150ms ease;
}
.contact-option svg { width: 22px; height: 22px; fill: currentColor; }
.contact-option .mail-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.contact-dock.is-open .say-hi { opacity: 0; transform: scale(.75); pointer-events: none; }
.contact-dock.is-open .contact-option { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.contact-dock.is-open .contact-option:first-child { transform: translateX(-64px) scale(1); }
.contact-dock.is-open .contact-option:last-child { transform: translateX(64px) scale(1); }
.contact-option:hover { background: #e9e9ed; }
.contact-option:focus-visible { outline: 2px solid #cdbcd8; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .contact-dock, .say-hi, .contact-option { transition: none; } }
.say-hi:hover { background: #e9e9ed; }
.say-hi:active { background: #d9d9df; }
.say-hi:focus-visible { outline: 2px solid #cdbcd8; outline-offset: 5px; }
.intro-screen { position: fixed; inset: 0; display: grid; place-items: center; }
.intro {
  display: grid;
  width: min(660px, calc(100% - 48px));
  margin: 0;
  text-align: center;
  font: 400 clamp(22px, 3.2vw, 32px)/1.25 "Selecta Trial Unlicensed", "Selecta", Arial, sans-serif;
}
.intro > span { grid-area: 1 / 1; }
.intro-size { visibility: hidden; }
.intro-typed {
  background: linear-gradient(110deg, #a885c4 0%, #cdbcd8 20%, #faa3d8 38%, #f0e3fa 50%, #b998dd 65%, #faa3d8 82%, #cdbcd8 100%);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: intro-shimmer 8s ease-in-out -3s infinite alternate;
}
@keyframes intro-shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .intro-typed { animation: none; } }