:root {
  --void: #04050a;
  --steel: #131a2b;
  --sheen: #7a8cab;
  --tube: 255, 233, 204; /* warm tube light, as r,g,b */
  --paper: #fbf7f0; /* the lit logo */
  --text-2: rgba(236, 239, 246, 0.82);
  --text-3: rgba(236, 239, 246, 0.5);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font:
    "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, system-ui,
    sans-serif;

  box-sizing: border-box;
  color-scheme: dark;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  height: 100%;
  scroll-padding-top: env(safe-area-inset-top, 0px);
  background: var(--void);
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 48%, #0d1322 0%, rgba(13, 19, 34, 0) 70%),
    var(--void);
  color: var(--text-2);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--paper);
  color: var(--void);
}

/* ---------- background ---------- */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.grain {
  position: fixed;
  inset: -120px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-size: 160px 160px;
  animation: grain 1.1s steps(1) infinite;
}
@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  16% {
    transform: translate(-38px, 22px);
  }
  33% {
    transform: translate(26px, -45px);
  }
  50% {
    transform: translate(-60px, -18px);
  }
  66% {
    transform: translate(44px, 52px);
  }
  83% {
    transform: translate(-12px, 66px);
  }
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0 6vw;
  transform: translateY(-2.5svh);
}

/* ---------- the sign ---------- */
.sign {
  margin: 0;
  position: relative;
  display: block;
  --w: min(76vw, calc(46svh * 2.612), 940px);
  width: var(--w);
  aspect-ratio: 1959 / 750;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.letters {
  position: absolute;
  inset: 0;
  display: block;
}

.l {
  position: absolute;
  display: block;
  --v: 1;
  --h: 1;
}
.js .l {
  --v: 0.04;
  --h: 0.04;
}

/* every layer of a letter wears the same alpha mask */
.l i,
.l .c {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
  mask: var(--m) center / 100% 100% no-repeat;
}
.l .c {
  background: var(--paper);
  opacity: var(--v);
  will-change: opacity;
}

/* ---------- tagline ---------- */
.tag {
  margin: clamp(26px, 5.2svh, 54px) 0 0;
  max-width: 42ch;
  font-weight: 300;
  font-size: clamp(0.95rem, 0.62rem + 0.9vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-align: center;
  text-wrap: balance;
  color: var(--text-2);
}
.js .tag {
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity 1.8s var(--ease),
    filter 1.8s var(--ease);
}
.js .tag.on {
  opacity: 1;
  filter: blur(0);
}

/* ---------- button ---------- */
.cta {
  margin-top: clamp(22px, 4svh, 40px);
  padding: 14px 34px;
  border-radius: 999px;
  background: #001fcc;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition:
    opacity 1.8s var(--ease),
    box-shadow 0.4s var(--ease);
}
/* hover: the button strikes up like a tube, a few stutters, then holds lit */
.cta:hover,
.cta:focus-visible {
  animation: strike 0.5s steps(1) forwards;
  box-shadow:
    0 0 0 1px rgba(var(--tube), 0.55),
    0 0 28px 4px rgba(0, 31, 204, 0.7),
    0 0 80px 10px rgba(0, 31, 204, 0.35);
}
@keyframes strike {
  0% {
    filter: brightness(0.7);
  }
  12% {
    filter: brightness(1.5);
  }
  24% {
    filter: brightness(0.8);
  }
  40% {
    filter: brightness(1.4);
  }
  52% {
    filter: brightness(0.9);
  }
  70%,
  100% {
    filter: brightness(1.25);
  }
}
.cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.js .cta {
  opacity: 0;
  pointer-events: none;
}
.js .tag.on ~ .cta {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- footer ---------- */
.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  pointer-events: none;
}

@media (max-width: 520px) {
  .stage {
    transform: translateY(-4svh);
  }
  .tag {
    letter-spacing: 0.07em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta:hover,
  .cta:focus-visible {
    animation: none;
    filter: brightness(1.25);
  }
  .grain {
    animation: none;
  }
  .js .tag {
    transition-duration: 1.2s;
    filter: none;
  }
}

/* ---------- modal ---------- */

.modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
}

.modal.is-show {
  display: block;
}

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background-color: rgb(0 0 0 / 0.8);
}

.modal__form {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, calc(100% - 10px));
  border-radius: 10px;
  background-color: #161616;
  padding: 20px 15px 15px;
  @media (width > 600px) {
    top: 10%;
  }
}

.modal__form p {
  font-size: 14px;
  margin-bottom: 20px;
}

#wpforms-form-6 .wpforms-field {
  padding: 0;
  margin-bottom: 10px;
  width: 100%;
}
#wpforms-form-6 label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
}

#wpforms-form-6 .wpforms-field input,
#wpforms-form-6 .wpforms-field textarea {
  width: min(370px, 100%);
  padding: 8px 18px;
  outline: none;
  margin-top: 5px;
  max-width: unset;
}
#wpforms-form-6 .wpforms-field textarea {
  height: 140px;
}
button#wpforms-submit-6 {
  display: block;
  margin-top: 15px;
  background-color: #001fcc;
  border: none;
  padding: 10px 18px;
  width: 100%;
  font-weight: 400px;
  font-size: 14px;
}

.btn__close {
  position: absolute;

  top: 20px;
  right: 10px;
  display: inline-block;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.btn__close span {
  display: block;
  width: 15px;
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s ease;
}
.btn__close span:first-child {
  transform: translate(0, 3.5px) rotate(45deg);
}

.btn__close span:last-child {
  transform: translate(0px, 1.5px) rotate(-45deg);
}
#letters {
  transform: scale(0.8);
  transform-origin: center;
}