/* Shared motion layer. Durations follow the ui-ux-pro-max guidance: 150-300ms for hover feedback,
   600-900ms for entrances, exits faster than entrances, transform and opacity only. */
:root{--ux-ease:cubic-bezier(.16,1,.3,1);--ux-ease-soft:cubic-bezier(.22,.61,.36,1)}

/* Scroll progress */
.ux-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:1000;pointer-events:none;
  background:linear-gradient(90deg,var(--ux-accent),var(--ux-accent-2,var(--ux-accent)));
  transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* Active navigation link */
.ux-active{color:var(--ux-accent)!important}

/* Entrances */
.ux-m .ux-r{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px);
  transition:opacity .8s var(--ux-ease) var(--d,0s),transform 1s var(--ux-ease) var(--d,0s),filter .8s var(--ux-ease) var(--d,0s)}
.ux-m .ux-r.ux-in{opacity:1;transform:none;filter:none}

/* Headline words rise from a mask */
.ux-m .ux-split .ux-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.ux-m .ux-split .ux-wi{display:inline-block;transform:translate3d(0,110%,0);
  transition:transform 1s var(--ux-ease) calc(var(--i,0) * 60ms)}
.ux-m .ux-split.ux-in .ux-wi{transform:none}

/* Sequences light up in order */
.ux-m .ux-seq>*{opacity:.18;transform:translate3d(-8px,0,0);
  transition:opacity .6s var(--ux-ease) calc(var(--s,0) * 180ms + .15s),transform .7s var(--ux-ease) calc(var(--s,0) * 180ms + .15s)}
.ux-m .ux-seq.ux-in>*{opacity:1;transform:none}

/* Tab panels and swapped screenshots */
.ux-m .ux-swap{animation:ux-swap .55s var(--ux-ease)}
@keyframes ux-swap{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* Pointer tilt with a soft spotlight (mouse and trackpad only) */
.ux-tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ux-ease),box-shadow .35s var(--ux-ease-soft),border-color .25s;will-change:transform}
.ux-m .ux-r.ux-in.ux-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ux-ease),box-shadow .35s var(--ux-ease-soft),opacity .8s var(--ux-ease) var(--d,0s),filter .8s var(--ux-ease) var(--d,0s)}
.ux-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--ux-accent) 12%,transparent),transparent 60%);
  transition:opacity .3s}
.ux-tilt:hover{box-shadow:var(--ux-shadow-hover)}
.ux-tilt:hover::after{opacity:1}

/* Cards that lift on hover */
.ux-lift{transition:transform .4s var(--ux-ease),box-shadow .4s var(--ux-ease-soft)}
.ux-lift:hover{box-shadow:var(--ux-shadow-hover)}
.ux-m .ux-r.ux-in.ux-lift{transition:transform .4s var(--ux-ease),box-shadow .4s var(--ux-ease-soft),opacity .8s var(--ux-ease) var(--d,0s),filter .8s var(--ux-ease) var(--d,0s)}
.ux-m .ux-r.ux-in.ux-lift:hover{transform:translate3d(0,-4px,0)}

/* Magnetic buttons */
.ux-magnet{transition:transform .35s var(--ux-ease),box-shadow .3s,background-color .2s,color .2s;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0)}

/* Portrait parallax */
.ux-parallax{transform:translate3d(0,var(--py,0px),0) scale(1.06);transition:transform .2s linear}

/* Signature: the delivery timeline compresses from five days into one */
.ux-compress{gap:4px;margin-top:14px;height:30px;max-width:360px}
.ux-compress i{flex:1 1 0;border-radius:7px;background:color-mix(in srgb,var(--ux-signal) 22%,transparent);
  font:600 .68rem/30px var(--ux-mono,ui-monospace,monospace);font-style:normal;text-align:center;color:var(--ux-signal);
  letter-spacing:.04em;overflow:hidden;white-space:nowrap}
.ux-compress i:first-child{background:var(--ux-signal);color:#fff}
.ux-m .ux-compress i{transition:flex-grow 1.1s var(--ux-ease) calc(.5s + var(--k,0) * .12s),opacity .5s var(--ux-ease) calc(.5s + var(--k,0) * .12s),margin .9s var(--ux-ease) calc(.5s + var(--k,0) * .12s)}
.ux-m .ux-compress.ux-in i:not(:first-child){flex-grow:0;opacity:0;margin-left:-4px}
.ux-compress{display:none}
.ux-m .ux-compress{display:flex}
.ux-compress i:first-child{position:relative}
.ux-compress i:first-child span{position:absolute;inset:0;transition:opacity .45s var(--ux-ease) 1.2s}
.ux-compress .ux-same{opacity:0}
.ux-m .ux-compress.ux-in .ux-day{opacity:0;transition-delay:.9s}
.ux-m .ux-compress.ux-in .ux-same{opacity:1}
.ux-compress i:nth-child(2){--k:1}.ux-compress i:nth-child(3){--k:2}.ux-compress i:nth-child(4){--k:3}.ux-compress i:nth-child(5){--k:4}

/* Ambient hero light */
.ux-glow{position:absolute;inset:-20% -10% auto auto;width:min(760px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ux-accent) 16%,transparent),transparent 70%);filter:blur(10px)}
.ux-m .ux-glow{animation:ux-drift 18s ease-in-out infinite alternate}
@keyframes ux-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8%,10%,0) scale(1.12)}}

@media (prefers-reduced-motion: reduce){
  .ux-progress{transition:none}
  .ux-parallax{transform:none}
  .ux-tilt,.ux-lift,.ux-magnet{transform:none!important}
}
.ux-compress span{margin:0!important;font-size:inherit!important;color:inherit!important;max-width:none!important;line-height:30px}