:root {
  color-scheme: dark;
  --paper: #f5f3ee;
  --red: #c51e3d;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: #08090a;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--paper);
}

.landing {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding: max(28px, 4vh) max(24px, 5vw) max(28px, 4vh);
  background: radial-gradient(ellipse at 50% 42%, #222326 0, #111213 44%, #08090a 78%);
}

.landing::before,
.landing::after,
.ambient {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.landing::before {
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.landing::after {
  background:
    linear-gradient(90deg, #0009, transparent 24%, transparent 76%, #0009),
    linear-gradient(#0008, transparent 22%, transparent 72%, #000b);
}

.ambient {
  inset: 12% 15% 18%;
  background: radial-gradient(ellipse, #a9172e1a, transparent 65%);
  filter: blur(42px);
}

.hero {
  align-self: center;
  justify-self: center;
  width: min(86rem, 68vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 6vh, 76px);
  transform: translateY(2vh);
}

.brand-lockup {
  position: relative;
  width: 100%;
  display: block;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.brand-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: transparent;
  pointer-events: none;
}

.ident-pending .brand-logo,
.ident-playing .brand-logo { visibility: hidden; }
.ident-playing .brand-animation { display: block; }

.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.statement p,
.soon {
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .48em;
}

.statement p {
  font-size: clamp(16px, 1.55vw, 25px);
  padding-left: .48em;
}

.statement span {
  display: block;
  width: 124px;
  height: 8px;
  background: linear-gradient(90deg, #9e1229, var(--red), #ec3a45);
  box-shadow: 0 0 20px #c51e3d44;
}

.soon {
  align-self: end;
  justify-self: center;
  font-size: clamp(10px, .85vw, 14px);
  padding-left: .48em;
  color: #e8e5dfa8;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  .landing {
    padding: clamp(24px, 7vh, 56px) 18px 32px;
    background: radial-gradient(ellipse at 50% 37%, #222326 0, #101112 48%, #08090a 82%);
  }

  .hero {
    width: min(100%, 34rem);
    gap: 42px;
    transform: none;
  }

  .statement { gap: 19px; }

  .statement p {
    font-size: 14px;
    letter-spacing: .36em;
    padding-left: .36em;
  }

  .statement span {
    width: 86px;
    height: 6px;
  }

  .soon {
    font-size: 10px;
    letter-spacing: .38em;
    padding-left: .38em;
  }
}

@media (max-width: 420px) {
  .brand-lockup {
    width: 100%;
  }

  .statement p { font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .statement {
    animation: arrive .85s .12s cubic-bezier(.2, .75, .25, 1) both;
  }

  .soon {
    animation: fade .8s .35s ease both;
  }

  @keyframes arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}