:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 420ms;
  --motion-slow: 900ms;
}

html.motion-enabled .announcement,
html.motion-enabled .site-header,
html.motion-enabled .sg-hero-copy > *,
html.motion-enabled .service-hero > .shell > div:first-child > *,
html.motion-enabled .svc-hero-copy > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

html.motion-loaded .announcement {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease 80ms, transform 600ms var(--motion-ease) 80ms;
}

html.motion-loaded .site-header {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease 160ms, transform 800ms var(--motion-ease) 160ms,
    top 300ms ease, width 300ms ease, min-height 300ms ease, box-shadow 300ms ease;
}

html.motion-loaded .sg-hero-copy > *,
html.motion-loaded .service-hero > .shell > div:first-child > *,
html.motion-loaded .svc-hero-copy > * {
  opacity: 1;
  transform: none;
  transition: opacity 850ms ease, transform 950ms var(--motion-ease);
}

html.motion-loaded .sg-hero-copy > :nth-child(1),
html.motion-loaded .service-hero > .shell > div:first-child > :nth-child(1),
html.motion-loaded .svc-hero-copy > :nth-child(1) { transition-delay: 260ms; }
html.motion-loaded .sg-hero-copy > :nth-child(2),
html.motion-loaded .service-hero > .shell > div:first-child > :nth-child(2),
html.motion-loaded .svc-hero-copy > :nth-child(2) { transition-delay: 360ms; }
html.motion-loaded .sg-hero-copy > :nth-child(3),
html.motion-loaded .service-hero > .shell > div:first-child > :nth-child(3),
html.motion-loaded .svc-hero-copy > :nth-child(3) { transition-delay: 480ms; }
html.motion-loaded .sg-hero-copy > :nth-child(4),
html.motion-loaded .service-hero > .shell > div:first-child > :nth-child(4),
html.motion-loaded .svc-hero-copy > :nth-child(4) { transition-delay: 600ms; }

html.motion-enabled [data-reveal] {
  --motion-x: 0px;
  --motion-y: 58px;
  opacity: 0;
  transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(.985);
  transition: opacity 900ms ease var(--motion-delay, 0ms),
    transform 1050ms var(--motion-ease) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-enabled [data-reveal].motion-left { --motion-x: -64px; --motion-y: 0px; }
html.motion-enabled [data-reveal].motion-right { --motion-x: 64px; --motion-y: 0px; }
html.motion-enabled [data-reveal].motion-zoom { --motion-y: 0px; transform: scale(.92); }

html.motion-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-parallax {
  --parallax-y: 0px;
  translate: 0 var(--parallax-y);
  scale: 1.055;
  will-change: translate;
}

.sg-editorial-image-main,
.svc-formation-visual,
.svc-finance-image,
.p-latest-card {
  overflow: hidden;
}

.sg-editorial-image-main img,
.svc-formation-visual img,
.svc-finance-image img,
.p-latest-card img,
.sg-office-image {
  transition: transform 1.2s var(--motion-ease), filter 700ms ease;
}

.motion-float {
  animation: motion-float 5s ease-in-out infinite;
}

.motion-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: var(--orange, #fa6400);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 520ms var(--motion-ease);
}

.motion-transition::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #0a0909;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 480ms var(--motion-ease) 90ms;
}

html.motion-leaving .motion-transition,
html.motion-leaving .motion-transition::after { transform: scaleY(1); }

.page-progress span {
  box-shadow: 0 0 18px rgba(250, 100, 0, .7);
  transition: width 80ms linear;
}

.site-header::after {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  content: "";
  background: var(--orange, #fa6400);
  transform: scaleX(var(--motion-scroll, 0));
  transform-origin: left;
}

@media (hover: hover) {
  .btn, .header-cta, .sg-text-link, .text-link, .p-dark-link, .p-quiet-link {
    transition: color var(--motion-fast) ease, background var(--motion-fast) ease,
      border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease),
      box-shadow var(--motion-fast) ease;
  }

  .btn:hover, .header-cta:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(250,100,0,.2); }
  .btn:hover span, .header-cta:hover span { transform: translate(5px, -3px); }

  .sg-audience-list a,
  .sg-service-group a,
  .sg-package-table > a,
  .sg-method-list li,
  .card,
  .p-latest-card,
  .svc-decision-list article,
  .svc-related-list a {
    transition: transform 520ms var(--motion-ease), background 420ms ease,
      color 420ms ease, border-color 420ms ease, box-shadow 520ms ease;
  }

  .sg-audience-list a:hover,
  .sg-package-table > a:hover,
  .sg-method-list li:hover,
  .card:hover,
  .p-latest-card:hover,
  .svc-decision-list article:hover,
  .svc-related-list a:hover {
    z-index: 2;
    transform: translateY(-10px);
    box-shadow: 0 28px 70px rgba(10,9,9,.12);
  }

  .sg-service-group a:hover { transform: translateX(12px); }
  .p-latest-card:hover img,
  .sg-editorial-image-main:hover img,
  .svc-formation-visual:hover img,
  .svc-finance-image:hover img { transform: scale(1.055); filter: saturate(1.08); }
}

@keyframes motion-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled *, html.motion-loaded * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  html.motion-enabled [data-reveal],
  html.motion-enabled .announcement,
  html.motion-enabled .site-header,
  html.motion-enabled .sg-hero-copy > *,
  html.motion-enabled .service-hero > .shell > div:first-child > *,
  html.motion-enabled .svc-hero-copy > * {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .motion-parallax { translate: none; scale: 1; }
  .motion-transition { display: none; }
}