/* ==========================================================================
   True North Scales — Slide-to-choose control
   iPhone slide-to-unlock faithful: shimmer sweep, 1:1 knob tracking,
   spring-back on partial swipe, decisive click + haptic on completion.

   INTEGRATION
   Wrap the ORIGINAL .package-action button (kept in the DOM for the
   keyboard/no-JS fallback) in a [data-swipe] container:

     <div class="swipe" data-swipe data-tier="spark"
          data-label="Slide to choose Spark">
       <button class="package-action ..." data-package="spark">…</button>
     </div>

   The script builds the visual track/knob around it and fires the
   original button's click() on completion, so existing chat/Stripe
   behavior is preserved exactly. The original button stays focusable
   (visually hidden until focused) as the non-swipe fallback.

   Tier colors: spark = white glow, scale = navy glow, empire = gold glow.
   ========================================================================== */

.swipe {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* vertical page scroll always passes through */
}

/* The original action button: hidden but reachable by keyboard / no-JS. */
.swipe .swipe-original {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.swipe .swipe-original:focus-visible {
  width: auto;
  height: auto;
  margin: 8px auto 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  position: relative;
  display: block;
  padding: 10px 18px;
  border-radius: 8px;
  background: #0a1e3c;
  color: #fff;
  font: 600 14px/1.4 Inter, system-ui, sans-serif;
}

/* ---- Track: dark glass bar, echoing the original lock-screen slider ---- */
.swipe-track {
  position: relative;
  height: 60px;
  min-height: 56px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #0c2342 0%, #081a38 100%);
  border: 1px solid rgba(221, 190, 126, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 8px rgba(0, 0, 0, 0.45),
    0 3px 14px rgba(4, 12, 28, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.swipe-track.is-dragging { cursor: grabbing; }

/* ---- Label: the iPhone "spotlight" shimmer ----
   Gray base text with a bright band gliding across, left to right and
   back again, in a constant ambient loop — like the original. */
.swipe-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 92px 0 24px; /* clear of the knob's start position */
  font: 600 15px/1.2 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.30) 42%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.30) 58%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: swipe-shimmer 2.6s ease-in-out infinite alternate;
  pointer-events: none;
  transition: opacity 160ms ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
@keyframes swipe-shimmer {
  from { background-position: 115% 0; }
  to   { background-position: -115% 0; }
}
.swipe-track.is-dragging .swipe-label { animation-play-state: paused; }

/* ---- Knob: silver rounded-rect with vertical gloss + gray chevron ---- */
.swipe-knob {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 76px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fefefe 0%, #dcdcdc 46%, #b9b9b9 54%, #e9e9e9 100%);
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  will-change: transform;
  outline: none;
  transition: box-shadow 180ms ease, scale 180ms ease;
}
/* Specular gloss sweeping the knob's face — the wet-glass highlight. */
.swipe-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.10) 34%,
    rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.swipe-knob::after {
  content: "›";
  font: 700 30px/1 Inter, system-ui, sans-serif;
  color: #6f6f6f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateX(1px);
  position: relative;
  z-index: 1;
}
/* While dragging the knob lifts: it grows a touch and its glow deepens,
   like it's been picked up off the glass. */
.swipe-track.is-dragging .swipe-knob { scale: 1.045; }
.swipe-knob:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 3px #c9a24b,
    0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Spring-back: slightly overshooting ease, ~280ms, like the original snap. */
.swipe-knob.is-snapping {
  transition: transform 280ms cubic-bezier(0.34, 1.25, 0.64, 1), scale 200ms ease;
}
/* Completion slam: fast, decisive, no bounce. The click fires on arrival. */
.swipe-knob.is-completing {
  transition: transform 110ms cubic-bezier(0.5, 0, 0.8, 0.4), scale 140ms ease;
}
/* Tiny compression at the moment of the click — sells the "thunk". */
.swipe-knob.is-hit { transform-origin: center; }
.swipe-track.is-complete .swipe-knob {
  animation: swipe-knob-thunk 220ms ease-out;
}
@keyframes swipe-knob-thunk {
  0%   { scale: 1; }
  35%  { scale: 0.93 0.96; }
  100% { scale: 1; }
}

/* ---- Completion glow pulse, tinted per tier ---- */
.swipe-track.is-complete { overflow: visible; }
/* Gold wash that sweeps the track the instant it unlocks. */
.swipe-track.is-complete::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg,
    rgba(221, 190, 126, 0) 20%,
    rgba(221, 190, 126, 0.4) 50%,
    rgba(221, 190, 126, 0) 80%);
  transform: translateX(-45%);
  opacity: 0;
  pointer-events: none;
  animation: swipe-wash 520ms ease-out;
}
@keyframes swipe-wash {
  0%   { opacity: 0; transform: translateX(-45%); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}
.swipe-track.is-complete::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  pointer-events: none;
  animation: swipe-pulse 620ms ease-out;
}
.swipe[data-tier="spark"] .swipe-track.is-complete::before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 26px 6px rgba(255, 255, 255, 0.75);
}
.swipe[data-tier="scale"] .swipe-track.is-complete::before {
  box-shadow: 0 0 0 2px rgba(10, 30, 60, 0.9), 0 0 26px 6px rgba(10, 30, 60, 0.55);
}
.swipe[data-tier="empire"] .swipe-track.is-complete::before {
  box-shadow: 0 0 0 2px rgba(201, 162, 75, 0.95), 0 0 26px 8px rgba(201, 162, 75, 0.8);
}
@keyframes swipe-pulse {
  0%   { opacity: 0; transform: scale(0.985); }
  25%  { opacity: 1; transform: scale(1.012); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* While completed, the control is inert (prevents double-fire). */
.swipe.is-locked .swipe-track { pointer-events: none; }

/* ---- Reduced motion: static shimmer, instant snap, no pulse ---- */
@media (prefers-reduced-motion: reduce) {
  .swipe-label { animation: none; color: rgba(255, 255, 255, 0.85); background: none; }
  .swipe[data-size="hero"] .swipe-label { color: #232a33; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
  .swipe-brand-word { transition: none; }
  .swipe-knob.is-snapping { transition: transform 120ms linear; }
  .swipe-knob.is-completing { transition: transform 80ms linear; }
  .swipe-track.is-complete .swipe-knob { animation: none; }
  .swipe-track.is-complete::before { animation: none; opacity: 1; }
  .swipe-track.is-complete::after { animation: none; }
}

/* Small screens: keep the full 44px+ touch target, tighten label padding. */
@media (max-width: 420px) {
  .swipe-label { font-size: 13.5px; padding: 0 84px 0 16px; }
  .swipe-knob { width: 68px; }
}

/* ==========================================================================
   HERO VARIANT — homepage "slide to unlock packages"
   Gold knob, slightly taller track, brand reveal layer.
   ========================================================================== */
.swipe[data-size="hero"] { max-width: 460px; }
.swipe[data-size="hero"] .swipe-track {
  height: 80px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.10));
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -6px 14px rgba(255, 255, 255, 0.06),
    0 6px 24px rgba(0, 0, 0, 0.28);
}
.swipe[data-size="hero"] .swipe-knob { width: 80px; height: 64px; top: 8px; }
.swipe[data-size="hero"] .swipe-label {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 10px 0 96px; /* clear of the 80px knob at rest */
  /* Resting label: dark text on the frosted track, matching the approved look. */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #232a33;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: none;
}
.swipe[data-size="hero"] .swipe-brand {
  font-size: 21px;
  letter-spacing: 0.08em;
  left: 0;
  right: 92px;
  justify-content: center;
  padding: 0 6px;
}

/* iPhone knob: glossy silver/white with gray arrow, like the lock-screen original. */
.swipe[data-knob="gold"] .swipe-knob {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 42%, #dde1e7 50%, #f0f2f5 58%, #ffffff 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -3px 6px rgba(120, 135, 155, 0.28),
    0 3px 12px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(20, 40, 70, 0.28);
}
.swipe[data-knob="gold"] .swipe-knob::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
}
/* While dragging the knob lifts: deeper shadow, like it's picked up. */
.swipe[data-knob="gold"] .swipe-track.is-dragging .swipe-knob {
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -3px 6px rgba(120, 135, 155, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(20, 40, 70, 0.28);
}
.swipe[data-knob="gold"] .swipe-knob::after {
  content: "";
  width: 38px;
  height: 38px;
  /* Transparent glass arrow: frosted, see-through, like etched glass. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z' fill='%239aa0a8' fill-opacity='0.62'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
  transform: none;
}
/* Arrow tint options — pick one with data-arrow on the .swipe container. */
.swipe[data-knob="gold"][data-arrow="gold"] .swipe-knob::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z' fill='%23c9a24b' fill-opacity='0.7'/%3E%3C/svg%3E");
}
.swipe[data-knob="gold"][data-arrow="frost"] .swipe-knob::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z' fill='%23ffffff' fill-opacity='0.75'/%3E%3C/svg%3E");
}
.swipe[data-knob="gold"][data-arrow="navy"] .swipe-knob::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z' fill='%230a1e3c' fill-opacity='0.62'/%3E%3C/svg%3E");
}
.swipe[data-knob="gold"][data-arrow="jet"] .swipe-knob::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z' fill='%23161616' fill-opacity='0.66'/%3E%3C/svg%3E");
}
.swipe[data-knob="gold"][data-arrow="steel"] .swipe-knob::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z' fill='%237fa8c9' fill-opacity='0.68'/%3E%3C/svg%3E");
}
.swipe[data-knob="gold"] .swipe-knob:focus-visible {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* The hidden brand: lives inside the track; each word fades in as a whole
   as the knob's trailing edge reaches it, so the name blooms word by word
   (True → North → Scales) in the knob's wake. Starts fully dark
   (invisible); JS toggles .lit per word with the knob position. */
.swipe-brand {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-left: 26px;
  font: 700 14px/1 Fraunces, Georgia, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.swipe-brand-word {
  display: inline-block;
  opacity: 0;
  transition: opacity 450ms ease;
}
.swipe-brand-word.lit { opacity: 1; }
.swipe-label { z-index: 1; }
.swipe-knob { z-index: 2; }
@media (max-width: 420px) {
  .swipe-brand { font-size: 12px; letter-spacing: 0.16em; padding-left: 20px; }
}

/* Hero small-screen sizes — kept last so they win over the base hero rules. */
@media (max-width: 480px) {
  .swipe[data-size="hero"] .swipe-label {
    font-size: 19px;
    letter-spacing: 0.02em;
    padding: 0 8px 0 94px;
  }
  .swipe[data-size="hero"] .swipe-brand {
    font-size: 19px;
    letter-spacing: 0.03em;
  }
}