:root {
  color-scheme: dark;
  --ink: #050507;
  --ink-soft: #101117;
  --paper: #fff7eb;
  --white: #ffffff;
  --red: #e4202e;
  --gold: #f7c948;
  --blue: #1768ff;
  --mint: #38e8ba;
  --line: rgba(255, 255, 255, 0.22);
  --shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.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;
}

.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: 24px clamp(18px, 3vw, 42px) 82px;
  background:
    linear-gradient(120deg, rgba(228, 32, 46, 0.18), transparent 28%),
    linear-gradient(250deg, rgba(23, 104, 255, 0.2), transparent 34%),
    repeating-linear-gradient(
      -12deg,
      rgba(255, 255, 255, 0.055) 0 1px,
      transparent 1px 34px
    ),
    var(--ink);
}

.stage::before {
  content: "";
  position: absolute;
  inset: -16% -22% auto;
  height: 72%;
  z-index: -3;
  background:
    conic-gradient(
      from 202deg at 50% 0%,
      rgba(247, 201, 72, 0.2) 0deg 10deg,
      transparent 10deg 22deg,
      rgba(228, 32, 46, 0.2) 22deg 34deg,
      transparent 34deg 48deg,
      rgba(23, 104, 255, 0.16) 48deg 60deg,
      transparent 60deg 74deg,
      rgba(247, 201, 72, 0.2) 74deg 84deg,
      transparent 84deg 360deg
    );
  opacity: 0.82;
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18% 82%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.54));
}

.backdrop {
  position: absolute;
  inset: -8%;
  z-index: -4;
  overflow: hidden;
  opacity: 0.24;
  transform: scale(1.06);
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(38px) saturate(1.25) contrast(1.06);
  transform: scale(1.08);
  transition: opacity 280ms ease;
}

.topbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.36rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.wordmark span:first-child {
  color: var(--gold);
}

.wordmark span:last-child {
  color: var(--white);
  text-shadow: 2px 2px 0 var(--red), -2px 2px 0 var(--blue);
}

.language-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(38px, 1fr));
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  background: rgba(5, 5, 7, 0.58);
  backdrop-filter: blur(18px);
}

.language-switch button {
  min-width: 38px;
  min-height: 34px;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
}

.language-switch button.active,
.language-switch button:focus-visible {
  color: var(--ink);
  background: var(--gold);
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(340px, 1.28fr);
  align-items: center;
  gap: clamp(20px, 4vw, 68px);
  min-height: calc(100svh - 178px);
  padding-block: clamp(28px, 5vw, 70px) clamp(16px, 3vw, 34px);
}

.hero-copy {
  max-width: 620px;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 18px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--mint);
  font-size: clamp(0.76rem, 1.2vw, 0.88rem);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
  transform: rotate(-2deg);
  box-shadow: 8px 8px 0 var(--blue);
}

h1 {
  max-width: 9ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(3.4rem, 8.5vw, 7.3rem);
  font-weight: 1000;
  line-height: 0.78;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    4px 4px 0 var(--red),
    -4px 7px 0 var(--blue),
    0 18px 44px rgba(0, 0, 0, 0.42);
}

h1 span {
  display: block;
}

.status {
  width: fit-content;
  margin: clamp(18px, 2.8vw, 28px) 0 0;
  padding: 10px 14px 11px;
  color: var(--ink);
  background: var(--gold);
  font-size: clamp(1.2rem, 2.3vw, 2.05rem);
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 10px 10px 0 var(--red);
}

.microcopy {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.96rem, 1.5vw, 1.18rem);
  font-weight: 800;
}

.waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: min(100%, 455px);
  margin-top: 24px;
}

.waitlist input,
.waitlist button {
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.36);
}

.waitlist input {
  min-width: 0;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  padding: 0 14px;
  outline: none;
  font-weight: 750;
  backdrop-filter: blur(18px);
}

.waitlist input::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.waitlist input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(247, 201, 72, 0.28);
}

.waitlist button {
  color: var(--ink);
  background: var(--white);
  padding: 0 18px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 5px 5px 0 var(--blue);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.waitlist button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--blue);
  background: var(--gold);
}

.form-note {
  min-height: 1.3em;
  margin: 12px 0 0;
  color: var(--mint);
  font-size: 0.92rem;
  font-weight: 850;
}

.carousel-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  min-width: 0;
}

.shirt-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 760px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
  transform: rotate(1.2deg);
}

.shirt-frame::before {
  content: "";
  position: absolute;
  inset: 8% 0 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--blue), var(--red) 48%, var(--gold));
  clip-path: polygon(0 12%, 100% 0, 92% 88%, 9% 100%);
  opacity: 0.82;
  transform: rotate(-4deg) scale(0.94);
  filter: saturate(1.3);
}

.shirt-frame.is-changing img {
  animation: shirtPop 380ms ease both;
}

.shirt-frame img {
  display: block;
  width: min(100%, calc(100svh - 170px));
  max-width: 760px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f3f0eb;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  box-shadow: var(--shadow);
  user-select: none;
}

.slide-meta {
  position: absolute;
  right: 4%;
  bottom: 3%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow: 4px 4px 0 var(--red);
}

.slide-meta span:first-child {
  color: var(--blue);
}

.carousel-button {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(46px, 5vw, 64px);
  height: clamp(46px, 5vw, 64px);
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  color: var(--white);
  background: rgba(5, 5, 7, 0.72);
  box-shadow: 6px 6px 0 var(--blue);
  backdrop-filter: blur(18px);
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.carousel-button span {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1;
}

.carousel-button:hover,
.carousel-button:focus-visible {
  transform: translate(-2px, -2px);
  background: var(--red);
  box-shadow: 8px 8px 0 var(--gold);
  outline: none;
}

.thumb-rail {
  position: relative;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(54px, 7vw, 82px);
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.14);
}

.thumb-rail button {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.thumb-rail button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-rail button.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(247, 201, 72, 0.22);
  transform: translateY(-3px);
}

.marquee {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  overflow: hidden;
  border-block: 2px solid rgba(255, 255, 255, 0.78);
  background:
    repeating-linear-gradient(
      90deg,
      var(--red) 0 22px,
      var(--gold) 22px 44px,
      var(--blue) 44px 66px,
      var(--ink) 66px 88px
    );
  box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.32);
}

.marquee-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  animation: marquee 22s linear infinite;
}

.marquee span {
  display: block;
  padding: 11px 28px 12px;
  color: var(--white);
  background: rgba(5, 5, 7, 0.72);
  font-size: clamp(0.84rem, 1.5vw, 1rem);
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 var(--ink);
}

@keyframes shirtPop {
  0% {
    opacity: 0;
    transform: translateX(34px) rotate(2deg) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 980px) {
  .stage {
    padding-inline: clamp(14px, 4vw, 28px);
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
    padding-top: 36px;
    gap: 20px;
  }

  .hero-copy {
    display: grid;
    justify-items: start;
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(3.1rem, 15vw, 6.6rem);
  }

  .carousel-wrap {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-button:hover,
  .carousel-button:focus-visible {
    transform: translate(-2px, calc(-50% - 2px));
  }

  .carousel-button.prev {
    left: 2px;
  }

  .carousel-button.next {
    right: 2px;
  }

  .shirt-frame {
    width: min(100%, 680px);
  }

  .shirt-frame img {
    width: min(100%, 72svh);
  }
}

@media (max-width: 620px) {
  .stage {
    padding-top: 16px;
    padding-bottom: 76px;
  }

  .topbar {
    align-items: center;
  }

  .hero {
    padding-top: 18px;
    gap: 14px;
  }

  .eyebrow {
    margin-bottom: 13px;
  }

  h1 {
    font-size: clamp(2.65rem, 12.5vw, 4.6rem);
    line-height: 0.82;
  }

  h1 {
    text-shadow:
      2px 2px 0 var(--red),
      -2px 4px 0 var(--blue),
      0 14px 32px rgba(0, 0, 0, 0.42);
  }

  .status {
    max-width: 100%;
    font-size: clamp(1rem, 6vw, 1.55rem);
  }

  .microcopy {
    margin-top: 16px;
  }

  .waitlist {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    margin-top: 16px;
  }

  .waitlist input,
  .waitlist button {
    min-height: 48px;
  }

  .waitlist button {
    padding-inline: 13px;
  }

  .shirt-frame {
    transform: rotate(0.6deg);
  }

  .shirt-frame img {
    width: min(100%, 47svh);
  }

  .slide-meta {
    right: 8px;
    bottom: 8px;
  }

  .thumb-rail {
    grid-auto-columns: 58px;
  }
}

@media (max-width: 430px) {
  .language-switch {
    grid-template-columns: repeat(2, 38px);
  }

  .waitlist {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}