:root {
  --choir-50: #f5f3ff;
  --choir-300: #c4b5fd;
  --choir-400: #a78bfa;
  --choir-500: #8b5cf6;
  --choir-600: #7c3aed;
  --choir-700: #6d28d9;
  --choir-800: #5b21b6;
  --choir-900: #4c1d95;
  --choir-950: #2e1065;
  --ink: #0f0a1a;
  --gold: #fbbf24;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100svh;
  font-family: var(--font-sans);
  color: #fff;
  background: var(--choir-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* —— Ambient purple field (matches app login) —— */

.ambient {
  --tilt-x: 0px;
  --tilt-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--choir-900);
}

.ambient__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--choir-950) 0%,
    var(--choir-900) 35%,
    var(--choir-800) 70%,
    #1e1b4b 100%
  );
}

.ambient__orb-wrap {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.ambient__orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  will-change: transform;
  animation-duration: 14s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ambient__orb-wrap--1 {
  width: 105vmax;
  height: 105vmax;
  top: -28vmax;
  left: -22vmax;
  opacity: 0.72;
  transform: translate(calc(var(--tilt-x) * 0.55), calc(var(--tilt-y) * 0.55));
}

.ambient__orb--1 {
  background: radial-gradient(circle at 30% 25%, var(--choir-400) 0%, var(--choir-600) 42%, transparent 72%);
  animation-name: orbDrift1;
}

.ambient__orb-wrap--2 {
  width: 92vmax;
  height: 92vmax;
  top: 42%;
  left: 38%;
  opacity: 0.5;
  transform: translate(calc(var(--tilt-x) * 0.85), calc(var(--tilt-y) * 0.85));
}

.ambient__orb--2 {
  background: radial-gradient(circle at 35% 30%, #6366f1 0%, #4338ca 45%, transparent 74%);
  animation-name: orbDrift2;
}

.ambient__orb-wrap--3 {
  width: 78vmax;
  height: 78vmax;
  top: 8%;
  left: -12vmax;
  opacity: 0.38;
  transform: translate(calc(var(--tilt-x) * 1.15), calc(var(--tilt-y) * 1.15));
}

.ambient__orb--3 {
  background: radial-gradient(circle at 28% 22%, #c084fc 0%, #9333ea 44%, transparent 73%);
  animation-name: orbDrift3;
}

.ambient__orb-wrap--4 {
  width: 55vmax;
  height: 55vmax;
  top: 62%;
  left: -8vmax;
  opacity: 0.14;
  transform: translate(calc(var(--tilt-x) * 1.35), calc(var(--tilt-y) * 1.35));
}

.ambient__orb--4 {
  background: radial-gradient(circle at 40% 35%, var(--gold) 0%, #f59e0b 38%, transparent 70%);
  animation-name: orbDrift4;
}

.ambient__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(15, 10, 40, 0.35) 78%,
    rgba(8, 5, 24, 0.55) 100%
  );
}

@keyframes orbDrift1 {
  0%,
  100% {
    transform: translate(-14px, 10px);
  }
  50% {
    transform: translate(14px, -10px);
  }
}

@keyframes orbDrift2 {
  0%,
  100% {
    transform: translate(18px, 12px);
  }
  50% {
    transform: translate(-18px, -12px);
  }
}

@keyframes orbDrift3 {
  0%,
  100% {
    transform: translate(-10px, 16px);
  }
  50% {
    transform: translate(10px, -16px);
  }
}

@keyframes orbDrift4 {
  0%,
  100% {
    transform: translate(8px, -6px);
  }
  50% {
    transform: translate(-8px, 6px);
  }
}

/* —— Stage —— */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  gap: 0;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.brand__mark {
  width: min(38vw, 168px);
  height: auto;
  border-radius: 22%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 60px rgba(15, 10, 40, 0.45);
  animation: markFloat 5.5s ease-in-out infinite;
}

.brand__wordmark {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.brand__choir {
  color: #fff;
}

.brand__q {
  color: var(--choir-300);
}

.headline {
  margin: 0 0 0.85rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.support {
  margin: 0 0 1.75rem;
  max-width: 22rem;
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(237, 233, 254, 0.82);
  animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.65rem;
  border-radius: 14px;
  background: #fff;
  color: var(--choir-900);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(15, 10, 40, 0.28);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

.cta:hover {
  background: var(--choir-50);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 10, 40, 0.36);
}

.cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cta:active {
  transform: translateY(0);
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes markFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient__orb {
    animation: none;
  }

  .ambient__orb-wrap {
    transform: none !important;
  }

  .brand,
  .headline,
  .support,
  .cta,
  .brand__mark {
    animation: none;
  }
}

@media (max-width: 480px) {
  .brand__mark {
    width: min(42vw, 132px);
  }
}