/* Shared motion language for service and activity-record pages. */

[data-aos="title-expand"] {
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform: scaleX(.86);
  transform-origin: center;
  transition-property: opacity, clip-path, transform;
}

[data-aos="title-expand"].aos-animate {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: scaleX(1);
}

[data-aos="title-gentle"] {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.99);
  transition-property: opacity, transform;
}

[data-aos="title-gentle"].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-hero .sep_vt[data-aos="line-grow"] {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition-property: opacity, transform;
}

.motion-hero .sep_vt[data-aos="line-grow"].aos-animate {
  opacity: 1;
  transform: scaleY(1);
}

/* Shared handoff from the fixed service hero into the reading sections. */
.motion-service-hero {
  --service-hero-scale: 1.035;
  --service-hero-brightness: 1;
  --service-hero-overlay-opacity: 0;
  --service-hero-title-y: 0px;
  --service-hero-title-opacity: 1;
}

.motion-service-hero .fixed_bg {
  transform: scale(var(--service-hero-scale));
  transform-origin: center;
  filter: brightness(var(--service-hero-brightness));
  will-change: transform, filter;
}

.motion-service-hero .fixed_bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--color-4);
  opacity: var(--service-hero-overlay-opacity);
  pointer-events: none;
}

.motion-service-hero > .container {
  opacity: var(--service-hero-title-opacity);
  transform: translate3d(0, var(--service-hero-title-y), 0);
  will-change: opacity, transform;
}

.service-gallery-bridge {
  --service-gallery-bridge-height: clamp(72px, 10vh, 110px);
  position: relative;
  z-index: 1;
  height: var(--service-gallery-bridge-height);
  margin-top: calc(-1 * var(--service-gallery-bridge-height));
  background: linear-gradient(180deg, transparent 0%, rgba(19, 20, 36, .7) 58%, var(--color-4) 100%);
  pointer-events: none;
}

.service-gallery-transition {
  position: relative;
  z-index: 2;
}

.motion-tab-panel {
  animation: motion-tab-enter .35s cubic-bezier(.22, .61, .36, 1) both;
}

.motion-tab-group .button.is_tab {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--motion-tab-delay, 0ms);
}

.motion-tab-group.aos-animate .button.is_tab {
  opacity: 1;
  transform: translateY(0);
}

.motion-feature-group > [class*="col-"],
.motion-related-group .related-services__link {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
    transform .65s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--motion-item-delay, 0ms);
}

.motion-feature-group.aos-animate > [class*="col-"],
.motion-related-group.aos-animate .related-services__link {
  opacity: 1;
  transform: translateY(0);
}

.motion-gallery-later.motion-revealed {
  animation: motion-gallery-enter .65s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--motion-delay, 0ms);
}

.motion-more-exit {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

@keyframes motion-tab-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-gallery-enter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 767.98px) {
  .service-gallery-bridge {
    --service-gallery-bridge-height: clamp(56px, 8vh, 76px);
  }

  [data-aos="title-expand"] {
    clip-path: inset(0 35% 0 35%);
    transform: scaleX(.92);
  }

  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 20px, 0) scale(.99) !important;
  }

  .motion-feature-group > [class*="col-"] {
    transition-delay: 100ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-service-hero .fixed_bg {
    transform: none !important;
    filter: none !important;
    will-change: auto;
  }

  .motion-service-hero .fixed_bg::after {
    opacity: 0 !important;
  }

  .motion-service-hero > .container {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  [data-aos],
  [data-aos].aos-animate,
  .motion-hero .sep_vt[data-aos="line-grow"],
  .motion-hero .sep_vt[data-aos="line-grow"].aos-animate {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-tab-panel,
  .motion-gallery-later.motion-revealed {
    animation: none !important;
  }

  .motion-tab-group .button.is_tab {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-feature-group > [class*="col-"],
  .motion-related-group .related-services__link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}