/* The AntaraX launch release (press-release/antarax-launch, 12 Oct 2026).
   A dark launch stage under the shared header: the AntaraX A assembles in the centre, its three main products
   circle it once and settle into a row with their names, then the release reads as a plain article.
   Motion runs only when html.lx-js is set by assets/launch.js (never under reduced motion), and only on
   transform and opacity. Without it the page is still and complete. */

.lx-page{--lx-dark:#0E1116;--lx-navy:#0B1A3E;--lx-blue:#0459F7;--lx-sky:#7FA4FF;--lx-indigo:#8C86EE;--lx-dim:rgba(255,255,255,.7);--lx-orange:#FB9800}

/* the press subnav sits on the stage */
.lx-page .navspace,.lx-sub{position:relative;z-index:2}
.lx-sub a{color:rgba(255,255,255,.72)}
.lx-sub a:hover{color:#fff}
.lx-sub a:focus-visible{outline:2px solid var(--lx-orange);outline-offset:2px}

/* ---------- the stage ---------- */
.lx-hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 156px);padding:8px 0 clamp(64px,9vh,104px);color:#fff;text-align:center;overflow-x:clip}
/* the sky reaches up behind the header and the subnav, so the dark runs to the top of the page */
.lx-sky{position:absolute;left:0;right:0;top:-640px;bottom:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:0 0 48px 48px;
  background:radial-gradient(90% 62% at 50% calc(640px + 30%),#0D2257 0%,#0B1631 42%,var(--lx-dark) 78%)}
.lx-glow{position:absolute;left:50%;top:calc(640px + 32%);width:min(1200px,150vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,89,247,.32),rgba(82,79,233,.12) 48%,transparent 72%);animation:lxBreathe 8s ease-in-out infinite}
.lx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(150,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,255,.05) 1px,transparent 1px);background-size:56px 56px;background-position:50% 0;
  -webkit-mask-image:radial-gradient(60% 46% at 50% calc(640px + 30%),#000 0,transparent 80%);mask-image:radial-gradient(60% 46% at 50% calc(640px + 30%),#000 0,transparent 80%)}
.lx-stars{position:absolute;inset:0}
.lx-stars svg{display:block;width:100%;height:100%}
.lx-stars circle{fill:#fff}
.lx-stars .b circle{fill:#CFE0FF}
.lx-stars .s2{animation:lxTwinkle 5.5s ease-in-out infinite}
.lx-stars .s3{animation:lxTwinkle 7.5s ease-in-out 2s infinite}
/* a launch floor: the grid laid flat, drifting slowly toward the viewer */
.lx-floor{position:absolute;left:0;right:0;bottom:0;height:38%;overflow:hidden;perspective:380px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent 10%,#000 90%)}
.lx-floor i{position:absolute;left:-60%;right:-60%;top:0;height:220%;transform-origin:50% 0;transform:rotateX(70deg);
  background-image:linear-gradient(rgba(110,150,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(110,150,255,.13) 1px,transparent 1px);background-size:64px 64px;background-position:50% 0;
  animation:lxFloor 7s linear infinite}

.lx-in{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;padding-inline:var(--gut,24px)}

/* the A and its orbit */
.lx-orbit{position:relative;width:clamp(190px,33vh,340px);margin:0 auto}
.lx-orbit::before{content:"";position:absolute;left:50%;top:52%;width:230%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,89,247,.42),rgba(82,79,233,.16) 46%,transparent 72%);animation:lxBreathe 6s ease-in-out infinite}
.lx-ring{position:absolute;left:50%;top:58%;width:240%;height:auto;aspect-ratio:600/240;translate:-50% -50%;overflow:visible;pointer-events:none}
.lx-ring ellipse{fill:none;stroke:rgba(140,170,255,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.lx-ring ellipse.d{stroke:rgba(160,190,255,.55);stroke-width:1.5;stroke-dasharray:2 10;stroke-linecap:round}

/* the A itself (rules from home.css's AntaraX section, sized for the stage) */
.ax-mark{position:relative;width:100%;aspect-ratio:760/780;perspective:900px;cursor:pointer;touch-action:pan-y;border-radius:32px;outline:none;-webkit-tap-highlight-color:transparent}
.ax-mark::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(4,89,247,.42),rgba(82,79,233,.16) 55%,transparent);filter:blur(18px);pointer-events:none;transition:opacity .6s}
.ax-mark:focus-visible{box-shadow:0 0 0 3px var(--lx-dark),0 0 0 5px var(--lx-orange)}
.ax-mark>img,.ax-mark>svg{position:relative;display:block;width:100%;height:auto}
.ax-mark>svg{overflow:visible;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.axa-pc,.axa-spark{transform-box:fill-box;transform-origin:center}
.axa-pc{transition:transform 1.3s cubic-bezier(.3,1.35,.45,1),opacity .6s ease;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.axa-cloth{transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.axa-spark{transition:translate .6s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.3,1.5,.5,1),opacity .4s}
.ax-mark.pre::before{opacity:0}
.ax-mark.pre .axa-pc{opacity:0}
.ax-mark.pre .axa-pc[data-i="0"]{transform:translate(-220px,-200px) rotate(-22deg) scale(.8)}
.ax-mark.pre .axa-pc[data-i="1"]{transform:translate(240px,60px) rotate(18deg) scale(.8)}
.ax-mark.pre .axa-pc[data-i="2"]{transform:translate(-170px,220px) rotate(14deg) scale(.8)}
.ax-mark.pre .axa-spark{opacity:0;transform:scale(.2) rotate(-120deg)}
.ax-mark.on .axa-pc[data-i="1"]{transition-delay:.14s}
.ax-mark.on .axa-pc[data-i="2"]{transition-delay:.28s}
.ax-mark.on .axa-spark{transition-delay:0s,.75s,.75s;animation:axaBreathe 6s ease-in-out 2s infinite}
@media (hover:hover){
  .ax-mark.on:not(.burst) .axa-pc{transition-delay:0s}
  .ax-mark.on:not(.burst) .axa-pc[data-i="0"]:hover{transform:translate(-8px,-10px)}
  .ax-mark.on:not(.burst) .axa-pc[data-i="1"]:hover{transform:translate(10px,4px)}
  .ax-mark.on:not(.burst) .axa-pc[data-i="2"]:hover{transform:translate(-8px,10px)}
}
.ax-mark.burst .axa-pc{transition:transform .32s cubic-bezier(.2,.7,.3,1);transition-delay:0s!important}
.ax-mark.burst .axa-pc[data-i="0"]{transform:translate(-44px,-40px) rotate(-5deg)}
.ax-mark.burst .axa-pc[data-i="1"]{transform:translate(48px,14px) rotate(5deg)}
.ax-mark.burst .axa-pc[data-i="2"]{transform:translate(-36px,44px) rotate(4deg)}
.ax-mark.spin .axa-spark{animation:axaSpin 1s cubic-bezier(.3,1.3,.5,1)}
@keyframes axaBreathe{50%{transform:scale(1.08) rotate(8deg)}}
@keyframes axaSpin{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.25) rotate(200deg)}100%{transform:scale(1) rotate(360deg)}}

/* the words */
.lx-live{margin:clamp(16px,2.6vh,30px) auto 0;font:600 clamp(42px,7.2vw,104px)/1.02 var(--sans);letter-spacing:-.045em;color:#fff;text-wrap:balance}
.lx-grad{background:linear-gradient(100deg,#B9CCFF 0%,var(--lx-sky) 45%,#A9A4F5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lx-dot{position:relative;display:inline-block;width:.15em;height:.15em;margin-right:.2em;vertical-align:.32em;border-radius:50%;background:#12B76A;box-shadow:0 0 18px rgba(18,183,106,.7)}
.lx-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#12B76A;animation:lxPing 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.lx-hero h1{max-width:26ch;margin:clamp(12px,1.8vh,20px) auto 0;font:500 clamp(22px,2.5vw,34px)/1.22 var(--sans);letter-spacing:-.02em;color:rgba(255,255,255,.94);text-wrap:balance}
.lx-hero .sub{max-width:54ch;margin:12px auto 0;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--lx-dim);text-wrap:balance}
.lx-hero .bp-meta{margin-top:18px;gap:6px 22px;font:500 12px/18px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.lx-hero .bp-meta em{color:rgba(255,255,255,.46)}
.lx-hero .bp-meta a{color:var(--lx-orange);text-decoration:underline;text-decoration-color:rgba(251,152,0,.45);text-underline-offset:3px}
.lx-hero .bp-meta a:hover{text-decoration-color:var(--lx-orange)}

/* the three main products */
.lx-prods{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:clamp(22px,3.4vh,38px) auto 0;padding:0}
.lx-prod{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:999px;color:#fff;font:500 15px/1.2 var(--sans)}
.lx-prod::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:opacity .6s,box-shadow .25s,background .25s}
.lx-prod:hover::before{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px var(--pc),0 0 30px -6px var(--pc)}
.lx-prod:focus-visible{outline:2px solid var(--lx-orange);outline-offset:3px}
.lx-tile{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 50%,transparent),0 6px 22px -4px color-mix(in srgb,var(--pc) 70%,transparent)}
.lx-tile img{display:block;width:26px;height:26px}
.lx-name{transition:opacity .6s}

/* ---------- the arrival (html.lx-js only) ---------- */
.lx-js .lx-mark>img{opacity:0}
.lx-js .lx-mark.lx-fallback>img{opacity:1}
.lx-js .lx-hero .lx-live,.lx-js .lx-hero h1,.lx-js .lx-hero .sub,.lx-js .lx-hero .bp-meta{opacity:0;transform:translateY(22px)}
.lx-js .lx-hero.lx-go .lx-live,.lx-js .lx-hero.lx-go h1,.lx-js .lx-hero.lx-go .sub,.lx-js .lx-hero.lx-go .bp-meta{opacity:1;transform:none;transition:opacity 1s ease var(--d,0s),transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.lx-hero .lx-live{--d:.45s}.lx-hero h1{--d:.62s}.lx-hero .sub{--d:.78s}.lx-hero .bp-meta{--d:.92s}
.lx-js .lx-ring{opacity:0;transform:scale(.82)}
.lx-js .lx-hero.lx-go .lx-ring{opacity:1;transform:none;transition:opacity 1.6s ease .2s,transform 1.8s cubic-bezier(.2,.8,.2,1) .2s}
.lx-js .lx-hero:not(.lx-done) .lx-prod{opacity:0}
.lx-js .lx-hero:not(.lx-done) .lx-prod::before,.lx-js .lx-hero:not(.lx-done) .lx-name{opacity:0}

/* ---------- the release ---------- */
.lx-page .bp-wrap{padding-top:clamp(56px,7vw,96px)}
.lx-page .toc{top:clamp(56px,7vw,96px)}
.lx-page .article{max-width:68ch;margin:0 auto;padding-bottom:88px;font-size:18px}
.lx-page .article p,.lx-page .article li{font-size:18px;line-height:1.7;color:#2B2B2B}
.lx-page .article>p:first-child{font-size:clamp(19px,1.6vw,22px);line-height:1.6;color:var(--ink)}
.lx-page .article>p:first-child b{color:var(--brand-text)}
.lx-page .article h2{margin-top:56px}
.lx-page .article a{text-decoration:underline;text-decoration-color:rgba(230,93,1,.45);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s}
.lx-page .article a:hover{text-decoration-color:var(--brand-text)}
.lx-page .article a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.lx-page .article ul{list-style:none;padding-left:0}
.lx-page .article ul li{position:relative;padding-left:26px}
.lx-page .article ul li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--brand)}
.lx-page .article ul li+li::before{background:var(--lx-blue)}
.lx-page .article figure{border-radius:20px}

/* product names carry their marks; the words are unchanged */
.lx-ilogo{display:inline-block;width:1.2em;height:1.2em;margin-right:.3em;vertical-align:-.26em;padding:1px;border-radius:.32em;background:#fff;box-shadow:0 0 0 1px rgba(29,29,29,.1),0 2px 6px -2px rgba(29,29,29,.18)}
.lx-pl,.lx-pn{white-space:nowrap}
.lx-page .article .lx-pl{font-weight:600;text-decoration-color:color-mix(in srgb,var(--pc) 70%,transparent);text-decoration-thickness:2px}
.lx-page .article .lx-pl:hover{text-decoration-color:var(--pc)}
.lx-pilots .lx-ilogo{width:1.1em;height:1.1em}
.lx-page .article .lx-mains{font-size:20px}

/* the quote */
.lx-page .article .lx-quote{position:relative;margin:44px 0;padding:34px 34px 30px 40px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(29,29,29,.05),0 24px 50px -32px rgba(4,30,110,.35);font:500 clamp(19px,1.7vw,23px)/1.5 var(--sans);letter-spacing:-.2px;color:var(--ink);overflow:hidden}
.lx-page .article .lx-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--lx-blue),var(--lx-indigo))}

/* About AntaraX: the lockup and the way to antarax.ai */
.lx-about{position:relative;isolation:isolate;margin:64px 0 32px;padding:clamp(28px,4vw,48px);border-radius:32px;background:var(--lx-dark);color:#fff;overflow:hidden}
.lx-about::before{content:"";position:absolute;z-index:-1;right:-30%;top:-60%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(4,89,247,.5),rgba(82,79,233,.18) 50%,transparent 72%)}
.lx-about::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(150,180,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,255,.06) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(80% 90% at 100% 0,#000,transparent 70%);mask-image:radial-gradient(80% 90% at 100% 0,#000,transparent 70%)}
.lx-lock{display:flex;align-items:center;gap:12px;font:600 28px/1 var(--sans);letter-spacing:-.03em}
.lx-lock img{width:44px;height:44px}
.lx-page .article .lx-about h2{margin:28px 0 12px;color:#fff}
.lx-page .article .lx-about p{color:rgba(255,255,255,.78)}
.lx-page .article .lx-about p a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.lx-page .article .lx-about p a:hover{text-decoration-color:#fff}
.lx-page .article .lx-cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:26px;padding:0 22px;border-radius:12px;background:var(--lx-blue);color:#fff;font:500 16px/1 var(--sans);text-decoration:none;transition:background .2s,transform .2s}
.lx-page .article .lx-cta:hover{background:#2C6CFF;transform:translateY(-1px)}
.lx-page .article .lx-cta:focus-visible{outline:2px solid var(--lx-orange);outline-offset:3px;border-radius:12px}

/* reveal as it scrolls in (set up by launch.js) */
.lx-js .lx-rv{opacity:0;transform:translateY(26px)}
.lx-js .lx-rv.in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}

@keyframes lxBreathe{50%{opacity:.72;transform:scale(1.06)}}
@keyframes lxTwinkle{50%{opacity:.25}}
@keyframes lxFloor{from{transform:rotateX(70deg) translateY(0)}to{transform:rotateX(70deg) translateY(64px)}}
@keyframes lxPing{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3);opacity:0}}

@media (max-width:1000px){
  .lx-hero{min-height:0;padding-top:20px}
}
@media (max-width:760px){
  .lx-sky{border-radius:0 0 32px 32px}
  .lx-orbit{width:clamp(170px,27vh,230px)}
  .lx-sub{height:auto;padding-block:10px;gap:2px 18px}
  .lx-ring{width:min(200%,calc(100vw - 52px))}
  .lx-hero .bp-meta{gap:4px 14px;font-size:11px}
  .lx-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:420px}
  .lx-prod{flex-direction:column;justify-content:center;gap:8px;padding:12px 6px 12px;border-radius:20px;font-size:13px;text-align:center}
  .lx-page .article p,.lx-page .article li{font-size:17px}
  .lx-page .article .lx-mains{font-size:18px}
  .lx-page .article .lx-quote{padding:26px 22px 24px 28px}
  .lx-about{border-radius:24px}
  .lx-lock{font-size:24px}.lx-lock img{width:38px;height:38px}
}

/* reduced motion: a still stage, everything in place */
@media (prefers-reduced-motion:reduce){
  .lx-glow,.lx-orbit::before,.lx-stars .s2,.lx-stars .s3,.lx-floor i,.lx-dot::after{animation:none!important}
  .lx-dot::after{display:none}
  .ax-mark>svg,.axa-pc,.axa-cloth,.axa-spark{transition:none!important;animation:none!important}
  .ax-mark{cursor:default}
  .lx-page .article .lx-cta,.lx-prod::before{transition:none}
}
