/* Motion layer. Layout and content remain usable without JavaScript. */
:root { --ease-out: cubic-bezier(.22,1,.36,1); }
.reading-progress { position:fixed; inset:0 0 auto; height:2px; z-index:80; background:linear-gradient(90deg,#7b57e5,#d0bdff); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.hero { position:relative; isolation:isolate; }
.hero::before { content:""; position:absolute; z-index:-1; inset:5% 0 0 25%; background:radial-gradient(ellipse at 68% 40%,#8a5fe221,transparent 65%); pointer-events:none; opacity:.8; }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(350px circle at var(--light-x,75%) var(--light-y,35%),#b7a0ff0c,transparent 75%); }
.hero h1 .accent { background:linear-gradient(105deg,#b7a0ff 15%,#e5d9ff 40%,#9d7ef0 65%,#b7a0ff 85%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .cross { text-shadow:0 0 40px #a787ee30; }
.hero-line { position:relative; }
.hero-line::before { content:""; position:absolute; top:-1px; left:0; width:85px; height:1px; background:linear-gradient(90deg,transparent,#c9b1ff,transparent); opacity:0; }
.service-card { position:relative; isolation:isolate; overflow:hidden; transition:background .35s,box-shadow .35s; }
.service-card::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(280px circle at var(--light-x,50%) var(--light-y,50%),#b7a0ff20,transparent 75%); opacity:0; transition:opacity .4s; pointer-events:none; }
.service-card:hover::before,.service-card:focus-within::before { opacity:1; }
.service-icon { display:inline-block; transition:transform .6s var(--ease-out),filter .5s; }
.service-card:hover .service-icon { transform:translateY(-4px) rotate(-8deg); filter:drop-shadow(0 5px 10px #b7a0ff40); }
.service-card>button span,.nav-contact span,.button>span,.text-link span { display:inline-block; transition:transform .4s var(--ease-out); }
.service-card>button:hover span,.nav-contact:hover span,.button:hover>span { transform:translate(3px,-3px); }
.text-link:hover span { transform:translateY(4px); }
.primary { position:relative; isolation:isolate; overflow:hidden; box-shadow:0 0 0 #b7a0ff00; transition:background .25s,box-shadow .3s,transform .3s var(--ease-out); }
.primary::before { content:""; position:absolute; z-index:-1; inset:-100% -60%; background:linear-gradient(110deg,transparent 40%,#ffffff60 50%,transparent 60%); transform:translateX(-70%); transition:transform .7s var(--ease-out); pointer-events:none; }
.primary:hover::before { transform:translateX(70%); }
.primary:hover { box-shadow:0 7px 30px #b7a0ff22; }
nav>a { position:relative; }
nav>a::after { content:""; height:1px; background:var(--accent); position:absolute; bottom:-8px; left:0; right:0; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
nav>a:hover::after,nav>a:focus-visible::after { transform:scaleX(1); }
.tabs button { transition:background .25s,color .25s,box-shadow .3s; }
.tabs button[aria-selected=true] { box-shadow:0 3px 18px #b7a0ff1c; }
.tabs button span:last-child { transition:opacity .25s,transform .3s var(--ease-out); }
.tabs button:hover span:last-child { transform:translate(2px,-2px); }
.product-panel { transition:background-color .6s; }
.product-panel[data-theme=web] { background:#c8cfb8; }
.product-panel[data-theme=script] { background:#aaa0c9; }
.product-panel[data-theme=shop] { background:#d4bdab; }
.steps article { position:relative; }
.steps article::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-out); transition-delay:var(--step-delay,0ms); }
.steps article.motion-seen::before { transform:scaleX(1); }
.steps article>span { display:inline-block; transition:transform .35s var(--ease-out); }
.steps article:hover>span { transform:translateX(6px); }
summary { transition:color .25s; }
summary:hover { color:var(--accent); }
summary span { transition:transform .3s var(--ease-out); }
.contact-banner { position:relative; isolation:isolate; overflow:hidden; }
.contact-banner::before { content:""; position:absolute; z-index:-1; pointer-events:none; width:460px; height:460px; right:-150px; top:-150px; border:1px solid #ffffff30; border-radius:50%; box-shadow:0 0 0 60px #ffffff0a,0 0 0 120px #ffffff07; }
.contact-orb { position:relative; transition:transform .5s var(--ease-out),box-shadow .5s; }
.contact-orb:hover { box-shadow:0 0 0 10px #30213d13; }
.hero .primary,.contact-orb { transition:translate .28s var(--ease-out),transform .4s var(--ease-out),background .25s,box-shadow .4s; }
.menu-toggle span { transition:transform .3s; }
.menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
@media(prefers-reduced-motion:no-preference) {
  .hero.motion-in-view::before { animation:ambient-light 9s ease-in-out infinite alternate; }
  .hero.motion-in-view h1 .accent { animation:title-light 9s ease-in-out infinite; }
  .hero.motion-in-view .hero-line::before { animation:line-scan 6s ease-in-out infinite; }
  .hero:not(.motion-in-view) .cross { animation-play-state:paused; }
  .motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state:paused!important; }
  .contact-banner.motion-in-view::before { animation:contact-orbit 10s ease-in-out infinite alternate; }
  dialog[open] { animation:dialog-in .35s var(--ease-out) both; }
  dialog[open]::backdrop { animation:backdrop-in .25s ease-out both; }
  details[open] p { animation:answer-in .35s var(--ease-out); }
  .product-panel .demo-app.product-enter { animation:product-in .55s var(--ease-out) both; }
  .product-enter .metric,.product-enter .collection-item { animation:tile-in .6s var(--ease-out) both; animation-delay:.12s; }
  .product-enter .metric:nth-child(2),.product-enter .collection-item:nth-child(2) { animation-delay:.2s; }
  .product-enter .metric:nth-child(3),.product-enter .collection-item:nth-child(3) { animation-delay:.28s; }
  .product-enter .terminal-line { animation:terminal-in .35s ease-out both; animation-delay:calc(var(--line-index,0) * 140ms + 120ms); }
  .product-enter .terminal-result { animation:terminal-in .4s ease-out .85s both; }
  @media(max-width:760px) { nav.open { animation:dialog-in .25s var(--ease-out); } }
}
@keyframes ambient-light { from{opacity:.4;transform:translateY(-12px)} to{opacity:1;transform:translateY(12px)} }
@keyframes title-light { 0%,100%{background-position:100% 50%} 50%{background-position:0 50%} }
@keyframes line-scan { 0%,10%{left:0;opacity:0} 25%{opacity:.8} 70%,100%{left:calc(100% - 85px);opacity:0} }
@keyframes contact-orbit { from{transform:translate(0,0)} to{transform:translate(-28px,24px)} }
@keyframes product-in { from{opacity:0;transform:perspective(1000px) translateY(18px) rotateX(3deg) scale(.98)} to{opacity:1;transform:none} }
@keyframes tile-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes terminal-in { from{opacity:0;transform:translateX(-7px)} to{opacity:1;transform:none} }
@keyframes dialog-in { from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} }
@keyframes backdrop-in { from{opacity:0} to{opacity:1} }
@keyframes answer-in { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
@media(pointer:coarse),(max-width:760px) { .hero::after,.service-card::before{display:none}.contact-banner::before{width:320px;height:320px;right:-180px}.hero::before{inset:0}.hero-aside{flex-shrink:0} }
@media(prefers-reduced-motion:reduce) {
  .hero h1 .accent{background:none;color:var(--accent)}
  .hero::before{opacity:.5}
  .hero-line::before{display:none}
  .primary:hover,.contact-orb:hover,.service-card:hover .service-icon,.steps article:hover>span{transform:none}
  .reading-progress{display:none}
}