/* ==========================================================
   PS Digitise — Premium page animations
   Used by: /industries/* and /products/* pages
   Pairs with: assets/js/page-animations.js
   Everything is gated behind html.psd-anim (set only when the
   visitor has NOT asked for reduced motion), so content is never
   hidden if CSS/JS fails.
   ========================================================== */

html.psd-anim{
  --psd-ease:cubic-bezier(.22,1,.36,1);
  --psd-purple:107,47,204;
  --psd-magenta:192,38,211;
}

/* ---------- 2. Hero entrance (pure CSS, no flash) ---------- */
@keyframes psdHeroUp{
  from{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes psdHeroRight{
  from{opacity:0;transform:translate3d(48px,20px,0) scale(.95);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes psdFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -9px}
}
@keyframes psdAura{
  from{transform:scale(1) translate3d(0,0,0);opacity:1}
  to{transform:scale(1.12) translate3d(-1.5%,1.5%,0);opacity:.85}
}

html.psd-anim .crm-hero-left,
html.psd-anim .aa-hero-screen,
html.psd-anim .crm-screen{animation:none}

html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *,
html.psd-anim .hero-inner > div:not([class]) > *,
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats){
  animation:psdHeroUp .95s var(--psd-ease) backwards;
}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(1),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(1){animation-delay:80ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(2),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(2){animation-delay:175ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(3),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(3){animation-delay:270ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(4),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(4){animation-delay:365ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(5),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(5){animation-delay:460ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(6),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(6){animation-delay:555ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(7),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(7){animation-delay:650ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(8),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(8){animation-delay:745ms}
html.psd-anim :is(.aa-hero-left,.crm-hero-left,.aa-hero-grid > div:not([class]),.crm-hero-grid > div:not([class])) > *:nth-child(9),
html.psd-anim .hero-inner > div:not([class]) > *:nth-child(9){animation-delay:840ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(1){animation-delay:80ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(2){animation-delay:175ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(3){animation-delay:270ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(4){animation-delay:365ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(5){animation-delay:460ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(6){animation-delay:555ms}
html.psd-anim .hero-inner > :is(.h-eyebrow,h1,.h1-sub,.hero-cta-row,.hero-stats):nth-child(7){animation-delay:650ms}

html.psd-anim :is(.aa-hero-screen,.crm-screen,.hero-inner > .wh-visual,.hero-inner > .bmock){
  animation:
    psdHeroRight 1.15s var(--psd-ease) .35s backwards,
    psdFloat 8s ease-in-out 1.8s infinite;
}
html.psd-anim :is(.aa-hero,.crm-hero)::before{
  animation:psdAura 16s ease-in-out infinite alternate;
  transform-origin:30% 30%;
}

/* ---------- 3. Scroll reveal (driven by JS) ---------- */
html.psd-anim .psd-pre{opacity:0}

/* ---------- 4. Premium hover — cards & buttons ---------- */
@media (hover:hover) and (pointer:fine){
  html.psd-anim .psd-lift{
    transition:translate .45s var(--psd-ease),box-shadow .45s var(--psd-ease),
      border-color .3s ease,background-color .3s ease,color .3s ease,transform .3s ease,opacity .3s ease;
  }
  html.psd-anim .psd-lift:hover{
    translate:0 -7px;
    box-shadow:0 22px 44px -14px rgba(var(--psd-purple),.34),0 0 0 1px rgba(var(--psd-purple),.14);
  }
  html.psd-anim .psd-btn{
    transition:translate .35s var(--psd-ease),filter .3s ease,box-shadow .35s var(--psd-ease);
  }
  html.psd-anim .psd-btn:hover{
    translate:0 -3px;
    filter:brightness(1.07) saturate(1.05);
    box-shadow:0 14px 30px -8px rgba(var(--psd-magenta),.5);
  }
  html.psd-anim .psd-btn:active{translate:0 -1px;transition-duration:.1s}
}

/* ---------- 5. Tab panes + list items ---------- */
@keyframes psdPane{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
@keyframes psdItem{
  from{opacity:0;transform:translate3d(-14px,0,0)}
  to{opacity:1;transform:none}
}
html.psd-anim :is(.aa-mt-panel.aa-on,.mod-pane.active,.ft-panel.on){
  animation:psdPane .55s var(--psd-ease) backwards;
}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *{
  animation:psdItem .6s var(--psd-ease) backwards;
}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(1){animation-delay:120ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(2){animation-delay:190ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(3){animation-delay:260ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(4){animation-delay:330ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(5){animation-delay:400ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(6){animation-delay:470ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(7){animation-delay:540ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(8){animation-delay:610ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(9){animation-delay:680ms}
html.psd-anim :is(.aa-mt-panel.aa-on .aa-mt-list,.mod-pane.active .mod-list,.ft-panel.on .ft-list) > *:nth-child(10){animation-delay:750ms}

/* ---------- 6. FAQ answers ease in ---------- */
@keyframes psdFaq{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
html.psd-anim :is(.aa-faq-item.aa-open,.faq-item.open) :is(.aa-faq-a,.faq-a) > *{
  animation:psdFaq .45s var(--psd-ease) .08s backwards;
}

/* ---------- 7. Numbers stay steady while counting ---------- */
.psd-count{font-variant-numeric:tabular-nums}

/* ---------- Safety nets ---------- */
@media print{
  html.psd-anim .psd-pre{opacity:1!important}
}