/* Avenir Display L — shared with SplashNameLayout. Figma lockups 900:26/68.
   The supplied SVG root dimensions/viewBoxes remain intact; wrappers scale. */
@font-face {
  font-family: "Avenir Next";
  src: url("../assets/assets/fonts/avenir_next/AvenirNext-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root { color-scheme: dark light; --splash-bg: #000; --splash-fg: #dfdddf; }
@media (prefers-color-scheme: light) {
  :root { --splash-bg: #fff; --splash-fg: #1c1b1c; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--splash-bg); overflow: hidden; }
#loading {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  overflow: hidden; background: var(--splash-bg); color: var(--splash-fg);
}
.splash-lockup {
  --display-size: 52px; --mark-size: 12px;
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 24px 16px; isolation: isolate;
}
.splash-name {
  position: relative; font-family: "Avenir Next", system-ui, sans-serif;
  font-size: var(--display-size); font-weight: 600; line-height: 110%;
  letter-spacing: -0.01em; font-kerning: normal; text-align: center;
  white-space: nowrap;
}
.splash-name-source { display: inline-block; }
.splash-letter { position: absolute; inset: 0; pointer-events: none; }
.splash-halo {
  position: absolute; width: calc(var(--display-size) * 8.6);
  aspect-ratio: 825 / 845.25; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
}
.splash-halo img, .splash-mark img { display: block; width: 100%; height: 100%; }
/* DS opacity 64/80 lives on the artwork so reveal cancellation and the
   completed lockup keep exactly the same, restrained visual intensity. */
.splash-halo img { opacity: .64; }
.splash-mark img { opacity: .8; }
.splash-mark { width: var(--mark-size); height: var(--mark-size); }
@media (min-width: 780px) {
  .splash-lockup { --display-size: 66px; --mark-size: 16px; }
}
@media (min-width: 1200px) {
  .splash-lockup { --display-size: 80px; --mark-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #loading, #loading * { animation: none !important; transition: none !important; }
}