/* =====================================================================
   ArchStudio shared motion layer (index.html, pricing.html)
   Headline reveals, HUD brackets, 3D card tilt, hover polish,
   page-transition curtain and in-page arrival frame.
   ===================================================================== */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.16,1,.3,1);--swift:cubic-bezier(.7,0,.2,1);--smooth:cubic-bezier(.22,1,.36,1)}

/* ---------- headings: each word rises out of its own line box ---------- */
.reveal.split{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em;margin:0 -.06em -.12em}
.split .wi{display:inline-block;transform:translateY(110%) rotate(6deg);transform-origin:0 100%;opacity:0;filter:blur(8px);
  transition:transform 1s var(--out),opacity .8s ease,filter .9s ease;transition-delay:calc(var(--i,0)*55ms + var(--d,0ms))}
.in .split .wi,.split.in .wi{transform:none;opacity:1;filter:none}

/* ---------- HUD corner brackets (drawn in after their panel lands) ---------- */
.brk{position:absolute;inset:10px;pointer-events:none;z-index:4;--c:rgba(12,20,36,.42);--l:14px;--t:1.5px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat;
  transition:inset .8s var(--out) .35s,opacity .6s ease .35s,--c .3s}
.reveal:not(.in) .brk,.reveal:not(.in)>.brk{opacity:0;inset:30px}
.settled .brk{transition-delay:0s}
.lit:hover>.brk,.tilt:hover>.brk{inset:6px;--c:rgba(242,138,23,.75)}

/* ---------- 3D tilt cards: tilt-in on arrival; hover values are eased per frame by motion.js ---------- */
.tilt{--lift:0px;will-change:transform}
.tilt.reveal{transition:opacity 1s ease,transform 1.2s var(--out),filter 1s ease,box-shadow .5s}
.tilt.reveal:not(.in){opacity:0;transform:perspective(1100px) rotateX(16deg) translateY(60px) scale(.95);filter:blur(10px)}
.tilt.reveal.in,.tilt:not(.reveal){transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift))}
.tilt:not(.reveal){transition:transform .7s var(--smooth),box-shadow .5s}
.tilt.match{--lift:-6px}
.tilt.settled{transition-delay:0s}
.tilt.tilting{transition:opacity 1s ease,filter 1s ease,box-shadow .5s!important;transition-delay:0s!important}
.tilt .ico,.tilt .node{transform:translate(var(--px,0px),var(--py,0px)) scale(var(--is,1)) rotate(var(--ir,0deg));transition:transform .6s var(--smooth)}
.tilt .media img,.tilt .img img{transform:scale(var(--zs,1)) translate(calc(var(--px,0px)*-.6),calc(var(--py,0px)*-.6))!important;transition:transform .9s var(--smooth)!important}
.tilt.tilting .ico,.tilt.tilting .node,.tilt.tilting .media img,.tilt.tilting .img img{transition:none!important}
.tilt:hover{box-shadow:var(--shadow-lg,0 30px 60px -20px rgba(12,20,36,.25)),inset 0 1px 0 #fff}

/* ---------- buttons: eased magnetic pull + lift (motion.js), gloss sweep, arrow swap, click ripple ---------- */
.btn,.btn:hover,.btn-primary:hover,.btn-dark:hover,.btn-glass:hover,.btn-ghost:hover,.btn-danger:hover{
  transform:translate(var(--tx,0px),calc(var(--ty,0px) + var(--by,0px)))}
.btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform;
  transition:transform .5s var(--smooth),scale .18s var(--smooth),box-shadow .35s var(--smooth),background .3s,color .3s}
.btn.easing{transition:scale .18s var(--smooth),box-shadow .35s var(--smooth),background .3s,color .3s}
.btn:active{scale:.96}
.btn-primary::after,.btn-dark::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left 1s var(--smooth)}
.btn-dark::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.btn-primary:hover::after,.btn-dark:hover::after{left:130%}
.btn-glass:hover,.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1px 0 #fff,0 0 0 4px rgba(242,138,23,.12),0 10px 22px -10px rgba(12,20,36,.25)}
.btn:hover svg.arr{animation:arrSwap .7s var(--smooth) forwards}
@keyframes arrSwap{0%{transform:none;opacity:1}42%{transform:translateX(140%);opacity:0}43%{transform:translateX(-140%);opacity:0}100%{transform:translateX(3px);opacity:1}}
.btn .rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);transform:scale(0);z-index:-1}
.btn-glass .rip,.btn-ghost .rip,.btn-danger .rip{background:rgba(242,138,23,.18)}
.icon-btn,.icon-btn:hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) + var(--by,0px)))}
.icon-btn{will-change:transform;transition:transform .5s var(--smooth),scale .18s var(--smooth),background .3s,opacity .3s,box-shadow .35s var(--smooth)}
.icon-btn.easing{transition:scale .18s var(--smooth),background .3s,opacity .3s,box-shadow .35s var(--smooth)}
.icon-btn:active:not(:disabled){scale:.92}
.icon-btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px #fff,0 0 0 4px rgba(242,138,23,.12),0 10px 20px -10px rgba(12,20,36,.3)}
.icon-btn:hover:not(:disabled) svg{animation:nudge .6s var(--smooth)}
#prev:hover:not(:disabled) svg{animation-name:nudgeL}
@keyframes nudge{40%{transform:translateX(4px)}}
@keyframes nudgeL{40%{transform:translateX(-4px)}}

/* ---------- navigation: gliding hover pill, logo hop ---------- */
.links{position:relative}
.links a{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;transition:color .25s}
.hover-pill{position:absolute;top:0;bottom:0;left:0;width:0;z-index:0;border-radius:999px;opacity:0;pointer-events:none;
  background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px #fff,0 4px 12px -6px rgba(12,20,36,.25);
  transition:left .55s var(--smooth),width .55s var(--smooth),opacity .3s,background .3s,scale .25s var(--smooth)}
.hover-pill.press{scale:.94;background:rgba(255,236,214,.95)}
.links a{transition:color .3s,scale .25s var(--smooth)}
.links a.press{scale:.94}
.brand .mark{transition:transform .6s var(--smooth)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.08)}
.brand:hover .mark svg{animation:hop .7s var(--smooth)}
@keyframes hop{40%{transform:translateY(-3px)}}

/* ---------- small hover polish ---------- */
.chip svg{transition:transform .5s var(--smooth)}
.chip:hover svg{transform:translateX(4px)}
.pill{transition:transform .5s var(--smooth),color .3s,background .3s,box-shadow .3s}
.pill:hover{transform:translateY(-2px);color:var(--ink);background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px #fff}
.pill:hover svg{animation:hop .7s var(--smooth)}
.foot ul a,.legal a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--out),color .2s}
.foot ul a:hover,.legal a:hover{background-size:100% 1.5px}
.filters button,.seg button{transition:background .3s,color .3s,transform .45s var(--smooth),box-shadow .3s}
.filters button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.85);transform:translateY(-1px)}
.key{transition:transform .45s var(--smooth),box-shadow .4s var(--smooth),background .3s}
.key:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(12,20,36,.06),0 0 0 4px rgba(242,138,23,.12),0 14px 24px -12px rgba(12,20,36,.35)}
.stat strong{transition:transform .6s var(--smooth);display:inline-block}
.stat:hover strong{transform:translateY(-3px) scale(1.04)}
.compare-copy li .ico{transition:transform .6s var(--smooth)}
.compare-copy li:hover .ico{transform:scale(1.12) rotate(-8deg)}
.cmp .knob{transition:transform .5s var(--smooth),box-shadow .4s}
.cmp:hover .knob{transform:scale(1.1)}
.eyebrow::before{transition:width .6s var(--smooth)}
.sec-head:hover .eyebrow::before{width:30px}

/* ---------- in-page arrival frame ---------- */
.arrive-ring{position:absolute;z-index:40;pointer-events:none;border-radius:26px;--c:rgba(242,138,23,.95);--l:26px;--t:2.5px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat,
    radial-gradient(closest-side,rgba(255,179,71,.14),transparent);
  box-shadow:0 0 0 1px rgba(242,138,23,.18),0 0 50px -10px rgba(255,170,80,.45);
  animation:ringIn 2.1s var(--smooth) forwards}
.arrive-ring::before{content:attr(data-l);position:absolute;left:0;top:-30px;padding:5px 10px;border-radius:9px;white-space:nowrap;
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8a4a06;
  background:rgba(255,246,235,.92);box-shadow:inset 0 0 0 1px rgba(242,138,23,.3)}
@keyframes ringIn{0%{opacity:0;transform:scale(1.1)}18%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.99)}}
.split.replay .wi{transition:none!important;transform:translateY(110%) rotate(6deg);opacity:0;filter:blur(8px)}

/* ---------- jump chip: shows where an in-page link is taking you while it scrolls ---------- */
.jump-chip{position:fixed;left:50%;top:92px;z-index:45;display:flex;align-items:center;gap:12px;padding:9px 14px 9px 10px;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(175%) blur(22px);backdrop-filter:saturate(175%) blur(22px);
  box-shadow:inset 0 0 0 1px #fff,0 14px 30px -14px rgba(12,20,36,.35);
  opacity:0;transform:translate(-50%,-10px) scale(.96);transition:opacity .35s var(--smooth),transform .5s var(--smooth)}
.jump-chip.on{opacity:1;transform:translate(-50%,0) scale(1)}
.jump-chip .jc-ico{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,#ffb757,#f2861a)}
.jump-chip .jc-ico svg{width:14px;height:14px;transition:transform .4s var(--smooth)}
.jump-chip.up .jc-ico svg{transform:rotate(180deg)}
.jump-chip b{font:500 11.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#0c1424}
.jump-chip .jc-bar{width:90px;height:3px;border-radius:3px;background:rgba(12,20,36,.08);overflow:hidden}
.jump-chip .jc-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--jp,0));border-radius:3px;background:linear-gradient(90deg,#f28a17,#ff6f61,#8a6bff)}

/* ---------- page-transition curtain ---------- */
html.nav-in::after{content:"";position:fixed;inset:0;z-index:9999;background:#f3f5fa}
.curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden;
  clip-path:circle(0px at var(--x,50%) var(--y,50%));transition:clip-path .7s var(--swift),visibility 0s .7s}
.curtain.show{visibility:visible;pointer-events:auto;clip-path:circle(160vmax at var(--x,50%) var(--y,50%));transition:clip-path .7s var(--swift)}
.curtain.arrive{visibility:visible;clip-path:inset(0 0 0 0);transition:none}
.curtain.arrive.lift{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--swift) .12s,visibility 0s .95s;visibility:hidden}
.c-bg{position:absolute;inset:0;background:
  radial-gradient(900px 600px at 15% 10%,#ffe5c8,rgba(255,229,200,0) 60%),
  radial-gradient(900px 700px at 90% 20%,#d9e7ff,rgba(217,231,255,0) 60%),
  radial-gradient(800px 700px at 50% 110%,#ebe3ff,rgba(235,227,255,0) 60%),#f3f5fa}
.c-grid{position:absolute;inset:0;opacity:.8;
  background-image:linear-gradient(rgba(12,20,36,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(12,20,36,.07) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 65%);mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 65%)}
.c-brk{inset:22px;opacity:1;--c:rgba(12,20,36,.35);--l:22px}
.curtain .c-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:opacity .35s,transform .5s var(--out)}
.curtain .c-mark{width:72px;height:72px;display:block;filter:drop-shadow(0 18px 26px rgba(242,134,26,.45))}
.c-mark .logo .lg-a,.c-mark .logo .lg-roof{fill:none;stroke:#fff;stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round}
.curtain.show .c-mark .lg-roof{animation:roofLift .9s cubic-bezier(.22,1,.36,1) .15s both}
@keyframes roofLift{from{transform:translate(-7px,6px)}to{transform:none}}
.curtain.show .c-mark{animation:markIn .7s var(--spring) both}
@keyframes markIn{from{transform:scale(.4) rotate(-20deg);opacity:0}}
.curtain .c-label{font:800 clamp(24px,3vw,34px)/1.1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.03em;color:#0c1424}
.curtain .c-path{font:500 11.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#687388}
.curtain .c-bar{position:static;width:220px;height:3px;border-radius:3px;background:rgba(12,20,36,.08);overflow:hidden}
.curtain .c-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#f28a17,#ff6f61,#8a6bff)}
.curtain.show .c-bar i{width:100%;transition:width .75s cubic-bezier(.6,0,.2,1) .1s}
.curtain.arrive .c-bar i{width:100%}
.curtain.arrive.lift .c-core{opacity:0;transform:translate(-50%,-62%)}

/* ---------- cursor spotlight on a drafting grid; parallax colour fields ---------- */
.blueprint-hi{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background-image:linear-gradient(rgba(242,138,23,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(242,138,23,.26) 1px,transparent 1px),
    linear-gradient(rgba(242,138,23,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(242,138,23,.1) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,16px 16px,16px 16px;
  -webkit-mask-image:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),#000,transparent 70%);mask-image:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),#000,transparent 70%)}
.blueprint-hi.on{opacity:1}
.blob.a{--k:-.06}.blob.b{--k:.05}.blob.c{--k:-.1}.blob.d{--k:.08}
.blob{translate:0 calc(var(--sy,0) * var(--k,0) * 1px)}

/* ---------- Motion switch in the nav ---------- */
.motion-tog{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 11px;border:0;border-radius:999px;cursor:pointer;flex:none;
  font:600 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#394357;background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);transition:background .35s var(--smooth),color .35s,box-shadow .35s var(--smooth)}
.motion-tog:hover{background:rgba(255,255,255,.88);color:#0c1424;box-shadow:inset 0 0 0 1px #fff,0 0 0 4px rgba(242,138,23,.12)}
.motion-tog svg{width:16px;height:16px;color:#f28a17}
.motion-tog .sw{position:relative;width:30px;height:18px;border-radius:18px;background:rgba(12,20,36,.16);transition:background .35s var(--smooth)}
.motion-tog .sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(12,20,36,.3);transition:transform .4s var(--smooth)}
.motion-tog[aria-pressed="true"] .sw{background:linear-gradient(180deg,#ffa53d,#f28a17)}
.motion-tog[aria-pressed="true"] .sw::after{transform:translateX(12px)}
.sheet .motion-tog{width:100%;justify-content:space-between;height:48px;padding:0 16px;margin-top:6px;border-radius:14px;font-size:15px}
@media (max-width:1240px){.nav .motion-tog .lbl{display:none}}
@media (max-width:860px){.nav .bar>.motion-tog{display:none}}
html.motion-swap body{opacity:0;transition:opacity .25s ease}

/* ---------- reduced motion (OS setting or the Motion switch): fades and smooth hovers, no big movement ---------- */
html[data-motion="reduced"] .split .wi{transform:none!important;filter:none!important;transition:opacity .7s ease!important;transition-delay:calc(var(--i,0)*45ms)!important}
html[data-motion="reduced"] .split.replay .wi{opacity:0;transition:none!important}
html[data-motion="reduced"] .tilt.reveal.in,html[data-motion="reduced"] .tilt:not(.reveal),html[data-motion="reduced"] .tilt.reveal:not(.in){transform:none!important;filter:none!important}
html[data-motion="reduced"] .tilt{transition:opacity .6s ease,translate .45s var(--smooth),box-shadow .45s var(--smooth)!important}
html[data-motion="reduced"] .tilt:hover{translate:0 -3px}
html[data-motion="reduced"] .tilt .media img,html[data-motion="reduced"] .tilt .img img{transform:none!important}
html[data-motion="reduced"] .btn:hover,html[data-motion="reduced"] .icon-btn:hover:not(:disabled){--by:-1px}
html[data-motion="reduced"] .blueprint-hi{display:none}
html[data-motion="reduced"] .blob{translate:none}
html[data-motion="reduced"] .curtain{clip-path:none!important;opacity:0;transition:opacity .3s ease,visibility 0s .3s}
html[data-motion="reduced"] .curtain.show{opacity:1;transition:opacity .3s ease}
html[data-motion="reduced"] .curtain.arrive{opacity:1;transition:none}
html[data-motion="reduced"] .curtain.arrive.lift{opacity:0;transition:opacity .45s ease .1s,visibility 0s .6s}
html[data-motion="reduced"] .curtain .c-core{transform:translate(-50%,-50%)!important}
html[data-motion="reduced"] .arrive-ring{animation:ringFade 1.8s ease forwards!important}
@keyframes ringFade{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}