/* Splash (not part of the Osmo resource): the intro of lamalama.com, ported 1:1 with the owner's smiley as its mark
   (see splash.js). The counter is their loader's mono number on black (weight 500, -0.02em), made big */
@font-face {
  font-family: "Sometype Mono";
  src: url("fonts/sometype-mono-500.woff") format("woff");
  font-weight: 500;
  font-display: block;
}

.splash {
  z-index: 2000; /* over the grid and the guide */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #000;
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-size: calc(10 / 16 * 1rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* if the script never runs, the splash still steps aside */
.splash {
  animation: splash-failsafe 0s 20s forwards;
}

@keyframes splash-failsafe {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

.splash[data-playing] {
  pointer-events: none; /* while the mark plays out the page underneath can already be used */
}

.splash__canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.splash__counter {
  position: relative;
  font-size: clamp(3rem, 9vw, 7rem); /* big: theirs was 10 px */
  line-height: 1.15;
  white-space: nowrap;
}

.splash__line {
  display: inline-block; /* so it can slide up and out (splash.js) */
}

/* back from the other format in the same tab: the page comes straight in (index.html's head script) */
html[data-splash-skip] .splash {
  display: none;
}