/* ============================================================
   KENDACE x STAKE - public stylesheet
   Design system: "Midnight Rose"
   Dark plum canvas / rose-gold metal / pearl + holographic light
   ============================================================ */

:root {
  /* canvas */
  --bg:          #120A11;
  --bg-2:        #1A0F19;
  --bg-3:        #241623;

  /* rose gold ramp (taken from her wordmark) */
  --rose-hi:     #FFE9DC;
  --rose:        #E9AE94;
  --rose-dp:     #C0796C;

  /* signature pink + holo companions */
  --pink:        #FF8FC0;
  --pink-soft:   #FFC7DF;
  --lilac:       #C6B8FB;
  --mint:        #A9EFDC;
  --pearl:       #F6E9EE;

  /* ink */
  --text:        #FBEFF3;
  --muted:       #C4A9B5;
  --faint:       #927A87;

  /* lines */
  --line:        rgba(255, 214, 224, 0.11);
  --line-hi:     rgba(255, 214, 224, 0.24);

  /* metal + holo gradients */
  --g-rose:      linear-gradient(104deg, #FFF1E8 0%, #EEB79E 26%, #CE8A78 46%, #F7CDBA 64%, #FFF1E8 88%);
  --g-holo:      linear-gradient(115deg, #FFC7DF 0%, #C6B8FB 32%, #A9EFDC 62%, #FFE9DC 100%);
  --g-line:      linear-gradient(100deg, rgba(255,143,192,0), rgba(233,174,148,0.75), rgba(198,184,251,0.45), rgba(255,143,192,0));

  /* shape */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --glow-pink: 0 0 60px -12px rgba(255, 143, 192, 0.45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- 1. Liquid pearl backdrop ------------------------ */

.stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1200px 760px at 72% -12%, rgba(255, 143, 192, 0.34), transparent 64%),
    radial-gradient(900px 640px at 4% 6%,     rgba(198, 184, 251, 0.26), transparent 62%),
    radial-gradient(760px 520px at 96% 44%,   rgba(169, 239, 220, 0.14), transparent 64%),
    radial-gradient(1100px 820px at 50% 112%, rgba(233, 174, 148, 0.24), transparent 64%),
    var(--bg);
}

/* slow-drifting silk blobs - the iridescent liquid from the cover art */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.orb.o1 { width: 52vw; height: 52vw; left: -10vw; top: -12vw;   opacity: 0.62; background: radial-gradient(circle at 35% 35%, #FF8FC0, transparent 68%); animation: drift1 26s ease-in-out infinite; }
.orb.o2 { width: 44vw; height: 44vw; right: -8vw; top: -2vw;    opacity: 0.50; background: radial-gradient(circle at 60% 40%, #C6B8FB, transparent 66%); animation: drift2 32s ease-in-out infinite; }
.orb.o3 { width: 40vw; height: 40vw; left: 26vw;  bottom: -14vw; opacity: 0.34; background: radial-gradient(circle at 50% 50%, #A9EFDC, transparent 64%); animation: drift3 38s ease-in-out infinite; }
/* pearl highlight - the bright silk fold running behind the wordmark */
.orb.o4 { width: 70vw; height: 26vw; left: 15vw; top: 12vw; opacity: 0.30; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #FFE9DC, transparent 70%); animation: drift2 44s ease-in-out infinite; }

@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw, 4vw, 0) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-5vw, 6vw, 0) scale(1); } }
@keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7vw, -4vw, 0) scale(1.15); } }

/* film grain so the gradients never band */
.grain {
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 2. Shared bits ---------------------------------- */

/* hairline rose-gold rule that fades at both ends - the swash motif */
.rule {
  height: 1px;
  border: 0;
  background: var(--g-line);
  opacity: 0.8;
}

/* glass panel with a 1px gradient edge */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,233,220,0.55), rgba(255,143,192,0.18) 40%, rgba(255,255,255,0.05) 70%, rgba(198,184,251,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* metallic rose-gold text with a slow travelling sheen */
.metal {
  background: var(--g-rose);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen { 0% { background-position: 0% 50%; } 100% { background-position: 260% 50%; } }

.holo {
  background: var(--g-holo);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: rgba(255, 143, 192, 0.07);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-soft);
  white-space: nowrap;
}
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255, 143, 192, 0.6);
  animation: pulse 2.4s ease-out infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 143, 192, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 143, 192, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 143, 192, 0); }
}

/* ---------- 3. Buttons -------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s, background 0.22s;
}
.btn .arr { transition: transform 0.22s; }
.btn:hover .arr { transform: translateX(4px); }

.btn-rose {
  background: var(--g-rose);
  background-size: 200% 100%;
  color: #2A130F;
  box-shadow: 0 10px 30px -10px rgba(233, 174, 148, 0.75);
}
.btn-rose:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 16px 40px -12px rgba(233, 174, 148, 0.9); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--line-hi);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.09); }

/* ---------- 4. Nav ------------------------------------------ */

.nav { position: relative; z-index: 5; padding: 22px 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-rose);
  color: #2A130F;
  font-family: 'Italiana', Georgia, serif;
  font-size: 21px;
  line-height: 1;
  padding-top: 2px;
  box-shadow: 0 6px 22px -8px rgba(233, 174, 148, 0.9);
  flex: none;
}
.brand-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.brand-name {
  font-family: 'Italiana', Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-name .x { color: var(--faint); margin: 0 2px; letter-spacing: 0; }

/* ---------- 5. Hero ----------------------------------------- */

.hero { position: relative; z-index: 2; padding: 46px 0 30px; text-align: center; }

.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 38px; height: 1px; background: var(--g-line);
}

/* the wordmark - pearl glow behind, rose-gold metal on top */
.wordmark { position: relative; display: inline-block; margin-bottom: 6px; }
.wordmark::after {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 120%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 199, 223, 0.24), transparent 66%);
  filter: blur(30px);
  z-index: -1;
}
.wordmark h1 {
  font-family: 'Italiana', Georgia, serif;
  font-weight: 400;
  font-size: clamp(46px, 12vw, 132px);
  line-height: 0.98;
  max-width: 100%;
  word-break: break-word;
  letter-spacing: 0.08em;
  text-indent: 0.08em;      /* balances the trailing letterspace */
  text-transform: uppercase;
}
.wordmark img { margin-inline: auto; width: min(560px, 82vw); }

.hero-tag {
  font-family: 'Italiana', Georgia, serif;
  font-size: clamp(20px, 4.4vw, 34px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--pearl);
  opacity: 0.92;
  margin-bottom: 22px;
}

.lede {
  max-width: 620px;
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: clamp(14px, 1.6vw, 16px);
}
.lede b { color: var(--text); font-weight: 700; }
.lede .code {
  font-weight: 800;
  color: var(--rose-hi);
  letter-spacing: 0.06em;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- 6. Countdown ------------------------------------ */

.countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 34px;
  flex-wrap: wrap;
}
.cd-unit {
  min-width: 88px;
  padding: 16px 10px 12px;
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
}
.cd-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--pearl);
}
.cd-lbl {
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- 7. Stat chips ----------------------------------- */

.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 34px;
}
.chip {
  padding: 16px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  text-align: center;
}
.chip-lbl {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
/* all three chips share one quiet weight - the values are context, not the pitch */
.chip-val { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.chip-val.tba { color: var(--muted); }

/* ---------- 8. Prize split ---------------------------------- */

.prizes { position: relative; z-index: 2; padding: 26px 0 60px; }

.prize-card { padding: clamp(24px, 4vw, 42px); }

.prize-head { text-align: center; margin-bottom: 30px; }
.prize-title {
  font-family: 'Italiana', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 40px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.prize-sub { font-size: 13px; color: var(--muted); }

.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.prize {
  position: relative;
  padding: 22px 14px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1), border-color 0.25s;
}
.prize:hover { transform: translateY(-4px); border-color: var(--line-hi); }
.prize.p1 {
  background: linear-gradient(165deg, rgba(255, 143, 192, 0.14), rgba(233, 174, 148, 0.06));
  border-color: rgba(233, 174, 148, 0.42);
  box-shadow: var(--glow-pink);
}
.prize-rank {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  font-family: 'Italiana', Georgia, serif;
  font-size: 18px;
  padding-top: 2px;
  color: var(--pearl);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-hi);
}
.prize.p1 .prize-rank {
  background: var(--g-rose);
  color: #2A130F;
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(233, 174, 148, 0.9);
}
.prize-amt { font-size: 23px; font-weight: 800; line-height: 1.15; }
.prize.p1 .prize-amt { font-size: 27px; }
.prize-lbl {
  margin-top: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
}

/* the "prizes not announced yet" state */
.tba-box { text-align: center; padding: 34px 20px; }
.tba-box .spark { font-size: 20px; color: var(--rose); letter-spacing: 0.4em; }
/* small serif text needs a brighter ramp - the dark stop swallows thin strokes */
.tba-box h3.metal, .prize-title .metal {
  background: linear-gradient(100deg, #FFF4EC, #F2C7B3 45%, #FFF4EC 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
}
.tba-box h3 {
  font-family: 'Italiana', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 10px 0 8px;
}
.tba-box p { font-size: 13.5px; color: var(--muted); max-width: 440px; margin-inline: auto; }

/* ---------- 9. Socials + footer ----------------------------- */

.socials { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.soc {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12.5px; font-weight: 700;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.soc:hover { color: var(--text); border-color: var(--line-hi); background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.soc svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

footer { position: relative; z-index: 2; padding: 30px 0 44px; }
.foot-row {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.foot-row b { color: var(--rose-hi); letter-spacing: 0.05em; }
.foot-legal {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--faint);
  max-width: 760px;
}

/* ---------- 10. Responsive ---------------------------------- */

@media (max-width: 640px) {
  .wrap { width: min(1120px, 100% - 28px); }
  .nav { padding: 18px 0; }
  .brand-name { font-size: 15px; letter-spacing: 0.16em; white-space: nowrap; }
  .brand-name .x-stake { display: none; }   /* keep the mark to one line on phones */
  .lede { font-size: 14px; }
  .pill { font-size: 9.5px; padding: 6px 11px 6px 9px; letter-spacing: 0.1em; }
  .hero { padding: 30px 0 20px; }
  .eyebrow { letter-spacing: 0.16em; margin-bottom: 18px; }
  .eyebrow::before, .eyebrow::after { width: 20px; }
  .chips { grid-template-columns: 1fr; max-width: 320px; }
  .cd-unit { min-width: 72px; padding: 13px 8px 10px; }
  .cd-num { font-size: 27px; }
  .btn { width: 100%; justify-content: center; }
  .actions { width: min(340px, 100%); margin-inline: auto; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .metal, .dot { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}