/* AYLAROX motion layer v2 — visual identity and page structure preserved.
   Concepts adapted from cinematic spring reveals / editorial marquee / liquid imagery.
   Brand palette, authentic system screenshots and business copy remain unchanged. */
:root{--ax-ease:cubic-bezier(.16,1,.3,1);--ax-quiet-ease:cubic-bezier(.22,1,.36,1)}
/* Intro is available only on first home-page visit in a browser tab. */
.ax-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#090e18;color:#f6f8ff;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0)}
html.ax-intro,html.ax-intro body{overflow:hidden!important}
html.ax-intro .ax-loader{opacity:1;visibility:visible;pointer-events:auto}
.ax-loader:before{content:"";position:absolute;left:50%;top:40%;width:min(92vw,880px);height:min(92vw,880px);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(56,130,246,.15),rgba(56,130,246,.025) 38%,transparent 68%);pointer-events:none}
.ax-loader:after{content:"";position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(130,172,239,.042) 1px,transparent 1px),linear-gradient(90deg,rgba(130,172,239,.042) 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(transparent,black);pointer-events:none}
.ax-loader-logo{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:23px;width:min(78vw,400px);text-align:center;z-index:1}
.ax-loader-mark{width:clamp(82px,12vw,142px);height:auto;filter:drop-shadow(0 18px 30px rgba(65,130,236,.24));animation:ax-logo-entry .85s var(--ax-ease) both}
.ax-loader-name{width:min(73vw,280px);height:auto;filter:drop-shadow(0 0 18px rgba(150,197,255,.13));animation:ax-name-entry .82s .12s var(--ax-ease) both}
.ax-loader-bottom{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:24px;padding:clamp(24px,4vw,58px);font-family:Montserrat,Inter,sans-serif}
.ax-loader-slogan{color:#aebdd1;max-width:270px;font-size:clamp(10px,1vw,13px);font-weight:600;letter-spacing:.17em;line-height:1.8;text-transform:uppercase}
.ax-loader-count{font:700 clamp(58px,9vw,138px)/.85 Montserrat,Inter,sans-serif;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ax-loader-count b{font-weight:700;color:#5d9fff;font-size:.45em;vertical-align:top;line-height:1}
.ax-loader-skip{position:absolute;z-index:3;top:30px;inset-inline-end:clamp(22px,4vw,56px);border:1px solid rgba(171,199,241,.26);border-radius:100px;padding:8px 15px;background:rgba(11,22,38,.55);color:#d5e3f8;line-height:1.3;font:600 12px Inter,Tajawal,sans-serif;transition:background .2s,color .2s}
.ax-loader-skip:hover{background:rgba(56,130,246,.19);color:white}
.ax-loader.ax-done .ax-loader-logo,.ax-loader.ax-done .ax-loader-bottom{opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .3s}
.ax-loader.ax-leaving{transform:translate3d(0,-102%,0);transition:transform .64s var(--ax-quiet-ease)}
@keyframes ax-logo-entry{from{opacity:0;transform:translateY(36px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ax-name-entry{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Cinematic hero reveal; original typography and wording are untouched. */
.ax-line-mask{display:block;overflow:clip;overflow-clip-margin:5px;padding-block:.04em;margin-block:-.04em}
html.ax-motion-active .hero h1.ax-hero-armed .ax-line-mask .line{opacity:0;transform:translate3d(0,105%,0);transition:transform .96s var(--ax-ease),opacity .64s ease;will-change:transform,opacity}
html.ax-motion-active.ax-hero-enter .hero h1.ax-hero-armed .ax-line-mask .line{opacity:1;transform:translate3d(0,0,0)}
html.ax-motion-active .hero h1.ax-hero-armed .ax-line-mask:nth-child(2) .line{transition-delay:.18s}
html.ax-motion-active .hero-pill,html.ax-motion-active .hero-sub,html.ax-motion-active .hero-actions,html.ax-motion-active .hero-footnote,html.ax-motion-active .hero-media{transition-timing-function:var(--ax-ease)}
html.ax-motion-active .hero-media{transition-duration:1s}
html.ax-motion-active.ax-hero-enter .hero-orbit{animation:ax-orbit-entry 1.45s .2s var(--ax-ease) both}
@keyframes ax-orbit-entry{from{opacity:.13;scale:.83}to{opacity:1;scale:1}}
/* Section entrances: spring-like, with stagger and masked typography. */
html.ax-motion-active [data-reveal]{transform:translate3d(0,38px,0);opacity:0;transition-property:transform,opacity;transition-duration:.82s,.65s;transition-timing-function:var(--ax-ease),ease;transition-delay:var(--delay,0ms)}
html.ax-motion-active [data-reveal].visible{transform:translate3d(0,0,0);opacity:1}
html.ax-motion-active .section-heading[data-reveal] .kicker{display:inline-flex;transition:transform .58s var(--ax-ease),opacity .58s ease;transform:translateY(13px);opacity:0}
html.ax-motion-active .section-heading[data-reveal] h2{clip-path:inset(95% 0 0 0);transform:translate3d(0,26px,0);transition:clip-path .92s var(--ax-ease),transform .92s var(--ax-ease);transition-delay:75ms}
html.ax-motion-active .section-heading[data-reveal] p{opacity:0;transform:translate3d(0,16px,0);transition:opacity .65s ease,transform .76s var(--ax-ease);transition-delay:165ms}
html.ax-motion-active .section-heading[data-reveal].visible :is(.kicker,h2,p){opacity:1;transform:translate3d(0,0,0);clip-path:inset(0 0 0 0)}
html.ax-motion-active .subhero.ax-subhero-armed :is(.kicker,h1,p,.hero-actions){opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .85s var(--ax-ease)}
html.ax-motion-active.ax-subhero-enter .subhero.ax-subhero-armed :is(.kicker,h1,p,.hero-actions){opacity:1;transform:none}
html.ax-motion-active .subhero.ax-subhero-armed h1{transition-delay:80ms}
html.ax-motion-active .subhero.ax-subhero-armed p{transition-delay:170ms}
html.ax-motion-active .subhero.ax-subhero-armed .hero-actions{transition-delay:260ms}
/* Animated marquee within the original capability strip: same fonts, palette and strip height. */
.platform-strip .container{min-width:0}
.platform-strip .capabilities.ax-ticker{display:block;flex:1 1 410px;min-width:0;max-width:670px;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent)}
.ax-ticker-track{display:flex;width:max-content;direction:ltr;animation:ax-ticker-run 30s linear infinite;will-change:transform}
.ax-ticker-set{display:flex;align-items:center;gap:clamp(17px,2.5vw,38px);padding-inline-end:clamp(17px,2.5vw,38px);white-space:nowrap;flex:0 0 auto}
.ax-ticker-set span{color:#dbe6f4;font:800 13px Inter,system-ui,sans-serif;letter-spacing:.085em}
.ax-ticker-set .ax-separator{width:4px;height:4px;flex:0 0 4px;background:#3882f6;border-radius:50%;box-shadow:0 0 10px rgba(56,130,246,.4)}
@keyframes ax-ticker-run{to{transform:translate3d(-50%,0,0)}}
.platform-strip:hover .ax-ticker-track{animation-play-state:paused}
/* Product panels: short exchange when the user picks a tab. */
.product-explorer.ax-change .product-visual>*:not(.video-shell),.product-explorer.ax-change .product-detail>*{animation:ax-soft-rise .52s var(--ax-ease) both}
.product-explorer.ax-change .video-shell{animation:ax-soft-visual .6s var(--ax-ease) both}
@keyframes ax-soft-rise{from{opacity:.25;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes ax-soft-visual{from{opacity:.45;transform:scale(.977)}to{opacity:1;transform:scale(1)}}
/* Liquid light only behind decorative surfaces: product screen pixels and logo never distorted. */
.ax-liquid-halo{position:absolute;z-index:-1;inset:8%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 34% 36%,rgba(79,157,252,.20),rgba(34,96,211,.12) 40%,transparent 68%);filter:url(#ax-fluid-filter) blur(18px);opacity:.7;transition:opacity .55s ease}
.hero-media:hover .ax-liquid-halo,.about-visual:hover .ax-liquid-halo{opacity:1}
/* Refined interactive states in the same visual design. */
@media(hover:hover) and (pointer:fine){
 .ax-tilt{--ax-rx:0deg;--ax-ry:0deg;transform:perspective(1000px) rotateX(var(--ax-rx)) rotateY(var(--ax-ry)) translateY(0);transition:transform .32s var(--ax-ease),border-color .3s,box-shadow .3s;background-clip:padding-box}
 .ax-tilt:hover{transform:perspective(1000px) rotateX(var(--ax-rx)) rotateY(var(--ax-ry)) translateY(-5px);border-color:rgba(125,180,254,.37)!important}
 .ax-tilt:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--ax-x,50%) var(--ax-y,50%),rgba(80,147,252,.095),transparent 70%);opacity:0;transition:opacity .45s;z-index:0}
 .ax-tilt:hover:before{opacity:1}
 .ax-tilt>*{position:relative}
 .window:after,.ai-preview:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(112deg,transparent 35%,rgba(190,220,255,.095) 50%,transparent 65%);transform:translateX(130%);transition:transform .95s var(--ax-ease)}
 .window{position:relative}
 .window:hover:after,.ai-preview:hover:after{transform:translateX(-130%)}
 .ai-preview{position:relative;overflow:hidden}
 .process-step:hover .step-num{color:#78afff;transform:translateY(-3px)}
 .process-step .step-num{transition:color .32s,transform .32s var(--ax-ease)}
 .footer-identity .footer-symbol{transition:filter .42s,transform .42s var(--ax-ease)}
 .footer-identity:hover .footer-symbol{filter:drop-shadow(0 0 19px rgba(98,163,255,.44));transform:translateY(-2px)}
}
/* Mobile: no expensive hover displacement or 3D transforms; motion remains readable. */
@media(max-width:980px){
 .nav.open>a{animation:ax-nav-rise .46s var(--ax-ease) both}
 .nav.open>a:nth-child(2){animation-delay:40ms}.nav.open>a:nth-child(3){animation-delay:80ms}.nav.open>a:nth-child(4){animation-delay:120ms}.nav.open>a:nth-child(5){animation-delay:160ms}.nav.open>a:nth-child(6){animation-delay:200ms}.nav.open>a:nth-child(7){animation-delay:240ms}
 @keyframes ax-nav-rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
 .ax-ticker-track{animation-duration:36s}
 .platform-strip .capabilities.ax-ticker{flex:1 1 100%;width:100%;max-width:none}
 .ax-ticker-set span{font-size:11px}
 .ax-liquid-halo{display:none}
}
@media(max-width:600px){
 .ax-loader-bottom{padding:22px 18px;align-items:flex-end;gap:12px}
 .ax-loader-slogan{font-size:9px;max-width:50%;letter-spacing:.1em}
 .ax-loader-count{font-size:clamp(55px,17vw,76px)}
 .ax-loader-logo{top:44%;gap:15px}
 .ax-loader-mark{width:110px}
 .ax-loader-name{width:220px}
 .ax-loader-skip{top:21px;inset-inline-end:18px}
 .platform-strip .container{padding-block:19px;gap:12px}
 html.ax-motion-active [data-reveal]{transform:translate3d(0,22px,0);transition-duration:.69s,.58s}
 .ax-line-mask{overflow:clip}
 .ax-ticker-track{animation-duration:37s}
}
/* A11Y: any device requesting reduced motion gets the final visible state. */
@media(prefers-reduced-motion:reduce){
 .ax-loader{display:none!important}
 html.ax-intro,html.ax-intro body{overflow:auto!important}
 .ax-ticker-track,.nav.open>a{animation:none!important}
 .ax-ticker-set:nth-child(2){display:none!important}
 html.ax-motion-active [data-reveal],html.ax-motion-active .section-heading[data-reveal] :is(.kicker,h2,p),html.ax-motion-active .subhero.ax-subhero-armed :is(.kicker,h1,p,.hero-actions),html.ax-motion-active .hero h1.ax-hero-armed .ax-line-mask .line{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 .ax-tilt,.window:after,.ai-preview:after{transform:none!important;transition:none!important}
}