/* VerifyUGC on-site ad system — side skyscrapers + exit-intent popup.
   Behaviour lives in /assets/ads.js (external for a strict CSP). Loaded only on
   marketing surfaces (homepage, guides, blacklist, creators) — never on the
   dashboard or /auth. The top notification bar is a dashboard-only concern and
   ships its own injected styles from dashboard.js.

   Theme-aware via the shared design tokens (tokens.css). var() fallbacks are
   included so the components still render correctly on the rare SSR surface that
   ships its own scoped CSS instead of linking tokens.css. */

/* ===== side skyscrapers (160×600) =================================
   Fixed to the viewport edges and vertically centred. Mobile-first: hidden by
   default and only revealed once there is desktop room (>1200px). They sit
   alongside the centred content column without pushing it (position:fixed), and
   below the exit popup / sticky header in the stack. */
.vu-sky{
  position:fixed;top:50%;
  width:160px;height:600px;z-index:40;display:none;opacity:0;
  transition:opacity .4s ease-out,transform .4s ease-out;
}
/* Resting (hidden) state: nudged off-axis so the reveal slides inward. The
   vertical-centering translateY(-50%) is folded into the same transform so it
   survives the slide. */
.vu-sky--left{left:16px;transform:translate(-30px,-50%)}
.vu-sky--right{right:16px;transform:translate(30px,-50%)}
/* Two-stage reveal, desktop-only (>1200px):
     .vu-live  → JS mounts the rail (display:block) but it stays hidden+offset,
     .vu-shown → JS adds this once the user scrolls past the hero, sliding it in.
   .vu-shown is never removed, so the rail stays put on scroll-back-up. */
@media (min-width:1201px){
  .vu-sky.vu-live{display:block}
  .vu-sky.vu-live.vu-shown{opacity:1;transform:translate(0,-50%)}
}
/* Hard-hidden below desktop — never a broken half-state on tablet/mobile. */
@media (max-width:1200px){
  .vu-sky{display:none!important}
}

.vu-sky__card{
  position:relative;display:flex;flex-direction:column;height:100%;
  box-sizing:border-box;padding:20px 16px;
  border:1px solid var(--border2,rgba(255,255,255,.14));
  border-radius:var(--r-lg,18px);
  background:var(--surface,#13131f);
  overflow:hidden;text-decoration:none;color:var(--text,#edecf7);
  transition:border-color .2s var(--ease,ease),transform .2s var(--ease,ease);
}
.vu-sky__card:hover{
  border-color:var(--a1,#a855f7);transform:translateY(-2px);
  box-shadow:0 10px 34px color-mix(in srgb,var(--a1,#a855f7) 28%,transparent);
}
.vu-sky__card:focus-visible{outline:2px solid var(--a1,#a855f7);outline-offset:2px}
/* a faint accent glow at the top of the rail so it reads as a promo, not a card */
.vu-sky__card::before{
  content:"";position:absolute;inset:-40% 0 auto 0;height:160px;
  background:radial-gradient(60% 80% at 50% 0,color-mix(in srgb,var(--a1,#a855f7) 30%,transparent),transparent 70%);
  pointer-events:none;
}
.vu-sky__eyebrow{
  position:relative;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--a3,#22d3ee);margin-bottom:10px;
}
.vu-sky__title{
  position:relative;font:800 1.18rem/1.2 "Space Grotesk",system-ui,sans-serif;margin:0 0 10px;
}
.vu-sky__body{
  position:relative;font-size:.86rem;line-height:1.5;color:var(--dim,#9b9bbd);margin:0;
}
/* CTA mirrors the site's primary button (.btn-p): gradient fill, lifts + glows
   on hover. The whole rail is one <a>, so the lift is driven by the card hover. */
.vu-sky__cta{
  position:relative;margin-top:auto;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;text-align:center;
  font-weight:700;font-size:.86rem;padding:10px 12px;border-radius:var(--r-pill,999px);
  background:var(--grad,linear-gradient(120deg,#a855f7,#3b82f6));color:#fff;
  box-shadow:0 0 0 0 transparent;
  transition:transform .15s var(--ease,ease),box-shadow .25s var(--ease,ease);
}
.vu-sky__card:hover .vu-sky__cta{
  transform:translateY(-1px);
  box-shadow:0 8px 26px color-mix(in srgb,var(--a1,#a855f7) 45%,transparent);
}
/* per-rail dismiss — quiet by default, brightens on hover */
.vu-sky__x{
  position:absolute;top:8px;right:8px;z-index:2;width:22px;height:22px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--bg2,#0c0c18) 70%,transparent);
  color:var(--faint,#8b8ba8);font-size:14px;line-height:1;
}
.vu-sky__x:hover{color:var(--text,#edecf7)}
.vu-sky__x:focus-visible{outline:2px solid var(--a1,#a855f7);outline-offset:2px}
.vu-sky__tag{position:relative;margin-top:12px;font-size:.7rem;color:var(--faint,#8b8ba8)}

@media (prefers-reduced-motion:reduce){
  .vu-sky{transition:none}
  /* no horizontal slide — appear in place once .vu-shown is added */
  .vu-sky--left,.vu-sky--right{transform:translate(0,-50%)}
  .vu-sky__card:hover{transform:none}
  .vu-sky__card:hover .vu-sky__cta{transform:none}
}

/* ===== exit-intent popup ==========================================
   Centred modal over a dimmed overlay. The modal slides up + fades in. Reveal
   uses the same .show + transition idiom as the dashboard toasts: JS appends the
   node hidden, then adds .show on the next frame to trigger the transition. The
   popup only fires while the tab is active (exit-intent mousemove), so the frame
   tick is reliable. .show is removed to play the same transition in reverse. */
.vu-exit{
  position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:rgba(4,4,10,.62);
  opacity:0;transition:opacity .3s var(--ease,cubic-bezier(.4,0,.2,1));
}
.vu-exit.show{opacity:1}
.vu-exit__modal{
  position:relative;box-sizing:border-box;width:100%;max-width:460px;
  padding:34px 30px 30px;text-align:center;
  border:1px solid var(--border2,rgba(255,255,255,.14));
  border-radius:var(--r-lg,18px);
  background:var(--surface,#13131f);color:var(--text,#edecf7);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  opacity:0;transform:translateY(24px);
  transition:opacity .34s var(--ease,cubic-bezier(.4,0,.2,1)),transform .34s var(--ease,cubic-bezier(.4,0,.2,1));
}
.vu-exit.show .vu-exit__modal{opacity:1;transform:translateY(0)}
.vu-exit__modal::before{
  content:"";position:absolute;inset:-1px -1px auto -1px;height:120px;
  border-radius:var(--r-lg,18px) var(--r-lg,18px) 0 0;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0,color-mix(in srgb,var(--a1,#a855f7) 22%,transparent),transparent 70%);
}
.vu-exit__x{
  position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;
  place-items:center;border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:50%;cursor:pointer;background:var(--bg2,#0c0c18);
  color:var(--dim,#9b9bbd);font-size:18px;line-height:1;
}
.vu-exit__x:hover{color:var(--text,#edecf7);border-color:var(--a1,#a855f7)}
.vu-exit__x:focus-visible{outline:2px solid var(--a1,#a855f7);outline-offset:2px}
.vu-exit__eyebrow{
  position:relative;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.11em;color:var(--a3,#22d3ee);margin-bottom:10px;
}
.vu-exit__title{position:relative;font:800 1.7rem/1.15 "Space Grotesk",system-ui,sans-serif;margin:0 0 12px}
.vu-exit__body{position:relative;font-size:.98rem;line-height:1.55;color:var(--dim,#9b9bbd);margin:0 0 22px}
.vu-exit__ctas{position:relative;display:flex;flex-direction:column;gap:10px}
.vu-exit__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:700;font-size:.95rem;padding:13px 18px;border-radius:var(--r-pill,999px);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
}
.vu-exit__cta--primary{background:var(--grad,linear-gradient(120deg,#a855f7,#3b82f6));color:#fff}
.vu-exit__cta--ghost{
  background:transparent;color:var(--text,#edecf7);
  border-color:var(--border2,rgba(255,255,255,.14));
}
.vu-exit__cta--ghost:hover{border-color:var(--a1,#a855f7)}
.vu-exit__cta:focus-visible{outline:2px solid var(--a1,#a855f7);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .vu-exit,.vu-exit__modal{transition:opacity .12s}
  .vu-exit__modal{transform:none}
  .vu-exit.show .vu-exit__modal{transform:none}
}
@media (max-width:560px){
  .vu-exit__title{font-size:1.45rem}
}