/* ═══════════════════════════════════════════════════════════════════════
   PROSPER LABS — RESEARCHER VERIFICATION GATEWAY  (v9.11)

   Replaces the old "Are you 21 or older?" modal.

   Direction: the vials sit in real depth, not on a flat backdrop. Three
   depth layers (far / mid / near) differ in scale, blur, opacity and
   parallax travel, so pointer movement produces genuine dimensional
   separation instead of a uniform slide. The verification card is the one
   sharp, still object in the frame.

   Signature: the enter button is visibly disarmed and fills as each
   affirmation is checked — the affirmations read as consequential rather
   than as a formality to click past.
   ═══════════════════════════════════════════════════════════════════════ */

.pl-gate {
  --pg-void:   #0A0518;
  --pg-deep:   #1C0B45;
  --pg-purple: #5421AF;
  --pg-glow:   #9B5CF5;
  --pg-card:   #FFFFFF;
  --pg-ink:    #100820;
  --pg-muted:  #7D7592;
  --pg-line:   rgba(84, 33, 175, .14);

  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow: hidden;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(120% 80% at 50% 8%,  rgba(155, 92, 245, .30), transparent 58%),
    radial-gradient(90%  70% at 12% 88%, rgba(84, 33, 175, .34),   transparent 60%),
    linear-gradient(168deg, var(--pg-deep) 0%, var(--pg-void) 62%);
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}

/* Edge vignette. Without it the violet reads as one flat wash and the vials
   at the frame edges have nothing to separate from. Sits above the vials but
   below the card, so it darkens the ambient layer only. */
.pl-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 88% at 50% 46%, transparent 34%, rgba(6, 2, 16, .58) 100%);
}

/* Dismissal: fade the whole gate, then remove from the flow. */
.pl-gate.is-leaving { opacity: 0; pointer-events: none; }
.pl-gate[hidden]    { display: none !important; }

/* Scroll lock while the gate is up. */
html.pl-gate-open, body.pl-gate-open { overflow: hidden !important; }


/* ── DEPTH FIELD ─────────────────────────────────────────────────────── */

.pl-gate__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Faint lab grid, well below the vials — gives the parallax something to
   read against so the depth is legible rather than just implied. */
.pl-gate__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(155, 92, 245, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 245, .07) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at 50% 45%, #000 8%, transparent 66%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 8%, transparent 66%);
}

/* Light bloom behind the card. */
.pl-gate__bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(940px, 96vw);
  height: min(940px, 96vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 92, 245, .34) 0%, rgba(84, 33, 175, .12) 38%, transparent 68%);
  filter: blur(26px);
  animation: pgBloom 9s ease-in-out infinite;
}

@keyframes pgBloom {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

/* Drifting dust motes. */
.pl-gate__mote {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  animation: pgMote linear infinite;
}

@keyframes pgMote {
  0%   { transform: translateY(112vh) scale(.6); opacity: 0; }
  12%  { opacity: .7; }
  88%  { opacity: .7; }
  100% { transform: translateY(-14vh) scale(1); opacity: 0; }
}


/* ── VIALS ───────────────────────────────────────────────────────────── */

.pl-gate__vial {
  position: absolute;
  /* --px/--py are written by JS on pointer move; --depth scales the travel. */
  --px: 0;
  --py: 0;
  --depth: 1;
  will-change: transform;
  transform:
    translate3d(calc(var(--px) * var(--depth) * 1px), calc(var(--py) * var(--depth) * 1px), 0);
  transition: transform .85s cubic-bezier(.19, 1, .22, 1);
}

.pl-gate__vial img {
  display: block;
  width: 100%;
  height: auto;
  animation: pgFloat var(--float-dur, 15s) ease-in-out var(--float-delay, 0s) infinite;
  transform-origin: 50% 60%;
  /* Grounds the vial in the scene — without a cast shadow the transparent
     PNGs read as stickers pasted on the gradient. */
  filter: drop-shadow(0 34px 46px rgba(6, 2, 18, .58));
}

@keyframes pgFloat {
  0%, 100% { transform: translateY(0)      rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-26px)  rotate(calc(var(--rot, 0deg) + 3.5deg)); }
}

/* Depth layers. Far vials are smaller, blurred and dimmed; near vials are
   sharp and oversized and break the frame edge. */
.pl-gate__vial--far {
  filter: blur(3.5px);
  opacity: .42;
  --depth: .35;
}
.pl-gate__vial--mid {
  filter: blur(1px);
  opacity: .78;
  --depth: .75;
}
.pl-gate__vial--near {
  opacity: 1;
  --depth: 1.5;
}

/* Placements — deliberately asymmetric, and all clear of the card's
   centre column so nothing fights the text. */
.pl-gate__vial--1 { top:  6%;  left: -3%;  width: clamp(120px, 13vw, 210px); --rot: -13deg; --float-dur: 16s; --float-delay: -2s; }
.pl-gate__vial--2 { top: 44%;  left:  6%;  width: clamp(150px, 17vw, 285px); --rot:  10deg; --float-dur: 13s; --float-delay: -6s; }
.pl-gate__vial--3 { bottom: -8%; left: 17%; width: clamp(130px, 15vw, 245px); --rot: -7deg;  --float-dur: 18s; --float-delay: -1s; }
.pl-gate__vial--4 { top:  3%;  right: 12%; width: clamp(115px, 12vw, 195px); --rot:  16deg; --float-dur: 15s; --float-delay: -8s; }
.pl-gate__vial--5 { top: 38%;  right: -4%; width: clamp(155px, 18vw, 300px); --rot:  -9deg; --float-dur: 14s; --float-delay: -3s; }
.pl-gate__vial--6 { bottom: 2%; right: 15%; width: clamp(125px, 14vw, 225px); --rot: 12deg; --float-dur: 17s; --float-delay: -10s; }


/* ── VERIFICATION CARD ───────────────────────────────────────────────── */

.pl-gate__panel {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(30px, 4vw, 46px) clamp(24px, 3.4vw, 44px);
  background: var(--pg-card);
  border-radius: 30px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 50px 110px rgba(4, 1, 14, .62),
    0 0 0 1px rgba(255, 255, 255, .09);
  animation: pgPanelIn .68s cubic-bezier(.19, 1, .22, 1) both;
}

@keyframes pgPanelIn {
  from { opacity: 0; transform: translateY(26px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

.pl-gate__brand {
  display: block;
  margin-bottom: 26px;
  color: var(--pg-purple);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}

.pl-gate__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #F4EEFF;
  color: var(--pg-purple);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1;
}

/* Small pulsing dot — the only "live" signal on the card. */
.pl-gate__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pg-purple);
  animation: pgPulse 2.1s ease-in-out infinite;
}

@keyframes pgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.pl-gate__panel h1 {
  margin: 0 0 14px;
  color: var(--pg-ink);
  font-size: clamp(2rem, 4.4vw, 2.85rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.pl-gate__lede {
  margin: 0 0 26px;
  color: var(--pg-muted);
  font-size: clamp(.95rem, 1.5vw, 1.04rem);
  font-weight: 500;
  line-height: 1.6;
}


/* ── AFFIRMATIONS ────────────────────────────────────────────────────── */

.pl-gate__checks {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.pl-gate__check {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 17px;
  border: 1.5px solid var(--pg-line);
  border-radius: 17px;
  background: #FCFAFF;
  color: var(--pg-ink);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}

.pl-gate__check:hover { border-color: rgba(84, 33, 175, .34); }

.pl-gate__check.is-checked {
  border-color: var(--pg-purple);
  background: #F4EEFF;
}

.pl-gate__check strong { font-weight: 800; }

/* Visually hidden but still focusable and screen-reader addressable. */
.pl-gate__check input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pl-gate__box {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  border: 2px solid rgba(84, 33, 175, .3);
  border-radius: 7px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.pl-gate__box svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  stroke-width: 3.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s ease, transform .28s cubic-bezier(.34, 1.7, .5, 1);
}

.pl-gate__check.is-checked .pl-gate__box {
  background: var(--pg-purple);
  border-color: var(--pg-purple);
}

.pl-gate__check.is-checked .pl-gate__box svg { opacity: 1; transform: scale(1); }

/* Keyboard focus, driven by the hidden input's focus state. */
.pl-gate__check input:focus-visible ~ .pl-gate__box {
  outline: 3px solid var(--pg-glow);
  outline-offset: 3px;
}


/* ── ENTER BUTTON ────────────────────────────────────────────────────── */

.pl-gate__enter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #EAE3F7;
  color: #A79BC4;
  font-family: inherit;
  font-size: 1.04rem;
  font-weight: 900;
  letter-spacing: -.01em;
  cursor: not-allowed;
  overflow: hidden;
  transition: color .3s ease, box-shadow .3s ease, transform .18s ease;
}

/* The arming fill — width tracks how many affirmations are checked. */
.pl-gate__enter-fill {
  position: absolute;
  inset: 0;
  width: var(--fill, 0%);
  background: linear-gradient(100deg, var(--pg-purple), #7B41E8);
  transition: width .52s cubic-bezier(.19, 1, .22, 1);
}

.pl-gate__enter-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pl-gate__enter-label svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .28s ease;
}

.pl-gate__enter.is-armed {
  color: #fff;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(84, 33, 175, .42);
}

.pl-gate__enter.is-armed:hover              { transform: translateY(-2px); }
.pl-gate__enter.is-armed:hover svg          { transform: translateX(4px); }
.pl-gate__enter.is-armed:active             { transform: translateY(0); }
.pl-gate__enter:focus-visible               { outline: 3px solid var(--pg-glow); outline-offset: 3px; }

/* Nudge shown if someone clicks Enter before both boxes are ticked. */
.pl-gate__enter.is-nudging { animation: pgNudge .42s ease; }

@keyframes pgNudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  75%      { transform: translateX(7px); }
}

/* Hidden outright rather than faded — an invisible-but-present hint was
   reserving ~35px of dead space between the button and the fine print. */
.pl-gate__hint {
  display: none;
  margin: 11px 0 0;
  color: #C0392B;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.pl-gate__hint.is-shown { display: block; }


/* ── FINE PRINT + EXIT ───────────────────────────────────────────────── */

.pl-gate__fine {
  margin: 20px 0 0;
  padding-top: 19px;
  border-top: 1px solid var(--pg-line);
  color: #9990AC;
  font-size: .78rem;
  line-height: 1.58;
}

.pl-gate__fine a {
  color: var(--pg-purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pl-gate__exit {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, .62);
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
}

.pl-gate__exit a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-gate__exit a:hover { color: var(--pg-glow); }


/* ── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Keep only the four vials that sit clear of the card on narrow screens. */
  .pl-gate__vial--2,
  .pl-gate__vial--5 { display: none; }
}

@media (max-width: 640px) {
  .pl-gate { padding: 18px 14px 58px; align-items: center; }

  /* Capped well short of full height so the vial field still frames the card
     top and bottom — on a phone the card was otherwise eating the whole
     screen and the floating vials disappeared entirely. */
  .pl-gate__panel {
    padding: 24px 19px;
    border-radius: 26px;
    max-height: min(78dvh, calc(100dvh - 128px));
  }

  .pl-gate__brand    { margin-bottom: 15px; font-size: .8rem; letter-spacing: .18em; }
  .pl-gate__eyebrow  { margin-bottom: 11px; font-size: .63rem; padding: 6px 12px; }
  .pl-gate__panel h1 { font-size: clamp(1.68rem, 7.6vw, 2.15rem); margin-bottom: 10px; }
  .pl-gate__lede     { font-size: .89rem; line-height: 1.52; margin-bottom: 17px; }
  .pl-gate__checks   { gap: 9px; margin-bottom: 18px; }
  .pl-gate__check    { padding: 13px; font-size: .86rem; line-height: 1.45; border-radius: 15px; gap: 11px; }
  .pl-gate__box      { flex-basis: 21px; width: 21px; height: 21px; }
  .pl-gate__enter    { min-height: 54px; font-size: .95rem; }
  .pl-gate__fine     { margin-top: 15px; padding-top: 14px; font-size: .73rem; line-height: 1.5; }
  .pl-gate__exit     { bottom: 15px; font-size: .79rem; }

  /* Push the remaining vials to the corners so they frame rather than crowd. */
  .pl-gate__vial--1 { top: 1%;    left: -12%;  width: 128px; }
  .pl-gate__vial--3 { bottom: -6%; left: -10%; width: 138px; }
  .pl-gate__vial--4 { top: 1%;    right: -11%; width: 122px; }
  .pl-gate__vial--6 { bottom: -5%; right: -12%; width: 134px; }
}

/* Very short viewports (landscape phones): drop the ambient layer entirely
   so the card and its actions always fit. */
@media (max-height: 560px) {
  .pl-gate__vial { display: none; }
  .pl-gate__exit { position: static; transform: none; margin-top: 14px; text-align: center; }
  .pl-gate       { padding: 14px; }
}


/* ── REDUCED MOTION ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pl-gate__vial img,
  .pl-gate__bloom,
  .pl-gate__mote,
  .pl-gate__eyebrow::before { animation: none !important; }

  .pl-gate__panel  { animation: none !important; }
  .pl-gate__vial   { transition: none !important; transform: none !important; }
  .pl-gate__enter-fill { transition: none !important; }
  .pl-gate__enter.is-nudging { animation: none !important; }
}


/* ── TRUST TOAST REPOSITION ──────────────────────────────────────────── */
/* theme.css ~line 3390 pinned .floating-toast to the top-right, where it
   overlapped the header on load. The toast is disabled by default now
   (see footer.php); if it is re-enabled it belongs at bottom-left, out of
   the header's way. */
.floating-toast {
  left: 18px !important;
  right: auto !important;
  bottom: 18px !important;
  top: auto !important;
}

/* Never let the toast or any sticky UI sit above the gate. */
.pl-gate ~ .floating-toast,
html.pl-gate-open .floating-toast { display: none !important; }