/* ==========================================================================
   Hindsight — pre-launch celebration (DRAMATIC) styles
   Pairs with celebration.js. Requires GSAP + canvas-confetti at runtime.
   ========================================================================== */

/* full-screen effects stage (behind the lifted card) */
.hs-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}
.hs-stage__layer { position: absolute; inset: 0; }

/* edge-darkening spotlight (center stays bright, edges dim) */
.hs-dim {
  background: radial-gradient(circle at 50% 46%,
              rgba(6,10,26,0.10) 0%,
              rgba(6,10,26,0.52) 55%,
              rgba(6,10,26,0.80) 100%);
  opacity: 0;
}

/* soft blue glow blooming from center */
.hs-glow {
  top: 50%; left: 50%;
  width: 120vmax; height: 120vmax;
  inset: auto;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle at center,
              rgba(79,130,240,0.55) 0%,
              rgba(26,85,211,0.28) 24%,
              rgba(26,85,211,0.0) 58%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* rotating god-rays / starburst behind the card */
.hs-rays {
  top: 50%; left: 50%;
  width: 180vmax; height: 180vmax;
  inset: auto;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
              rgba(255,255,255,0.11) 0deg 5deg,
              rgba(255,255,255,0.0) 5deg 15deg,
              rgba(255,210,120,0.10) 15deg 20deg,
              rgba(255,255,255,0.0) 20deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.65) 28%, transparent 60%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.65) 28%, transparent 60%);
  opacity: 0;
}

/* fireworks canvas (above the atmospherics, still behind the card) */
.hs-fw { position: absolute; inset: 0; }

/* expanding shockwave ring */
.hs-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 24px rgba(143,178,255,0.7);
  opacity: 0;
}

/* full-screen white flash (body-level, above everything, brief) */
.hs-flash {
  position: fixed; inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
}

/* the flying plane (above card + confetti) */
.hs-plane {
  position: fixed;
  top: 0; left: 0;
  z-index: 85;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(10,20,50,0.35));
  color: #fff;
}
.hs-plane svg { width: 54px; height: 54px; display: block; }

/* lift + spotlight the card during the show */
body.hs-celebrating .auth-card {
  position: relative;
  z-index: 60;
  box-shadow: 0 40px 100px rgba(8,16,44,0.55), var(--sh-raise);
}

/* pulse ring behind the success icon */
.hs-celebrate-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--c-success, #22C55E);
  pointer-events: none;
  z-index: 0;
}

/* OPTIONAL upgraded success badge — scoped to the success card only */
#prelaunch-success .role-card__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--c-success-bg, #e7fbf0);
  color: var(--c-success, #16a34a);
  margin: 0 auto var(--s-4, 16px);
  position: relative;
}
#prelaunch-success .role-card__icon .icon {
  width: 38px; height: 38px;
  position: relative; z-index: 1;
}