@font-face {
  font-family: "Delta Bodoni";
  src: url("fonts/bodoni-moda-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ultramarine: #1a2fae;
  --ultramarine-deep: #0c1773;
  --ivory: #f2ecd9;
  --line: 1px;
  --period: 7px;
  --delta: 1.6deg;
  --tri-soft: 16px;
  --font-display: "Delta Bodoni", "Bodoni 72", "Bodoni MT", Didot, "Didot LT STD", Georgia, serif;
  --word-size: min(19vw, 36vh);
  --word-y: 63vh;
  --dur-hover: 160ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: dark;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background:
    repeating-linear-gradient(90deg, var(--ivory) 0 var(--line), transparent var(--line) var(--period)),
    radial-gradient(120% 120% at 50% 45%, var(--ultramarine) 35%, var(--ultramarine-deep) 100%);
  background-color: var(--ultramarine);
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 900;
}

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.gl .field {
  opacity: 1;
}

.still {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.still-tri {
  position: absolute;
  left: 50%;
  top: 43vh;
  width: 92vh;
  height: 92vh;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(calc(90deg + var(--delta)), var(--ivory) 0 var(--line), transparent var(--line) var(--period));
  -webkit-mask: url("still-mask.svg") center / contain no-repeat;
  mask: url("still-mask.svg") center / contain no-repeat;
}

.down .still-tri {
  transform: translate(-50%, -50%) rotate(180deg);
  top: 57vh;
}

.word {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--word-y);
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: var(--word-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 0.05em var(--ultramarine), 0 0 0.12em var(--ultramarine);
  user-select: none;
}

.js .still,
.js .word {
  opacity: 0;
}

.no-gl .still,
.no-gl .word {
  opacity: 1;
}

.no-gl .field {
  display: none;
}

.home {
  position: fixed;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  padding: 0.4em 0.9em 0.5em;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--ivory);
  text-decoration: none;
  background: var(--ultramarine);
  box-shadow: inset 0 calc(-1 * var(--line)) 0 0 transparent;
  transition: box-shadow var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.home:hover {
  box-shadow: inset 0 -2px 0 0 var(--ivory);
}

.home:active {
  background: var(--ivory);
  color: var(--ultramarine);
}

.home:focus-visible {
  outline: var(--line) solid var(--ivory);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .home {
    transition: none;
  }
}