/* Product pages: gradient, depth and gentle motion (founder ruling 2026-09-30, D-125).
 * Shared by the five /products pages, scoped to their own hero and section classes; header and footer untouched.
 * Colours are the page's own tokens (clean-interface maps them to plum #2B1A34, maroon #7B1246, magenta #AB2379).
 * Motion runs only under html.jzpm-motion, which product-motion.js sets unless the visitor asks for reduced motion.
 * Content is hidden for a reveal only by that script, so nothing disappears if it does not load. */

/* ---- Headline: brand gradient + one soft sheen every 8 s (clean presentation only: every hero is white there) ---- */
body.jz-clean :is(.hero .hero-top, .pp-hero, .cas-hero, .ais-hero, .eit-hero) h1 {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%),
                    linear-gradient(90deg, #2B1A34 0%, #7B1246 48%, #AB2379 100%); /* the ONE brand gradient (D-230) */
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.jzpm-motion body.jz-clean :is(.hero .hero-top, .pp-hero, .cas-hero, .ais-hero, .eit-hero) h1 { animation: jzpm-sheen 8s ease-in-out 1.2s infinite; }
@keyframes jzpm-sheen { 0% { background-position: 160% 0, 0 0; } 16%, 100% { background-position: -60% 0, 0 0; } }

/* ---- 3D hero mockups: a resting tilt, a slow float, a deep coloured shadow and a light sweep ---- */
:is(.hero-dash, .pp-hero-visual, .cas-portal, .ais-dash) {
  --jzpm-rx: 0deg; --jzpm-ry: 0deg;
  position: relative;
  transform: perspective(1500px) rotateX(calc(5deg + var(--jzpm-rx))) rotateY(calc(-9deg + var(--jzpm-ry)));
  transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 30px 70px -24px rgba(43,26,52,.28), 0 18px 50px -30px rgba(123,18,70,.35);
  will-change: transform;
}
.jzpm-motion :is(.hero-dash, .pp-hero-visual, .cas-portal, .ais-dash) { animation: jzpm-float 8s ease-in-out infinite; }
@keyframes jzpm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
:is(.hero-dash, .cas-portal, .ais-dash)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
}
.jzpm-motion :is(.hero-dash, .cas-portal, .ais-dash)::after { animation: jzpm-shine 9s ease-in-out 2s infinite; }
@keyframes jzpm-shine { 0% { background-position: 160% 0; } 14%, 100% { background-position: -60% 0; } }
/* Enterprise IT: the architecture layers separate in real depth */
.eit-arch-stack { transform-style: preserve-3d; transform: perspective(1600px) rotateX(calc(14deg + var(--jzpm-rx, 0deg))) rotateY(var(--jzpm-ry, 0deg)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.eit-arch-layer { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; box-shadow: 0 10px 24px -14px rgba(43,26,52,.35); }
.eit-arch-layer:nth-child(1) { --jzpm-i: 4; } .eit-arch-layer:nth-child(2) { --jzpm-i: 3; } .eit-arch-layer:nth-child(3) { --jzpm-i: 2; }
.eit-arch-layer:nth-child(4) { --jzpm-i: 1; } .eit-arch-layer:nth-child(5) { --jzpm-i: 0; }
.eit-arch-layer { transform: translateZ(calc(var(--jzpm-i, 0) * 10px)); }
.jzpm-motion .eit-arch-layer { animation: jzpm-layers 7s ease-in-out infinite; animation-delay: calc(var(--jzpm-i, 0) * -.35s); }
@keyframes jzpm-layers { 0%, 100% { transform: translateZ(calc(var(--jzpm-i, 0) * 10px)); } 50% { transform: translateZ(calc(var(--jzpm-i, 0) * 22px)) translateY(-3px); } }
.eit-arch-layer:hover { box-shadow: 0 18px 34px -16px rgba(123,18,70,.45); }
/* Pause the endless loops while the hero is off screen */
.jzpm-paused :is(.hero-dash, .pp-hero-visual, .cas-portal, .ais-dash, .eit-arch-layer, h1),
.jzpm-paused :is(.hero-dash, .cas-portal, .ais-dash)::after { animation-play-state: paused; }

/* ---- Cards and steps: hover lift; scroll reveal (classes added by product-motion.js) ---- */
.jzpm-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.jzpm-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -18px rgba(43,26,52,.22); border-color: var(--jzc-selected, var(--jz-line)); }
.jzpm-motion .jzpm-reveal { opacity: 0; translate: 0 24px; transition: opacity .75s cubic-bezier(.2,.7,.2,1) var(--jzpm-d, 0s), translate .75s cubic-bezier(.2,.7,.2,1) var(--jzpm-d, 0s), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.jzpm-motion .jzpm-reveal.jzpm-in { opacity: 1; translate: none; }

/* ---- Small screens and touch: keep it flat and calm ---- */
@media (max-width: 900px) {
  :is(.hero-dash, .pp-hero-visual, .cas-portal, .ais-dash) { transform: none; }
  .eit-arch-stack { transform: none; }
  .eit-arch-layer, .jzpm-motion .eit-arch-layer { transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.hero-dash, .pp-hero-visual, .cas-portal, .ais-dash, .eit-arch-layer, h1),
  :is(.hero-dash, .cas-portal, .ais-dash)::after { animation: none !important; }
  .jzpm-reveal { opacity: 1 !important; translate: none !important; }
}