/* =========================================================
   JGDEngage — "Customer Journey" pinned scroll-story section
   Trimmed for this site: only the .cj-* rules unique to this
   component. The upstream component package also ships a
   duplicate copy of the site's shared design tokens/classes
   (.container, .eyebrow, .h2, .lede, .mockup, .dot, .phone-mockup,
   .chat-bubble, etc.) so it can be dropped into ANY project as a
   standalone file. This site already defines all of those
   (see assets/css/style.css), so that duplicate block was
   intentionally left out here to avoid two different stylesheets
   both declaring the same global class names.
   ========================================================= */

/* ---------- Customer journey — pinned scroll storytelling ---------- */
/* NOTE: overflow must never be set on .cj-section or .cj-pin (ancestors of
   the sticky .cj-viewport) -- doing so makes the browser treat that
   ancestor as the "nearest scrolling container" for sticky purposes and
   breaks the pin entirely (the section goes blank mid-scroll). Horizontal
   clipping of the 400%-wide track is handled by .cj-viewport's own
   overflow:hidden instead, which is safe because it's the sticky element
   itself, not an ancestor of it. */
.cj-section{ }

.cj-pin{ position:relative; height: 400vh; margin-top: clamp(40px,6vw,72px); }
.cj-viewport{
  position:sticky; top:var(--cj-header-h,0px); height:calc(100vh - var(--cj-header-h,0px));
  overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:22px;
}
.cj-track{ display:flex; width:400%; max-width:400%; height:min(600px,70vh); will-change:transform; }
.cj-panel{ width:25%; flex-shrink:0; min-width:0; display:flex; align-items:center; opacity:.4; transition:opacity .5s ease; }
.cj-panel.is-active{ opacity:1; }
.cj-panel > .container{ width:100%; min-width:0; }
.cj-card{
  background: var(--card); border:1px solid var(--line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 44px; width:100%; min-width:0; min-height:400px;
  display:flex; align-items:flex-start;
}
.cj-panel-inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; width:100%; min-width:0; }
.cj-panel-inner > *{ min-width:0; }
.cj-num{
  font-size:clamp(4.5rem,9vw,7.2rem); font-weight:800; line-height:.78;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing:-0.03em; margin-bottom:2px; display:inline-block;
}
.cj-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  font-weight:700; font-size:0.95rem; color:var(--ink);
  border-bottom:1.5px solid var(--line); padding-bottom:3px;
  transition:border-color .25s ease, gap .25s ease; text-decoration:none;
}
.cj-link:hover{ border-color:var(--purple); gap:13px; }
.cj-link svg{ width:15px; height:15px; }
.cj-visual{ display:flex; justify-content:center; }
.cj-visual .mockup{ width:100%; max-width:340px; }
.cj-visual .phone-mockup{ margin:0 auto; }

.cj-progress-wrap{ display:flex; align-items:center; gap:18px; width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad); }
.cj-progress{ flex:1; height:3px; background:var(--line); border-radius:999px; overflow:hidden; }
.cj-progress-fill{ height:100%; width:0%; background:var(--gradient); border-radius:999px; }
.cj-progress-count{ font-size:0.8rem; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Panel 01 — call-answered orb */
.cj-orb-wrap{ position:relative; width:100%; max-width:340px; margin:0 auto; text-align:center; padding:8px 0 4px; }
.cj-orb-blob{ position:absolute; z-index:0; left:50%; top:44%; transform:translate(-50%,-50%); width:230px; height:230px; border-radius:50%; background: var(--gradient); opacity:.18; filter: blur(40px); }
.cj-orb{ position:relative; z-index:1; width:170px; height:170px; margin:0 auto; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow: 0 26px 60px -20px rgba(139,92,246,.5); }
.cj-orb::before{ content:''; position:absolute; inset:-25%; background: conic-gradient(from 0deg, var(--purple), var(--pink), var(--orange), var(--purple)); animation: cjOrbSpin 7s linear infinite; }
.cj-orb::after{ content:''; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), transparent 55%); }
@keyframes cjOrbSpin{ to{ transform: rotate(360deg); } }
.cj-orb-bars{ position:relative; display:flex; align-items:center; justify-content:center; gap:6px; height:56px; }
.cj-orb-bar{ width:6px; border-radius:4px; background:#fff; transform-origin:center; animation: cjBarPulse 1.1s ease-in-out infinite; }
.cj-orb-bar.b1{ height:16px; animation-delay:0s; }
.cj-orb-bar.b2{ height:32px; animation-delay:.12s; }
.cj-orb-bar.b3{ height:46px; animation-delay:.24s; }
.cj-orb-bar.b4{ height:30px; animation-delay:.36s; }
.cj-orb-bar.b5{ height:18px; animation-delay:.48s; }
@keyframes cjBarPulse{ 0%,100%{ transform:scaleY(.55); opacity:.85; } 50%{ transform:scaleY(1); opacity:1; } }
.cj-sparkle{ position:absolute; z-index:2; animation: cjSparkleFloat 3.2s ease-in-out infinite; }
.cj-sparkle svg{ width:100%; height:100%; fill:currentColor; stroke:none; display:block; }
.cj-sparkle.spark-1{ top:2px; right:44px; width:22px; height:22px; color:var(--pink); animation-delay:0s; }
.cj-sparkle.spark-2{ top:58%; right:14px; width:14px; height:14px; color:var(--orange); animation-delay:.8s; }
.cj-sparkle.spark-3{ bottom:30px; left:30px; width:16px; height:16px; color:var(--purple); animation-delay:1.6s; }
@keyframes cjSparkleFloat{ 0%,100%{ transform:translateY(0) scale(1); opacity:.55; } 50%{ transform:translateY(-6px) scale(1.15); opacity:1; } }
.cj-call-line{ text-align:center; font-weight:600; color:var(--ink); font-size:0.92rem; margin-top:18px; }
.cj-call-badge{ display:flex; width:fit-content; margin:14px auto 0; align-items:center; gap:6px; padding:5px 13px; background:rgba(63,185,133,.14); color:#279966; border-radius:999px; font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.cj-call-badge .dot{ width:7px; height:7px; border-radius:50%; background:#3FB985; }
@media (prefers-reduced-motion: reduce){ .cj-orb::before, .cj-orb-bar, .cj-sparkle{ animation:none !important; } }

/* Panel 02 — booking mini calendar */
.cj-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:16px 0; }
.cj-day{ aspect-ratio:1; border-radius:8px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:var(--ink-faint); }
.cj-day.cj-day-active{ background:var(--gradient); color:#fff; animation: cjDayGlow 3.6s ease-in-out infinite; }
@keyframes cjDayGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,0); } 50%{ box-shadow:0 0 0 6px rgba(139,92,246,.16); } }
.cj-slots{ display:flex; gap:8px; margin-bottom:14px; }
.cj-slot{ flex:1; text-align:center; padding:9px 6px; border-radius:10px; background:var(--bg-alt); font-size:0.76rem; font-weight:700; color:var(--ink-soft); }
.cj-slot.cj-slot-active{ background:var(--gradient); color:#fff; }

/* Panel 03 — after-hours chat badge */
.cj-afterhours-badge{ display:flex; align-items:center; gap:7px; justify-content:center; margin-bottom:14px; font-size:0.72rem; font-weight:700; color:var(--ink-faint); letter-spacing:.03em; text-transform:uppercase; }
.cj-afterhours-badge svg{ width:14px; height:14px; color: var(--purple); }

@media (max-width:1080px){
  .cj-panel-inner{ gap:36px; }
}
@media (max-width:900px), (prefers-reduced-motion: reduce){
  .cj-pin{ height:auto; margin-top:32px; }
  .cj-viewport{ position:static; height:auto; display:block; }
  .cj-track{ display:block; width:100%; height:auto; transform:none !important; }
  .cj-panel{ width:100%; opacity:1; padding:18px 0; }
  .cj-card{ padding:28px; min-height:0; }
  .cj-panel-inner{ grid-template-columns:1fr; gap:28px; }
  .cj-progress-wrap{ display:none; }
  .cj-num{ font-size:3.4rem; }
}