/*
 * ESPO Motion System — 2.5.1.123
 * Progressive, brand-aligned motion. No layout shifts; reduced-motion users
 * receive static content.
 */

:root {
  --espo-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --espo-motion-ease-soft: cubic-bezier(.2, .75, .25, 1);
}

/* Branded progress marker: 2px, fixed, and outside document flow. */
.espo-scroll-progress {
  position: fixed;
  z-index: 10020;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  transform: scaleX(var(--espo-scroll-progress, 0));
  transform-origin: left center;
  background: #0072bc;
  opacity: .72;
  box-shadow: 0 1px 6px rgba(0, 114, 188, .12);
  will-change: transform;
}
[dir="rtl"] .espo-scroll-progress { transform-origin: right center; }

/* More refined version of the existing reveal system. */
.reveal.espo-reveal-ready {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .72s var(--espo-motion-ease),
    transform .78s var(--espo-motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.espo-reveal-ready.espo-motion-scale {
  transform: translate3d(0, 18px, 0) scale(.985);
}
.reveal.espo-reveal-ready.is-visible,
.reveal.espo-reveal-ready.espo-motion-scale.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Hero first-view choreography moved to hero-motion-premium.css in 2.5.1.123.58. */

/* Subtle ambient movement keeps the Home hero alive without distracting. */
.espo-motion-enabled .espo-premium-hero__ambient {
  animation: espo-ambient-drift 12s ease-in-out infinite alternate;
}
.espo-motion-enabled .espo-premium-hero__halo {
  animation: espo-halo-breathe 8s ease-in-out infinite alternate;
}
@keyframes espo-ambient-drift {
  from { translate: -8px -3px; scale: 1; }
  to { translate: 10px 5px; scale: 1.025; }
}
@keyframes espo-halo-breathe {
  from { opacity: .55; scale: .985; }
  to { opacity: .82; scale: 1.025; }
}

/* Scroll depth. Individual translate composes with existing transform rules. */
.espo-motion-parallax {
  translate: 0 var(--espo-parallax-y, 0px);
  transition: translate .12s linear;
  will-change: translate;
}

/* Cards already have approved lift/zoom states in the page styles. The motion
 * layer adds only a pointer-following light response so it does not fight
 * those existing transforms.
 */
@media (hover: hover) and (pointer: fine) {
  .espo-motion-pointer {
    position: relative;
    isolation: isolate;
  }
  .espo-motion-pointer::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(
        220px circle at var(--espo-pointer-x, 50%) var(--espo-pointer-y, 50%),
        rgba(0, 114, 188, .055),
        transparent 68%
      );
    transition: opacity .3s ease;
  }
  .espo-motion-pointer:hover::after { opacity: 1; }

  :is(.espo-btn, .espo-service-link, .espo-service-card__link, .espo-project-card__link, .espo-premium-hero__event-link) {
    transition:
      translate .3s var(--espo-motion-ease),
      color .3s ease,
      background-color .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;
  }
  :is(.espo-btn, .espo-service-link, .espo-service-card__link, .espo-project-card__link, .espo-premium-hero__event-link):hover {
    translate: 0 -2px;
  }

  .espo-service-card__action,
  .espo-project-card__link,
  .espo-service-link {
    transition: gap .35s var(--espo-motion-ease), translate .3s var(--espo-motion-ease);
  }
  :is(.espo-service-card, .espo-project-card):hover :is(.espo-service-card__action, .espo-project-card__link),
  .espo-service-link:hover {
    gap: .7rem;
  }
}

/* Mobile menu opens as one compact surface; links follow with a small stagger. */
.espo-motion-enabled .espo-mobile-menu:not([hidden]) {
  animation: espo-mobile-menu-in .28s var(--espo-motion-ease) both;
}
.espo-motion-enabled .espo-mobile-menu:not([hidden]) > div > a {
  animation: espo-mobile-link-in .32s var(--espo-motion-ease) both;
}
.espo-motion-enabled .espo-mobile-menu:not([hidden]) > div > a:nth-child(2) { animation-delay: 35ms; }
.espo-motion-enabled .espo-mobile-menu:not([hidden]) > div > a:nth-child(3) { animation-delay: 70ms; }
.espo-motion-enabled .espo-mobile-menu:not([hidden]) > div > a:nth-child(4) { animation-delay: 105ms; }
.espo-motion-enabled .espo-mobile-menu:not([hidden]) > div > a:nth-child(5) { animation-delay: 140ms; }
@keyframes espo-mobile-menu-in {
  from { opacity: 0; translate: 0 -7px; scale: .992; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes espo-mobile-link-in {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}

/* Search/dropdowns/lightbox feel less abrupt while preserving accessibility. */
.espo-search-popover.is-open,
.espo-language-dropdown.is-open .espo-language-dropdown__menu,
.espo-services-menu:hover .espo-services-dropdown,
.espo-services-menu:focus-within .espo-services-dropdown {
  animation: espo-popover-in .24s var(--espo-motion-ease) both;
}
@keyframes espo-popover-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
.espo-project-lightbox-panel img {
  animation: espo-lightbox-image-in .34s var(--espo-motion-ease) both;
}
@keyframes espo-lightbox-image-in {
  from { opacity: .35; scale: .992; }
  to { opacity: 1; scale: 1; }
}

/* Accessibility and battery/performance fallback. */
@media (prefers-reduced-motion: reduce) {
  .espo-scroll-progress { display: none !important; }
  .espo-motion-parallax { translate: none !important; }
  .espo-premium-hero__ambient,
  .espo-premium-hero__halo { animation: none !important; }
  .espo-motion-pointer::after { display: none !important; }
}

/* ==========================================================================
   ESPO Motion System 2.5.1.123 — cohesive luxury scroll-reactive layer
   ========================================================================== */

:root { --espo-motion-strong-ease: cubic-bezier(.16, 1, .3, 1); }

/* Stronger reveals: directional movement + a brief focus-in. */
.espo-motion-enabled .reveal.espo-reveal-ready {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.992);
  transition:
    opacity .74s var(--espo-motion-strong-ease),
    transform .84s var(--espo-motion-strong-ease);
}
.espo-motion-enabled .reveal.espo-reveal-ready.is-visible,
.espo-motion-enabled .reveal.espo-reveal-ready.espo-motion-scale.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Editorial section rhythm: one restrained signature rule, identical everywhere.
 * No rotating section colours and no extra construction markers. */
.espo-motion-enabled .espo-motion-section {
  position: relative;
  --espo-scene-heading-y: 0px;
  --espo-scene-media-y: 0px;
}
.espo-motion-enabled .espo-motion-section-marker { display: none !important; }

.espo-motion-enabled .espo-motion-heading {
  position: relative;
  translate: 0 var(--espo-scene-heading-y);
  transition: translate .12s linear;
}
.espo-motion-enabled .espo-motion-heading::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-block-start: .46em;
  background: linear-gradient(90deg, rgba(0,114,188,.78) 0 10px, currentColor 10px 100%);
  opacity: .28;
  transition: width .72s .1s var(--espo-motion-strong-ease);
}
[dir="rtl"] .espo-motion-enabled .espo-motion-heading::after {
  background: linear-gradient(270deg, rgba(0,114,188,.78) 0 10px, currentColor 10px 100%);
}
.espo-motion-enabled .espo-motion-section.is-motion-active .espo-motion-heading::after,
.espo-motion-enabled .espo-motion-section.is-motion-seen .espo-motion-heading::after {
  width: 50px;
}

/* Media wipes are visibly different from text fades. */
.espo-motion-enabled .espo-motion-media {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 6% 0 0);
  opacity: .86;
  translate: 0 var(--espo-scene-media-y);
  scale: .994;
  transition:
    clip-path 1.05s var(--espo-motion-strong-ease),
    opacity .72s ease,
    scale 1s var(--espo-motion-strong-ease),
    translate .12s linear;
}
[dir="rtl"] .espo-motion-enabled .espo-motion-media { clip-path: inset(0 0 0 6%); }
.espo-motion-enabled .espo-motion-section.is-motion-active .espo-motion-media,
.espo-motion-enabled .espo-motion-section.is-motion-seen .espo-motion-media {
  clip-path: inset(0);
  opacity: 1;
  scale: 1;
}

/* Home hero: visual wipe + mouse/scroll depth. */
.espo-motion-enabled .espo-motion-boot:not(.espo-motion-loaded) .espo-premium-hero__visual {
  clip-path: inset(0 0 34% 0);
  scale: 1.018;
}
.espo-motion-enabled .espo-motion-loaded .espo-premium-hero__visual {
  clip-path: inset(0);
  scale: 1;
  transition:
    clip-path .95s .08s var(--espo-motion-strong-ease),
    scale 1.15s .08s var(--espo-motion-strong-ease);
}
.espo-motion-enabled .espo-premium-hero__content {
  translate: 0 var(--espo-hero-copy-y, 0px);
  transition: translate .12s linear;
}
.espo-motion-enabled .espo-premium-hero__visual-wrap {
  translate: 0 var(--espo-hero-wrap-y, 0px);
  transition: translate .12s linear;
}
.espo-motion-enabled .espo-premium-hero__image > :is(img, video) {
  transform:
    translate3d(
      var(--espo-hero-x, 0px),
      calc(var(--espo-hero-y, 0px) + var(--espo-hero-scroll-y, 0px)),
      0
    )
    scale(var(--espo-hero-scale, 1.035));
  transition: transform .18s ease-out;
  will-change: transform;
}
.espo-motion-enabled .espo-premium-hero__corner { opacity: .72; }
.espo-motion-enabled .espo-premium-hero__visual::after { animation: none; }

/* Interactive cards respond to pointer position. */
@media (hover: hover) and (pointer: fine) {
  .espo-motion-enabled .espo-motion-pointer {
    --espo-card-x: 0px;
    --espo-card-y: 0px;
    --espo-card-scale: 1;
    translate: var(--espo-card-x) var(--espo-card-y);
    scale: var(--espo-card-scale);
    transition:
      translate .22s ease-out,
      scale .32s var(--espo-motion-strong-ease),
      box-shadow .35s ease;
    will-change: translate, scale;
  }
  .espo-motion-enabled .espo-motion-pointer:hover {
    --espo-card-scale: 1.012;
    box-shadow: 0 18px 42px rgba(15, 39, 58, .09);
  }
  .espo-motion-enabled .espo-motion-magnetic {
    --espo-magnet-x: 0px;
    --espo-magnet-y: 0px;
    translate: var(--espo-magnet-x) var(--espo-magnet-y) !important;
    transition:
      translate .2s ease-out,
      color .3s ease,
      background-color .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;
    will-change: translate;
  }
}

/* Horizontal project rail gets center-focus while it scrolls. */
.espo-motion-enabled .espo-project-rail .espo-cohesive-work__card {
  opacity: var(--espo-rail-opacity, .9);
  transition: opacity .32s ease, scale .35s var(--espo-motion-strong-ease);
}
.espo-motion-enabled .espo-project-rail .espo-cohesive-work__card > div:first-child img {
  transform: scale(var(--espo-rail-image-scale, 1.018));
  filter: saturate(var(--espo-rail-saturation, .94));
  transition:
    transform .48s var(--espo-motion-strong-ease),
    filter .35s ease;
}

/* Sector switching is cinematic rather than a simple cross-fade. */
.espo-motion-enabled .espo-sector-images img {
  opacity: 0;
  clip-path: inset(0 0 0 4%);
  transform: scale(1.035);
  filter: saturate(.94);
  transition:
    opacity .48s ease,
    clip-path .7s var(--espo-motion-strong-ease),
    transform 1.05s var(--espo-motion-strong-ease),
    filter .55s ease;
}
[dir="rtl"] .espo-motion-enabled .espo-sector-images img { clip-path: inset(0 4% 0 0); }
.espo-motion-enabled .espo-sector-images img.is-active {
  opacity: 1;
  clip-path: inset(0);
  transform: scale(1);
  filter: saturate(1);
}

/* Shared CTA remains identical everywhere, but now feels alive everywhere. */
.espo-motion-enabled .espo-home-cta-canonical .espo-final-cta__grid {
  animation: espo-cta-grid-drift 22s linear infinite;
}
.espo-motion-enabled .espo-home-cta-canonical .espo-final-cta__orb--one {
  animation: espo-cta-orb-one 13s ease-in-out infinite alternate;
}
.espo-motion-enabled .espo-home-cta-canonical .espo-final-cta__orb--two {
  animation: espo-cta-orb-two 16s ease-in-out infinite alternate;
}
.espo-motion-enabled .espo-home-cta-canonical .espo-cta-signature__sheen { animation: none; }
@keyframes espo-cta-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(12px, 7px, 0); }
}
@keyframes espo-cta-orb-one {
  from { translate: -4px 2px; scale: .985; }
  to { translate: 9px -5px; scale: 1.035; }
}
@keyframes espo-cta-orb-two {
  from { translate: 5px -2px; scale: 1; }
  to { translate: -8px 6px; scale: 1.045; }
}
/* Header/nav feels responsive before body content. */
.espo-motion-enabled [data-site-header] {
  transition:
    transform .38s var(--espo-motion-strong-ease),
    background-color .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}
@media (max-width: 899px) {
  .espo-motion-enabled .espo-premium-hero__image > :is(img, video) { transform: scale(1.025); }
}

/* Accessibility: every new continuous / scroll-reactive effect stops. */
@media (prefers-reduced-motion: reduce) {
  .espo-motion-section-marker,
  .espo-motion-heading::after { transition: none !important; }
  .espo-motion-media {
    clip-path: inset(0) !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }
  .espo-premium-hero__image > :is(img, video) { transform: none !important; }
  .espo-premium-hero__visual::after,
  .espo-premium-hero__corner,
  .espo-final-cta__grid,
  .espo-final-cta__orb,
  .espo-cta-signature__sheen { animation: none !important; }
}