:root {
  color-scheme: dark;
  --color-black: #080808;
  --color-ink: #11100c;
  --color-gold: #d8a929;
  --color-gold-bright: #f3d477;
  --color-ivory: #fff8e7;
  --color-text: #ded9ce;
  --color-muted: #918b80;
  --font-sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --font-display: Futura, 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-black);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background:
    linear-gradient(115deg, transparent 44%, rgb(255 226 138 / 2%) 50%, transparent 56%),
    radial-gradient(circle at 50% 44%, #2c230c 0, #13110b 23%, var(--color-black) 62%);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  position: fixed;
  z-index: 20;
  content: '';
  pointer-events: none;
}

body::before {
  inset: 9px;
  border: 1px solid rgb(216 169 41 / 45%);
}

body::after {
  inset: 16px;
  border: 1px solid rgb(216 169 41 / 13%);
}

.glory-page {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 28px clamp(30px, 6vw, 96px) 24px;
  overflow: hidden;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;

  .glory-page__rays {
    position: absolute;
    z-index: -3;
    top: 49%;
    left: 50%;
    width: min(84vw, 1060px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(
      from -8deg,
      rgb(243 212 119 / 4%) 0deg 4deg,
      transparent 4deg 12deg
    );
    mask-image: radial-gradient(circle, transparent 0 23%, #000 47%, transparent 73%);
    transform: translate(-50%, -50%);
    animation: turn-rays 80s linear infinite;
  }

  .glory-page__halo {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(40vw, 500px);
    aspect-ratio: 1;
    border: 1px solid rgb(216 169 41 / 26%);
    border-radius: 50%;
    background: radial-gradient(circle, rgb(216 169 41 / 14%), rgb(216 169 41 / 3%) 42%, transparent 68%);
    box-shadow:
      0 0 80px rgb(216 169 41 / 10%),
      0 0 0 36px rgb(216 169 41 / 2%),
      0 0 0 74px rgb(216 169 41 / 1.5%);
    place-items: center;
    transform: translate(-50%, -46%);
  }

  .glory-page__halo-ring {
    position: absolute;
    border: 1px solid rgb(216 169 41 / 20%);
    border-radius: 50%;
  }

  .glory-page__halo-ring--outer {
    inset: 8%;
  }

  .glory-page__halo-ring--inner {
    inset: 31%;
    border-color: rgb(216 169 41 / 31%);
  }

  .glory-page__halo-mark {
    color: rgb(243 212 119 / 6%);
    font-family: var(--font-display);
    font-size: clamp(82px, 12vw, 180px);
    font-weight: 500;
    letter-spacing: -0.08em;
    transform: translateX(-0.04em);
  }

  .glory-page__spark {
    position: absolute;
    z-index: -1;
    color: var(--color-gold-bright);
    text-shadow: 0 0 18px rgb(243 212 119 / 58%);
    animation: glint 4s ease-in-out infinite;
  }

  .glory-page__spark--one {
    top: 24%;
    left: 18%;
    font-size: 20px;
  }

  .glory-page__spark--two {
    top: 36%;
    right: 18%;
    font-size: 9px;
    animation-delay: -1s;
  }

  .glory-page__spark--three {
    right: 25%;
    bottom: 21%;
    font-size: 15px;
    animation-delay: -2s;
  }

  .glory-page__spark--four {
    bottom: 30%;
    left: 23%;
    font-size: 7px;
    animation-delay: -3s;
  }

  .glory-page__header,
  .glory-page__footer {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    align-items: center;
  }

  .glory-page__header {
    justify-content: space-between;
    gap: 36px;
  }

  .glory-page__logo {
    width: clamp(218px, 24vw, 303px);
    height: auto;
    filter: drop-shadow(0 3px 15px rgb(216 169 41 / 18%));
  }

  .glory-page__status {
    display: flex;
    margin: 0;
    gap: 13px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    align-items: center;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .glory-page__status span {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold));
  }

  .glory-page__status span:last-child {
    transform: rotate(180deg);
  }

  .glory-page__hero {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(100%, 970px);
    margin-inline: auto;
    padding-block: clamp(38px, 5.8vh, 74px);
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .glory-page__eyebrow {
    display: flex;
    margin: 0 0 22px;
    gap: 18px;
    color: var(--color-gold-bright);
    font-size: 11px;
    font-weight: 800;
    align-items: center;
    letter-spacing: 0.38em;
    text-transform: uppercase;
  }

  .glory-page__eyebrow::before,
  .glory-page__eyebrow::after {
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold));
    content: '';
  }

  .glory-page__eyebrow::after {
    transform: rotate(180deg);
  }

  h1 {
    max-width: 940px;
    margin: 0;
    color: var(--color-ivory);
    font-family: var(--font-display);
    font-size: clamp(42px, min(6.1vw, 9.7vh), 88px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0.045em;
    text-shadow:
      0 3px 34px rgb(0 0 0 / 84%),
      0 0 44px rgb(216 169 41 / 8%);
    text-transform: uppercase;
  }

  .glory-page__intro {
    max-width: 650px;
    margin: 24px 0 0;
    color: #aaa397;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.7;
  }

  .glory-page__marquee {
    display: inline-flex;
    min-height: 50px;
    margin-top: 29px;
    padding: 0 22px;
    border-top: 1px solid rgb(216 169 41 / 54%);
    border-bottom: 1px solid rgb(216 169 41 / 54%);
    gap: 15px;
    color: var(--color-gold-bright);
    background: linear-gradient(90deg, transparent, rgb(216 169 41 / 8%), transparent);
    font-size: 10px;
    align-items: center;
    letter-spacing: 0.21em;
    text-transform: uppercase;
  }

  .glory-page__marquee span {
    color: var(--color-gold);
    font-size: 7px;
  }

  .glory-page__footer {
    padding-top: 19px;
    border-top: 1px solid rgb(216 169 41 / 20%);
    color: #746f66;
    font-size: 9px;
    font-weight: 700;
    justify-content: space-between;
    gap: 32px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .glory-page__footer p {
    margin: 0;
  }

  .glory-page__footer span {
    margin-inline: 8px;
    color: var(--color-gold);
  }
}

@keyframes turn-rays {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes glint {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8) rotate(0deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.15) rotate(45deg);
  }
}

@media (max-width: 700px) {
  body::before {
    inset: 5px;
  }

  body::after {
    inset: 11px;
  }

  .glory-page {
    padding: 22px 24px 18px;

    .glory-page__header {
      align-items: flex-start;
      flex-direction: column;
      gap: 16px;
    }

    .glory-page__logo {
      width: 218px;
    }

    .glory-page__status {
      gap: 8px;
      font-size: 8px;
      letter-spacing: 0.13em;
    }

    .glory-page__status span {
      width: 18px;
    }

    .glory-page__hero {
      padding-block: 64px 54px;
    }

    .glory-page__eyebrow {
      margin-bottom: 19px;
      gap: 11px;
      font-size: 9px;
      letter-spacing: 0.31em;
    }

    .glory-page__eyebrow::before,
    .glory-page__eyebrow::after {
      width: 34px;
    }

    h1 {
      font-size: clamp(39px, 11.8vw, 55px);
      line-height: 1.02;
      letter-spacing: 0.025em;
    }

    .glory-page__intro {
      margin-top: 22px;
      font-size: 15px;
      line-height: 1.6;
    }

    .glory-page__marquee {
      margin-top: 27px;
      padding-inline: 12px;
      gap: 10px;
      font-size: 8px;
      letter-spacing: 0.15em;
    }

    .glory-page__footer {
      align-items: flex-start;
      flex-direction: column;
      gap: 9px;
      font-size: 8px;
      line-height: 1.6;
    }

    .glory-page__footer span {
      margin-inline: 3px;
    }

    .glory-page__halo {
      width: 330px;
      transform: translate(-50%, -36%);
    }

    .glory-page__rays {
      width: 700px;
    }

    .glory-page__spark--one {
      top: 30%;
      left: 8%;
    }

    .glory-page__spark--two {
      top: 43%;
      right: 7%;
    }
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  .glory-page {
    padding-top: 22px;

    .glory-page__logo {
      width: 230px;
    }

    .glory-page__hero {
      padding-block: 28px;
    }

    .glory-page__intro {
      margin-top: 17px;
      line-height: 1.5;
    }

    .glory-page__marquee {
      min-height: 43px;
      margin-top: 20px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .glory-page .glory-page__rays,
  .glory-page .glory-page__spark {
    animation: none;
  }
}