/* ==========================================================
   STATE RACE — LAUNCH UX V1
   Growth-focused presentation layer
   ========================================================== */

.launchHero{
  margin:18px 0 2px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    radial-gradient(
      600px 170px at 15% 0%,
      rgba(111,76,255,.18),
      transparent 70%
    ),
    rgba(255,255,255,.025);
}

.launchHeroCopy{
  max-width:700px;
  margin:0;
  color:#d9ddec;
  font-size:15px;
  line-height:1.65;
}

.launchHeroButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:260px;
  min-height:54px;
  margin-top:15px;
  padding:14px 24px;
  border:1px solid rgba(174,148,255,.70);
  border-radius:14px;
  cursor:pointer;
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:
    linear-gradient(
      135deg,
      rgba(111,76,255,.98),
      rgba(93,45,204,.98)
    );
  box-shadow:
    0 12px 34px rgba(92,55,220,.32),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.launchHeroButton:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    0 16px 40px rgba(92,55,220,.43),
    inset 0 1px 0 rgba(255,255,255,.24);
}

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


/* HOW IT WORKS */

.launchSteps{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.launchStep{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:11px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}

.launchStepNumber{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  font-size:15px;
  background:
    linear-gradient(
      135deg,
      rgba(111,76,255,.92),
      rgba(73,38,168,.92)
    );
  box-shadow:0 8px 20px rgba(80,45,190,.25);
}

.launchStepText{
  color:#d9ddec;
  font-size:13px;
  line-height:1.45;
}

.launchHowOriginal{
  display:none !important;
}


/* BUBBLES — CLEARLY INTERACTIVE */

#bubbleStage .bubble{
  cursor:pointer;
  transition:
    transform .20s ease,
    filter .20s ease,
    box-shadow .20s ease;
  will-change:left, top, width, height, transform;
}

#bubbleStage .bubble:hover{
  z-index:40 !important;
  transform:scale(1.065);
  filter:brightness(1.12) saturate(1.08);
}

#bubbleStage .bubble.launchPulse{
  animation:launchBubblePulse .85s ease;
}

@keyframes launchBubblePulse{
  0%,100%{
    transform:scale(1);
  }
  45%{
    transform:scale(1.075);
    filter:brightness(1.16);
  }
}


/* STATE MODAL — VIDEO FIRST */

#watchStateVideo{
  min-height:50px;
  padding:14px 20px;
  font-weight:900;
  letter-spacing:.10em;
  box-shadow:0 11px 28px rgba(92,55,220,.30);
}

#openStatePage,
.launchSecondaryStateAction{
  opacity:.88;
  background:transparent !important;
  box-shadow:none !important;
}

.srStateActions{
  gap:10px;
}


/* BUTTON POLISH */

button,
.btn,
.ghost{
  transition:
    transform .16s ease,
    filter .16s ease,
    border-color .16s ease,
    background .16s ease;
}

button:hover,
.btn:hover,
.ghost:hover{
  filter:brightness(1.07);
}

button:active,
.btn:active,
.ghost:active{
  transform:translateY(1px);
}


/* MOBILE */

@media(max-width:768px){
  .launchHero{
    padding:15px;
  }

  .launchHeroButton{
    width:100%;
    min-width:0;
  }

  .launchHeroCopy{
    font-size:14px;
  }

  .launchStep{
    padding:10px;
  }

  #bubbleStage .bubble:hover{
    transform:scale(1.025);
  }
}

@media(prefers-reduced-motion:reduce){
  #bubbleStage .bubble,
  #bubbleStage .bubble.launchPulse,
  .launchHeroButton{
    animation:none !important;
    transition:none !important;
  }
}