/* ==========================================================================
   XPLOROO · Signup page — "Why join Xploroo" premium member section
   signup-benefits.css — Additive section shown BELOW the existing signup
   form/card on signup.html only. Scoped entirely under `.signup-benefits` /
   `.sb-*` — never touches `.auth-*` (the form itself), header or footer.

   Deliberately NOT a duplicate of the Login Benefits section: instead of
   six equal cards up top, this leads with a central "member journey" panel
   (Discover → Book → Experience → Earn → Explore Again) and keeps the six
   benefit cards secondary/supporting. No reveal-on-scroll anywhere in this
   file — every element renders at full opacity immediately.

   Gradient alphas are kept in the same restrained ~0.02-0.05 range used
   after the Trending Packages correction — a faint wash, not a visible
   gradient rectangle.
   ========================================================================== */

.signup-benefits {
  position: relative;
  padding-block: 0 clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.signup-benefits__container {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Head
   ------------------------------------------------------------------------- */
.signup-benefits__head {
  text-align: center;
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.signup-benefits__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.signup-benefits__title {
  margin: 0;
  font-size: var(--fs-2xl);
}
.signup-benefits__subtitle {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Member journey panel — the central, more aspirational visual element.
   Glass surface, a soft radial spotlight behind the content, a handful of
   tiny atmospheric points baked into the background layer list (no extra
   DOM), and a static thin glass/titanium edge — same restrained technique
   as Featured Experiences, scaled down for a smaller panel.
   ------------------------------------------------------------------------- */
.signup-benefits__journey-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-border);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) clamp(1.1rem, 0.9rem + 1vw, 2rem);
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  background:
    radial-gradient(circle 2px at 10% 20%, rgba(196, 181, 253, 0.35), transparent),
    radial-gradient(circle 2px at 88% 30%, rgba(147, 197, 253, 0.3), transparent),
    radial-gradient(circle 2px at 22% 85%, rgba(244, 114, 182, 0.28), transparent),
    radial-gradient(circle 2px at 78% 88%, rgba(165, 243, 252, 0.28), transparent),
    radial-gradient(ellipse 65% 60% at 50% 40%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-card), 0 0 60px -30px rgba(124, 58, 237, 0.14);
}
:root[data-theme="light"] .signup-benefits__journey-panel {
  background:
    radial-gradient(circle 2px at 10% 20%, rgba(124, 58, 237, 0.22), transparent),
    radial-gradient(circle 2px at 88% 30%, rgba(37, 99, 235, 0.2), transparent),
    radial-gradient(circle 2px at 22% 85%, rgba(219, 39, 119, 0.18), transparent),
    radial-gradient(circle 2px at 78% 88%, rgba(6, 182, 212, 0.18), transparent),
    radial-gradient(ellipse 65% 60% at 50% 40%, rgba(124, 58, 237, 0.035) 0%, transparent 70%),
    var(--glass-bg);
  box-shadow: var(--shadow-card), 0 0 50px -30px rgba(124, 58, 237, 0.1);
}

.signup-benefits__journey-label {
  margin: 0 0 clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider, var(--ls-widest));
  text-transform: uppercase;
  color: var(--color-text-strong);
}

.signup-benefits__journey {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signup-benefits__step {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--sbj-border, var(--glass-border));
  background: color-mix(in srgb, var(--sbj-tint, var(--color-primary)) 10%, transparent);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-strong);
  white-space: nowrap;
}

.signup-benefits__connector {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-subtle);
  opacity: 0.6;
}
.signup-benefits__connector svg { width: 14px; height: 14px; }

.signup-benefits__step--discover   { --sbj-tint: #a78bfa; --sbj-border: rgba(196, 181, 253, 0.45); }
.signup-benefits__step--book       { --sbj-tint: #7dabfa; --sbj-border: rgba(147, 197, 253, 0.45); }
.signup-benefits__step--experience { --sbj-tint: #f472b6; --sbj-border: rgba(251, 182, 206, 0.42); }
.signup-benefits__step--earn       { --sbj-tint: #67e8f9; --sbj-border: rgba(165, 243, 252, 0.42); }
.signup-benefits__step--explore    { --sbj-tint: #fb7185; --sbj-border: rgba(251, 182, 206, 0.42); }

@media (max-width: 480px) {
  .signup-benefits__journey { gap: 0.4rem 0.3rem; }
  .signup-benefits__step { height: 2rem; padding-inline: 0.75rem; font-size: 0.65rem; }
  .signup-benefits__connector svg { width: 12px; height: 12px; }
}

/* -------------------------------------------------------------------------
   Benefit cards — 1 column mobile, 2 tablet, 3x2 desktop. Same compact
   horizontal icon+text anatomy as Login Benefits for consistency, with
   this section's own colour identities.
   ------------------------------------------------------------------------- */
.signup-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .signup-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .signup-benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

.signup-benefits__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-xl, var(--radius-lg));
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(ellipse 90% 100% at 12% 0%, var(--sbc-a, transparent) 0%, transparent 70%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: 0 10px 26px -22px var(--sbc-glow, transparent);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-out),
    background-color 300ms ease;
}
@media (hover: hover) {
  .signup-benefits__card:hover {
    transform: translateY(-2px);
    border-color: var(--sbc-border, var(--color-border-strong));
    box-shadow: 0 14px 32px -18px var(--sbc-glow, transparent);
  }
}

.signup-benefits__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--sbc-border, var(--glass-border));
  background: color-mix(in srgb, var(--sbc-icon, var(--color-primary)) 14%, transparent);
  color: var(--sbc-icon, var(--color-text-strong));
}
.signup-benefits__icon svg { width: 1.15rem; height: 1.15rem; }

.signup-benefits__body { min-width: 0; }
.signup-benefits__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-strong);
}
.signup-benefits__card-desc {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.signup-benefits__card--travel   { --sbc-a: rgba(124, 58, 237, 0.05); --sbc-border: rgba(196, 181, 253, 0.4); --sbc-icon: #a78bfa; --sbc-glow: rgba(124, 58, 237, 0.18); }
.signup-benefits__card--coins    { --sbc-a: rgba(37, 99, 235, 0.05);  --sbc-border: rgba(147, 197, 253, 0.4); --sbc-icon: #7dabfa; --sbc-glow: rgba(37, 99, 235, 0.18); }
.signup-benefits__card--creators { --sbc-a: rgba(219, 39, 119, 0.045); --sbc-border: rgba(251, 182, 206, 0.38); --sbc-icon: #f472b6; --sbc-glow: rgba(219, 39, 119, 0.16); }
.signup-benefits__card--play     { --sbc-a: rgba(6, 182, 212, 0.05);  --sbc-border: rgba(165, 243, 252, 0.38); --sbc-icon: #67e8f9; --sbc-glow: rgba(6, 182, 212, 0.16); }
.signup-benefits__card--globe    { --sbc-a: rgba(79, 70, 229, 0.05);  --sbc-border: rgba(199, 210, 254, 0.4); --sbc-icon: #a5b4fc; --sbc-glow: rgba(79, 70, 229, 0.18); }
.signup-benefits__card--access   { --sbc-a: rgba(225, 29, 72, 0.04);  --sbc-border: rgba(251, 182, 206, 0.35); --sbc-icon: #fb7185; --sbc-glow: rgba(225, 29, 72, 0.14); }

:root[data-theme="light"] .signup-benefits__card--travel   { --sbc-a: rgba(124, 58, 237, 0.035); --sbc-icon: #7c3aed; }
:root[data-theme="light"] .signup-benefits__card--coins    { --sbc-a: rgba(37, 99, 235, 0.035);  --sbc-icon: #2563eb; }
:root[data-theme="light"] .signup-benefits__card--creators { --sbc-a: rgba(219, 39, 119, 0.03);  --sbc-icon: #db2777; }
:root[data-theme="light"] .signup-benefits__card--play     { --sbc-a: rgba(6, 182, 212, 0.035);  --sbc-icon: #0891b2; }
:root[data-theme="light"] .signup-benefits__card--globe    { --sbc-a: rgba(79, 70, 229, 0.035);  --sbc-icon: #4f46e5; }
:root[data-theme="light"] .signup-benefits__card--access   { --sbc-a: rgba(225, 29, 72, 0.03);   --sbc-icon: #e11d48; }

/* -------------------------------------------------------------------------
   Closing line
   ------------------------------------------------------------------------- */
.signup-benefits__closing {
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  text-align: center;
}
.signup-benefits__closing-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md, var(--fs-base));
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.signup-benefits__closing-sub {
  margin: 0.35rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}