/* =========================================================
   AstraShilp — motion
   Two ideas only: content settles into place as it arrives,
   and things you can point at respond a little. Nothing loops,
   nothing follows the cursor, nothing announces itself.

   Elements are marked from motion.js, never in the markup, so
   if the script does not run nothing is left hidden.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* The attribute is doubled on purpose. A component rule further down, like
     `.scard { transition: transform ... }`, uses the transition shorthand,
     which REPLACES the transition it would otherwise inherit. At equal
     specificity the later rule wins, so cards were snapping from invisible to
     visible with no animation at all. Doubling the attribute lifts these above
     any single-class rule, whatever order they end up in.
     Once an element has arrived motion.js strips the attribute, so the
     component's own hover transition takes over again. */

  /* --- content rises into place. `translate`, not `transform`,
         so component hover transforms still compose on top --- */
  [data-rise][data-rise] {
    opacity: 0;
    translate: 0 calc(18 * var(--u, 1px));
    transition: opacity .85s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
                translate .85s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
  }
  [data-rise][data-rise].in { opacity: 1; translate: 0 0; }

  /* --- large media simply fades; no movement on something that big --- */
  [data-fade][data-fade] {
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
  }
  [data-fade][data-fade].in { opacity: 1; }

  /* --- the label's line draws out from its centre --- */
  [data-draw][data-draw] {
    scale: 0 1;
    transition: scale .95s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
  }
  [data-draw][data-draw].in { scale: 1 1; }

  /* --- a card lifts a little under the pointer --- */
  .scard, .engage__card {
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
                border-color .45s ease, box-shadow .45s ease;
  }
  .scard:hover, .engage__card:hover {
    transform: translateY(calc(-4 * var(--u, 1px)));
    border-color: rgba(90, 190, 255, .40);
    box-shadow: 0 calc(20 * var(--u, 1px)) calc(44 * var(--u, 1px)) calc(-26 * var(--u, 1px)) rgba(20, 90, 160, .8);
  }
  .scard__media img { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
  .scard:hover .scard__media img { transform: scale(1.03); }

  /* --- the small icon rows --- */
  .ind, .imp { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
  .ind:hover, .imp:hover { transform: translateY(calc(-3 * var(--u, 1px))); }
  .ind__ic svg, .imp__ic svg, .engage__card .circ svg { transition: filter .45s ease; }
  .ind:hover .ind__ic svg, .imp:hover .imp__ic svg,
  .engage__card:hover .circ svg { filter: drop-shadow(0 0 calc(8 * var(--u, 1px)) rgba(90, 190, 255, .55)); }

  /* --- the framework trio on the home page --- */
  .fi-circle { transition: box-shadow .5s ease, border-color .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
  .fi:hover .fi-circle {
    transform: translateY(calc(-3 * var(--u, 1px)));
    border-color: rgba(150, 225, 255, .75);
    box-shadow: 0 0 calc(40 * var(--u, 1px)) calc(-4 * var(--u, 1px)) rgba(70, 180, 255, .6), inset 0 0 calc(24 * var(--u, 1px)) rgba(40, 120, 220, .3);
  }

  /* --- the who-we-are collage --- */
  .who-gallery > div { overflow: hidden; }
  .who-gallery img { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
  .who-gallery > div:hover img { transform: scale(1.035); }

  /* --- buttons lean in, quietly --- */
  .btn, .pf-btn, .cn-btn, .as-nav-cta {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .3s ease,
                border-color .3s ease, box-shadow .35s ease, filter .3s ease;
  }
  .btn:hover, .pf-btn:hover, .cn-btn:hover { transform: translateY(calc(-2 * var(--u, 1px))); }
}