/*
 * ESPO 2.5.1.123.58 — Cinematic Hero Motion
 * First-view choreography only. Uses opacity, individual translate/scale and
 * clip-path to avoid layout shifts and to compose with the approved hover and
 * scroll interactions already present in the theme.
 */

:root {
  --espo-hero-enter-ease: cubic-bezier(.16, 1, .3, 1);
  --espo-hero-enter-soft: cubic-bezier(.22, 1, .36, 1);
  --espo-hero-enter-distance: 24px;
  --espo-hero-media-distance: 34px;
  --espo-hero-media-distance-rtl: -34px;
}

/* The older generic boot choreography is intentionally neutralized for hero
 * regions. Hero motion is now fully owned by this file, preventing the former
 * hide/show hand-off from creating a weak double entrance after JS boots. */
.espo-motion-enabled .espo-motion-boot:not(.espo-motion-loaded) :is(
  .espo-premium-hero__brand,
  .espo-premium-hero__slogan,
  .espo-premium-hero__copy,
  .espo-premium-hero__actions,
  .espo-premium-hero__stats,
  .espo-premium-hero__visual-wrap,
  .espo-about-hero__content,
  .espo-about-hero__visual,
  .espo-services-hero__copy,
  .espo-services-hero__visual,
  .espo-projects-hero__copy,
  .espo-projects-hero__visual,
  .espo-sectors-hero__copy,
  .espo-sectors-hero__visual,
  .espo-contact-hero__copy,
  .espo-contact-hero__visual
),
.espo-motion-enabled .espo-motion-loaded :is(
  .espo-premium-hero__brand,
  .espo-premium-hero__slogan,
  .espo-premium-hero__copy,
  .espo-premium-hero__actions,
  .espo-premium-hero__stats,
  .espo-premium-hero__visual-wrap,
  .espo-about-hero__content,
  .espo-about-hero__visual,
  .espo-services-hero__copy,
  .espo-services-hero__visual,
  .espo-projects-hero__copy,
  .espo-projects-hero__visual,
  .espo-sectors-hero__copy,
  .espo-sectors-hero__visual,
  .espo-contact-hero__copy,
  .espo-contact-hero__visual
) {
  /* Do not force transform/opacity here: animation values below own the entry,
   * while existing hover transforms remain available after the animation. */
  transition-delay: 0s;
}

@media (prefers-reduced-motion: no-preference) {
  /* ------------------------------------------------------------
     Header — a restrained prelude before the hero sequence
     ------------------------------------------------------------ */
  .site-header .espo-header-brand,
  .site-header .espo-primary-nav,
  .site-header .espo-header-utilities,
  .site-header .espo-mobile-toggle {
    opacity: 0;
    animation: espoHeaderSettle .62s var(--espo-hero-enter-ease) both;
  }
  .site-header .espo-header-brand { animation-delay: .02s; }
  .site-header .espo-primary-nav { animation-delay: .08s; }
  .site-header .espo-header-utilities,
  .site-header .espo-mobile-toggle { animation-delay: .14s; }

  /* ------------------------------------------------------------
     Background construction lines / ambient geometry
     ------------------------------------------------------------ */
  :is(
    .espo-about-hero__grid,
    .espo-projects-hero__grid,
    .espo-sectors-hero__grid,
    .espo-contact-hero__grid,
    .espo-insights-hero__grid,
    .espo-insight-single__hero-grid
  ) {
    opacity: 0;
    scale: 1.018;
    animation: espoHeroGridIn 1.18s .04s var(--espo-hero-enter-soft) both;
  }

  .espo-premium-hero__ambient {
    opacity: 0;
    animation:
      espoHeroAmbientIn 1.15s .08s var(--espo-hero-enter-soft) both,
      espo-ambient-drift 12s 1.1s ease-in-out infinite alternate;
  }
  .espo-premium-hero__halo {
    opacity: 0;
    scale: .97;
    animation:
      espoHeroHaloIn 1.1s .22s var(--espo-hero-enter-soft) both,
      espo-halo-breathe 8s 1.15s ease-in-out infinite alternate;
  }

  /* ------------------------------------------------------------
     Home hero — deliberate editorial sequence
     ------------------------------------------------------------ */
  body:is(.home, .espo-home-context) .espo-premium-hero__brand,
  body:is(.home, .espo-home-context) .espo-premium-hero__slogan,
  body:is(.home, .espo-home-context) .espo-premium-hero__copy,
  body:is(.home, .espo-home-context) .espo-premium-hero__actions {
    opacity: 0;
    animation: espoHeroTextIn .86s var(--espo-hero-enter-ease) both;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__brand {
    --espo-enter-y: 17px;
    animation-delay: .09s;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__slogan {
    --espo-enter-y: 25px;
    clip-path: inset(0 0 100% 0);
    animation-name: espoHeroTitleIn;
    animation-duration: .98s;
    animation-delay: .15s;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__copy {
    --espo-enter-y: 18px;
    animation-delay: .30s;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__actions {
    --espo-enter-y: 14px;
    animation-delay: .40s;
  }

  body:is(.home, .espo-home-context) .espo-premium-hero__content::before {
    animation: espoHeroRuleDraw .88s .10s var(--espo-hero-enter-ease) both;
  }

  body:is(.home, .espo-home-context) .espo-premium-hero__visual-wrap {
    opacity: 0;
    translate: var(--espo-hero-media-distance) 0;
    scale: .988;
    clip-path: inset(0 7% 0 0 round 24px);
    animation: espoHeroMediaIn 1.08s .18s var(--espo-hero-enter-ease) both;
  }
  html[dir="rtl"] body:is(.home, .espo-home-context) .espo-premium-hero__visual-wrap {
    translate: var(--espo-hero-media-distance-rtl) 0;
    clip-path: inset(0 0 0 7% round 24px);
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__image :is(img, video) {
    scale: 1.035;
    animation: espoHeroImageSettle 1.38s .18s var(--espo-hero-enter-soft) both;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__corner {
    opacity: 0;
    transform-origin: left center;
    animation: espoHeroCornerIn .82s .72s var(--espo-hero-enter-ease) both;
  }
  html[dir="rtl"] body:is(.home, .espo-home-context) .espo-premium-hero__corner { transform-origin: right center; }

  body:is(.home, .espo-home-context) .espo-premium-hero__stats {
    opacity: 0;
    translate: 0 18px;
    scale: .975;
    animation: espoHeroStatsIn .78s .61s var(--espo-hero-enter-ease) both;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__stat {
    opacity: 0;
    translate: 0 8px;
    animation: espoHeroTextIn .58s var(--espo-hero-enter-ease) both;
  }
  body:is(.home, .espo-home-context) .espo-premium-hero__stat:nth-child(1) { animation-delay: .73s; }
  body:is(.home, .espo-home-context) .espo-premium-hero__stat:nth-child(2) { animation-delay: .80s; }
  body:is(.home, .espo-home-context) .espo-premium-hero__stat:nth-child(3) { animation-delay: .87s; }

  /* ------------------------------------------------------------
     Shared copy choreography for all interior heroes
     ------------------------------------------------------------ */
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > * {
    opacity: 0;
    --espo-enter-y: var(--espo-hero-enter-distance);
    animation: espoHeroTextIn .82s var(--espo-hero-enter-ease) both;
  }

  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > :nth-child(1) { animation-delay: .07s; }
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > :nth-child(2) { animation-delay: .13s; }
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > :nth-child(3) { animation-delay: .22s; }
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > :nth-child(4) { animation-delay: .31s; }
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > :nth-child(5) { animation-delay: .40s; }
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > :nth-child(n+6) { animation-delay: .47s; }

  /* Headings get a cleaner masked rise than ordinary copy. */
  :is(
    .espo-about-hero__content,
    .espo-services-hero__copy,
    .espo-projects-hero__copy,
    .espo-sectors-hero__copy,
    .espo-contact-hero__copy,
    .espo-oman-hero__copy,
    .espo-service-detail__hero-copy,
    .espo-case-hero__copy,
    .espo-insights-hero__copy,
    .espo-insight-single__header
  ) > h1 {
    --espo-enter-y: 28px;
    clip-path: inset(0 0 100% 0);
    animation-name: espoHeroTitleIn;
    animation-duration: .96s;
  }

  /* ------------------------------------------------------------
     Shared media reveal — from the outside edge toward the content
     ------------------------------------------------------------ */
  :is(
    .espo-about-hero__visual,
    .espo-services-hero__visual,
    .espo-projects-hero__visual,
    .espo-sectors-hero__visual,
    .espo-contact-hero__visual,
    .espo-service-detail__hero-media,
    .espo-case-hero__media,
    .espo-insights-hero__signature,
    .espo-insight-single__mark
  ) {
    opacity: 0;
    translate: var(--espo-hero-media-distance) 0;
    scale: .988;
    clip-path: inset(0 8% 0 0 round 22px);
    animation: espoHeroMediaIn 1.05s .18s var(--espo-hero-enter-ease) both;
  }
  html[dir="rtl"] :is(
    .espo-about-hero__visual,
    .espo-services-hero__visual,
    .espo-projects-hero__visual,
    .espo-sectors-hero__visual,
    .espo-contact-hero__visual,
    .espo-service-detail__hero-media,
    .espo-case-hero__media,
    .espo-insights-hero__signature,
    .espo-insight-single__mark
  ) {
    translate: var(--espo-hero-media-distance-rtl) 0;
    clip-path: inset(0 0 0 8% round 22px);
  }

  :is(
    .espo-about-hero__visual,
    .espo-services-hero__visual,
    .espo-projects-hero__visual,
    .espo-sectors-hero__visual,
    .espo-contact-hero__visual,
    .espo-service-detail__hero-media,
    .espo-case-hero__media
  ) :is(img, video) {
    scale: 1.03;
    animation: espoHeroImageSettle 1.38s .17s var(--espo-hero-enter-soft) both;
  }

  /* Secondary captions / blueprint / proof elements arrive after the hero. */
  :is(
    .espo-about-hero__caption,
    .espo-services-hero__blueprint,
    .espo-projects-hero__caption,
    .espo-sectors-hero__caption,
    .espo-contact-hero__caption,
    .espo-service-detail__hero-support,
    .espo-case-hero__media figcaption,
    .espo-insights-hero__disciplines
  ) {
    opacity: 0;
    translate: 0 12px;
    animation: espoHeroTextIn .66s .62s var(--espo-hero-enter-ease) both;
  }

  /* Oman uses a full-bleed hero image, so it receives a camera-settle rather
   * than the side mask used by card-like hero media. */
  .espo-oman-hero__media {
    opacity: .82;
    scale: 1.045;
    animation: espoHeroBackgroundIn 1.45s .02s var(--espo-hero-enter-soft) both;
  }
  .espo-oman-hero__overlay {
    opacity: 0;
    animation: espoHeroOverlayIn .95s .08s ease-out both;
  }
  .espo-oman-hero__proof {
    opacity: 0;
    translate: 0 22px;
    scale: .985;
    animation: espoHeroStatsIn .80s .46s var(--espo-hero-enter-ease) both;
  }

  /* Interior hero metrics/chips use a small local stagger so the scene feels
   * authored rather than arriving as one flat block. */
  :is(
    .espo-about-hero__metrics,
    .espo-projects-hero__metrics,
    .espo-sectors-hero__metrics,
    .espo-contact-hero__chips,
    .espo-service-detail__stats,
    .espo-case-hero__tags
  ) > * {
    opacity: 0;
    translate: 0 10px;
    animation: espoHeroTextIn .58s var(--espo-hero-enter-ease) both;
  }
  :is(
    .espo-about-hero__metrics,
    .espo-projects-hero__metrics,
    .espo-sectors-hero__metrics,
    .espo-contact-hero__chips,
    .espo-service-detail__stats,
    .espo-case-hero__tags
  ) > :nth-child(1) { animation-delay: .48s; }
  :is(
    .espo-about-hero__metrics,
    .espo-projects-hero__metrics,
    .espo-sectors-hero__metrics,
    .espo-contact-hero__chips,
    .espo-service-detail__stats,
    .espo-case-hero__tags
  ) > :nth-child(2) { animation-delay: .55s; }
  :is(
    .espo-about-hero__metrics,
    .espo-projects-hero__metrics,
    .espo-sectors-hero__metrics,
    .espo-contact-hero__chips,
    .espo-service-detail__stats,
    .espo-case-hero__tags
  ) > :nth-child(3) { animation-delay: .62s; }
  :is(
    .espo-about-hero__metrics,
    .espo-projects-hero__metrics,
    .espo-sectors-hero__metrics,
    .espo-contact-hero__chips,
    .espo-service-detail__stats,
    .espo-case-hero__tags
  ) > :nth-child(n+4) { animation-delay: .69s; }

  /* One-time rule drawing on common kicker accents. */
  :is(
    .espo-about-hero,
    .espo-services-hero,
    .espo-projects-hero,
    .espo-sectors-hero,
    .espo-contact-hero,
    .espo-oman-hero,
    .espo-service-detail__hero,
    .espo-case-hero,
    .espo-insights-hero,
    .espo-insight-single__hero
  ) :is(.espo-section-label i, .espo-insights-kicker i, .espo-service-detail__kicker > span, .espo-case-kicker > span) {
    transform-origin: left center;
    animation: espoHeroRuleDraw .78s .18s var(--espo-hero-enter-ease) both;
  }
  html[dir="rtl"] :is(
    .espo-about-hero,
    .espo-services-hero,
    .espo-projects-hero,
    .espo-sectors-hero,
    .espo-contact-hero,
    .espo-oman-hero,
    .espo-service-detail__hero,
    .espo-case-hero,
    .espo-insights-hero,
    .espo-insight-single__hero
  ) :is(.espo-section-label i, .espo-insights-kicker i, .espo-service-detail__kicker > span, .espo-case-kicker > span) {
    transform-origin: right center;
  }
}

/* Keep mobile motion premium but shorter and lighter. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  :root {
    --espo-hero-enter-distance: 16px;
    --espo-hero-media-distance: 0px;
    --espo-hero-media-distance-rtl: 0px;
  }

  body:is(.home, .espo-home-context) .espo-premium-hero__visual-wrap,
  :is(
    .espo-about-hero__visual,
    .espo-services-hero__visual,
    .espo-projects-hero__visual,
    .espo-sectors-hero__visual,
    .espo-contact-hero__visual,
    .espo-service-detail__hero-media,
    .espo-case-hero__media,
    .espo-insights-hero__signature,
    .espo-insight-single__mark
  ) {
    translate: 0 18px;
    scale: .992;
    clip-path: inset(5% 0 0 0 round 16px);
    animation-duration: .82s;
    animation-delay: .16s;
  }

  body:is(.home, .espo-home-context) .espo-premium-hero__image :is(img, video),
  :is(
    .espo-about-hero__visual,
    .espo-services-hero__visual,
    .espo-projects-hero__visual,
    .espo-sectors-hero__visual,
    .espo-contact-hero__visual,
    .espo-service-detail__hero-media,
    .espo-case-hero__media
  ) :is(img, video) {
    scale: 1.018;
    animation-duration: 1s;
  }

  .site-header .espo-header-brand,
  .site-header .espo-primary-nav,
  .site-header .espo-header-utilities,
  .site-header .espo-mobile-toggle {
    animation-duration: .48s;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .espo-premium-hero,
    .espo-about-hero,
    .espo-services-hero,
    .espo-projects-hero,
    .espo-sectors-hero,
    .espo-contact-hero,
    .espo-oman-hero,
    .espo-service-detail__hero,
    .espo-case-hero,
    .espo-insights-hero,
    .espo-insight-single__hero
  ) *,
  .site-header * {
    animation: none !important;
    transition-delay: 0s !important;
  }
}

@keyframes espoHeaderSettle {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes espoHeroGridIn {
  from { opacity: 0; scale: 1.018; }
  to { opacity: 1; scale: 1; }
}
@keyframes espoHeroAmbientIn {
  from { opacity: 0; scale: .98; }
  to { opacity: 1; scale: 1; }
}
@keyframes espoHeroHaloIn {
  from { opacity: 0; scale: .97; }
  to { opacity: .78; scale: 1; }
}
@keyframes espoHeroTextIn {
  from { opacity: 0; translate: 0 var(--espo-enter-y, 22px); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes espoHeroTitleIn {
  from {
    opacity: 0;
    translate: 0 var(--espo-enter-y, 28px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    translate: 0 0;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes espoHeroRuleDraw {
  from { opacity: 0; scale: 0 1; }
  to { opacity: 1; scale: 1 1; }
}
@keyframes espoHeroMediaIn {
  from { opacity: 0; }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    clip-path: inset(0 0 0 0 round 22px);
  }
}
@keyframes espoHeroImageSettle {
  from { scale: 1.035; }
  to { scale: 1; }
}
@keyframes espoHeroCornerIn {
  from { opacity: 0; scale: .12 1; }
  to { opacity: 1; scale: 1 1; }
}
@keyframes espoHeroStatsIn {
  from { opacity: 0; translate: 0 18px; scale: .975; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes espoHeroBackgroundIn {
  from { opacity: .82; scale: 1.045; }
  to { opacity: 1; scale: 1; }
}
@keyframes espoHeroOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}