/* =============================================================================
   ShiftHawk — Pricing slashed-price treatment (6-month plan)
   The headline price is $4.99 every 6 months. When a subscription invite is
   accepted, that first 6 months drops to $2.99 for both people. This file gives
   the headline a gentle "$4.99 resolves into $2.99" reveal: $4.99 strikes
   through and dims while $2.99 settles in beside it. No harsh blink — a soft
   pulse and a one-time settle.

   Motion is opacity/transform only. Heights are reserved so nothing shifts.
   Under prefers-reduced-motion (or when JS is absent) the markup already shows
   the final composed state: $4.99 struck through with $2.99 visible.
   ========================================================================== */

/* the price line holds both numbers side by side; reserve the row height so the
   reveal never nudges the surrounding layout */
.price-slash {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
  min-height: 3rem;            /* matches .price font-size — reserves the row */
  line-height: 1;
}

/* the "was" number — $4.99. Starts plain, then gets struck through + dimmed. */
.price-slash .ps-was {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--text-3);
  letter-spacing: -.02em;
  /* a drawn-on strike line so we can animate its width rather than toggling
     text-decoration (which can't be transitioned) */
}
.price-slash .ps-was::after {
  content: "";
  position: absolute;
  left: -3%;
  top: 52%;
  width: 106%;                 /* composed state by DEFAULT — struck through.
                                  JS collapses it to 0 (via .ps-armed) only when
                                  it is actually going to animate the reveal. */
  height: 2.5px;
  background: var(--rose, #E11D48);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* the "now" number — $2.99. Reserved in place; revealed by the JS. */
.price-slash .ps-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  color: var(--text-1);
  letter-spacing: -.03em;
}

/* the cadence note under the numbers (its own line, like the old .price small) */
.price-cadence {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-3);
  display: block;
  margin-top: var(--s-2);
}

/* ---- the invite-type explainer beneath the price ---------------------------- */
.price-invites {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) auto 0;
  max-width: 520px;
  text-align: left;
}
.price-invite {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  font-size: .94rem;
  color: var(--text-2);
  background: var(--surface-2, rgba(0,0,0,.02));
  border: 1px solid var(--border);
  border-radius: var(--r-3, 14px);
  padding: 12px 14px;
}
html[data-theme="dark"] .price-invite { background: rgba(255,255,255,.04); }
.price-invite i { font-size: 1.4rem; line-height: 1; margin-top: 1px; }
.price-invite .pi-token i { color: var(--success); }
.price-invite strong { color: var(--text-1); font-family: var(--font-display); }
.price-invite-token i { color: var(--success); }
.price-invite-sub i { color: var(--primary); }
.price-invites a { color: var(--primary-deep); font-weight: 600; }

/* =============================================================================
   ANIMATION — PROGRESSIVE ENHANCEMENT (fail-safe order):
   The DEFAULT state above is the final composed look ($4.99 struck, $2.99
   visible), so the price is correct even if this file's companion JS never
   loads/executes. pricing-slash.js adds .ps-armed at mount (only when motion
   is allowed + IntersectionObserver exists) to collapse to the pre-animation
   state, then adds .reveal-slash on scroll-into-view to play the reveal.
   Disabled wholesale under reduced motion (below).
   ========================================================================== */

/* the "now" number floats up + fades in */
.price-slash .ps-now {
  transition: opacity .5s ease, transform .5s ease;
}
.price-slash.ps-armed:not(.reveal-slash) .ps-now { opacity: 0; transform: translateY(6px); }
.price-slash.ps-armed:not(.reveal-slash) .ps-was::after { width: 0; }
.price-slash.reveal-slash .ps-now { opacity: 1; transform: translateY(0); }

/* the "was" number gives one gentle pulse, then the strike line draws across
   and the whole thing dims — a soft hand-off, not a blink */
.price-slash .ps-was {
  transition: color .5s ease;
}
.price-slash.reveal-slash .ps-was {
  color: var(--text-3);
  animation: ps-soft-pulse .9s ease 1;
}
.price-slash.reveal-slash .ps-was::after {
  width: 106%;
  transition: width .55s ease .35s;   /* draws after the pulse settles */
}
@keyframes ps-soft-pulse {
  0%   { transform: scale(1);    color: var(--text-2); }
  45%  { transform: scale(1.05); color: var(--text-1); }
  100% { transform: scale(1);    color: var(--text-3); }
}

/* =============================================================================
   STATIC / REDUCED-MOTION COMPOSED STATE
   The final look: $4.99 struck through + dimmed, $2.99 fully visible, no motion.
   Applied via .is-static (set by JS when reduced-motion or no IO) AND via the
   media query as a belt-and-braces fallback if JS never runs.
   ========================================================================== */
.price-slash.is-static .ps-now { opacity: 1; transform: none; }
.price-slash.is-static .ps-was { color: var(--text-3); animation: none; }
.price-slash.is-static .ps-was::after { width: 106%; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .price-slash .ps-now { opacity: 1; transform: none; transition: none; }
  .price-slash .ps-was { color: var(--text-3); animation: none !important; }
  .price-slash .ps-was::after { width: 106%; transition: none; }
}