/* ============================================================================
   Chronos — top-of-page "pointer spotlight" glow + floating glow buttons
   ----------------------------------------------------------------------------
   The chosen design: a faint dot grid + a soft colored spotlight that follows
   the cursor across the top band (hue shifts with x — the 21st.dev GlowCard
   idea), auto-panning gently when idle. Deliberately muted: it should read as
   texture behind the header, not grab attention.

   top-glow.js injects .ctg-dots / .ctg-spot into each host and drives the
   --sx/--sy/--spot-hue vars. Host: `has-top-glow` on the page's main
   container; `.chronos-top-glow` band as its first child. Decorative only:
   behind content, never clickable.
   ========================================================================== */

.has-top-glow { position: relative; isolation: isolate; }

.chronos-top-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(280px, 32vw, 440px);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Base wash + fade into the white page below (no hard bottom edge). */
  background: linear-gradient(180deg, #fbfcfe 0%, rgba(251, 252, 254, 0) 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
}

/* Subtle film grain so the band doesn't feel flat. */
.chronos-top-glow::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
}

/* Faint dot grid, denser toward the top center. */
.chronos-top-glow .ctg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.11) 1.2px, transparent 1.3px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(75% 100% at 50% 0%, #000 35%, transparent 85%);
          mask-image: radial-gradient(75% 100% at 50% 0%, #000 35%, transparent 85%);
}

/* The pointer-following spotlight (muted; per-page intensity via --ctg-a*). */
.chronos-top-glow .ctg-spot {
  position: absolute;
  top: 0; left: 0;
  width: 920px; height: 680px;
  border-radius: 50%;
  /* 2026-09-30 (owner): toned down — lower saturation + alpha; the band should
     whisper, not glow like a lava lamp. */
  background: radial-gradient(circle,
    hsl(var(--spot-hue, 205) 70% 75% / var(--ctg-a1, 0.22)),
    hsl(calc(var(--spot-hue, 205) + 50) 72% 80% / var(--ctg-a2, 0.12)) 42%,
    transparent 70%);
  filter: blur(44px);
  will-change: transform;
  /* follows the pointer once aimed */
  transform: translate(calc(var(--sx, 50%) - 460px), calc(var(--sy, 120px) - 340px));
}
/* Idle: gentle auto-pan + slow hue sweep until the user moves the pointer.
   Offsets keep the spot's CENTER inside the visible band (spot is 680px tall,
   so center y = translateY + 340). */
.chronos-top-glow:not(.ctg-aimed) .ctg-spot {
  animation: ctgSpotIdle 18s ease-in-out infinite alternate;
}
@keyframes ctgSpotIdle {
  0%   { transform: translate(-10vw, -170px); filter: blur(44px) hue-rotate(0deg); }
  100% { transform: translate(60vw, -60px);   filter: blur(44px) hue-rotate(60deg); }
}

/* Campaigns runs hotter: its top is dense (thin toolbar + opaque white cards
   cover most of the band), so the default alpha reads invisible there.
   2026-09-30 (owner): campaigns accent is now magenta (violet→pink sweep, never
   green) and the boost is dialed down with the global tone-down. */
.chronos-top-glow[data-accent="magenta"] { --ctg-a1: 0.38; --ctg-a2: 0.21; }
.chronos-top-glow[data-accent="magenta"] .ctg-dots {
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.16) 1.2px, transparent 1.3px);
}

/* Campaigns pages have an opaque white toolbar; let the glow read behind it. */
.cp-main-area.has-top-glow > .cp-topbar { background: transparent !important; }
/* The campaigns DASHBOARD view wraps everything in .cp-dash-main (opaque
   #fafafa/#f9fafb full-bleed) + .cp-dash-topbar (#fff), which covered 100% of
   the band (owner saw color on Contacts/Database but never on Campaigns).
   Make them transparent when the glow is mounted — .cp-main-area keeps its own
   base background, so the page is unchanged except the band reads through. */
.cp-main-area.has-top-glow .cp-dash-main { background: transparent !important; }
.cp-main-area.has-top-glow .cp-dash-topbar { background: transparent !important; }
/* THEME-PROOF (2026-09-04): the default light theme (vercel-theme.js) injects
   `html.vercel-theme .cp-wizard/.cp-overview/.cp-dash-main {background:#fafafa
   !important}` — .cp-overview is a second dashboard surface that stayed opaque
   and kept the dashboard colorless in prod even after the rules above (local
   checks missed it because the theme wasn't active there). The html-prefixed
   selectors below out-rank the theme's on specificity for every surface. */
.cp-main-area.has-top-glow .cp-overview,
html.vercel-theme .cp-main-area.has-top-glow .cp-overview,
html.vercel-theme .cp-main-area.has-top-glow .cp-dash-main,
html.vercel-theme .cp-main-area.has-top-glow .cp-dash-topbar { background: transparent !important; }
/* 2026-09-04 (owner): the overview now carries its OWN band inside the
   surface — floating behind "Campaigns / All your campaigns in one place /
   Start new campaign", the same pattern as contacts' .crm-panel. While the
   overview is visible, hide the outer shell band so the two never stack. */
.cp-main-area.has-top-glow:has(.cp-overview.active) > .chronos-top-glow { display: none; }
/* THE overview cover (found 2026-09-05 by probing the real logged-in page):
   .cp-ov-topbar AND .cp-ov-body both compute OPAQUE #fafafa under the live
   theme and tile 100% of the overview — the band was alive underneath the
   whole time. These two wrappers were the only surfaces missing from the
   transparency list. Cards/tiles inside keep their own white backgrounds. */
.cp-overview.has-top-glow .cp-ov-topbar,
.cp-overview.has-top-glow .cp-ov-body,
html.vercel-theme .cp-overview.has-top-glow .cp-ov-topbar,
html.vercel-theme .cp-overview.has-top-glow .cp-ov-body { background: transparent !important; }

@media (prefers-reduced-motion: reduce) {
  .chronos-top-glow .ctg-spot { animation: none !important; }
}

/* ============================================================================
   Floating glow buttons — soft lift + cursor sheen (21st.dev GlowCard idea).
   Add `chronos-glow-btn` to a button; --glow-rgb is set by top-glow.js.
   ========================================================================== */
.chronos-glow-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .22s ease, filter .16s ease;
  box-shadow: 0 3px 10px rgba(var(--glow-rgb, 56,132,255), 0.16), 0 1px 3px rgba(0,0,0,0.08);
}
.chronos-glow-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 24px rgba(var(--glow-rgb, 56,132,255), 0.30), 0 2px 6px rgba(0,0,0,0.12);
}
.chronos-glow-btn:active { transform: translateY(0); filter: brightness(0.98); }
.chronos-glow-btn::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.38), rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .2s ease; mix-blend-mode: soft-light;
}
.chronos-glow-btn:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .chronos-glow-btn { transition: box-shadow .2s ease; }
  .chronos-glow-btn:hover { transform: none; }
}