/* fix38 motion, ported from fix35 and adapted for the fix36/37 company section.
   No copy/layout/color/type changes. Content stays fully visible without .motion-on. */

/* --- 1. Scroll reveal (only when JS opts in with .motion-on) --- */
.motion-on .m-reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.motion-on .m-reveal.is-in{
  opacity:1;
  transform:none;
}
.motion-on .m-reveal.m-delay-1{transition-delay:.08s}
.motion-on .m-reveal.m-delay-2{transition-delay:.16s}
.motion-on .m-reveal.m-delay-3{transition-delay:.24s}
.motion-on .m-reveal.m-delay-4{transition-delay:.32s}
.motion-on .m-reveal.m-delay-5{transition-delay:.4s}

/* Company switch gets a slightly fuller rise */
.motion-on #company.m-reveal,
.motion-on #company .m-reveal{
  transform:translate3d(0,28px,0);
}
.motion-on #company.m-reveal.is-in,
.motion-on #company .m-reveal.is-in{
  transform:none;
}

/* --- 2. Micro-interactions: button lift ~8px, photo zoom ~1.07 --- */
.motion-on .btn{
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .3s, border-color .3s, color .3s;
}
.motion-on .btn:hover{
  transform:translate3d(0,-8px,0);
  box-shadow:0 14px 32px -16px rgba(13,31,23,.55);
}
.motion-on .btn:active{
  transform:translate3d(0,0,0) scale(.985);
  box-shadow:0 4px 14px -10px rgba(13,31,23,.4);
}
.motion-on .g-L .btn:hover,
.motion-on .find-card .btn:hover,
.motion-on .route .btn:hover{
  box-shadow:0 16px 34px -16px rgba(13,31,23,.45);
}

/* Soft image shift inside figures, solution cards, and demo panels. Corners stay square. */
.motion-on .v-ph,
.motion-on .s-ph,
.motion-on .a-ph,
.motion-on .sol-shot,
.motion-on .f36-visual picture{
  overflow:hidden;
}
.motion-on .v-ph img,
.motion-on .s-ph img,
.motion-on .a-ph img,
.motion-on .sol-shot img,
.motion-on .f36-visual img{
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  transform:scale(1);
  transform-origin:50% 50%;
}
.motion-on .v-ph:hover img,
.motion-on .s-ph:hover img,
.motion-on .a-ph:hover img,
.motion-on .sol-shot:hover img,
.motion-on .f36-visual:hover img{
  transform:scale(1.07);
}

/* Soft card lift for keynote/training cards and leftover sol tiles */
.motion-on .card .art{
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.motion-on .card:hover .art{
  box-shadow:0 -18px 50px -28px rgba(0,0,0,.4), 0 18px 40px -30px rgba(13,31,23,.25);
}
.motion-on .sol{
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, opacity .55s ease, filter .55s ease;
}
.motion-on .sol:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -28px rgba(13,31,23,.4);
}

/* --- 3. Animated gallery: venues photo + list stagger --- */
.motion-on #venues .v-ph.m-reveal{
  transform:translate3d(0,24px,0) scale(.985);
}
.motion-on #venues .v-ph.m-reveal.is-in{
  transform:none;
}
.motion-on #venues .v-list li.m-reveal{
  transform:translate3d(0,14px,0);
}

/* --- 4. Portfolio: What we've built tab panels (homepage) + work-with-us rows --- */
.motion-on #solutions .sol.m-reveal,
.motion-on .demo-index .demo-row.m-reveal{
  transform:translate3d(0,22px,0);
  opacity:0;
}
.motion-on #solutions .sol.m-reveal.is-in,
.motion-on .demo-index .demo-row.m-reveal.is-in{
  transform:none;
  opacity:1;
}
.motion-on .f36-panel.f38-swap{
  animation:f38-panel-in .45s cubic-bezier(.22,1,.36,1);
}
@keyframes f38-panel-in{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

/* Soft crossfade emphasis while scrolling through leftover sol grids (desktop) */
@media (hover:hover) and (min-width:761px){
  .motion-on #solutions.m-port .sol.is-in{
    opacity:.78;
    filter:saturate(.9);
  }
  .motion-on #solutions.m-port .sol.is-focus{
    opacity:1;
    filter:none;
    transform:translateY(-4px);
  }
}

@media (hover:none){
  .motion-on .v-ph:hover img,
  .motion-on .s-ph:hover img,
  .motion-on .a-ph:hover img,
  .motion-on .sol-shot:hover img,
  .motion-on .f36-visual:hover img{
    transform:none;
  }
  .motion-on .btn:hover{
    transform:none;
    box-shadow:none;
  }
  .motion-on .sol:hover{
    transform:none;
    box-shadow:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .motion-on .m-reveal,
  .motion-on .m-reveal.is-in,
  .motion-on #company.m-reveal,
  .motion-on #company .m-reveal,
  .motion-on #venues .v-ph.m-reveal,
  .motion-on #solutions .sol.m-reveal,
  .motion-on .demo-index .demo-row.m-reveal,
  .motion-on #solutions.m-port .sol,
  .motion-on #solutions.m-port .sol.is-focus,
  .motion-on .f36-panel.f38-swap{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    animation:none !important;
  }
  .motion-on .btn,
  .motion-on .btn:hover,
  .motion-on .btn:active,
  .motion-on .v-ph img,
  .motion-on .s-ph img,
  .motion-on .a-ph img,
  .motion-on .sol-shot img,
  .motion-on .f36-visual img,
  .motion-on .sol,
  .motion-on .card .art{
    transition:none !important;
    transform:none !important;
    box-shadow:none !important;
  }
}