/* =============================================================
   PeekABaby.ca  —  3D Effects & Premium Motion
   Perspective transforms, parallax tilt, glossy depth
   ============================================================= */

/* ---- perspective scene wrappers ---- */
.scene{perspective:1400px}
.scene-deep{perspective:900px}

/* ---- interactive 3D tilt (driven by tilt.js) ---- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.tilt-inner{transform-style:preserve-3d}
.tilt .lift{transform:translateZ(46px);transition:transform .5s var(--ease)}
.tilt .lift-sm{transform:translateZ(26px)}
.tilt:hover{box-shadow:var(--sh-l)}
.tilt .gloss{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.5),rgba(255,255,255,0) 46%);
  opacity:0;transition:opacity .4s;mix-blend-mode:soft-light;
}
.tilt:hover .gloss{opacity:1}

/* ---- 3D hero scan card ---- */
.scene .scan-card{
  transform-style:preserve-3d;
  animation:card3d 9s ease-in-out infinite;
}
@keyframes card3d{
  0%,100%{transform:rotateY(-9deg) rotateX(4deg) translateY(0)}
  50%{transform:rotateY(8deg) rotateX(-3deg) translateY(-14px)}
}
.scene .scan-card .scan-screen{transform:translateZ(40px)}
.scene .scan-float{transform:translateZ(72px)}
.scene .ecg{transform:translateZ(30px)}

/* ---- floating depth chips ---- */
.float-3d{animation:float3d 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes float3d{
  0%,100%{transform:translate3d(0,0,0) rotateX(0) rotateY(0)}
  33%{transform:translate3d(0,-14px,30px) rotateX(6deg) rotateY(-6deg)}
  66%{transform:translate3d(0,8px,10px) rotateX(-4deg) rotateY(5deg)}
}

/* ---- 3D flip cards (services) ---- */
.flip{perspective:1200px}
.flip-inner{position:relative;transition:transform .8s var(--ease);transform-style:preserve-3d}
.flip:hover .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:inherit}
.flip-back{transform:rotateY(180deg)}

/* ---- glossy shine sweep ---- */
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";position:absolute;top:-60%;left:-130%;width:60%;height:220%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg);transition:left .8s var(--ease);pointer-events:none;
}
.shine:hover::after{left:140%}

/* ---- premium 3D lift on hover (pure CSS fallback) ---- */
.lift-3d{
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  transform-style:preserve-3d;
}
.lift-3d:hover{
  transform:translateY(-12px) rotateX(6deg) scale(1.015);
  box-shadow:var(--sh-l);
}

/* ---- parallax layered hero blobs ---- */
.layer-par{will-change:transform;transition:transform .2s linear}

/* ---- 3D rotating ring (decor) ---- */
.ring-3d{
  transform-style:preserve-3d;
  animation:ring3d 16s linear infinite;
}
@keyframes ring3d{
  0%{transform:rotateY(0) rotateX(66deg)}
  100%{transform:rotateY(360deg) rotateX(66deg)}
}

/* ---- depth pop for stat / step cards ---- */
.pop-3d{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pop-3d:hover{transform:perspective(900px) translateZ(30px) translateY(-8px)}

/* ---- soft entrance with 3D ---- */
.reveal-3d{
  opacity:0;transform:perspective(1000px) rotateX(14deg) translateY(46px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.reveal-3d.in{opacity:1;transform:perspective(1000px) rotateX(0) translateY(0)}

@media(prefers-reduced-motion:reduce){
  .scene .scan-card,.float-3d,.ring-3d{animation:none!important}
  .tilt,.lift-3d,.flip-inner{transition:none!important}
  .reveal-3d{opacity:1!important;transform:none!important}
}
@media(max-width:760px){
  /* calmer 3D on mobile for performance */
  .scene .scan-card{animation-duration:12s}
  .tilt .lift{transform:translateZ(24px)}
  .flip:hover .flip-inner{transform:none}
}