/* ════════════════════════════════════════════════════════════
   GENCO — Cinematic 3D layer (additive · only active with body.cine)
   Depth, parallax, scroll-camera, and 3D tilt. Pure CSS transforms.
   ════════════════════════════════════════════════════════════ */

body.cine { overflow-x: hidden; }

/* ---- perspective context for tilt grids ---- */
.cine .products__grid,
.cine .values__grid,
.cine .testimonials__grid {
  perspective: 1200px;
  perspective-origin: 50% 25%;
}

/* ---- cards become 3D objects ---- */
.cine .product-card,
.cine .value-card,
.cine .testi-card {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.cine .product-card__img,
.cine .value-card__icon,
.cine .testi-card__avatar {
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.cine .product-card.tilted,
.cine .value-card.tilted,
.cine .testi-card.tilted {
  box-shadow: 0 38px 70px -28px rgba(10,29,60,.55), 0 12px 24px -12px rgba(10,29,60,.3);
}
/* inner layers float toward the viewer on tilt = parallax depth */
.cine .product-card.tilted .product-card__img { transform: translateZ(52px); }
.cine .value-card.tilted .value-card__icon    { transform: translateZ(46px) scale(1.06); }
.cine .testi-card.tilted .testi-card__avatar  { transform: translateZ(40px); }

/* ---- hero depth layers driven by JS ---- */
.cine .hero__content   { will-change: transform, opacity; }
.cine .hero__stagewrap { will-change: transform; transform-style: preserve-3d; }
.cine .hero__paws      { will-change: transform; }

/* ---- depth "rise" for section headings (camera comes to them) ---- */
.cine .cine-rise {
  opacity: 0;
  transform: translate3d(0, 38px, -60px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.cine .cine-rise.in { opacity: 1; transform: none; }

/* ---- mobile: drop the heavy 3D, keep it calm & fast ---- */
@media (max-width: 880px) {
  .cine .products__grid,
  .cine .values__grid,
  .cine .testimonials__grid { perspective: none; }
  .cine .cine-rise { transform: translate3d(0, 26px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cine .cine-rise { opacity: 1; transform: none; transition: none; }
}