/* ============================================================
   lead-3d.css - 3D motion for the Leads marketing pages
   (crm-leads.html, crm-lead-stages.html). Load after page styles.

   - hero words flip up in 3D on load
   - section headings split into words (lead-3d.js) that flip in on scroll
   - revealed blocks swing in with depth instead of a flat rise
   - screens and cards tilt toward the pointer, with a soft glare
   Everything is switched off under prefers-reduced-motion.
   ============================================================ */

/* ---- hero headline: words flip up ---- */
.zh-copy h1{perspective:900px}
.zh-w{transform-origin:50% 100%;transform:rotateX(-88deg) translateY(.2em);
  animation:l3Flip .95s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes l3Flip{to{opacity:1;transform:none}}
.zh-p{transform:perspective(900px) rotateX(24deg) translateY(18px);transform-origin:50% 0}

/* ---- hero screen: turns in from an angle ---- */
.zh-art{perspective:1400px}
.ls-shot{transform-origin:60% 50%;animation:l3Screen 1.25s cubic-bezier(.2,.75,.25,1) .35s both}
@keyframes l3Screen{
  from{opacity:0;transform:rotateY(-26deg) rotateX(10deg) translateZ(-80px) translateY(30px)}
  to{opacity:1;transform:none}}

/* ---- scroll reveal with depth ---- */
.js .rv{transform:perspective(1200px) rotateX(14deg) translateY(36px);transform-origin:50% 0}
.js .rv.in{transform:none}

/* ---- headings: word by word ---- */
.split3 .w3{display:inline-block;opacity:0;transform:perspective(700px) rotateX(-80deg) translateY(.3em);transform-origin:50% 100%;
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.75,.25,1);transition-delay:calc(.12s + var(--i) * 55ms)}
.in .split3 .w3,.split3.in .w3{opacity:1;transform:none}
/* gradient words keep their gradient once split */
.split3 em{background:none}
.split3 em .w3{background:linear-gradient(90deg,#1E72B8,#6D5AE6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta .split3 em .w3{background:none;color:inherit}

/* ---- pointer tilt ---- */
.tilt3{transform-style:preserve-3d;will-change:transform}
.js .tilt3.t3,.tilt3.t3{transition:transform .08s linear,box-shadow .3s ease,opacity .8s ease}
.tilt3.t3{box-shadow:0 34px 70px rgba(15,36,72,.16)}
.tilt3:not(.t3){transition:transform .6s cubic-bezier(.2,.75,.25,1),box-shadow .4s ease,opacity .8s cubic-bezier(.22,.61,.36,1)}
.glare3{position:relative}
.glare3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),transparent 60%);transition:opacity .3s ease}
.glare3.t3::after{opacity:1}
/* lift the inner visuals a little so the tilt reads as depth */
.bx.t3 .vis{transform:translateZ(26px)}
.bx .vis{transition:transform .4s cubic-bezier(.2,.75,.25,1)}

@media (prefers-reduced-motion:reduce){
  .zh-w,.zh-p,.ls-shot{animation:none;opacity:1;transform:none}
  .js .rv{transform:none}
  .split3 .w3{opacity:1;transform:none;transition:none}
  .tilt3{transform:none!important}
  .glare3::after{display:none}
}

/* ============================================================
   3D HOVER - text and images
   ============================================================ */
/* hero headline: a wave through the words, the hovered word lifts most.
   lead-3d.js marks each word .done once its entrance ends, so the
   entrance animation no longer pins the transform. */
.zh-w.done{animation:none;opacity:1;transform:none;
  transition:transform .45s cubic-bezier(.2,.75,.25,1),text-shadow .45s ease;transition-delay:calc(var(--i,0) * 40ms)}
.zh-copy h1:hover .zh-w.done{transform:perspective(600px) rotateX(16deg) translateY(-5px)}
.zh-copy h1 .zh-w.done:hover{transform:perspective(600px) rotateX(26deg) translateY(-10px) scale(1.05);
  text-shadow:0 14px 18px rgba(15,36,72,.18);transition-delay:0s}

/* section headings: same wave, word by word */
.in .split3:hover .w3,.split3.in:hover .w3{transform:perspective(700px) rotateX(16deg) translateY(-4px)}
.in .split3 .w3:hover,.split3.in .w3:hover{transform:perspective(700px) rotateX(28deg) translateY(-9px) scale(1.05);transition-delay:0s}
.split3 .w3{cursor:default}

/* hero screens: pop forward with a light sweep */
.ls-shot::after,.nd-shot::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);
  transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.zh-art:hover .ls-shot::after,.zh-art:hover .nd-shot::after{transform:translateX(120%)}
.ls-shot,.nd-shot{transition:box-shadow .4s ease}
.zh-art:hover .ls-shot,.zh-art:hover .nd-shot{box-shadow:0 50px 90px rgba(15,36,72,.28),0 0 0 1px rgba(15,36,72,.06)}

/* card visuals push toward the viewer (own perspective, so it reads
   even though the card clips its overflow) */
.bx .vis{transform-origin:50% 60%;transition:transform .5s cubic-bezier(.2,.75,.25,1)}
.bx:hover .vis,.bx.t3 .vis{transform:perspective(900px) translateZ(34px) rotateX(4deg)}

/* icons and numbers flip in 3D */
.tag svg,.st-ic,.step .n,.st-uses li > span,.checks li svg,.facts b,.st-tag{transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.bx:hover .tag svg{transform:perspective(300px) rotateY(360deg)}
.bx:hover .st-ic{transform:perspective(400px) rotateY(180deg) scale(1.08)}
.step:hover .n{transform:perspective(500px) rotateY(360deg) translateY(-4px)}
.st-uses li:hover > span{transform:perspective(400px) rotateX(360deg)}
.checks li:hover svg{transform:perspective(300px) rotateY(360deg)}
.facts > div:hover b{transform:perspective(500px) rotateX(360deg) scale(1.06)}
.st-stage:hover .st-tag{transform:perspective(400px) rotateX(-18deg) translateY(-3px) scale(1.06)}

/* people and board cards lift */
.rr .av{transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease}
.rr .av:hover{transform:perspective(400px) translateZ(60px) translateY(-4px);box-shadow:0 0 0 4px #fff,0 16px 26px rgba(15,36,72,.25)}
.cd:not(.move){transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease}
.cd:not(.move):hover{transform:perspective(600px) rotateX(10deg) rotateY(-8deg) translateY(-5px);box-shadow:0 18px 30px rgba(15,36,72,.16)}
.lp-strip li:hover svg{transform:perspective(300px) rotateY(360deg);transition:transform .6s cubic-bezier(.2,.75,.25,1)}

@media (prefers-reduced-motion:reduce){
  .zh-copy h1:hover .zh-w,.zh-copy h1 .zh-w:hover,.split3:hover .w3,.split3 .w3:hover,
  .bx:hover .vis,.bx.t3 .vis,.bx:hover .tag svg,.bx:hover .st-ic,.step:hover .n,.st-uses li:hover > span,
  .checks li:hover svg,.facts > div:hover b,.st-stage:hover .st-tag,.rr .av:hover,.cd:hover,.lp-strip li:hover svg{transform:none}
  .ls-shot::after,.nd-shot::after{display:none}
}