/* printpress.online — 3D & motion layer (added in 2.2.0).
   Loaded after site.css and only adds to it. Heavy effects (tilt, parallax) run only on
   desktop mice; phones get light entrance/scroll animations. Reduced-motion users get none. */

/* ---------- page transitions (Chrome, Edge, Safari 18+; other browsers simply load the page) ---------- */
::view-transition-old(root){animation:ppPageOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:ppPageIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes ppPageOut{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes ppPageIn{from{opacity:0;transform:translateY(16px)}}
body:not(.pg-home) .top{view-transition-name:pp-top}
::view-transition-old(pp-top),::view-transition-new(pp-top){animation-duration:.15s}

/* ---------- Facebook buttons ---------- */
.fb-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:#1877f2;color:#fff;text-decoration:none;box-shadow:0 8px 18px -10px rgba(24,119,242,.8);transition:transform .25s var(--ease),box-shadow .25s,background .2s}
.fb-btn .ic{width:21px;height:21px}
.fb-btn:hover{background:#0f63d6;transform:translateY(-2px) scale(1.06);box-shadow:0 12px 22px -10px rgba(24,119,242,.9)}
.fb-btn:focus-visible{outline:3px solid var(--m);outline-offset:2px}
.top-fb{margin-left:-10px}
.top-nav a{white-space:nowrap}
.hero-fb{width:clamp(36px,2.4vw,46px);height:clamp(36px,2.4vw,46px);margin-left:-2.6vw}
.hero-fb .ic{width:52%;height:52%}
.js .hero-fb{opacity:0;transform:translateY(-10px)}
.go .hero-fb{opacity:1;transform:none;transition:opacity .8s var(--ease) .44s,transform 1s var(--ease) .44s}
.go.settled .hero-fb:hover{transform:translateY(-2px) scale(1.06);transition:transform .25s var(--ease),box-shadow .25s,background .2s}
.foot-social{margin-top:20px;display:flex;gap:10px}
.foot .fb-btn{color:#fff}.foot .fb-btn .ic{color:#fff;width:21px;height:21px}
.cbox-fb span{background:#e8f0fe!important;color:#1877f2!important}

/* ---------- product cards: depth, moving shadow, image parallax ---------- */
.card{box-shadow:0 1px 2px rgba(44,37,86,.04),0 14px 30px -24px rgba(60,45,140,.35)}
.card.tilt{box-shadow:calc(var(--px,0) * -34px) calc(30px + var(--py,0) * -22px) 54px -24px rgba(60,45,140,.5),0 2px 6px rgba(44,37,86,.06);border-color:#d8d3f0}
.card.tilt .card-img img{transform:scale(1.12) translate(calc(var(--px,0) * -16px),calc(var(--py,0) * -12px));transition:transform .25s var(--ease)}
.card.tilt .card-body b{color:var(--p);transition:color .25s}
.card-img{position:relative}
.card-img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(44,37,86,.10),transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover .card-img::after{opacity:1}
/* entrance: cards rise and tip forward into place */
.js .card[data-reveal]{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,opacity .4s}
.js .card[data-reveal].in{animation:ppCardIn .9s var(--ease) calc(var(--d,0) * 90ms) backwards}
.js .card.tilt[data-reveal]{transition:transform .12s linear,box-shadow .35s,border-color .35s}
@keyframes ppCardIn{from{opacity:0;transform:perspective(900px) rotateX(20deg) translateY(46px) scale(.95)}to{opacity:1;transform:none}}
/* touch screens: a small press-in when tapped */
@media (hover:none){.card:active{transform:scale(.97)!important;transition:transform .12s}}

/* ---------- steps, feature boxes, contact boxes: 3D entrance + hover lift ---------- */
.js .steps li[data-reveal],.js .feat[data-reveal],.js .cbox[data-reveal]{transform:perspective(800px) rotateX(16deg) translateY(34px);transition:opacity .8s var(--ease),transform .9s var(--ease),translate .35s var(--ease),box-shadow .35s;transition-delay:calc(var(--d,0) * 90ms),calc(var(--d,0) * 90ms),0s,0s}
.js .steps li[data-reveal].in,.js .feat[data-reveal].in,.js .cbox[data-reveal].in{transform:none}
.steps li:hover,.feat:hover{translate:0 -6px;box-shadow:0 24px 44px -26px rgba(60,45,140,.45)}
.why .feat:hover{box-shadow:0 24px 44px -20px rgba(0,0,0,.45)}
.step-ic,.feat span{transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.steps li:hover .step-ic,.feat:hover span{transform:rotate(-8deg) scale(1.1)}

/* ---------- inner page headers: text comes in line by line ---------- */
.js .pagehead .wrap[data-reveal]>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .pagehead .wrap[data-reveal].in>*{opacity:1;transform:none}
.js .pagehead .wrap.in>:nth-child(2){transition-delay:.1s}
.js .pagehead .wrap.in>:nth-child(3){transition-delay:.2s}
.js .pagehead .wrap.in>:nth-child(4){transition-delay:.3s}

/* ---------- product page: image with depth, animated details ---------- */
.prod-media{perspective:1400px}
.prod-stage{position:relative;margin-bottom:22px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.prod-stage.tilt{transition:transform .15s linear}
.prod-deco{position:absolute;inset:4% 3% -3% 3%;pointer-events:none;transform-style:preserve-3d}
.prod-deco i{position:absolute;inset:0;border-radius:24px}
.prod-deco i:first-child{background:var(--m);opacity:.5;transform:translate3d(14px,16px,-60px) rotate(3deg)}
.prod-deco i:last-child{background:var(--p);opacity:.16;transform:translate3d(-12px,22px,-110px) rotate(-4deg)}
.prod-img{position:relative;box-shadow:calc(var(--sx,0) * -28px) calc(34px + var(--sy,0) * 20px) 64px -30px rgba(60,45,140,.55);transition:box-shadow .3s}
.prod-img img{transition:transform .8s var(--ease)}
.prod-stage.tilt .prod-img img{transform:scale(1.04)}
.prod-img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 50%);opacity:0;transition:opacity .3s}
.prod-stage.tilt .prod-img::after{opacity:1}
.prod-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-130%)}
.prod-img.in .prod-shine{animation:ppShine 1.3s var(--ease) .8s forwards}
@keyframes ppShine{to{transform:translateX(130%)}}
.js .prod-img[data-reveal]{transform:rotateY(-20deg) rotateX(8deg) translateY(30px) scale(.94);transition:opacity .9s var(--ease),transform 1.2s var(--ease),box-shadow .3s}
.js .prod-img[data-reveal].in{transform:none}
.js .prod-deco i{opacity:0;transition:opacity .9s var(--ease) .45s}
.go .prod-deco i:first-child{opacity:.5}.go .prod-deco i:last-child{opacity:.16}
/* the checklist ticks in one by one */
.js .prod-points[data-reveal]{transform:none}
.js .prod-points li{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .prod-points.in li{opacity:1;transform:none}
.prod-points.in li:nth-child(2){transition-delay:.1s}.prod-points.in li:nth-child(3){transition-delay:.2s}.prod-points.in li:nth-child(4){transition-delay:.3s}
.prod-points.in .ic{animation:ppPop .5s cubic-bezier(.2,1.5,.4,1) backwards}
.prod-points.in li:nth-child(1) .ic{animation-delay:.15s}.prod-points.in li:nth-child(2) .ic{animation-delay:.25s}.prod-points.in li:nth-child(3) .ic{animation-delay:.35s}.prod-points.in li:nth-child(4) .ic{animation-delay:.45s}
@keyframes ppPop{from{transform:scale(0)}}
/* title block and form sections */
.js .prod-main>.eyebrow,.js .prod-main>h1,.js .prod-main>.prod-intro{opacity:0;transform:translateY(18px)}
.go .prod-main>.eyebrow,.go .prod-main>h1,.go .prod-main>.prod-intro{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.go .prod-main>h1{transition-delay:.08s}.go .prod-main>.prod-intro{transition-delay:.16s}
.js [data-mo]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js [data-mo].in{opacity:1;transform:none}
.form-h.in>span{animation:ppPop .55s cubic-bezier(.2,1.5,.4,1) .1s backwards}
.fld input,.fld select,.fld textarea{transition:border-color .2s,box-shadow .2s,transform .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{transform:translateY(-1px)}
.fallback [data-mo],.fallback .prod-points li,.fallback .pagehead .wrap>*{opacity:1!important;transform:none!important}

/* ---------- phone / small tablet ---------- */
@media (max-width:900px){
  .top-fb{width:36px;height:36px;margin-left:-4px}
  .top-fb .ic{width:19px;height:19px}
  .hero-fb{position:absolute;right:20px;top:22px;width:38px;height:38px;margin:0}
  .prod-deco i:first-child{transform:translate3d(10px,12px,-40px) rotate(2deg)}
  .prod-deco i:last-child{transform:translate3d(-8px,16px,-80px) rotate(-3deg)}
}
@media (max-width:600px){
  .top-in{gap:10px}
  .top-logo img{height:33px}
  .top-nav{gap:11px;font-size:15px}
  .top-nav a{white-space:nowrap}
  .top-fb{width:31px;height:31px;margin-left:0}
  .top-fb .ic{width:17px;height:17px}
}
@media (max-width:370px){.top-logo img{height:29px}.top-nav{gap:9px;font-size:14px}.top-in{gap:8px}.top-fb{width:29px;height:29px}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .js [data-mo],.js .prod-points li,.js .pagehead .wrap>*,.js .prod-img[data-reveal],.js .prod-deco i,.js .prod-main>*,.js .hero-fb{opacity:1!important;transform:none!important}
  .js .steps li[data-reveal],.js .feat[data-reveal],.js .cbox[data-reveal]{transform:none!important}
}