/* ==========================================================================
   welcome.css — S8 left phone (referred new user's first authenticated load)

   Layout:
     - Sits inside .app-workspace__content (which scrolls).
     - Header (56px) + toolbar (80px) are fixed by app_shell.css.
     - Confetti spans render decoratively in the upper third of the page.
     - Bonus-Moment Card (rich + celebration) sits centered in flow.
     - CTA stack docks at the bottom of the page (margin-top: auto).
   ========================================================================== */

.welcome-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  min-height: calc(100dvh - 56px - 80px - var(--space-4) * 2);
  isolation: isolate;
}

/* --- Eyebrow + heading-composed greeting --- */

.welcome-page__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mint);
  text-align: center;
  margin-top: var(--space-3);
}

.welcome-page__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 2px;
  text-align: center;
}

.welcome-page__heading-top {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}

.welcome-page__heading-bot {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.welcome-page__heading-period {
  color: var(--color-amber);
}

.welcome-page__sub {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-ink-muted);
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* --- Bonus pop animation (delegates to global animation kill switch) --- */

.bonus-card[data-controller="bonus-pop"] {
  transform: scale(0.85);
  opacity: 0;
  transition: transform 700ms var(--ease-spring), opacity 300ms ease-out;
}

.bonus-card[data-controller="bonus-pop"].bonus-card--popped {
  transform: scale(1);
  opacity: 1;
}

.bonus-card[data-controller="bonus-pop"].bonus-card--no-motion {
  transform: scale(1);
  opacity: 1;
  transition: none;
}

/* --- CTA stack at bottom of page --- */

.welcome-page__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.welcome-page__cta-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
}

.welcome-page__cta-skip {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  color: var(--color-ink-muted);
  text-align: center;
  text-decoration: underline;
  background: none;
  border: none;
  display: block;
  width: 100%;
  padding: var(--space-2) 0;
}

.welcome-page__cta-skip:hover {
  color: var(--color-ink-2);
}

/* --- Confetti — small decorative spans floating at the top --- */

.welcome-confetti {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  z-index: 0;
}

.welcome-confetti__bit {
  position: absolute;
  width: 6px;
  height: 10px;
  border-radius: 1px;
  opacity: 0.85;
}

.welcome-confetti__bit--1  { top: 24px;  left: 18%; background: var(--color-amber);   transform: rotate(20deg);  }
.welcome-confetti__bit--2  { top: 8px;   left: 42%; background: var(--color-red);     transform: rotate(-15deg); }
.welcome-confetti__bit--3  { top: 44px;  left: 65%; background: var(--color-mint);    transform: rotate(35deg);  }
.welcome-confetti__bit--4  { top: 72px;  left: 80%; background: var(--color-electric);transform: rotate(-25deg); }
.welcome-confetti__bit--5  { top: 84px;  left: 8%;  background: var(--color-amber);   transform: rotate(60deg);  }
.welcome-confetti__bit--6  { top: 114px; left: 30%; background: var(--color-red);     transform: rotate(-40deg); }
.welcome-confetti__bit--7  { top: 54px;  left: 90%; background: var(--color-amber);   transform: rotate(10deg);  }
.welcome-confetti__bit--8  { top: 134px; left: 70%; background: var(--color-mint);    transform: rotate(-10deg); }
.welcome-confetti__bit--9  { top: 152px; left: 12%; background: var(--color-electric);transform: rotate(30deg);  }
.welcome-confetti__bit--10 { top: 92px;  left: 50%; background: var(--color-red);     transform: rotate(-50deg); }

@keyframes confetti-drift {
  0%   { transform: translateY(-12px) rotate(var(--rot, 0deg)); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translateY(8px) rotate(calc(var(--rot, 0deg) + 18deg)); opacity: 0.85; }
}

.welcome-confetti__bit {
  animation: confetti-drift 900ms var(--ease-out) backwards;
}

.welcome-confetti__bit--1  { animation-delay: 0ms;   }
.welcome-confetti__bit--2  { animation-delay: 80ms;  }
.welcome-confetti__bit--3  { animation-delay: 160ms; }
.welcome-confetti__bit--4  { animation-delay: 240ms; }
.welcome-confetti__bit--5  { animation-delay: 320ms; }
.welcome-confetti__bit--6  { animation-delay: 100ms; }
.welcome-confetti__bit--7  { animation-delay: 200ms; }
.welcome-confetti__bit--8  { animation-delay: 280ms; }
.welcome-confetti__bit--9  { animation-delay: 360ms; }
.welcome-confetti__bit--10 { animation-delay: 140ms; }

/* The bonus-card and welcome content sit above confetti */
.welcome-page__eyebrow,
.welcome-page__heading,
.welcome-page__sub,
.welcome-page__cta,
.bonus-card {
  position: relative;
  z-index: 1;
}

/* --- Reduced motion: spans hold their final position; bonus card pops in instantly --- */
@media (prefers-reduced-motion: reduce) {
  .welcome-confetti__bit {
    animation: none;
    opacity: 0.85;
  }

  .bonus-card[data-controller="bonus-pop"] {
    transform: scale(1);
    opacity: 1;
    transition: none;
  }
}