/* ============================================================
   LumiLas — hero v5
   Cinematic single-take intro -> three service reveals -> picker.
   Backgrounds: 0 GigaPointe wireframe, 1 grandMA3 cuelist, 2 green laser fan.
   ============================================================ */
.ll-hero3{position:relative;min-height:100svh;overflow:hidden;background:#040406;
  display:flex;align-items:center;justify-content:center;isolation:isolate;--a:#FC03FB}
.ll-hero3 *{box-sizing:border-box}
.beam-rig{display:none}
.floor-wash{position:absolute;left:-10%;right:-10%;bottom:-24%;height:60%;z-index:0;
  background:radial-gradient(52% 60% at 50% 100%,color-mix(in srgb,var(--a) 20%,transparent),transparent 72%);
  opacity:0;transition:opacity 1.6s var(--ease-out,ease),background .9s;filter:blur(14px)}
.ll-hero3.stage-on .floor-wash{opacity:.42}

/* ---------- INTRO (line fills L->R, flies up into the tape) ---------- */
.intro{position:absolute;inset:0;z-index:6;pointer-events:none;background:#040406;
  transition:opacity 1.05s cubic-bezier(.5,0,.3,1),transform 1.4s cubic-bezier(.5,0,.3,1)}
.ll-hero3.i-gone .intro{opacity:0;transform:scale(1.06);pointer-events:none}
.intro .sweep{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,#00E8FF,#4FA8FF,#B44BF8,#FC03FB,#FF8A3D,#FDE11E,#48F06E,#00E8FF);
  background-size:300% 100%;clip-path:inset(0 100% 0 0);
  transform:translateY(50vh) scaleY(3.2);will-change:clip-path,transform}
.ll-hero3.i-strike .intro .sweep{animation:ln-fill 3.35s cubic-bezier(.22,1,.28,1) forwards, ln-pan 19s linear infinite}
@keyframes ln-fill{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(50vh) scaleY(3.2)}
  4%{opacity:1}
  34%{clip-path:inset(0 0 0 0);transform:translateY(50vh) scaleY(3.2)}
  46%{transform:translateY(50vh) scaleY(3.2)}
  100%{opacity:.9;clip-path:inset(0 0 0 0);transform:translateY(0) scaleY(1)}}
@keyframes ln-pan{0%{background-position:0% 0}100%{background-position:300% 0}}
.intro .prism{position:absolute;left:0;right:0;top:0;height:26px;opacity:0;
  background:linear-gradient(90deg,#00E8FF,#4FA8FF,#B44BF8,#FC03FB,#FF8A3D,#FDE11E,#48F06E,#00E8FF);
  background-size:300% 100%;filter:blur(22px);clip-path:inset(0 100% 0 0);
  transform:translateY(calc(50vh - 12px));
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.ll-hero3.i-strike .intro .prism{animation:gl-fill 3.55s cubic-bezier(.22,1,.28,1) forwards, ln-pan 19s linear infinite}
@keyframes gl-fill{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(calc(50vh - 12px))}
  6%{opacity:.75}
  34%{clip-path:inset(0 0 0 0);transform:translateY(calc(50vh - 12px))}
  100%{opacity:.5;clip-path:inset(0 0 0 0);transform:translateY(0)}}
.intro .flash{position:absolute;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(200,235,255,.5) 18%,rgba(120,180,255,.18) 42%,transparent 70%);filter:blur(4px)}
.ll-hero3.i-strike .intro .flash{animation:head 3.35s cubic-bezier(.22,1,.28,1) forwards}
@keyframes head{
  0%{opacity:0;left:0;transform:translateY(50vh) scale(.4)}
  5%{opacity:1;transform:translateY(50vh) scale(1.15)}
  34%{opacity:.9;left:100%;transform:translateY(50vh) scale(1)}
  48%{opacity:.35;left:100%;transform:translateY(50vh) scale(.8)}
  100%{opacity:0;left:100%;transform:translateY(0) scale(.5)}}
.intro-h{position:absolute;left:clamp(24px,7vw,110px);top:50%;transform:translateY(-50%);max-width:80%}
.intro-h h1{font-family:var(--font-display);font-weight:400;margin:0;color:#F5F5F5;
  font-size:clamp(32px,6vw,94px);line-height:1.05;letter-spacing:.004em}
.intro-h .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.intro-h .wi{display:inline-block;transform:translateY(112%) scale(1.06);filter:blur(14px);opacity:0;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),filter 1.05s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.ll-hero3.i-text .intro-h .wi{transform:translateY(0) scale(1);filter:blur(0);opacity:1}
.intro-h .g{background:var(--gradient-spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-lab{position:absolute;font-family:var(--font-tc);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#9E9E9E;line-height:1.9;opacity:0;transition:opacity 1s ease .35s}
.ll-hero3.i-text .intro-lab{opacity:.62}
.intro-lab.tr{top:clamp(78px,12vh,130px);right:clamp(22px,5vw,48px);text-align:right}
.intro-lab.bl{left:clamp(24px,7vw,110px);bottom:clamp(40px,9vh,74px)}

/* ---------- SERVICE STAGE ---------- */
.svc-wrap{position:relative;z-index:4;width:100%;max-width:1500px;padding:0 clamp(18px,4vw,52px);
  display:flex;align-items:center;justify-content:center;gap:0}
.svc{flex:0 1 0;min-width:0;opacity:0;text-align:center;pointer-events:none;
  transition:flex-grow .95s cubic-bezier(.16,1,.3,1),opacity .75s ease,padding .95s cubic-bezier(.16,1,.3,1);padding:0}
.svc.on{flex-grow:1;opacity:1;pointer-events:auto}
.ll-hero3.picker .svc{flex-grow:1;opacity:1;pointer-events:auto;padding:0 clamp(8px,1.4vw,22px)}
.svc .eye{display:block;font-family:var(--font-display);font-size:9px;font-weight:400;
  letter-spacing:.5em;text-transform:uppercase;color:var(--c);opacity:0;transform:translateY(8px);
  transition:opacity .8s ease .1s,letter-spacing 1.2s cubic-bezier(.16,1,.3,1) .1s,transform .9s cubic-bezier(.16,1,.3,1) .1s;
  margin-bottom:clamp(12px,2vh,22px);white-space:nowrap}
.svc.on .eye,.ll-hero3.picker .svc .eye{opacity:1;letter-spacing:.28em;transform:none}
.svc .ttl{font-family:var(--font-display);font-weight:400;margin:0;color:#F5F5F5;line-height:1.04;
  letter-spacing:.004em;text-wrap:balance;font-size:clamp(34px,6.6vw,96px);transition:font-size .95s cubic-bezier(.16,1,.3,1)}
.ll-hero3.picker .svc .ttl{font-size:clamp(19px,2.5vw,40px)}
.svc .ttl .w{display:inline-block;overflow:visible;vertical-align:bottom}
.svc .ttl .wi{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(26px) scale(1.08);
  transition:opacity .7s ease var(--d,0s),filter 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.svc.on .ttl .wi,.ll-hero3.picker .svc .ttl .wi{opacity:1;filter:blur(0);transform:none}
.svc .cap{font-family:var(--font-body);font-weight:300;color:#9E9E9E;line-height:1.62;
  font-size:clamp(13px,1.45vw,18px);max-width:40ch;margin:clamp(16px,2.4vh,26px) auto 0;
  opacity:0;filter:blur(9px);transform:translateY(14px);
  transition:opacity .8s ease .5s,filter .9s cubic-bezier(.16,1,.3,1) .5s,transform .9s cubic-bezier(.16,1,.3,1) .5s}
.svc.on .cap{opacity:1;filter:blur(0);transform:none}
.ll-hero3.picker .svc .cap{font-size:clamp(11px,1.05vw,13.5px);max-width:26ch;opacity:.55;filter:blur(0);transform:none;transition-delay:.15s}
.svc.out .ttl .wi{opacity:0;filter:blur(18px);transform:translateY(-22px) scale(.96);
  transition:opacity .42s ease,filter .5s ease,transform .5s ease;transition-delay:0s!important}
.svc.out .eye{opacity:0;letter-spacing:.5em;transition-duration:.4s;transition-delay:0s}
.svc.out .cap{opacity:0;filter:blur(8px);transform:translateY(-10px);transition-duration:.4s;transition-delay:0s}
.svc .rule{height:1px;margin:clamp(14px,2.2vh,22px) auto 0;width:0;background:var(--c);
  opacity:0;transition:width .9s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.ll-hero3.picker .svc .rule{width:64%;opacity:.55}
.ll-hero3.picker .svc{cursor:pointer}
.ll-hero3.picker .svc:hover .rule{width:88%;opacity:1}
.ll-hero3.picker .svc:hover .ttl{color:#fff}
.ll-hero3.picker .svc.hot .rule{width:88%;opacity:1;box-shadow:0 0 14px var(--c)}

/* ---------- slide 0 : GigaPointe wireframe ---------- */
.plot-bg{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;transition:opacity 1.2s var(--ease-out,ease)}
.ll-hero3[data-slide="0"] .plot-bg{opacity:1}
.plot-bg svg{height:min(80vh,780px);width:auto;overflow:visible;animation:mh-float 9s ease-in-out infinite alternate}
@keyframes mh-float{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
.plot-bg .wf{fill:none;stroke:rgba(245,245,245,.5);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plot-bg .wf.dim{stroke:rgba(245,245,245,.22);stroke-width:1}
.plot-bg .mh-head{will-change:transform}
.plot-bg .mh-beamg{mix-blend-mode:plus-lighter}
.plot-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 60% at 50% 50%,rgba(4,4,6,.72) 0%,rgba(4,4,6,.32) 46%,rgba(4,4,6,0) 78%),
  linear-gradient(to bottom,rgba(4,4,6,.7),rgba(4,4,6,0) 22%,rgba(4,4,6,0) 74%,rgba(4,4,6,.86))}

/* ---------- slide 1 : grandMA3 console ---------- */
.cue-bg{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  perspective:1400px;perspective-origin:50% 44%;transition:opacity 1.4s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;justify-content:center}
.ll-hero3[data-slide="1"] .cue-bg{opacity:1}
.cue-bg .amb{position:absolute;inset:0;z-index:0;
  background:radial-gradient(44% 44% at 16% 20%,rgba(0,232,255,.09),transparent 70%),
  radial-gradient(48% 48% at 84% 82%,rgba(79,168,255,.07),transparent 70%)}
.cue-3d{position:relative;width:min(1080px,90vw);transform-style:preserve-3d;
  transform:rotateX(11deg) rotateY(-9deg) rotateZ(.5deg);
  animation:cue-drift 22s ease-in-out infinite alternate}
@keyframes cue-drift{from{transform:rotateX(11deg) rotateY(-9deg) rotateZ(.5deg) translateY(0)}
  to{transform:rotateX(9deg) rotateY(-6.6deg) rotateZ(.5deg) translateY(-9px)}}
.cue-win{position:relative;font-family:var(--font-tc);font-size:12px;line-height:1.55;color:#C2CFDA;
  background:#101418;border:1px solid rgba(255,255,255,.09);border-radius:4px;
  box-shadow:0 40px 110px rgba(0,0,0,.75),0 0 90px rgba(0,170,255,.06),inset 0 0 130px rgba(0,110,200,.04);overflow:hidden}
.cue-title{display:flex;align-items:center;gap:10px;padding:6px 12px;
  background:linear-gradient(180deg,#2A3138,#1C2228);border-bottom:1px solid rgba(0,0,0,.5)}
.ct-ico{width:10px;height:10px;background:#FFCF3D;border-radius:2px;box-shadow:0 0 8px rgba(255,207,61,.4)}
.ct-t{font-size:10.5px;letter-spacing:.1em;color:#E8F0F7}
.ct-s{font-size:9px;color:#8FA0AF;letter-spacing:.08em}
.ct-btns{margin-left:auto;display:flex;gap:6px}
.ct-btns i{width:14px;height:11px;background:#333B43;border:1px solid rgba(255,255,255,.12);border-radius:2px}
.cue-info{display:flex;align-items:center;gap:16px;padding:8px 14px;
  background:linear-gradient(180deg,#181E24,#12171C);border-bottom:1px solid rgba(255,255,255,.07)}
.cue-info img.cue-logo{height:13px!important;width:auto!important;max-width:none!important;display:block;opacity:.92}
.cue-sep{width:1px;height:14px;background:rgba(255,255,255,.14)}
.cue-exe{color:#6B7A88;font-size:9.5px;letter-spacing:.1em}
.cue-tcl{margin-left:auto;color:#51616F;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase}
.cue-tcv{color:#3DFF7C;font-size:13.5px;letter-spacing:.14em;font-weight:500;text-shadow:0 0 12px rgba(61,255,124,.5)}
.cue-cols{display:flex;padding:5px 16px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#6B7A88;white-space:nowrap}
.cue-cols span{flex:0 0 auto;overflow:hidden}
.cue-scroll{max-height:min(52vh,560px);overflow:hidden;position:relative}
.cue-rows{will-change:transform}
.cue-row{display:flex;padding:4px 16px;border-bottom:1px solid rgba(255,255,255,.028);white-space:nowrap;position:relative}
.cue-row span{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis}
.cue-cols .c-nm,.cue-row .c-nm{flex:1 1 auto;min-width:0}
.c-no{width:54px;color:#FFCF3D}
.c-pt{width:44px;color:#51616F}
.c-nm{color:#DDE8F2}
.c-tr{width:60px;color:#7FB4E6}
.c-tt{width:128px;color:#3DDC84}
.c-dl{width:60px;text-align:right;color:#71818F}
.c-fd{width:60px;text-align:right;color:#71818F}
.c-cm{width:196px;padding-left:20px;color:#FF9A4D}
.cue-row.on{background:linear-gradient(90deg,rgba(28,200,90,.27),rgba(28,200,90,.05) 55%,transparent);box-shadow:inset 3px 0 0 #24E06A}
.cue-row.on .c-nm{color:#fff;text-shadow:0 0 10px rgba(120,255,170,.4)}
.cue-row.on .c-no{color:#B8FFD4}
.cue-row.on .c-tt{color:#7CFFB2}
.cue-row.flash{background:linear-gradient(90deg,rgba(120,255,180,.5),rgba(28,200,90,.12) 60%,transparent)}
.cue-row .c-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:transparent}
.cue-row.on .c-bar{background:linear-gradient(90deg,#24E06A,#7CFFB2);box-shadow:0 0 8px rgba(36,224,106,.7)}
.cue-row.nx{background:rgba(255,207,61,.05);box-shadow:inset 3px 0 0 rgba(255,207,61,.5)}
.cue-row.nx .c-no{color:#FFE79A}
.cue-cli{display:flex;align-items:center;gap:2px;padding:7px 14px;background:#0B0F13;
  border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#3DDC84;letter-spacing:.04em}
.cli-h{color:#6B7A88}
.cli-cur{display:inline-block;width:7px;height:13px;background:#3DDC84;margin-left:6px;
  animation:cli-blink 1.05s steps(2) infinite;box-shadow:0 0 6px rgba(61,220,132,.6)}
@keyframes cli-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cue-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 48%,rgba(4,4,6,.2) 0%,rgba(4,4,6,.06) 44%,rgba(4,4,6,.55) 86%),
  linear-gradient(to bottom,rgba(4,4,6,.85),rgba(4,4,6,0) 20%,rgba(4,4,6,0) 72%,rgba(4,4,6,.92))}

/* ---------- slide 2 : green laser fan ---------- */
.laser-bg{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;transition:opacity 1.3s ease}
.ll-hero3[data-slide="2"] .laser-bg,.ll-hero3.morphing .laser-bg{opacity:1}
.laser-bg .haze2{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 62%,rgba(90,230,140,.05),transparent 72%)}
.lsrc{position:absolute;width:0;height:0}
.lsrc .emit{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(40,255,110,.88) 26%,rgba(40,255,110,.5) 48%,transparent 74%);
  filter:blur(2px);mix-blend-mode:plus-lighter}
.lbeam{position:absolute;left:0;top:0;height:0;width:165vmax;transform-origin:0 0;will-change:transform,opacity;mix-blend-mode:screen}
.lbeam i{position:absolute;left:0;width:100%;display:block}
.lbeam .lg{top:-14px;height:28px;filter:blur(13px);opacity:.5;
  background:linear-gradient(90deg,rgba(40,255,110,.75) 0%,rgba(40,255,110,.38) 34%,rgba(40,255,110,.12) 66%,transparent 88%)}
.lbeam .lc{top:-.9px;height:1.8px;
  background:linear-gradient(90deg,#EAFFF2 0%,rgb(40,255,110) 22%,rgba(40,255,110,.55) 58%,transparent 90%);
  box-shadow:0 0 3px rgba(40,255,110,1),0 0 12px rgba(40,255,110,.7)}
.laser-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 56% at 50% 50%,rgba(4,4,6,.66) 0%,rgba(4,4,6,.28) 46%,rgba(4,4,6,0) 76%),
  linear-gradient(to bottom,rgba(4,4,6,.66),rgba(4,4,6,0) 24%,rgba(4,4,6,0) 72%,rgba(4,4,6,.84))}

/* ---------- picker: each column keeps its own signature background ---------- */
.ll-hero3.picker .plot-bg{opacity:.62;right:66.67%;transition:opacity 1.5s ease .3s}
.ll-hero3.picker .cue-bg{opacity:.52;left:33.33%;right:33.33%;transition:opacity 1.5s ease .3s}
.ll-hero3.picker .laser-bg{opacity:.55;left:66.67%;transition:opacity 1.5s ease .3s}
.ll-hero3.picker .plot-bg svg{height:40vh}
.ll-hero3.picker .cue-3d{width:min(30vw,420px)}
.ll-hero3.picker .plot-bg::after,.ll-hero3.picker .cue-bg::after,.ll-hero3.picker .laser-bg::after{opacity:.45}
@media (max-width:820px){
  .ll-hero3.picker .plot-bg,.ll-hero3.picker .cue-bg,.ll-hero3.picker .laser-bg{opacity:0}
}

/* ---------- chrome ---------- */
.spectrum-edge{position:absolute;left:clamp(20px,5vw,44px);right:clamp(20px,5vw,44px);bottom:0;height:2px;
  background:var(--gradient-spectrum);opacity:.55;z-index:5}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;
  font-family:var(--font-tc);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(245,245,245,.34);display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity 1.1s ease .25s}
.ll-hero3.picker .scroll-cue{opacity:1}
.scroll-cue .bar{width:1px;height:32px;background:linear-gradient(rgba(245,245,245,.55),transparent);
  animation:cue-drop 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue-drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:820px){
  .svc-wrap{flex-direction:column;gap:clamp(14px,3vh,26px)}
  .ll-hero3.picker .svc .ttl{font-size:clamp(20px,5vw,30px)}
  .ll-hero3.picker .svc .cap{display:none}
  .cue-3d{width:94vw}
  .cue-win{font-size:9.5px}
  .plot-bg svg{height:56vh}
}
@media (prefers-reduced-motion:reduce){
  .lbeam,.cue-rows,.scroll-cue .bar,.plot-bg svg,.cue-3d{animation:none!important}
  .intro .sweep,.intro .prism,.intro .flash{animation:none!important;opacity:.2}
  .svc .ttl .wi,.svc .cap,.intro-h .wi{filter:none!important;transform:none!important;opacity:1!important}
}

/* ===== premium picker hover v2 ===== */
.ll-hero3.picker .svc{transition:flex-grow .95s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1),padding .95s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.ll-hero3.picker .svc:hover{transform:translateY(-9px)}
.ll-hero3.picker .svc-wrap:hover .svc{opacity:.46}
.ll-hero3.picker .svc-wrap:hover .svc:hover{opacity:1}
.ll-hero3.picker .svc .ttl{transition:font-size .95s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1),text-shadow .55s cubic-bezier(.16,1,.3,1)}
.ll-hero3.picker .svc:hover .ttl{color:#fff;text-shadow:0 0 26px var(--c)}
.ll-hero3.picker .svc .eye{transition:opacity .8s ease,letter-spacing .6s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),color .5s ease,text-shadow .5s ease}
.ll-hero3.picker .svc:hover .eye{letter-spacing:.36em;text-shadow:0 0 12px var(--c)}
.ll-hero3.picker .svc .cap{transition:opacity .55s ease,color .55s ease,filter .55s ease}
.ll-hero3.picker .svc:hover .cap{opacity:.9;color:#C9C9C9}
.ll-hero3.picker .svc .rule{transition:width .7s cubic-bezier(.16,1,.3,1),opacity .5s ease,box-shadow .55s ease}
.ll-hero3.picker .svc:hover .rule{width:92%;opacity:1;box-shadow:0 0 20px var(--c)}
@media(prefers-reduced-motion:reduce){.ll-hero3.picker .svc:hover{transform:none}.ll-hero3.picker .svc-wrap:hover .svc{opacity:1}}