/* Desktop start screen (windows 761 px and wider). index.html adds html.lisa-splash-desktop;
   phones, the installed app and narrow windows keep the compact splash from index.html.
   Everything that moves animates transform, opacity or filter, so it keeps running while
   the browser is busy parsing the application scripts. */

html.lisa-splash-desktop #lisa-splash{display:block;--u:min(1vh,.5625vw);--p:calc(100vh / 941);
  background:radial-gradient(70vh 55vh at 16% 50%,rgba(20,118,126,.14),transparent 70%),linear-gradient(90deg,#010d15 0%,#02131b 42%,#03161e 100%)}
html.lisa-splash-desktop #lisa-splash::before,
html.lisa-splash-desktop #lisa-splash>.lisa-splash-glow,
html.lisa-splash-desktop #lisa-splash>.lisa-splash-inner,
html.lisa-splash-desktop #lisa-splash>.lisa-splash-foot{display:none}
/* The app marks itself ready before the splash leaves; the desktop splash plays its own exit. */
html.lisa-splash-desktop.lisa-app-ready #lisa-splash{opacity:1;visibility:visible;pointer-events:auto;transition:none}
html.lisa-splash-desktop.lisa-splash-out #lisa-splash{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .85s cubic-bezier(.4,0,.2,1) .1s,visibility 0s .95s}

.lisa-sx{display:none}
html.lisa-splash-desktop .lisa-sx{display:block;position:absolute;inset:0;overflow:hidden}

/* Artwork: the image keeps its own proportions and is cut so its left (text) part never shows. */
.lisa-sx-stage{position:absolute;top:0;bottom:0;right:0;left:max(30vw,calc(100vw - 109.67vh));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  transform-origin:30% 40%;transition:transform 1.15s cubic-bezier(.55,0,.15,1),opacity .9s ease,filter .9s ease}
.lisa-sx-parallax{position:absolute;inset:0;will-change:transform}
.lisa-sx-plane{position:absolute;top:0;height:100vh;width:177.68vh;left:-68.01vh;transform-origin:52% 40%;
  animation:lisa-sx-plane-in 2.8s cubic-bezier(.16,.84,.24,1) both}
.lisa-sx-drift{position:absolute;inset:0;transform-origin:56% 42%;animation:lisa-sx-drift 16s ease-in-out 2.8s infinite alternate}
.lisa-sx-art{position:absolute;inset:-1px;background:url("lisa-splash-art.webp?v=20261027-1") 0 0/100% 100% no-repeat}

/* A band of light that runs along the ribbons only (the artwork is its own luminance mask). */
.lisa-sx-sheen{display:none}
@supports ((mask-mode:luminance) or (-webkit-mask-source-type:luminance)){
  .lisa-sx-sheen{display:block;position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;
    -webkit-mask:url("lisa-splash-art.webp?v=20261027-1") 0 0/100% 100% no-repeat;-webkit-mask-source-type:luminance;
    mask:url("lisa-splash-art.webp?v=20261027-1") 0 0/100% 100% no-repeat luminance}
}
.lisa-sx-sheen::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:26%;
  background:linear-gradient(90deg,transparent 0,rgba(120,255,236,.10) 30%,rgba(210,255,250,.85) 50%,rgba(120,255,236,.10) 70%,transparent 100%);
  transform:translateX(-120%) skewX(-14deg);animation:lisa-sx-sheen 6.5s cubic-bezier(.45,.05,.3,1) 1.5s infinite}

/* Orbits around the point where the ribbons meet. */
.lisa-sx-orbit{position:absolute;border-radius:50%;left:calc(var(--p)*(var(--cx) - var(--r)));top:calc(var(--p)*(var(--cy) - var(--r)));
  width:calc(var(--p)*var(--r)*2);height:calc(var(--p)*var(--r)*2);animation:lisa-sx-spin var(--t) linear infinite}
.lisa-sx-orbit svg{display:block;width:100%;height:100%;overflow:visible;animation:lisa-sx-fade-in 2s ease .9s both}
.lisa-sx-orbit.is-reverse{animation-direction:reverse}

/* Glowing nodes on the constellation lines. */
.lisa-sx-node{position:absolute;left:calc(var(--p)*var(--x));top:calc(var(--p)*var(--y));width:0;height:0}
.lisa-sx-node::before,.lisa-sx-node::after{content:"";position:absolute;border-radius:50%}
.lisa-sx-node::before{left:-14px;top:-14px;width:28px;height:28px;background:radial-gradient(circle,rgba(220,255,252,.95) 0,rgba(120,240,228,.55) 18%,rgba(62,197,181,.16) 42%,transparent 70%);
  animation:lisa-sx-pop .9s cubic-bezier(.2,1.4,.4,1) var(--d,1s) both,lisa-sx-glow 3.2s ease-in-out calc(var(--d,1s) + .9s) infinite}
.lisa-sx-node::after{left:-10px;top:-10px;width:20px;height:20px;border:1px solid rgba(140,245,232,.75);opacity:0;
  animation:lisa-sx-ping 3.6s cubic-bezier(.15,.6,.3,1) calc(var(--d,1s) + .4s) infinite}

/* Comets that travel along the ribbon edges. */
.lisa-sx-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lisa-sx-fx path{fill:none;stroke-linecap:round;stroke-dashoffset:var(--len);
  stroke-dasharray:var(--len) 2000;animation:lisa-sx-comet var(--t,4s) cubic-bezier(.35,.05,.4,1) var(--d,1s) infinite}
.lisa-sx-fx .is-glow{stroke:rgba(80,230,214,.32);stroke-width:7;--len:180}
.lisa-sx-fx .is-core{stroke:#d6fff9;stroke-width:1.8;--len:120}

/* Intro light scan and dust. */
.lisa-sx-scan{position:absolute;top:0;bottom:0;left:0;width:22vh;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(62,197,181,.10) 40%,rgba(190,255,247,.38) 50%,rgba(62,197,181,.10) 60%,transparent);
  animation:lisa-sx-scan 1.9s cubic-bezier(.5,0,.3,1) .25s both}
.lisa-sx-dust{position:absolute;inset:0;pointer-events:none}
.lisa-sx-dust i{position:absolute;border-radius:50%;background:#bff7ef;box-shadow:0 0 6px rgba(120,240,228,.8);opacity:0;
  animation:lisa-sx-float var(--t) linear var(--d) infinite}
.lisa-sx-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 62% 46%,transparent 55%,rgba(1,10,16,.72) 100%),linear-gradient(180deg,rgba(1,10,16,.35),transparent 18%,transparent 82%,rgba(1,10,16,.45))}

/* Brand block, measured from the artwork at 16:9 (1 u = 1 % of the height). */
.lisa-sx-brand{position:absolute;left:7.5vw;top:50%;transform:translateY(-50%);color:#f3f7f8;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  transition:transform .8s cubic-bezier(.55,0,.2,1),opacity .6s ease,filter .6s ease}
.lisa-sx-brand-move{will-change:transform}
.lisa-sx-lockup{display:flex;align-items:flex-start;gap:calc(var(--u)*5.2)}
.lisa-sx-mark{position:relative;flex:none;width:calc(var(--u)*11.9);height:calc(var(--u)*13);margin-top:calc(var(--u)*-.3)}
.lisa-sx-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lisa-sx-mark .is-back{animation:lisa-sx-mark-back 1.1s cubic-bezier(.16,.9,.25,1) .15s both}
.lisa-sx-mark .is-front{animation:lisa-sx-mark-front 1.1s cubic-bezier(.16,.9,.25,1) .3s both}
.lisa-sx-mark::after{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,rgba(62,197,181,.28),transparent 62%);
  animation:lisa-sx-fade-in 1.2s ease .5s both,lisa-sx-glow 4s ease-in-out 1.7s infinite;z-index:-1}
.lisa-sx-names{padding-top:calc(var(--u)*.35)}
.lisa-sx-eyebrow{font-size:calc(var(--u)*1.62);font-weight:500;letter-spacing:.38em;line-height:1;color:rgba(222,233,235,.86);white-space:nowrap;
  animation:lisa-sx-rise-blur 1s cubic-bezier(.2,.8,.2,1) .55s both}
.lisa-sx-word{position:relative;margin-top:calc(var(--u)*2.6);font-size:calc(var(--u)*11);font-weight:300;line-height:.74;letter-spacing:.27em;white-space:nowrap;margin-right:-.27em}
.lisa-sx-word>span{display:inline-block;background:linear-gradient(180deg,#ffffff 0,#e9eff0 55%,#c3ced1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lisa-sx-letter 1s cubic-bezier(.2,.85,.2,1) calc(.45s + var(--i)*.09s) both}
.lisa-sx-glint{position:absolute;top:-.1em;bottom:-.1em;left:0;width:28%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent);mask-image:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent);
  transform:translateX(-120%);animation:lisa-sx-glint-window 7s cubic-bezier(.45,.05,.3,1) 1.7s infinite}
.lisa-sx-glint>div{position:absolute;top:.1em;left:0;width:357.14%;color:#fff;text-shadow:0 0 .18em rgba(120,255,236,.9),0 0 .5em rgba(62,197,181,.55);
  transform:translateX(33.6%);animation:lisa-sx-glint-text 7s cubic-bezier(.45,.05,.3,1) 1.7s infinite}
.lisa-sx-glint>div>span{display:inline-block}
.lisa-sx-tagline{margin-top:calc(var(--u)*4.6);font-size:calc(var(--u)*4.85);font-weight:300;letter-spacing:.04em;line-height:1.1;color:#eef3f4;white-space:nowrap}
.lisa-sx-tagline>span{display:inline-block;animation:lisa-sx-rise-blur 1s cubic-bezier(.2,.8,.2,1) calc(1.05s + var(--i)*.1s) both}
.lisa-sx-bar{position:relative;width:calc(var(--u)*52.8);height:3px;margin-top:calc(var(--u)*8.7);border-radius:999px;background:rgba(150,180,186,.16);
  clip-path:inset(-12px 0 -12px 0 round 2px);animation:lisa-sx-fade-in .8s ease 1.3s both}
.lisa-sx-bar-run{position:absolute;inset:0;transform:translateX(-100%);will-change:transform}
.lisa-sx-bar-run::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,rgba(30,150,150,.25),#2fc7c0 70%,#7ff3e8);box-shadow:0 0 10px rgba(62,220,205,.45)}
.lisa-sx-bar-run::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#e4fffb;
  box-shadow:0 0 6px 2px rgba(110,245,230,.95),0 0 22px 6px rgba(62,197,181,.55);animation:lisa-sx-glow 1.6s ease-in-out infinite}
.lisa-sx-status{display:flex;align-items:center;gap:calc(var(--u)*1.3);margin-top:calc(var(--u)*2.7);font-size:calc(var(--u)*1.72);font-weight:400;letter-spacing:.01em;color:rgba(170,192,197,.82);
  animation:lisa-sx-fade-in .8s ease 1.45s both}
.lisa-sx-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#43e0d0;box-shadow:0 0 8px rgba(67,224,208,.9);animation:lisa-sx-dot 1.4s ease-in-out infinite}

/* Exit: the bar completes, the brand steps aside and the artwork flies past. */
html.lisa-splash-out .lisa-sx-brand{opacity:0;filter:blur(6px);transform:translateY(-50%) translateX(calc(var(--u)*-4))}
html.lisa-splash-out .lisa-sx-stage{transform:scale(1.22) translateX(-6%);filter:brightness(1.35);opacity:.0}
html.lisa-splash-exiting .lisa-sx-dot{animation:none;background:#9ff7ec}

@keyframes lisa-sx-plane-in{0%{opacity:0;transform:scale(1.14) translateX(3%);filter:brightness(.4) blur(6px)}55%{filter:brightness(1.08) blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes lisa-sx-drift{0%{transform:scale(1.015) translate(0,0)}100%{transform:scale(1.06) translate(-1.2%,.8%)}}
@keyframes lisa-sx-sheen{0%{transform:translateX(-120%) skewX(-14deg)}55%,100%{transform:translateX(420%) skewX(-14deg)}}
@keyframes lisa-sx-spin{to{transform:rotate(360deg)}}
@keyframes lisa-sx-fade-in{from{opacity:0}}
@keyframes lisa-sx-pop{from{opacity:0;transform:scale(.2)}}
@keyframes lisa-sx-glow{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes lisa-sx-ping{0%{opacity:.9;transform:scale(.35)}70%,100%{opacity:0;transform:scale(3.4)}}
@keyframes lisa-sx-comet{0%{stroke-dashoffset:var(--len)}62%,100%{stroke-dashoffset:-1000}}
@keyframes lisa-sx-scan{0%{opacity:0;transform:translateX(-30vh)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(120vh)}}
@keyframes lisa-sx-float{0%{opacity:0;transform:translate(0,0)}15%{opacity:var(--o)}85%{opacity:var(--o)}100%{opacity:0;transform:translate(var(--dx),-9vh)}}
@keyframes lisa-sx-mark-back{from{opacity:0;transform:translate(26%,-22%);filter:brightness(2.2) blur(4px)}}
@keyframes lisa-sx-mark-front{from{opacity:0;transform:translate(-26%,22%);filter:brightness(2.2) blur(4px)}}
@keyframes lisa-sx-rise-blur{from{opacity:0;transform:translateY(.6em);filter:blur(8px)}}
@keyframes lisa-sx-letter{from{opacity:0;transform:translateY(.28em) scale(.94);filter:blur(12px)}}
@keyframes lisa-sx-glint-window{0%{transform:translateX(-120%)}38%,100%{transform:translateX(380%)}}
@keyframes lisa-sx-glint-text{0%{transform:translateX(33.6%)}38%,100%{transform:translateX(-106.4%)}}
@keyframes lisa-sx-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

@media (prefers-reduced-motion:reduce){
  html.lisa-splash-desktop .lisa-sx-sheen,html.lisa-splash-desktop .lisa-sx-scan,html.lisa-splash-desktop .lisa-sx-fx,html.lisa-splash-desktop .lisa-sx-glint{display:none}
  html.lisa-splash-out .lisa-sx-stage,html.lisa-splash-out .lisa-sx-brand{transform:none;filter:none}
}