:root {
  --gold: #c9b84f;
  --teal: #66c7cb;
  --teal-deep: #0d555b;
  --teal-dark: #042e2b;
  --ink: #000;
  --font: "Teko", "Arial Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--ink); }

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 45% at 50% 52%, rgba(13, 85, 91, 0.35), transparent 70%),
    var(--ink);
  color: var(--teal);
  font-family: var(--font);
}

.screen {
  width: min(1213px, 100% - 32px);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 24px 0;
}

a {
  color: unset;
}

.stage {
  position: relative;
  aspect-ratio: 1213 / 534;
  overflow: hidden;
  container-type: inline-size;
  background:
    linear-gradient(rgba(4, 40, 44, 0.4), rgba(4, 40, 44, 0.4)),
    var(--teal-deep) url("assets/city.png") center / cover;
  box-shadow: 0 0 0 1px rgba(102, 199, 203, 0.18), 0 30px 80px rgba(0, 0, 0, 0.7);
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 55%, rgba(2, 30, 30, 0.55)),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
}


/* --------------- Banner Art --------------- */

.banner {
  --P: calc(100cqh * 53.75 / 254); /* slice pitch == slant, resolved inside the banner */
  position: absolute;
  inset: 0 auto 0 0;
  width: 60.47cqw; /* 6.49 slices */
  container-type: size;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9.316cqw) 100%, 0 100%);
  background: url("assets/banner-1.png") 0 0 / auto calc(100% * 256 / 254) no-repeat;
  filter: brightness(0.62) saturate(1.1) hue-rotate(-4deg);
  opacity: 0;
  animation: slide-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.slot {
  --x: calc((var(--i) - 0.5088) * var(--P));
  position: absolute;
  inset: 0;
  clip-path: polygon(var(--x) 0, calc(var(--x) + var(--P)) 0, var(--x) 100%, calc(var(--x) - var(--P)) 100%);
}

.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(2, 26, 26, 0.9);
  clip-path: polygon(var(--x) 0, calc(var(--x) + 0.5cqh) 0, calc(var(--x) + 0.5cqh - var(--P)) 100%, calc(var(--x) - var(--P)) 100%);
}

.face {
  --src: url("assets/banner-1.png");
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease-in-out;
  background: var(--src) calc(var(--x) - var(--sx) * 100cqh / 254) 0 / auto calc(100% * 256 / 254) no-repeat;
}

.face.b2 { --src: url("assets/banner-2.png"); }
.face.on { opacity: 1; }

.mist {
  --tile: 900px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/smoke.png") 0 0 / var(--tile) 100%;
  opacity: 0.3;
  animation: drift 30s linear infinite, breathe 8s ease-in-out infinite;
}

.mist.slow {
  --tile: 1400px;
  opacity: 0.2;
  animation: drift 46s linear infinite reverse;
}

.panel {
  position: absolute;
  inset: 0 0 0 56%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 2%;
  z-index: 1;
  opacity: 0;
  animation: fade 0.9s 0.5s forwards;
}

h1 {
  font-size: 8.4cqw;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #f1fbfb 0%, #9fd4d6 45%, #3e7f86 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #021c1c) drop-shadow(0 0 14px rgba(0, 0, 0, 0.55));
}

.soon {
  margin: 0.55em 0 0.7em;
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 0 #1b1a05, 0 0 18px rgba(201, 184, 79, 0.35);
  animation: pulse 2.6s ease-in-out infinite;
}

.menu { list-style: none; }

.menu li {
  font-size: 2.4cqw;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  text-shadow: 0 2px 0 rgba(2, 30, 30, 0.8);
  cursor: default;
  transition: color 0.15s, transform 0.15s;
}

.menu li:nth-child(2) { transform: translateX(-4%); }
.menu li:nth-child(3) { transform: translateX(3%); }

.menu:not(:hover) li:first-child,
.menu li:hover { color: var(--gold); }

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  opacity: 0;
  animation: fade 0.8s 1s forwards;
}

footer p {
  margin-top: 8px;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: rgba(102, 199, 203, 0.55);
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

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

@keyframes drift { to { background-position: calc(-1 * var(--tile)) 0; } }

@keyframes breathe {
  50% { opacity: 0.12; }
}

@keyframes pulse {
  50% { text-shadow: 0 2px 0 #1b1a05, 0 0 28px rgba(201, 184, 79, 0.7); }
}

@media (max-width: 760px) {
  .screen { padding: 16px 0; }
  .stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }

  .banner {
    position: relative;
    width: 100%;
    height: 46vw;
    min-height: 150px;
    clip-path: none;
  }

  .panel {
    position: relative;
    inset: auto;
    padding: 28px 16px 36px;
  }

  h1 { font-size: clamp(4rem, 20vw, 6.5rem); }
  .soon { font-size: clamp(2rem, 8vw, 2.8rem); }
  .menu li { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .banner, .panel, footer, .soon { animation: none; opacity: 1; }
  .face { transition: none; }
  .mist { animation: none; }
}