/* Gallery motion is optional. The normal document is always fully visible.
   Native page transitions need same-origin navigation and browser support. */

@media (prefers-reduced-motion: no-preference) {
  @supports (view-transition-name: none) {
    @view-transition { navigation: auto; }

    /* Each name occurs once per document and follows the same photograph
       from its home-page card to the corresponding service-page hero. */
    body[data-page=home] .gallery-service-card:nth-child(1) .editorial-card-photo img,
    body[data-page=people-architecture] .editorial-service-image img {
      view-transition-name: gallery-people;
    }
    body[data-page=home] .gallery-service-card:nth-child(2) .editorial-card-photo img,
    body[data-page=wealth-architecture] .editorial-service-image img {
      view-transition-name: gallery-wealth;
    }
    body[data-page=home] .gallery-service-card:nth-child(3) .editorial-card-photo img,
    body[data-page=ai-digital-architecture] .editorial-service-image img {
      view-transition-name: gallery-digital;
    }

    /* Extend the existing page fade; text stays sharp throughout. */
    ::view-transition-old(root) {
      animation: gallery-page-out .22s ease both;
    }
    ::view-transition-new(root) {
      animation: gallery-page-in .26s ease both;
    }

    ::view-transition-group(gallery-people),
    ::view-transition-group(gallery-wealth),
    ::view-transition-group(gallery-digital) {
      animation-duration: .5s;
      animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    }

    /* Crop photographs inside the moving frame instead of distorting them
       as the card's 16:9 frame becomes the service hero's 4:3 frame. */
    ::view-transition-image-pair(gallery-people),
    ::view-transition-image-pair(gallery-wealth),
    ::view-transition-image-pair(gallery-digital) {
      overflow: hidden;
    }
    ::view-transition-old(gallery-people),
    ::view-transition-new(gallery-people),
    ::view-transition-old(gallery-wealth),
    ::view-transition-new(gallery-wealth),
    ::view-transition-old(gallery-digital),
    ::view-transition-new(gallery-digital) {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation-duration: .5s;
      animation-timing-function: ease;
    }
  }

  /* One finite accent accompanies the existing card reveal. The duration
     matches its parent animation, whose JS listens for animationend. */
  body[data-page=home]:not(.concept-motion-limited)
  .gallery-service-card.is-revealing .gallery-service-line > span {
    transform-origin: left center;
    animation: gallery-line-open .72s cubic-bezier(.21, .65, .3, 1);
  }
}

@keyframes gallery-page-out {
  to { opacity: 0; }
}
@keyframes gallery-page-in {
  from { opacity: 0; }
}
@keyframes gallery-line-open {
  from { transform: scaleX(.24); opacity: .5; }
  to { transform: scaleX(1); opacity: 1; }
}

/* Save-data mode uses the site's existing motion preference. Removing
   every named snapshot also prevents a residual native root crossfade. */
html:has(body.concept-motion-limited) {
  view-transition-name: none;
}
.concept-motion-limited .gallery-service-card .editorial-card-photo img,
.concept-motion-limited .editorial-service-image img {
  view-transition-name: none !important;
}
html:has(body.concept-motion-limited)::view-transition-group(*),
html:has(body.concept-motion-limited)::view-transition-old(*),
html:has(body.concept-motion-limited)::view-transition-new(*) {
  animation: none !important;
}
.concept-motion-limited .gallery-service-line > span {
  animation: none !important;
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  html,
  .gallery-service-card .editorial-card-photo img,
  .editorial-service-image img {
    view-transition-name: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .gallery-service-line > span {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
}

@media print {
  @view-transition { navigation: none; }
  .gallery-service-line > span { animation: none !important; }
}

/* The visitor can pause all ongoing motion without hiding any content. */
.gallery-motion-paused *,
.gallery-motion-paused *::before,
.gallery-motion-paused *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html:has(body.gallery-motion-paused),
.gallery-motion-paused .gallery-service-card .editorial-card-photo img,
.gallery-motion-paused .editorial-service-image img {
  view-transition-name: none !important;
}
html:has(body.gallery-motion-paused)::view-transition-group(*),
html:has(body.gallery-motion-paused)::view-transition-old(*),
html:has(body.gallery-motion-paused)::view-transition-new(*) {
  animation: none !important;
}
.motion-settings-trigger { min-height: 44px; }
.clip-toggle:disabled, #video-toggle:disabled { opacity: .55; cursor: default; }