/* AIStar opening — only while html[data-intro=play]; 3.1 s. */
.ai-intro{display:none}
html[data-intro=play] .ai-intro{display:block;position:fixed;inset:0;z-index:9999;overflow:hidden;cursor:pointer;animation:ai-gone 0s linear 3.25s forwards}
html[data-intro=play] body{overflow:hidden}
/* the hero waits for the opening, then the robot arrives */
html[data-intro=play] .arrival,html[data-intro=play] .beam,html[data-intro=play] .intro{animation-play-state:paused}
html[data-intro=play] .intro{opacity:0}
html[data-intro=done] .intro{animation:ai-hero-in .7s ease-out both}

.ai-door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;will-change:transform}
.ai-door i{position:absolute;top:0;bottom:0;width:100vw;background:linear-gradient(0deg,#020908f0,#02090899 45%,#020908d0),#020908 url('assets/space.webp') center/cover}
.ai-left{left:0;animation:ai-left .95s cubic-bezier(.7,0,.25,1) 2.15s forwards}.ai-left i{left:0}
.ai-right{right:0;animation:ai-right .95s cubic-bezier(.7,0,.25,1) 2.15s forwards}.ai-right i{right:0}
.ai-grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:46%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  background:linear-gradient(#19ffb21f 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,#19ffb21f 1px,transparent 1px) 0 0/34px 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 85%);mask-image:linear-gradient(0deg,#000 10%,transparent 85%);
  animation:ai-grid 3s linear infinite,ai-fade-in .6s ease-out both;opacity:.8}
.ai-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#c9fff0,#ffffff,#c9fff0,transparent);
  box-shadow:0 0 26px 7px #2fe0ae90;opacity:0;animation:ai-seam 1s ease-out 1.95s forwards}

.ai-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,18px);animation:ai-stage-out .5s ease-in 2s forwards}
.ai-bot{position:relative;height:min(62vh,600px);aspect-ratio:2/3;max-width:88vw}
.ai-bot img{width:100%;height:100%;object-fit:contain;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 92%),linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 58%,transparent 92%),linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect;
  filter:drop-shadow(0 0 22px #12f0a855) saturate(1.15);animation:ai-materialise 1.15s cubic-bezier(.3,.6,.2,1) .1s both}
.ai-scan{position:absolute;left:-8%;right:-8%;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#8dffdc,#fff,#8dffdc,transparent);
  box-shadow:0 0 18px 5px #1effb47a;opacity:0;animation:ai-scan 1.15s cubic-bezier(.3,.6,.2,1) .1s both}
.ai-holo{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#5dffcc30 0 2px,transparent 2px 5px);mix-blend-mode:screen;
  -webkit-mask:url('assets/robot.webp') center/contain no-repeat,linear-gradient(180deg,#000 50%,transparent 85%);-webkit-mask-composite:source-in;
  mask:url('assets/robot.webp') center/contain no-repeat,linear-gradient(180deg,#000 50%,transparent 85%);mask-composite:intersect;animation:ai-holo 1.4s ease-out .1s both}
/* the stars ignite */
.ai-core{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.ai-core.chest{--x:64.6%;--y:59.6%;--w:34%}.ai-core.crown{--x:62.5%;--y:12.5%;--w:19%}
.ai-core b{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0,#d4fff0 9%,#5cffc2e6 20%,#14ffa98c 36%,transparent 68%);animation:ai-ignite .8s cubic-bezier(.2,1.4,.4,1) both,ai-burn 1.1s ease-in-out infinite}
.ai-core.chest b{animation-delay:.95s,1.75s}.ai-core.crown b{animation-delay:.7s,1.5s}
.ai-ring{position:absolute;inset:-30%;border-radius:50%;border:1.5px solid #6bf5d6;box-shadow:0 0 26px #2fe0ae80,inset 0 0 18px #2fe0ae50;opacity:0;animation:ai-ring 1.1s ease-out 1s both}
.ai-ring.two{inset:-70%;border-color:#bfffeacc;animation-delay:1.2s}
.ai-arc{position:absolute;inset:-48%;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 12%,#3dffc0 12% 22%,transparent 22% 47%,#3dffc0aa 47% 53%,transparent 53% 72%,#3dffc0 72% 86%,transparent 86%);
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 65.5%,#000 69%,transparent 70.5%);mask:radial-gradient(circle,transparent 64%,#000 65.5%,#000 69%,transparent 70.5%);
  animation:ai-fade-in .4s ease-out 1.05s forwards,ai-spin 2.2s linear infinite}
.ai-arc.rev{inset:-64%;opacity:0;animation:ai-fade-in .4s ease-out 1.2s forwards,ai-spin 3.2s linear infinite reverse;
  background:conic-gradient(from 90deg,transparent 0 30%,#9dffe0aa 30% 34%,transparent 34% 64%,#9dffe0aa 64% 68%,transparent 68%)}
/* name, line and boot status */
.ai-name{margin:0;font:800 clamp(38px,6vw,64px)/1 Roboto,Arial,sans-serif;letter-spacing:-1.5px;color:#fff;display:flex;text-shadow:0 0 28px #12f0a840}
.ai-name span{display:inline-block;animation:ai-letter .5s cubic-bezier(.2,.9,.3,1) both}
.ai-name .em{color:#22f5b0}
.ai-name span:nth-child(1){animation-delay:1.05s}.ai-name span:nth-child(2){animation-delay:1.12s}.ai-name span:nth-child(3){animation-delay:1.19s}
.ai-name span:nth-child(4){animation-delay:1.26s}.ai-name span:nth-child(5){animation-delay:1.33s}.ai-name span:nth-child(6){animation-delay:1.4s}
.ai-line{margin:0;font:500 clamp(13px,1.6vw,16px)/1.4 Roboto,Arial,sans-serif;color:#d6fff0;text-align:center;padding:0 20px;animation:ai-rise .5s ease-out 1.45s both}
.ai-status{display:flex;align-items:center;gap:12px;font:600 11px/1 Roboto,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#7dffd4;animation:ai-rise .4s ease-out .35s both}
.ai-bar{width:min(42vw,180px);height:3px;border-radius:3px;background:#0f3a2c;overflow:hidden}
.ai-bar i{display:block;height:100%;background:linear-gradient(90deg,#12d996,#9dffe0);box-shadow:0 0 10px #2fffb8;transform-origin:0 50%;animation:ai-load 1.55s cubic-bezier(.4,0,.2,1) .4s both}
.ai-skip{position:absolute;right:18px;bottom:16px;padding:7px 14px;border:1px solid #ffffff40;border-radius:999px;background:#00000040;color:#ddf7ee;font:500 12px Roboto,Arial,sans-serif;cursor:pointer;animation:ai-rise .4s ease-out .6s both}

@keyframes ai-gone{to{visibility:hidden;opacity:0}}
@keyframes ai-left{to{transform:translateX(-101%)}}@keyframes ai-right{to{transform:translateX(101%)}}
@keyframes ai-seam{0%{opacity:0;transform:scaleY(.15)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleX(10)}}
@keyframes ai-stage-out{to{opacity:0;transform:scale(1.08);filter:blur(4px)}}
@keyframes ai-materialise{0%{clip-path:inset(0 0 100% 0);opacity:.4;filter:drop-shadow(0 0 22px #12f0a855) brightness(2.2) hue-rotate(-10deg)}
  100%{clip-path:inset(0 0 0 0);opacity:1;filter:drop-shadow(0 0 22px #12f0a855) brightness(1)}}
@keyframes ai-scan{0%{top:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}
@keyframes ai-holo{0%{opacity:0}30%{opacity:1}100%{opacity:.25}}
@keyframes ai-ignite{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.7)}100%{opacity:1;transform:scale(1)}}
@keyframes ai-burn{0%,100%{opacity:1;transform:scale(1)}30%{opacity:.75;transform:scale(.92)}60%{opacity:1;transform:scale(1.15)}}
@keyframes ai-ring{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes ai-spin{to{transform:rotate(360deg)}}
@keyframes ai-fade-in{to{opacity:1}}
@keyframes ai-grid{to{background-position:0 34px,0 0}}
@keyframes ai-letter{from{opacity:0;transform:translateY(18px) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ai-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ai-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ai-hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-height:560px){.ai-bot{height:44vh}.ai-line{display:none}}