/* v5 hero 1, lens: scattered signals in, one Sfere sphere, five coloured outcomes out (dark night) */

.hx-lens{position:relative;min-height:min(100svh,980px);padding:calc(var(--nav) + 24px) 0 60px;display:flex;align-items:center;overflow:clip;color:#fff;border-radius:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px);
  background:
    radial-gradient(46% 62% at 72% 48%,rgba(120,80,248,.42),rgba(120,80,248,0) 70%),
    radial-gradient(40% 55% at 4% 104%,rgba(224,144,47,.2),rgba(224,144,47,0) 70%),
    linear-gradient(180deg,#171226 0%,#211939 55%,#2B2245 100%)}
.lx-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(58% 62% at 70% 48%,#000,transparent);mask-image:radial-gradient(58% 62% at 70% 48%,#000,transparent)}
.lx-grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(24px,3vw,48px);align-items:center}
.hx-lens .eyebrow{color:var(--l1)}
.hx-lens h1{color:#fff}
.hx-lens .lede{max-width:46ch;color:rgba(233,227,255,.78)}

/* ---------- the lens stage ---------- */
.lx{container:lx/inline-size;position:relative}
.lx-in{position:relative;width:100%;aspect-ratio:680/560;--u:calc(100cqw/680)}
.lx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lx-svg .st{fill:none;stroke:rgba(214,205,240,.13);stroke-width:.9}
.lx-svg .ry{fill:none;stroke:rgba(214,199,252,.3);stroke-width:1;stroke-dasharray:1.5 5;stroke-linecap:round}
.lx-svg .bg{fill:none;stroke-width:9;stroke-linecap:round;opacity:.1}
.lx-svg .bm{fill:none;stroke-width:1.7;stroke-linecap:round}
.lx-svg .pi{fill:#EEE9FF}
html.js:not(.still) .lx:not(.in) .lx-svg{opacity:0}
html.js:not(.still) .lx.in .lx-svg{animation:fade 1.2s .55s backwards}

/* sources: quiet chips, grey signals leave from their right edge */
.lx-src{position:absolute;left:0;top:4%;bottom:4%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;z-index:2}
.lx-src li{display:inline-flex;align-items:center;gap:calc(var(--u)*9);padding:calc(var(--u)*5) calc(var(--u)*14) calc(var(--u)*5) calc(var(--u)*5);border-radius:999px;background:rgba(30,22,54,.72);border:1px solid rgba(255,255,255,.12);font:500 max(11px,calc(var(--u)*13))/1.1 Inter;color:rgba(236,231,255,.8);white-space:nowrap}
.lx-src li:nth-child(1),.lx-src li:nth-child(6){margin-left:calc(var(--u)*30)}
.lx-src li:nth-child(2),.lx-src li:nth-child(5){margin-left:calc(var(--u)*10)}
.lx-src .bd{display:grid;place-items:center;width:calc(var(--u)*26);height:calc(var(--u)*26);min-width:20px;min-height:20px;border-radius:50%;background:rgba(255,255,255,.07);color:color-mix(in srgb,var(--cc) 55%,#fff)}
.lx-src .ic{width:58%;height:58%}
.lx-src li.seq{--d:calc(.15s + var(--i) * .07s)}

/* event snippets drifting toward the sphere */
.lx-snips{position:absolute;inset:0;pointer-events:none;z-index:2}
.sn{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:8px;background:rgba(23,17,40,.82);border:1px dashed rgba(255,255,255,.2);font:400 max(10px,calc(var(--u)*11))/1.2 var(--mono);color:rgba(226,220,245,.72);white-space:nowrap}
.sn i{width:5px;height:5px;border-radius:50%;background:rgba(226,220,245,.55)}
.sn.s1{left:9%;top:17.6%}
.sn.s2{left:5%;top:32.6%}
.sn.s3{left:6.5%;top:62.6%}
html.js:not(.still) .sn{animation:lxsnip 9s var(--ease) infinite backwards}
html.js:not(.still) .sn.s1{animation-delay:.9s}
html.js:not(.still) .sn.s2{animation-delay:3.9s}
html.js:not(.still) .sn.s3{animation-delay:6.9s}
@keyframes lxsnip{0%{opacity:0;transform:translateX(-14px)}10%{opacity:1}62%{opacity:1}78%,100%{opacity:0;transform:translateX(26px)}}

/* the sphere: glossy violet, fine dot texture, a prism rim where colour leaves */
.lx-core{position:absolute;left:49.4%;top:50%;width:calc(var(--u)*280);aspect-ratio:1;margin:calc(var(--u)*-140) 0 0 calc(var(--u)*-140);z-index:1}
.lx-halo{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,rgba(160,124,255,.5),rgba(120,80,248,.16) 58%,rgba(120,80,248,0))}
html.js:not(.still) .lx-halo{animation:lxbreathe 5.5s ease-in-out infinite alternate}
@keyframes lxbreathe{from{transform:scale(.93);opacity:.7}to{transform:scale(1.05);opacity:1}}
.lx-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lx-ring .rg{fill:none;stroke:rgba(214,199,252,.16);stroke-width:1}
.lx-ring .tk{fill:none;stroke:rgba(214,199,252,.38);stroke-width:1.2;stroke-dasharray:1.2 7.2;stroke-linecap:round}
.lx-ring .spin{transform-box:fill-box;transform-origin:center}
html.js:not(.still) .lx-ring .spin{animation:lxspin 90s linear infinite}
@keyframes lxspin{to{transform:rotate(360deg)}}
.lx-ring .arc{font:500 16px var(--mono);letter-spacing:.18em;text-transform:uppercase;fill:#D8CCFF;paint-order:stroke;stroke:#1D1533;stroke-width:5px;stroke-linejoin:round}
.lx-ball{position:absolute;left:17%;top:17%;width:66%;height:66%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 36% 29%,#F4EFFF 0,#CDB9FF 6%,#A283FF 18%,#7F58FA 36%,#6A43EC 54%,#4A2BC0 74%,#2E1A83 94%,#29177A 100%);
  box-shadow:0 calc(var(--u)*34) calc(var(--u)*70) calc(var(--u)*-22) rgba(98,60,230,.9),inset calc(var(--u)*-16) calc(var(--u)*-22) calc(var(--u)*44) rgba(20,8,64,.55),inset calc(var(--u)*8) calc(var(--u)*10) calc(var(--u)*24) rgba(255,255,255,.2)}
.lx-ball i{position:absolute;inset:0;border-radius:50%}
.lx-ball .dots{background:radial-gradient(circle,rgba(255,255,255,.7) 0 .8px,rgba(255,255,255,0) 1.25px) 0 0/5px 5px;-webkit-mask-image:radial-gradient(circle at 66% 70%,#000 0,rgba(0,0,0,.55) 38%,transparent 70%);mask-image:radial-gradient(circle at 66% 70%,#000 0,rgba(0,0,0,.55) 38%,transparent 70%);opacity:.44}
.lx-ball .rim{background:conic-gradient(from 0deg,transparent 0 22deg,#35C9DC 48deg,#A98BFF 72deg,#3DD497 96deg,#F27AA6 120deg,#F4AE55 146deg,transparent 170deg 360deg);-webkit-mask-image:radial-gradient(circle,transparent 60%,#000 71%);mask-image:radial-gradient(circle,transparent 60%,#000 71%);opacity:.42;mix-blend-mode:screen}
.lx-ball .spec{inset:auto;left:17%;top:9%;width:44%;height:30%;background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0));transform:rotate(-26deg);opacity:.62}
.lx-steps{display:none}
.lx-team{position:absolute;left:50%;bottom:-2%;translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:calc(var(--u)*6) calc(var(--u)*13);border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font:600 max(11px,calc(var(--u)*12.5))/1.1 Inter;color:#fff;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.lx-team i{width:6px;height:6px;border-radius:50%;background:var(--l1)}

/* outcomes: five cards, each lit by its own beam */
.c-loyal{--cc:#E0902F}
.lx-out{position:absolute;left:69.8%;right:0;top:7%;bottom:7%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;z-index:2}
.lx-out li{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:calc(var(--u)*10);row-gap:2px;align-items:center;padding:calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*8) calc(var(--u)*8);border-radius:calc(var(--u)*14);background:rgba(28,21,50,.86);border:1px solid rgba(255,255,255,.13);box-shadow:0 16px 30px -18px rgba(0,0,0,.7);white-space:nowrap}
.lx-out li:nth-child(2),.lx-out li:nth-child(4){margin-left:calc(var(--u)*18)}
.lx-out li:nth-child(3){margin-left:calc(var(--u)*28)}
.lx-out .bd{grid-row:1/3;display:grid;place-items:center;width:calc(var(--u)*32);height:calc(var(--u)*32);min-width:24px;min-height:24px;border-radius:calc(var(--u)*10);background:var(--cc);color:#fff;box-shadow:0 6px 16px -6px var(--cc)}
.lx-out .bd .ic{width:56%;height:56%}
.lx-out b{font:600 max(12px,calc(var(--u)*14.5))/1.1 Inter;letter-spacing:-.01em;color:#fff}
.lx-out small{font:400 max(10px,calc(var(--u)*10.5))/1.15 var(--mono);color:color-mix(in srgb,var(--cc) 45%,#fff);opacity:.9}
.lx-out .hit{position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--cc);box-shadow:0 0 22px -4px var(--cc);opacity:0;pointer-events:none}
.lx-out li.seq{--d:calc(.75s + var(--i) * .08s)}

.lx-tag{position:absolute;left:49.4%;bottom:0;translate:-50% 0;z-index:2}
.hx-lens .scroll-cue{bottom:18px}

/* paused off screen */
.hx-lens.off *{animation-play-state:paused!important}

/* ---------- tablet ---------- */
@media (max-width:980px){
  .hx-lens{min-height:0;padding:calc(var(--nav) + 36px) 0 56px}
  .lx-grid{grid-template-columns:1fr;gap:44px}
  .lx{width:100%;max-width:720px;margin:0 auto}
}

/* ---------- phone: sources on top, sphere, outcomes as a list fed by ordered lines ---------- */
@container lx (max-width:559px){
  .lx-in{aspect-ratio:auto;--u:calc(100cqw/350);display:flex;flex-direction:column;padding-bottom:40px}
  .lx-src{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px;justify-items:center}
  .lx-src li{margin:0!important;font-size:11.5px;gap:6px;padding:4px 10px 4px 4px}
  .lx-src .bd{width:22px;height:22px}
  .lx-core{position:relative;left:auto;top:auto;margin:92px auto 64px;width:52cqw}
  .lx-ring .arc{display:none}
  .lx-steps{display:flex;flex-direction:column;gap:7px;position:absolute;left:100%;top:22%;margin-left:4px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#D8CCFF;white-space:nowrap}
  .lx-steps li{display:flex;gap:6px}
  .lx-steps b{font-weight:500;color:rgba(216,204,255,.5)}
  .lx-team{bottom:-10%;font-size:11.5px;padding:6px 12px}
  .lx-out{position:relative;inset:auto;padding-left:13cqw;display:flex;flex-direction:column;align-items:stretch;gap:9px}
  .lx-out li{margin:0!important;grid-template-columns:auto 1fr auto;grid-template-rows:auto;padding:7px 12px 7px 7px;border-radius:12px}
  .lx-out .bd{grid-row:auto;width:28px;height:28px;border-radius:9px}
  .lx-out b{font-size:14px}
  .lx-out small{font-size:10px;text-align:right}
  .sn.s1{left:2%;top:15.5%}
  .sn.s2{display:none}
  .sn.s3{left:auto;right:0;top:19%}
  .lx-tag{left:auto;right:0;translate:none}
}