/* ProLayer motion layer: everything here is decoration on top of store.css.
   All hidden-until-animated states sit inside the no-preference query, so with
   reduced motion (or no JS) the page simply shows everything at rest. */

/* hero canvas: print bed grid + rising sparks */
.hero{isolation:isolate}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* light that follows the pointer */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),rgba(63,227,230,.09),transparent 65%);transition:background .2s}

/* logo stage */
.brand{perspective:1000px}
.brand-tilt{position:relative;display:grid;place-items:center;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;transform-style:preserve-3d}
.brand-logo{animation:none}
.brand-scan{position:absolute;left:8%;right:8%;bottom:0;height:2px;opacity:0;pointer-events:none}
.brand-scan::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--cyan) 20%,#fff 50%,var(--cyan) 80%,transparent);box-shadow:0 0 18px 3px rgba(63,227,230,.7)}
.brand-scan i{position:absolute;left:50%;bottom:2px;width:14px;height:18px;margin-left:-7px;background:linear-gradient(#cfe9ff,#6aa8ff);clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%);filter:drop-shadow(0 0 6px rgba(63,227,230,.9))}

/* "now printing" HUD chip */
.now{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:6px;padding:8px 14px;border-radius:999px;background:rgba(12,16,24,.7);border:1px solid rgba(69,217,236,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted);white-space:nowrap}
.now b{color:var(--d-ink);font-weight:500}
.now [data-now]{color:var(--cyan)}
.now .live{width:7px;height:7px}
.now-n{padding-left:8px;border-left:1px solid var(--d-rule);font-variant-numeric:tabular-nums}
@media (max-width:460px){.now{flex-wrap:nowrap;font-size:10px;padding:7px 12px;gap:6px}.now-l{display:none}}
.caret{display:inline-block;width:7px;height:13px;margin-left:-4px;background:var(--cyan);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ticker band */
.ticker{overflow:hidden;background:linear-gradient(90deg,var(--blue),var(--azure) 50%,#18b9d4);color:#fff;border-block:1px solid rgba(255,255,255,.15)}
.ticker-in{display:flex;width:max-content}
.ticker span{display:flex;align-items:center;gap:22px;padding:14px 0 14px 22px;font:700 clamp(15px,1.6vw,20px)/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.ticker span::after{content:"";width:16px;height:12px;background:
  linear-gradient(#fff 0 0) 3px 0/10px 3px no-repeat,
  linear-gradient(#fff 0 0) 1px 4.5px/14px 3px no-repeat,
  linear-gradient(rgba(255,255,255,.6) 0 0) 0 9px/16px 3px no-repeat}

/* buttons: a light sweep, like a laser pass */
.btn:not(.btn-o){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.btn-o)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-120%)}

/* toolpath divider */
.toolpath{position:relative;max-width:1440px;margin:0 auto;padding:0 var(--pad);height:24px;color:var(--ink)}
.toolpath svg{display:block;width:100%;height:24px;overflow:visible}
.toolpath polyline{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.nozzle{position:absolute;right:var(--pad);top:50%;width:8px;height:8px;margin:-4px -4px 0 0;background:var(--blue);border-radius:50%;box-shadow:0 0 10px var(--azure)}

/* fly-to-cart ghost */
.fly{position:fixed;z-index:70;border-radius:12px;object-fit:cover;pointer-events:none;box-shadow:0 20px 40px -10px rgba(0,0,0,.5)}

/* bead line used by "print-in" photos */
.ph{position:relative}
.ph::after,.cat-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);opacity:0;pointer-events:none}
.cat-ph{position:relative}

@media (prefers-reduced-motion:no-preference){
  /* headline lines print bottom-up, one after another */
  .fx .hero h1 span{clip-path:inset(100% 0 0 0);animation:layer .9s steps(12,end) forwards}
  .fx .hero h1 span:nth-child(1){animation-delay:.15s}
  .fx .hero h1 span:nth-child(2){animation-delay:.55s}
  .fx .hero h1 span:nth-child(3){animation-delay:.95s}
  @keyframes layer{to{clip-path:inset(-10% -5% -15% -5%)}}

  .fx .hero [class*="in-"]{opacity:0;transform:translateY(16px);animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
  .fx .hero .in-1{animation-delay:.05s}.fx .hero .in-2{animation-delay:1.3s}.fx .hero .in-3{animation-delay:1.45s}.fx .hero .in-4{animation-delay:1.6s}.fx .hero .in-5{animation-delay:1.75s}
  @keyframes up{to{opacity:1;transform:none}}
  .fx .badges li{opacity:0;animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards}
  .fx .badges li:nth-child(1){animation-delay:1.7s}.fx .badges li:nth-child(2){animation-delay:1.8s}.fx .badges li:nth-child(3){animation-delay:1.9s}
  @keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

  /* the logo prints itself: stepped layers with the nozzle riding the top edge */
  .fx .brand-logo{clip-path:inset(100% 0 0 0);animation:layer 2.6s steps(32,end) .4s forwards,float 7s ease-in-out 3.2s infinite}
  .fx .brand-scan{animation:scan 2.6s steps(32,end) .4s forwards}
  @keyframes scan{0%{bottom:0;opacity:1}96%{bottom:calc(100% - 2px);opacity:1}100%{bottom:calc(100% - 2px);opacity:0}}
  .fx .brand-glow{opacity:0;animation:glowin 1.2s ease-out 2.6s forwards,breathe 5s ease-in-out 3.8s infinite}
  @keyframes glowin{to{opacity:1}}
  @keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
  .fx .now{opacity:0;animation:up .7s cubic-bezier(.2,.7,.2,1) 2.9s forwards}

  .fx .promise li{opacity:0;transform:translateY(12px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards}
  .fx .promise li:nth-child(1){animation-delay:2s}.fx .promise li:nth-child(2){animation-delay:2.1s}.fx .promise li:nth-child(3){animation-delay:2.2s}.fx .promise li:nth-child(4){animation-delay:2.3s}
  .promise b::before{animation:led 2.4s ease-in-out infinite}
  .promise li:nth-child(2) b::before{animation-delay:.6s}.promise li:nth-child(3) b::before{animation-delay:1.2s}.promise li:nth-child(4) b::before{animation-delay:1.8s}
  @keyframes led{50%{opacity:.35;box-shadow:none}}

  .ticker-in{animation:tick 38s linear infinite}
  .ticker:hover .ticker-in{animation-play-state:paused}
  @keyframes tick{to{transform:translateX(-50%)}}

  .btn:not(.btn-o)::after{animation:sweep 4.5s ease-in-out 2.5s infinite}
  @keyframes sweep{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

  /* scroll reveals */
  .fx [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .fx [data-reveal].in{opacity:1;transform:none}

  /* product + category photos print in when they reach the screen */
  .fx .card .ph img,.fx .cat-ph img{clip-path:inset(100% 0 0 0)}
  .fx .card.in .ph img,.fx .cats li.in .cat-ph img{animation:layer 1s steps(18,end) var(--d,0s) forwards}
  .fx .card.in .ph::after,.fx .cats li.in .cat-ph::after{animation:bead 1s steps(18,end) var(--d,0s) forwards}
  @keyframes bead{0%{bottom:0;opacity:1}98%{bottom:calc(100% - 2px);opacity:1}100%{bottom:calc(100% - 2px);opacity:0}}
  .fx .card{opacity:0;transform:translateY(20px);transition:opacity .6s var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),box-shadow .25s}
  .fx .card.in{opacity:1;transform:none}
  .fx .card.in:hover{transform:translateY(-4px) rotateX(var(--crx,0deg)) rotateY(var(--cry,0deg))}
  .grid{perspective:1200px}
  .add{overflow:hidden}
  .add::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--azure),var(--cyan));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:-1}
  .add{isolation:isolate}
  .add:hover{background:var(--ink);color:var(--night)}
  .add:hover::before{transform:scaleX(1)}

  /* custom section: idea, then sliced, then printed */
  .fx .sl-2 img,.fx .sl-3 img{clip-path:inset(100% 0 0 0)}
  .fx .slices.in .sl-2 img{animation:layer 1.2s steps(24,end) .2s forwards}
  .fx .slices.in .sl-3 img{animation:layer 1.4s steps(24,end) 1.2s forwards}
  .sl-3 .sl-ph{transition:box-shadow .6s 2.6s}
  .fx .slices.in .sl-3 .sl-ph{box-shadow:0 0 0 1px rgba(63,227,230,.5),0 0 40px -6px rgba(63,227,230,.55)}

  /* step numbers count in */
  .fx .steps li.in b,.fx .how li.in b{animation:pop .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .15s) both}

  /* toolpath draws itself, then the nozzle lights up */
  .fx .toolpath polyline{stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1)}
  .fx .toolpath.in polyline{stroke-dashoffset:0}
  .fx .toolpath .nozzle{opacity:0;transition:opacity .3s 1.6s}
  .fx .toolpath.in .nozzle{opacity:1;animation:led 1.6s ease-in-out 2s infinite}

  /* Whish number glows */
  .whish-num b{background:linear-gradient(90deg,var(--cyan),#fff 50%,var(--cyan));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.5s linear infinite}
  @keyframes shine{to{background-position:-200% 0}}

  /* cart count pops when it changes */
  .cart-count.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
}