:root {
  --abyss:        #07080A;
  --deep:         #0B1D29;
  --coral:        #FC726B;
  --coral-bright: #FF8B85;
  --teal:         #099DC1;
  --ink:          #EAF4F7;
  --ink-dim:      rgba(234, 244, 247, 0.55);


  --sans: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem clamp(2rem, 5vh, 3.5rem);
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--sans);
  text-align: center;
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  inset: -10% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 42% at 50% -4%,  rgba(252, 114, 107, 0.16), transparent 70%),
    radial-gradient(90% 55% at 50%  6%,  rgba(9, 157, 193, 0.20),   transparent 72%),
    linear-gradient(180deg, var(--deep) 0%, #08121A 42%, var(--abyss) 78%);
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
  to   { transform: translate3d( 1.2%,  0.8%, 0) scale(1.06); }
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vh, 1.25rem);
  width: 100%;
}

h1 { margin: 0; line-height: 0; width: 100%; }

.hero {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  background: linear-gradient(180deg, #0B1D29 0%, #0D161D 50%, var(--abyss) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 78%, transparent 100%);
}

.hero picture {
  display: contents;
}

.hero__art {
  display: block;
  width: min(1000px, 100%, 82vh);
  height: auto;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}


.status { display: grid; justify-items: center; gap: clamp(1rem, 3vh, 1.75rem); }

.rule {
  width: clamp(110px, 24vw, 190px);
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, #2FC3E6 32%, var(--coral-bright) 68%, transparent);
  box-shadow: 0 0 14px rgba(47, 195, 230, 0.35);
}

.coming {
  margin: 0;
  font-size: clamp(1.05rem, 4.4vw, 2.05rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.46em;
  padding-left: 0.46em;
  color: var(--ink);
  text-shadow: 0 0 42px rgba(9, 157, 193, 0.45);
}

footer { padding-top: clamp(1.75rem, 6vh, 3.5rem); }

.cta {
  display: inline-block;
  padding: 0.9em 1.9em;
  border: 1px solid rgba(252, 114, 107, 0.45);
  border-radius: 999px;
  color: var(--coral-bright);
  font-size: clamp(0.66rem, 2.4vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(252, 114, 107, 0.05);
  transition: color 0.3s ease, background-color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.cta:hover,
.cta:focus-visible {
  color: var(--abyss);
  background: var(--coral);
  border-color: var(--coral);
  box-shadow: 0 0 34px rgba(252, 114, 107, 0.38);
  transform: translateY(-2px);
}

.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cta:active { transform: translateY(0); }

.rise {
  opacity: 0;
  animation: rise 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.rise--1 { animation-delay: 0.1s; }
.rise--2 { animation-delay: 0.55s; }
.rise--3 { animation-delay: 0.9s; }

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

@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none; }
  .rise { opacity: 1; animation: none; }
  .cta { transition: none; }
  .cta:hover, .cta:focus-visible { transform: none; }
}