/*
 * Site-wide motion: page transitions, arrivals, scroll reveals and interaction feedback.
 * Loaded last on every page; js/motion.js drives the scroll reveals and the header.
 * Everything here is progressive. Without JavaScript, without browser support or with
 * reduced motion requested, pages render as before and all content stays visible.
 */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-rise: 24px;
}

/* Page transitions ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.swiss-top-navbar { view-transition-name: site-header; }
.swiss-nav-link[aria-current="page"] .swiss-nav-link-bar { view-transition-name: nav-indicator; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: 180ms ease-in both motion-page-out; }
::view-transition-new(root) { animation: 480ms var(--ease-out) 120ms both motion-page-in; }
::view-transition-group(nav-indicator) { animation-duration: 560ms; animation-timing-function: var(--ease-out); }
@keyframes motion-page-out { to { opacity: 0; } }
@keyframes motion-page-in { from { opacity: 0; translate: 0 14px; } }

/* The theme switch is a circle growing from the toggle; landing.js runs the clip. */
html.is-theme-switching .swiss-top-navbar,
html.is-theme-switching .swiss-nav-link[aria-current="page"] .swiss-nav-link-bar { view-transition-name: none; }
html.is-theme-switching::view-transition-old(root),
html.is-theme-switching::view-transition-new(root) { animation: none; }

/* Arrivals: each page's opening copy rises into place -------------------- */

@keyframes motion-rise { from { opacity: 0; translate: 0 var(--motion-rise); } }
@keyframes motion-fade { from { opacity: 0; } }
@keyframes motion-settle { from { scale: 1.07; } }

@media (prefers-reduced-motion: no-preference) {
  .home-page .hero-v3-content > *,
  .page-intro .page-intro__copy > *,
  :is(.contact-intro, .sitemap-intro) .container > *,
  .page-intro__grid > :is(figure, nav) {
    animation: motion-rise .9s var(--ease-out) backwards;
  }
  .home-page .hero-v3-content > :nth-child(2),
  .page-intro .page-intro__copy > :nth-child(2),
  :is(.contact-intro, .sitemap-intro) .container > :nth-child(2) { animation-delay: .1s; }
  .home-page .hero-v3-content > :nth-child(3),
  .page-intro .page-intro__copy > :nth-child(3) { animation-delay: .2s; }
  .page-intro .page-intro__copy > :nth-child(4) { animation-delay: .3s; }
  .page-intro__grid > :is(figure, nav) { animation-duration: 1.1s; animation-delay: .25s; }
  .home-page .hero-sequence__media { animation: motion-settle 2.4s var(--ease-out) backwards; }
  .expertise-strip__grid > div { animation: motion-rise .8s var(--ease-out) backwards; animation-delay: calc(.35s + var(--strip-i, 0) * 70ms); }
  .expertise-strip__grid > div:nth-child(2) { --strip-i: 1; }
  .expertise-strip__grid > div:nth-child(3) { --strip-i: 2; }
  .expertise-strip__grid > div:nth-child(4) { --strip-i: 3; }
}

/* Scroll reveals: motion.js marks content below the fold, then releases it in view. */
.reveal-pending { opacity: 0; translate: 0 var(--motion-rise); }
.is-revealing {
  transition: opacity .8s var(--ease-out), translate 1s var(--ease-out) !important;
  transition-delay: var(--reveal-delay, 0s) !important;
}
@media print {
  .reveal-pending { opacity: 1 !important; translate: none !important; }
}

/* Header: tucks away while reading down, returns on the way up ----------- */

.swiss-top-navbar { transition: transform .5s var(--ease-out), box-shadow .3s ease; }
.swiss-top-navbar.is-hidden { transform: translateY(calc(-100% - 24px)); }
.swiss-top-navbar.is-scrolled { box-shadow: 0 18px 40px -10px rgba(7, 27, 43, .18), inset 0 1px 0 rgba(255, 255, 255, .95); }
html[data-site-theme="dark"] .swiss-top-navbar.is-scrolled { box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .45); }
.swiss-nav-link-bar { transition: opacity .25s ease, transform .45s var(--ease-out); }

/* Reading progress along the lower edge of the bar. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .swiss-top-navbar::after {
      content: "";
      position: absolute;
      left: 3px;
      right: 3px;
      bottom: -1px;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      pointer-events: none;
      animation: motion-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes motion-progress { to { transform: scaleX(1); } }

/* Menu: fades down with its links in sequence; the two lines fold into a cross. */
@media (max-width: 1240px) {
  .swiss-nav-cluster {
    display: grid;
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
    pointer-events: none;
    transition: opacity .2s ease, translate .3s var(--ease-out), visibility 0s linear .3s;
  }
  .swiss-nav-cluster.is-open {
    visibility: visible;
    opacity: 1;
    translate: none;
    pointer-events: auto;
    transition: opacity .25s ease, translate .45s var(--ease-out), visibility 0s;
  }
  @media (prefers-reduced-motion: no-preference) {
    .swiss-nav-cluster.is-open > * { --motion-rise: -8px; animation: motion-rise .5s var(--ease-out) backwards; }
    .swiss-nav-cluster.is-open > :nth-child(2) { animation-delay: 35ms; }
    .swiss-nav-cluster.is-open > :nth-child(3) { animation-delay: 70ms; }
    .swiss-nav-cluster.is-open > :nth-child(4) { animation-delay: 105ms; }
    .swiss-nav-cluster.is-open > :nth-child(5) { animation-delay: 140ms; }
    .swiss-nav-cluster.is-open > :nth-child(6) { animation-delay: 175ms; }
  }
}
.swiss-menu-toggle path { d: path("M4 8L20 8M4 16L20 16"); transition: d .4s var(--ease-out); }
.swiss-menu-toggle[aria-expanded="true"] path { d: path("M6 6L18 18M6 18L18 6"); }

/* Theme toggle: sun and moon trade places with a turn. */
.site-theme-toggle { transition: border-color .2s ease; }
.site-theme-toggle:hover { border-color: color-mix(in srgb, var(--editorial-ink) 35%, var(--rule)); }
.site-theme-toggle svg { grid-area: 1 / 1; transition: opacity .3s ease, rotate .6s var(--ease-out), scale .6s var(--ease-out); }
.site-theme-toggle .theme-moon { display: block; opacity: 0; rotate: -90deg; scale: .4; }
html[data-site-theme="dark"] .site-theme-toggle .theme-sun { display: block; opacity: 0; rotate: 90deg; scale: .4; }
html[data-site-theme="dark"] .site-theme-toggle .theme-moon { opacity: 1; rotate: 0deg; scale: 1; }

/* Arrows: a quick pass through their circle, and small nudges on text links. */
@keyframes motion-arrow-through {
  0% { translate: 0 0; }
  45% { translate: 130% 0; opacity: 0; }
  46% { translate: -130% 0; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes motion-arrow-diagonal {
  0% { translate: 0 0; }
  45% { translate: 110% -110%; opacity: 0; }
  46% { translate: -110% 110%; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
.swiss-contact-circle, .site-footer__arrow { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .swiss-contact-button:hover .swiss-contact-circle svg { animation: motion-arrow-through .6s var(--ease-in-out); }
  .site-footer__action:hover .site-footer__arrow svg { animation: motion-arrow-diagonal .6s var(--ease-in-out); }
}
:is(.editorial-text-link, .intro-directory a, .contact-detail dd a, .compact-footer__cta, .site-footer__direct, .swiss-mobile-partner, .sitemap-group h2 a, .form-submit .btn) > span[aria-hidden="true"],
.sitemap-group li a::after,
.video-service-body .card-link::after {
  display: inline-block;
  transition: translate .45s var(--ease-out), color .2s ease;
}
:is(.editorial-text-link, .contact-detail dd a, .compact-footer__cta, .site-footer__direct, .swiss-mobile-partner, .sitemap-group h2 a, .form-submit .btn):is(:hover, :focus-visible) > span[aria-hidden="true"] { translate: 3px -3px; }
.editorial-text-link[href^="#"]:is(:hover, :focus-visible) > span[aria-hidden="true"] { translate: 0 3px; }
.intro-directory a:is(:hover, :focus-visible) > span { translate: 3px 3px; }
.sitemap-group li a:is(:hover, :focus-visible)::after { translate: 3px -3px; color: var(--accent); }

/* Directory rows lean in toward the pointer. */
.intro-directory a, .sitemap-group li a { transition: color .2s ease, padding .45s var(--ease-out); }
.intro-directory a:is(:hover, :focus-visible), .sitemap-group li a:is(:hover, :focus-visible) { padding-left: 10px; }

/* Buttons give under the press. */
.editorial-page .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .15s ease; }
.editorial-page .btn:active:not(:disabled) { scale: .97; }

/* Capability films: the desaturated frame comes alive under the pointer. */
.editorial-page .service-video-frame video { transition: filter .7s ease, scale 1.1s var(--ease-out); }
.editorial-page .video-service-card { transition: border-color .3s ease; }
.video-service-body .card-link { position: relative; }
.video-service-body .card-link::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--editorial-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.editorial-page .video-service-card:is(:hover, :focus-within) .service-video-frame video { filter: saturate(1); scale: 1.045; }
.video-service-card:is(:hover, :focus-within) .card-link::before { transform: scaleX(1); }
.video-service-card:is(:hover, :focus-within) .card-link::after { translate: 4px 0; }

/* Solution, sector and photo panels respond without leaving their frames. */
.solution-card { transition: border-color .3s ease; }
.solution-card__media { overflow: clip; }
.solution-video { transition: scale 1s var(--ease-out); }
.solution-card:hover { border-color: color-mix(in srgb, var(--editorial-ink) 35%, var(--rule)); }
.solution-card:hover .solution-video { scale: 1.025; }
.solution-card:hover .editorial-text-link > span[aria-hidden="true"] { translate: 3px -3px; }

/* overflow: clip (not hidden) keeps the page, not the frame, as the scroll-timeline source. */
.industry-photo, .sector-card__media, .company-split__media { overflow: clip; }
/* Sector images carry no size attributes; without a box, a clipped lazy image never loads. */
.sector-card__media img { aspect-ratio: 1672 / 941; }
.industry-photo { border: 1px solid var(--rule); }
.editorial-page .industry-photo img { border: 0; }
:is(.industry-photo, .sector-card__media, .company-split__media) img { transition: transform 1.2s var(--ease-out); }
:is(.industry-photo, .sector-card, .company-split__media):hover img { transform: scale(1.035); }
.sector-card h2 { transition: color .3s ease; }
.sector-card:hover h2 { color: var(--accent); }

.service-icon { transition: border-color .3s ease, background-color .3s ease, translate .45s var(--ease-out); }
.service-grid article:hover .service-icon {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: color-mix(in srgb, var(--accent) 11%, var(--paper));
  translate: 0 -2px;
}

/* Contact form: fields acknowledge the pointer, focus and invalid entries. */
.contact-form-panel .field :is(input, select, textarea) {
  outline: 2px solid transparent;
  outline-offset: 6px;
  transition: border-color .2s ease, outline-color .2s ease, outline-offset .25s var(--ease-out);
}
.contact-form-panel .field :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--editorial-ink) 30%, var(--rule)); }
.contact-form-panel .field :is(input, select, textarea):user-invalid { border-color: #b3261e; }
html[data-site-theme="dark"] .contact-form-panel .field :is(input, select, textarea):user-invalid { border-color: #ffb4ab; }

/* A section reached from a link briefly outlines itself. */
@keyframes motion-target { from { outline-color: var(--accent); } }
@media (prefers-reduced-motion: no-preference) {
  .form-status:not(:empty) { --motion-rise: 6px; animation: motion-rise .5s var(--ease-out) backwards; }
  :is(.solution-card, .sector-card):target {
    outline: 2px solid transparent;
    outline-offset: 8px;
    animation: motion-target 2s ease-out .45s backwards;
  }
}

/* Touch screens get immediate press feedback in place of hover. */
@media (hover: none) {
  :is(.video-service-card, .solution-card, .sector-card, .sitemap-group li) { transition: scale .2s ease; -webkit-tap-highlight-color: transparent; }
  :is(.video-service-card, .solution-card, .sector-card, .sitemap-group li):active { scale: .985; }
  .editorial-page .video-service-card:active .service-video-frame video { filter: saturate(1); }
}

/* Scroll-linked depth, where the browser supports it ---------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The hero clips its media, so its children follow a timeline named on the section. */
    .home-page .hero-v3 { view-timeline: --gryx-hero block; }
    .home-page .hero-v3-content {
      animation: motion-hero-copy-exit linear both;
      animation-timeline: --gryx-hero;
      animation-range: exit 0% exit 100%;
    }
    .home-page .hero-sequence__media {
      animation: motion-settle 2.4s var(--ease-out) backwards, motion-hero-media-drift linear both;
      animation-timeline: auto, --gryx-hero;
      animation-range: normal, exit 0% exit 100%;
    }
    :is(.industry-photo, .sector-card__media, .company-split__media) img {
      animation: motion-image-settle linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes motion-hero-copy-exit { to { translate: 0 -9vh; opacity: .15; } }
@keyframes motion-hero-media-drift { to { translate: 0 16%; } }
@keyframes motion-image-settle { from { scale: 1.1; } }

/* Global Partnerships map: pins arrive, the offices pulse and routes flow in */

@keyframes motion-pin-in { from { scale: 0; opacity: 0; } }
@keyframes motion-ping { from { scale: 1; opacity: .5; } to { scale: 3.6; opacity: 0; } }
@keyframes motion-route-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: no-preference) {
  .world-map__dots { animation: motion-fade 1.4s ease-out .15s backwards; }
  .world-map__route { animation: motion-fade 1.2s ease-out 1s backwards; }
  .world-map__route path:not(.world-map__route--presence) { animation: motion-route-flow 2s linear infinite; }
  .world-map__pin { animation: motion-pin-in .7s var(--ease-out) backwards; animation-delay: var(--pin-delay, .9s); }
  .world-map__pin--hq { --pin-delay: .45s; }
  .world-map__pin:not(.world-map__pin--illustrative, .world-map__pin--hq) { --pin-delay: .6s; }
  .world-map__pin--uk { --pin-delay: .8s; }
  .world-map__pin--uae { --pin-delay: .9s; }
  .world-map__pin--singapore { --pin-delay: 1s; }
  .world-map__pin--australia { --pin-delay: 1.1s; }
  .world-map__label { animation: motion-fade .6s ease-out backwards; animation-delay: calc(var(--pin-delay, .9s) + .35s); }
  .world-map__pin:not(.world-map__pin--illustrative)::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--map-ink);
    opacity: 0;
    pointer-events: none;
    animation: motion-ping 2.8s ease-out 1.6s infinite;
  }
  .world-map__pin:not(.world-map__pin--illustrative, .world-map__pin--hq)::after { animation-delay: 3s; }
}

/* Hero film pause control, added by js/hero.js. */
.hero-film-toggle {
  position: absolute;
  right: max(var(--page-gutter, 24px), calc((100% - 1440px) / 2));
  bottom: 22px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(8, 10, 9, .38);
  color: #edf2f4;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .2s ease, border-color .2s ease, scale .15s ease;
}
.hero-film-toggle:hover { background: rgba(8, 10, 9, .6); border-color: rgba(255, 255, 255, .55); }
.hero-film-toggle:active { scale: .94; }
.hero-film-toggle:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }
.hero-film-toggle svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; }
.hero-film-toggle .hero-film-play,
.hero-film-toggle[aria-pressed="true"] .hero-film-pause { display: none; }
.hero-film-toggle[aria-pressed="true"] .hero-film-play { display: block; }

/* Reduced motion: keep the states, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; translate: none; }
  .hero-film-toggle { display: none; }
  .swiss-top-navbar, .swiss-nav-cluster, .swiss-nav-cluster.is-open, .swiss-menu-toggle path,
  .site-theme-toggle svg, .swiss-nav-link-bar, .intro-directory a, .sitemap-group li a,
  .editorial-page .service-video-frame video, .solution-video, .service-icon,
  :is(.industry-photo, .sector-card__media, .company-split__media) img,
  :is(.editorial-text-link, .intro-directory a, .contact-detail dd a, .compact-footer__cta, .site-footer__direct, .swiss-mobile-partner, .sitemap-group h2 a, .form-submit .btn) > span[aria-hidden="true"],
  .sitemap-group li a::after, .video-service-body .card-link::after, .video-service-body .card-link::before { transition: none; }
}