@font-face {
  font-family: "Cal Sans";
  src: url("/assets/cal-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root { color-scheme: light; background: #f0eeef; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: #f0eeef; -webkit-font-smoothing: antialiased; }
.entrance { position: relative; min-height: 100svh; overflow: hidden; }
.stage {
  position: relative;
  width: 100%;
  max-width: 3600px;
  aspect-ratio: 1025 / 501;
  margin: max(0px, calc((100svh - min(100vw, 3600px) * 501 / 1025) / 2)) auto 0;
}
.shop-link {
  position: absolute;
  display: block;
  left: calc(311 / 1025 * 100%);
  top: calc(42 / 501 * 100%);
  width: calc(404 / 1025 * 100%);
  aspect-ratio: 404 / 403.98;
  color: #eb98aa;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4%;
}
#logo-animation, .fallback { position: absolute; inset: 0; pointer-events: none; }
#logo-animation { opacity: 0; }
#logo-animation svg, .fallback img { display: block; width: 100%; height: 100%; }
.shop-link.is-ready #logo-animation { opacity: 1; }
.shop-link.is-ready .fallback { visibility: hidden; }
.hover-art {
  position: absolute;
  left: calc(47 / 404 * 100%);
  top: calc(7.33 / 403.98 * 100%);
  width: calc(310 / 404 * 100%);
  height: auto;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
}
.shop-link:focus { outline: none; }
.shop-link:focus-visible { outline: 2px solid #2d2729; outline-offset: 6px; }
.shop-link.is-complete:focus-visible .hover-art { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .shop-link.is-complete:has(.hover-art:hover) .hover-art { opacity: 1; }
}
.shop-link.is-complete:active .hover-art { opacity: 1; }
@media (max-width: 599px) {
  .stage { aspect-ratio: 320 / 568; margin-top: 0; }
  .shop-link { left: 0; top: calc(102 / 568 * 100%); width: 100%; aspect-ratio: 320 / 319.98; }
  .hover-art { left: calc(37 / 320 * 100%); top: calc(5.71 / 319.98 * 100%); width: calc(246 / 320 * 100%); }
}
@media (prefers-reduced-motion: reduce) { .hover-art { transition: none; } }