/* ============================================================
   U+2731 Collective — Coming Soon
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: "Geist";                       /* variable — full weight axis */
  src: url("fonts/Geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Qanelas";
  src: url("fonts/QanelasBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Qanelas";
  src: url("fonts/QanelasBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #FF1250;   /* Primary  */
  --highlight: #EFEBFE; /* Highlight */
  --contrast: #1C1C1E;  /* Contrast */

  --font-geist:   "Geist", system-ui, -apple-system, sans-serif;
  --font-qanelas: "Qanelas", system-ui, sans-serif;
}

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

html { height: 100%; }

body {
  min-height: 100vh;      /* fallback */
  min-height: 100dvh;
  font-family: var(--font-geist);
  color: #fff;
  background: #fd4577;     /* matches gradient core so blurred edges never show a seam */
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Bulletproof centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- Pink radial gradient — blurred & softly looping ---------- */
.bg {
  position: fixed;
  inset: -20%;                     /* oversized so the blur edges stay off-screen */
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(32% 30% at 50% 50%, rgba(255, 36, 86, 0.95), rgba(255, 36, 86, 0) 100%),
    radial-gradient(115% 110% at 50% 50%,
      #fe3d6f 0%,
      #fa5f92 40%,
      #f58cb8 70%,
      #f3aed0 100%);
  filter: blur(70px);              /* cleaner, smoother gradient */
  will-change: transform;
  animation: breathe 16s ease-in-out infinite alternate;
}

/* Slight, slow loop */
@keyframes breathe {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(0, -1.4%, 0); }
}

/* ---------- Foreground ---------- */
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

/* ---------- Lockup: white ✱ + U+2731 / COLLECTIVE ---------- */
.lockup {
  display: flex;
  align-items: center;
  gap: 0.2em;                      /* asterisk sits close to the text */
  font-size: clamp(26px, 5.6vw, 38px);
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
}

/* White logo mark — the real logo shape, filled white via mask */
.mark {
  width: 1.72em;
  height: 1.88em;
  flex: none;
  background: #fff;
  -webkit-mask: url("logo.png") no-repeat center / contain;
          mask: url("logo.png") no-repeat center / contain;
}

.words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.line-unicode {
  font-family: var(--font-geist);
  font-weight: 600;                /* Geist SemiBold */
  letter-spacing: 0.005em;
}
.line-collective {
  font-family: var(--font-qanelas);
  font-weight: 900;                /* Qanelas Black */
  letter-spacing: 0.002em;
}

/* ---------- Sub-text ---------- */
.sub {
  margin-top: clamp(14px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  color: var(--contrast);
  line-height: 1.5;
}
.sub-line1 {
  font-family: var(--font-geist);
  font-weight: 400;                /* Geist Regular */
  font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: 0.02em;
}
.sub-line2 {
  font-family: var(--font-qanelas);
  font-weight: 700;                /* Qanelas Bold */
  font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
.footer {
  position: fixed;
  bottom: clamp(16px, 2.4vw, 26px);
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 16px;
  text-align: center;
  font-family: var(--font-geist);
  font-weight: 500;                /* Geist Medium */
  font-size: clamp(9px, 2.1vw, 12px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--contrast);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
}