/* Chicago Martyr placeholder. Palette from the team deck, pushed toward black. One typeface. */
:root {
  --black: #050304;
  --plum: #2B0A20;
  --plum-2: #571336;
  --pom: #8E2044;
  --cream: #F1EAE0;
  --gold: #C9A86B;
  --display: 'Cormorant', Georgia, serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--black); color: var(--cream); }
body { min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; font-family: var(--display); }

/* Fixed, slowly drifting light behind everything */
.glow {
  position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 78% 22%, rgba(142, 32, 68, .55), transparent 70%),
    radial-gradient(55% 50% at 92% 70%, rgba(87, 19, 54, .45), transparent 72%),
    radial-gradient(34% 30% at 60% 46%, rgba(142, 32, 68, .14), transparent 70%),
    radial-gradient(70% 60% at 10% 100%, rgba(43, 10, 32, .9), transparent 75%),
    var(--black);
  filter: blur(30px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}

/* Rosettes: gold hairlines, barely there, drawn in once then turning very slowly */
.rosette {
  position: fixed; z-index: 1; pointer-events: none;
  fill: none; stroke: var(--gold); stroke-width: .22;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
.rosette path, .rosette circle {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 6s var(--ease) .6s forwards;
}
.r1 {
  width: 115vmax; height: 115vmax; right: -38vmax; top: -42vmax;
  opacity: .075;
  animation: turn 300s linear infinite;
}
.r2 {
  width: 60vmax; height: 60vmax; left: -26vmax; bottom: -30vmax;
  opacity: .05;
  animation: turn 420s linear infinite reverse;
}
.r2 path, .r2 circle { animation-delay: 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes turn { to { transform: rotate(360deg); } }

/* Film grain so the gradients read rich, not flat */
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 3; }

/* HERO: off-center lockup, low-left */
.hero {
  height: 100vh; height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 0 12vh 8vw;
}

/* One lockup, one face: Chicago / Martyr stepped in / Dodgeball closing it off on the right */
.lockup {
  display: inline-grid; font-weight: 500;
  font-size: clamp(56px, 10.5vw, 196px); line-height: .86; letter-spacing: -.005em;
}
.line { display: block; overflow: hidden; padding-bottom: .32em; margin-bottom: -.24em; }
.line > span {
  display: block; transform: translateY(105%);
  animation: up 1.8s var(--ease) forwards;
}
.l1 > span { color: var(--cream); animation-delay: .4s; }
.l2 { margin-left: .62em; }
.l2 > span {
  background: linear-gradient(100deg, var(--cream) 0%, #ecd3c6 38%, #c86a84 76%, #b0345a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .3em; margin-bottom: -.3em;
  animation-delay: .65s;
}
.l3 { justify-self: end; margin-top: .22em; }
.l3 > span {
  display: flex; align-items: center; gap: .9em;
  font-size: .16em; font-weight: 600; letter-spacing: .42em; text-transform: uppercase;
  margin-right: -.42em; /* cancel trailing tracking so it ends flush with Martyr */
  color: var(--cream);
  animation-delay: 1.15s;
}
.rule {
  display: block; width: 5em; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold));
  opacity: .9;
}
@keyframes up { to { transform: none; } }

/* SOON: below the fold, bottom-right, fades in when scrolled to */
.soon {
  height: 70vh;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 8vw 12vh 0;
}
.soon p {
  font-size: clamp(24px, 3vw, 44px); line-height: 1;
  color: var(--cream); font-weight: 600;
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.6s ease, transform 1.6s var(--ease);
}
.soon p.in { opacity: 1; transform: none; }

@media (min-width: 1200px) {
  .lockup { font-weight: 430; }
}

@media (max-width: 640px) {
  .lockup { font-weight: 600; }
  .l3 > span { font-weight: 700; }
  .hero { padding: 0 0 15vh 7vw; }
  .lockup { font-size: 17vw; }
  .l3 > span { font-size: .2em; letter-spacing: .34em; margin-right: -.34em; }
  .rule { width: 3em; }
  .r1 { right: -70vmax; top: -40vmax; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .r1, .r2 { animation: none; }
  .rosette path, .rosette circle { animation: none; stroke-dashoffset: 0; }
  .line > span { animation: none; transform: none; }
  .soon p { transition: none; opacity: 1; transform: none; }
}