/* Shared motion system: calm, consistent movement across every public template. */
:root {
  --motion-fast: 180ms;
  --motion-ui: 240ms;
  --motion-reveal: 620ms;
  --motion-hero: 760ms;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.25, .8, .25, 1);
}

@view-transition {
  navigation: auto;
}

@keyframes motion-page-out {
  from { opacity: 1; }
  to { opacity: .88; }
}

@keyframes motion-page-in {
  from { opacity: .01; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: motion-page-out var(--motion-fast) ease-out both;
}

::view-transition-new(root) {
  animation: motion-page-in 320ms var(--motion-ease-soft) both;
}

.motion-ready .motion-item {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity var(--motion-reveal) var(--motion-ease-soft),
    translate var(--motion-reveal) var(--motion-ease-out),
    scale var(--motion-reveal) var(--motion-ease-out);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, translate, scale;
}

.motion-ready .motion-item[data-motion-kind="hero"] {
  transition-duration: var(--motion-hero);
}

.motion-ready .motion-item[data-motion="scale"] {
  translate: 0 12px;
  scale: .985;
}

.motion-ready .motion-item[data-motion="fade"] {
  translate: none;
}

.motion-ready .motion-item.is-visible {
  opacity: 1;
  translate: none;
  scale: 1;
  will-change: auto;
}

/* Home difference card: scroll-linked arrival that settles at its authored position. */
.difference-card {
  --difference-scroll-blur: 0px;
  --difference-scroll-offset: 0px;
  --difference-scroll-opacity: 1;
}

.difference-scroll-ready .difference-card {
  opacity: var(--difference-scroll-opacity);
  filter: blur(var(--difference-scroll-blur));
  translate: 0 var(--difference-scroll-offset);
  will-change: opacity, filter, translate;
}

.difference-scroll-ready .difference-card.is-scroll-settled {
  will-change: auto;
}

/* Home flow: only Services and Team follow scroll into place. */
.home-scroll-item {
  --home-scroll-blur: 0px;
  --home-scroll-offset: 0px;
  --home-scroll-opacity: 1;
}

.home-sections-scroll-ready .home-scroll-item {
  opacity: var(--home-scroll-opacity);
  filter: blur(var(--home-scroll-blur));
  transform: translate3d(0, var(--home-scroll-offset), 0);
  will-change: opacity, filter, transform;
}

.home-sections-scroll-ready .home-scroll-item.is-home-scroll-settled {
  will-change: auto;
}

.home-sections-scroll-ready .home-scroll-item.motion-card {
  transition:
    translate var(--motion-ui) var(--motion-ease-out),
    box-shadow var(--motion-ui) var(--motion-ease-soft);
}

.motion-card {
  transition:
    translate var(--motion-ui) var(--motion-ease-out),
    box-shadow var(--motion-ui) var(--motion-ease-soft),
    filter var(--motion-ui) ease;
}

.motion-card img {
  transition:
    transform 700ms var(--motion-ease-out),
    filter var(--motion-ui) ease;
}

.profile-dialog {
  opacity: 0;
  transform: scale(.98);
  transition:
    display var(--motion-ui) allow-discrete,
    overlay var(--motion-ui) allow-discrete,
    opacity var(--motion-ui) ease,
    transform var(--motion-ui) var(--motion-ease-out);
}

.profile-dialog[open] {
  opacity: 1;
  transform: scale(1);
}

.profile-dialog::backdrop {
  opacity: 0;
  transition:
    display var(--motion-ui) allow-discrete,
    overlay var(--motion-ui) allow-discrete,
    opacity var(--motion-ui) ease;
}

.profile-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .profile-dialog[open] {
    opacity: 0;
    transform: scale(.98);
  }

  .profile-dialog[open]::backdrop {
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .motion-card:hover,
  .motion-card:focus-within {
    translate: 0 -3px;
    filter: saturate(1.025);
  }

  .service-card.motion-card:hover img,
  .service-showcase.motion-card:hover img,
  .service-library-card.motion-card:hover img,
  .staff-card.motion-card:hover .portrait img,
  .legacy-card.motion-card:hover > img {
    transform: scale(1.015);
  }

  .home-sections-scroll-ready .home-scroll-item.motion-card:hover,
  .home-sections-scroll-ready .home-scroll-item.motion-card:focus-within {
    filter: blur(var(--home-scroll-blur)) saturate(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .motion-ready .motion-item,
  .motion-ready .motion-item[data-motion-kind="hero"],
  .motion-ready .motion-item[data-motion="scale"],
  .motion-ready .motion-item[data-motion="fade"] {
    opacity: 1;
    translate: none;
    scale: 1;
    transition: none;
  }

  .difference-scroll-ready .difference-card {
    opacity: 1;
    filter: none;
    translate: none;
    will-change: auto;
  }

  .home-sections-scroll-ready .home-scroll-item {
    opacity: 1;
    filter: none;
    transform: none;
    will-change: auto;
  }

  .motion-card,
  .motion-card img,
  .profile-dialog,
  .profile-dialog::backdrop {
    transition: none;
  }
}