:root {
  --bg-0: #12171c;
  --bg-1: #1b242c;
  --gun-metal: #2a343d;
  --silver: #c5ccd3;
  --silver-bright: #e8eef3;
  --grey: #8b949e;
  --green: #3d8b5c;
  --green-bright: #6fbf88;
  --green-deep: #245c3a;
  --blue: #4d6d86;
  --blue-bright: #7fa3bd;
  --ink: #d7dee4;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 50% 42%, rgba(77, 109, 134, 0.16), transparent 58%),
    radial-gradient(900px 500px at 18% 88%, rgba(36, 92, 58, 0.14), transparent 55%),
    linear-gradient(165deg, var(--bg-0), var(--bg-1) 55%, #151c22);
  color: var(--ink);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(10, 13, 16, 0.58) 100%);
  z-index: 2;
}

.marquees {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 34%,
      transparent 40%,
      transparent 62%,
      #000 68%,
      #000 100%
    );
  mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 34%,
      transparent 40%,
      transparent 62%,
      #000 68%,
      #000 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.mq-word {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-family: var(--marquee-font);
  text-transform: lowercase;
  user-select: none;
  will-change: transform;
  animation-duration: var(--mq-duration, 40s);
  animation-delay: var(--mq-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.mq-word.dir-left {
  animation-name: drift-left;
}

.mq-word.dir-right {
  animation-name: drift-right;
}

body.pause-hover .mq-word:hover {
  animation-play-state: paused;
}

/*
  The crossing is only the first ~22% of the loop. The rest of the
  cycle parks the word off-canvas so two or three share the viewport.
*/
@keyframes drift-left {
  0% {
    transform: translateX(105vw);
  }
  22% {
    transform: translateX(-130%);
  }
  22.01%,
  100% {
    transform: translateX(-130%);
  }
}

@keyframes drift-right {
  0% {
    transform: translateX(-130%);
  }
  22% {
    transform: translateX(105vw);
  }
  22.01%,
  100% {
    transform: translateX(-130%);
  }
}

.mq-word .mark {
  font-weight: 700;
  text-transform: uppercase;
}

.mark-g { color: var(--green-bright); }
.mark-r { color: var(--silver-bright); }
.mark-x { color: #aeb6be; }
.mark-e { color: var(--blue-bright); }

.hero {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem 5rem;
}

.mark-grxe {
  margin: 0;
  font-family: var(--hero-font);
  font-size: var(--hero-size);
  font-weight: var(--hero-weight, 700);
  letter-spacing: var(--hero-tracking, 0.18em);
  line-height: 0.92;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.02em;
  user-select: none;
}

.mark-grxe .g { color: var(--g, #5aa873); }
.mark-grxe .r { color: var(--r, #d4dce3); }
.mark-grxe .x { color: var(--x, #9aa3ad); }
.mark-grxe .e { color: var(--e, #6e8fa8); }

.mark-grxe.has-glow .g {
  text-shadow: 0 0 28px color-mix(in srgb, var(--g) 45%, transparent), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.mark-grxe.has-glow .r {
  text-shadow: 0 0 24px color-mix(in srgb, var(--r) 35%, transparent), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.mark-grxe.has-glow .x {
  text-shadow: 0 0 22px color-mix(in srgb, var(--x) 30%, transparent), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.mark-grxe.has-glow .e {
  text-shadow: 0 0 26px color-mix(in srgb, var(--e) 40%, transparent), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.mark-grxe.rendering-classic {
  gap: 0.02em;
}

.mark-grxe.rendering-monumental {
  gap: 0.08em;
  text-transform: none;
}

.mark-grxe.rendering-compact {
  gap: 0;
  font-stretch: condensed;
}

.mark-grxe.rendering-tech {
  gap: 0.12em;
}

.mark-grxe.rendering-tech span {
  -webkit-text-stroke: 1px color-mix(in srgb, currentColor 55%, transparent);
}

.mark-grxe.rendering-liturgical {
  gap: 0.06em;
  font-style: italic;
}

.mark-grxe span {
  transform: none;
}

.tagline {
  margin: 1.35rem 0 0;
  max-width: 28rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 1.1rem 1.25rem 1.35rem;
  text-align: center;
  background: linear-gradient(to top, rgba(12, 16, 20, 0.88), transparent);
}

footer p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #8e99a3;
}

@media (prefers-reduced-motion: reduce) {
  .mq-word {
    animation: none !important;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  footer p {
    letter-spacing: 0.03em;
  }
}