/* ============================================================
   HERO VARIANTS - 3 relevant hero animations for Pawn Leads
   Drop-in replacements for the .beacon visual on the right.
   v1 = logo orbit, v2 = workflow flow, v3 = text automation
   All reduced-motion safe. Brand: #1b8df6 / #6fc1ff / #0044ff.
   ============================================================ */

/* shared stage: sits where .beacon did (right side of hero2) */
.hero-viz {
  position: absolute; z-index: 2; right: clamp(-40px, 3vw, 120px); top: 50%;
  width: 560px; height: 560px; transform: translateY(-50%);
  pointer-events: none;
}

/* ============================================================
   V1 - LOGO ORBIT
   Pawn Leads bubble at center; Shmo + Shmello orbit on a ring
   with connecting light trails pulsing inward.
   ============================================================ */
.logo-orbit { display: grid; place-items: center; }

/* ---- desktop-only deep background: starfield + drifting signal motes + a
   wide slow third ring. Adds depth behind the orbit on big screens only;
   hidden on tablet/mobile where the viz reflows inline. ---- */
.lo-bg { position: absolute; inset: -8%; z-index: 0; pointer-events: none; display: none; }
@media (min-width: 1081px) { .lo-bg { display: block; } }
.lo-bg .lo-field {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(1.5px 1.5px at 18% 32%, rgba(173,229,255,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(111,193,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 64%, rgba(173,229,255,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 82%, rgba(111,193,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 50%, rgba(173,229,255,0.35), transparent 60%),
    radial-gradient(2px 2px at 8% 60%, rgba(27,141,246,0.5), transparent 60%),
    radial-gradient(2px 2px at 92% 38%, rgba(27,141,246,0.45), transparent 60%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: loFieldTwinkle 6s ease-in-out infinite alternate;
}
@keyframes loFieldTwinkle { 0% { opacity: .4; } 100% { opacity: .9; } }
/* a wide, slow, faint outer ring for extra depth */
.lo-bg .lo-ring.r3 {
  width: 480px; height: 480px; margin: -240px 0 0 -240px;
  border-style: solid; border-color: rgba(27,141,246,0.10);
  animation-duration: 40s;
}
/* free-floating signal motes drifting across the field */
.lo-mote {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #6fc1ff; box-shadow: 0 0 8px 1px rgba(27,141,246,0.6);
  opacity: 0; animation: loMote 9s linear infinite;
}
.lo-mote.m1 { left: 6%;  top: 70%; animation-delay: 0s;   }
.lo-mote.m2 { left: 88%; top: 24%; animation-delay: 3s;   animation-duration: 11s; }
.lo-mote.m3 { left: 78%; top: 84%; animation-delay: 5.5s; animation-duration: 12s; }
.lo-mote.m4 { left: 14%; top: 16%; animation-delay: 7.5s; animation-duration: 10s; }
@keyframes loMote {
  0%   { transform: translate(0,0) scale(0.6); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .9; }
  100% { transform: translate(40px,-60px) scale(1); opacity: 0; }
}
.lo-ring {
  position: absolute; left: 50%; top: 50%; width: 360px; height: 360px;
  margin: -180px 0 0 -180px; border-radius: 50%;
  border: 1.5px dashed rgba(27,141,246,0.30);
  animation: loSpin 26s linear infinite;
}
.lo-ring.r2 {
  width: 250px; height: 250px; margin: -125px 0 0 -125px;
  border-color: rgba(111,193,255,0.22); animation-duration: 18s; animation-direction: reverse;
}
@keyframes loSpin { to { transform: rotate(360deg); } }

/* sweeping lit arc on the outer ring */
.lo-ring::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(27,141,246,0.9);
  border-right-color: rgba(111,193,255,0.5);
  filter: drop-shadow(0 0 6px rgba(27,141,246,0.6));
}

/* center hub: Pawn Leads logo */
.lo-hub {
  position: absolute; left: 50%; top: 50%; width: 150px; height: 150px;
  transform: translate(-50%,-50%); display: grid; place-items: center;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, rgba(27,141,246,0.18), rgba(14,24,44,0.65));
  box-shadow: 0 0 50px rgba(27,141,246,0.35), inset 0 0 0 1px rgba(173,229,255,0.18);
  animation: loHubBreathe 4s ease-in-out infinite;
}
.lo-hub img { width: 96px; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); }
@keyframes loHubBreathe {
  0%,100% { box-shadow: 0 0 50px rgba(27,141,246,0.30), inset 0 0 0 1px rgba(173,229,255,0.18); }
  50%     { box-shadow: 0 0 78px rgba(27,141,246,0.55), inset 0 0 0 1px rgba(173,229,255,0.30); }
}

/* orbiting product marks - each rides the outer ring radius */
.lo-sat {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  animation: loSpin 26s linear infinite;
}
.lo-sat.s2 { animation-duration: 26s; animation-delay: -13s; } /* opposite side */
/* s2 chip must share the parent's -13s phase, else the counter-rotation
   lands 180deg off and the logo rides upside down */
.lo-sat.s2 .chip { animation-delay: -13s; }
.lo-sat .chip {
  position: absolute; width: 84px; height: 84px; left: 180px; top: -42px;
  display: grid; place-items: center; border-radius: 20px;
  background: rgba(14,24,44,0.82); border: 1px solid rgba(173,229,255,0.20);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 24px rgba(27,141,246,0.25);
  /* counter-rotate so the logo stays upright */
  animation: loSpin 26s linear infinite reverse;
}
.lo-sat .chip img { width: 58px; height: 58px; object-fit: contain; }
.lo-sat .chip .cap {
  position: absolute; bottom: -20px; font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #7fc1ff; white-space: nowrap;
}

/* pulse dots traveling from satellites inward to the hub */
.lo-spoke {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: #6fc1ff;
  box-shadow: 0 0 10px 2px rgba(27,141,246,0.7);
  animation: loPulse 2.6s ease-in-out infinite;
}
.lo-spoke.p2 { animation-delay: 1.3s; }
@keyframes loPulse {
  0%   { transform: translate(176px,0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(0,0) scale(0.4); opacity: 0; }
}

/* ============================================================
   V2 - WORKFLOW / AUTOMATION FLOW
   5 stacked nodes (New lead -> Text sent -> Reply -> Booked -> Sale)
   wired together; a light pulse travels down the wire and each
   node lights up in sequence.
   ============================================================ */
.flow-viz {
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
  justify-content: center; width: 100%; height: 100%; padding: 1rem 0;
}
.flow-node {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.1rem; border-radius: 16px;
  background: rgba(14,24,44,0.7); border: 1px solid rgba(173,229,255,0.16);
  margin: 0 auto; width: 300px; max-width: 86%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  opacity: .55; transition: none;
  animation: flowNode 9s ease-in-out infinite;
}
.flow-node:nth-child(1) { animation-delay: 0s; }
.flow-node:nth-child(3) { animation-delay: 1.8s; }
.flow-node:nth-child(5) { animation-delay: 3.6s; }
.flow-node:nth-child(7) { animation-delay: 5.4s; }
.flow-node:nth-child(9) { animation-delay: 7.2s; }
@keyframes flowNode {
  0%, 8% { opacity: .55; border-color: rgba(173,229,255,0.16); box-shadow: 0 8px 24px rgba(0,0,0,0.30); }
  14%, 22% { opacity: 1; border-color: rgba(27,141,246,0.8); box-shadow: 0 8px 30px rgba(27,141,246,0.35); transform: translateX(0) scale(1.03); }
  30%, 100% { opacity: .55; border-color: rgba(173,229,255,0.16); transform: scale(1); }
}
.flow-node .fn-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.2rem; color: #6fc1ff;
  background: rgba(27,141,246,0.14);
}
.flow-node .fn-tx b { display: block; font-size: .92rem; color: var(--text); font-weight: 700; }
.flow-node .fn-tx span { display: block; font-size: .72rem; color: var(--text-dim); }
.flow-node .fn-no {
  position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%;
  background: #1b8df6; color: #fff; font-size: .72rem; font-weight: 900;
  display: grid; place-items: center;
}
/* connecting wire between nodes */
.flow-wire {
  width: 2px; height: 26px; margin: 0 auto; position: relative;
  background: rgba(173,229,255,0.18); overflow: hidden;
}
.flow-wire::after {
  content: ""; position: absolute; left: -1px; top: -26px; width: 4px; height: 26px;
  background: linear-gradient(180deg, transparent, #6fc1ff, transparent);
  filter: drop-shadow(0 0 5px rgba(27,141,246,0.9));
  animation: flowWire 9s linear infinite;
}
.flow-wire.w2::after { animation-delay: 1.8s; }
.flow-wire.w3::after { animation-delay: 3.6s; }
.flow-wire.w4::after { animation-delay: 5.4s; }
@keyframes flowWire {
  0% { top: -26px; } 20% { top: 26px; } 100% { top: 26px; }
}

/* ============================================================
   V3 - TEXT AUTOMATION PHONE
   A phone mockup; outbound (brand) bubbles fly up, customer
   replies pop in. Bubbles use the PL blue.
   ============================================================ */
.tx-viz { display: grid; place-items: center; }
.tx-phone {
  position: relative; width: 270px; height: 500px; border-radius: 38px;
  background: linear-gradient(160deg, #16263f, #0d1a30);
  border: 8px solid #1c2c44; box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 60px rgba(27,141,246,0.2);
  overflow: hidden;
}
.tx-phone .notch {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: 90px; height: 20px; border-radius: 12px; background: #0a1424; z-index: 4;
}
.tx-head {
  position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 3;
  display: flex; align-items: center; gap: .6rem; padding: 0 1rem;
  padding-top: .5rem;
  background: linear-gradient(180deg, rgba(27,141,246,0.18), transparent);
  border-bottom: 1px solid rgba(173,229,255,0.12);
}
.tx-head .av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(27,141,246,0.2); padding: 5px;
}
.tx-head .av img { width: 100%; height: 100%; object-fit: contain; }
.tx-head b { font-size: .82rem; color: var(--text); }
.tx-head span { font-size: .66rem; color: #6fc1ff; display: block; }
.tx-feed {
  position: absolute; top: 64px; left: 0; right: 0; bottom: 0; padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .6rem; justify-content: flex-end;
}
.tx-bubble {
  max-width: 78%; padding: .6rem .8rem; border-radius: 16px; font-size: .76rem;
  line-height: 1.35; opacity: 0; transform: translateY(14px);
  animation: txPop 11s ease-in-out infinite;
}
.tx-bubble.out {
  align-self: flex-end; background: linear-gradient(135deg, #1b8df6, #0a6fd4); color: #fff;
  border-bottom-right-radius: 5px;
}
.tx-bubble.in {
  align-self: flex-start; background: #1c2c44; color: #eef4fb;
  border-bottom-left-radius: 5px;
}
.tx-bubble.b1 { animation-delay: 0s; }
.tx-bubble.b2 { animation-delay: 2.2s; }
.tx-bubble.b3 { animation-delay: 4.4s; }
.tx-bubble.b4 { animation-delay: 6.6s; }
@keyframes txPop {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  4% { opacity: 1; transform: translateY(0) scale(1); }
  82% { opacity: 1; transform: translateY(0); }
  92%,100% { opacity: 0; transform: translateY(-8px); }
}
.tx-typing {
  align-self: flex-start; display: flex; gap: 4px; padding: .6rem .7rem;
  background: #1c2c44; border-radius: 14px; opacity: 0;
  animation: txPop 11s ease-in-out infinite; animation-delay: 8.6s;
}
.tx-typing i { width: 6px; height: 6px; border-radius: 50%; background: #6fc1ff; animation: txDot 1.2s ease-in-out infinite; }
.tx-typing i:nth-child(2){ animation-delay:.2s; } .tx-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes txDot { 0%,100%{ opacity:.3; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }

/* ============================================================
   SHOWCASE EMBED - reuse v2/v3 animations as in-page content
   sections (not heroes). Two-column: copy + animated visual.
   ============================================================ */
.viz-showcase { position: relative; }
.viz-showcase .vs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
}
.viz-showcase.flip .vs-grid { grid-template-columns: 1fr 1fr; }
.viz-showcase.flip .vs-stage { order: -1; }
.viz-showcase .vs-stage {
  position: relative; min-height: 460px; display: grid; place-items: center;
  border-radius: var(--radius); border: 1px solid rgba(173,229,255,0.12);
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(27,141,246,0.10), transparent 75%),
    rgba(10,18,32,0.5);
  overflow: hidden;
}
/* let the flow viz size itself inside the stage */
.viz-showcase .flow-viz { width: 340px; max-width: 90%; height: auto; }
.viz-showcase .tx-phone { width: 250px; height: 470px; }
@media (max-width: 900px) {
  .viz-showcase .vs-grid { grid-template-columns: 1fr; gap: 2rem; }
  .viz-showcase.flip .vs-stage { order: 0; }
  .viz-showcase .vs-stage { min-height: 400px; }
}

/* ============================================================
   responsive + reduced motion
   ============================================================ */
@media (max-width: 1080px) {
  /* hero copy + reflowed viz must stack, not sit as flex-row siblings */
  .hero2 { flex-direction: column; align-items: stretch; }
  .hero2 > .hero-viz { order: 2; }
  .hero-viz { position: relative; right: auto; top: auto; transform: none;
    width: 100%; height: auto; margin: 2.5rem auto 0; }
  .logo-orbit { height: 420px; }
  .tx-phone { width: 230px; height: 430px; }
  .flow-viz { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-ring, .lo-sat, .lo-sat .chip, .lo-spoke, .lo-hub,
  .lo-field, .lo-mote,
  .flow-node, .flow-wire::after, .tx-bubble, .tx-typing, .tx-typing i { animation: none !important; }
  .flow-node { opacity: 1; }
  .tx-bubble { opacity: 1; transform: none; }
  .lo-spoke, .lo-mote { display: none; }
  .lo-field { opacity: .6; }
}

/* ===== homepage interactivity upgrades (20260701) ===== */
/* satellite squish on tap (Shmello-style) */
.lo-sat .chip.squish { animation: chipSquish .55s cubic-bezier(.34,1.56,.64,1) !important; }
@keyframes chipSquish {
  0%   { transform: scale(1,1); }
  30%  { transform: scale(1.15,.78); }
  60%  { transform: scale(.9,1.12); }
  100% { transform: scale(1,1); }
}
/* hub pulse on tap */
.lo-hub.pulse::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(111,193,255,.7);
  animation: hubPulse .8s ease-out forwards;
}
@keyframes hubPulse {
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.logo-orbit { transition: transform .3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .lo-sat .chip.squish { animation: none !important; }
  .lo-hub.pulse::after { animation: none; }
}

/* ===== atmosphere layer (shared kit, homepage copy) ===== */
.fb-atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.atmo-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform;}
.atmo-blob.ab1{width:56vw;height:56vw;left:-18vw;top:-14vw;background:radial-gradient(circle, rgba(27,141,246,.16), transparent 65%);animation:atmoDrift1 26s ease-in-out infinite;}
.atmo-blob.ab2{width:46vw;height:46vw;right:-16vw;top:28vh;background:radial-gradient(circle, rgba(0,68,255,.13), transparent 65%);animation:atmoDrift2 32s ease-in-out infinite;}
.atmo-blob.ab3{width:40vw;height:40vw;left:22vw;bottom:-18vw;background:radial-gradient(circle, rgba(111,193,255,.09), transparent 65%);animation:atmoDrift3 38s ease-in-out infinite;}
@keyframes atmoDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,4vh) scale(1.12);}}
@keyframes atmoDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-5vw,-6vh) scale(.92);}}
@keyframes atmoDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(4vw,-5vh) scale(1.08);}}
.atmo-dots{position:absolute;inset:0;opacity:.35;background-image:radial-gradient(rgba(127,166,204,.14) 1px, transparent 1.4px);background-size:34px 34px;-webkit-mask-image:radial-gradient(75% 60% at 50% 40%, black, transparent 85%);mask-image:radial-gradient(75% 60% at 50% 40%, black, transparent 85%);}
.atmo-cursor{position:absolute;width:520px;height:520px;border-radius:50%;left:0;top:0;transform:translate(-50%,-50%);background:radial-gradient(circle, rgba(27,141,246,.07), transparent 65%);opacity:0;transition:opacity .6s ease;will-change:transform;}
.atmo-cursor.live{opacity:1;}
.fb-atmo ~ header, .fb-atmo ~ section, .fb-atmo ~ footer, .fb-atmo ~ .marquee{position:relative;z-index:1;}
@media(max-width:960px){.atmo-blob{filter:blur(60px);}.atmo-cursor{display:none;}}
@media(prefers-reduced-motion:reduce){.atmo-blob{animation:none;}}