/*
 * BKP motion system
 * A restrained, shared interaction layer for every public page.
 */
:root {
  --motion-fast: 220ms;
  --motion-normal: 320ms;
  --motion-reveal: 680ms;
  --motion-hero: 880ms;
  --motion-ease: cubic-bezier(.22,1,.36,1);
}

body {
  animation: bkp-page-arrive 500ms var(--motion-ease) both;
}

@keyframes bkp-page-arrive {
  from { opacity: .96; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* One reusable viewport-reveal primitive, with purposeful variants. */
.motion-reveal {
  opacity: 0;
  transform: translate3d(0,24px,0);
  transition:
    opacity var(--motion-reveal) var(--motion-ease) var(--motion-delay,0ms),
    transform var(--motion-reveal) var(--motion-ease) var(--motion-delay,0ms),
    filter var(--motion-reveal) var(--motion-ease) var(--motion-delay,0ms);
}
.motion-reveal.motion-left { transform: translate3d(-28px,0,0); }
.motion-reveal.motion-right { transform: translate3d(28px,0,0); }
.motion-reveal.motion-scale { transform: scale(.975); filter: blur(2px); }
.motion-reveal.in-view { opacity: 1; transform: none; filter: none; }

/* The hero is the only deliberately sequenced load animation. */
.hero h1 span { display: block; }
.hero h1 em { display: block; }
.hero h1 em span { display: block; }
.motion-loaded .hero-content,
.motion-loaded .about-hero-copy,
.motion-loaded .services-hero-copy,
.motion-loaded .contact-hero-copy,
.motion-loaded .career-hero-copy,
.motion-loaded .direct-panel { opacity: 1; transform: none; }

.motion-loaded .hero-content > .eyebrow,
.motion-loaded .hero-content h1 > span,
.motion-loaded .hero-content h1 > em,
.motion-loaded .hero-content > .hero-copy,
.motion-loaded .hero-content > .hero-actions,
.motion-loaded .about-hero-copy > *,
.motion-loaded .services-hero-copy > *,
.motion-loaded .contact-hero-copy > *,
.motion-loaded .career-hero-copy > * {
  opacity: 0;
  animation: bkp-hero-copy var(--motion-hero) var(--motion-ease) forwards;
}
.motion-loaded .hero-content > .eyebrow { animation-delay: 80ms; }
.motion-loaded .hero-content h1 > span:first-child { animation-delay: 160ms; }
.motion-loaded .hero-content h1 > span:nth-child(2) { animation-delay: 240ms; }
.motion-loaded .hero-content h1 > em { animation-delay: 320ms; }
.motion-loaded .hero-content > .hero-copy { animation-delay: 400ms; }
.motion-loaded .hero-content > .hero-actions { animation-delay: 500ms; }
.motion-loaded .about-hero-copy > *:nth-child(1),
.motion-loaded .services-hero-copy > *:nth-child(1),
.motion-loaded .contact-hero-copy > *:nth-child(1),
.motion-loaded .career-hero-copy > *:nth-child(1) { animation-delay: 70ms; }
.motion-loaded .about-hero-copy > *:nth-child(2),
.motion-loaded .services-hero-copy > *:nth-child(2),
.motion-loaded .contact-hero-copy > *:nth-child(2),
.motion-loaded .career-hero-copy > *:nth-child(2) { animation-delay: 140ms; }
.motion-loaded .about-hero-copy > *:nth-child(3),
.motion-loaded .services-hero-copy > *:nth-child(3),
.motion-loaded .contact-hero-copy > *:nth-child(3),
.motion-loaded .career-hero-copy > *:nth-child(3) { animation-delay: 220ms; }
.motion-loaded .about-hero-copy > *:nth-child(4),
.motion-loaded .services-hero-copy > *:nth-child(4),
.motion-loaded .contact-hero-copy > *:nth-child(4),
.motion-loaded .career-hero-copy > *:nth-child(4) { animation-delay: 320ms; }
.motion-loaded .about-hero-copy > *:nth-child(n+5),
.motion-loaded .services-hero-copy > *:nth-child(n+5),
.motion-loaded .contact-hero-copy > *:nth-child(n+5),
.motion-loaded .career-hero-copy > *:nth-child(n+5) { animation-delay: 430ms; }

.motion-loaded .hero-media,
.motion-loaded .about-hero-image,
.motion-loaded .services-hero-image,
.motion-loaded .direct-panel,
.motion-loaded .career-hero-media {
  animation: bkp-hero-visual 1050ms var(--motion-ease) 320ms both;
}

@keyframes bkp-hero-copy {
  from { opacity: 0; transform: translate3d(0,25px,0); }
  to { opacity: 1; transform: none; }
}
@keyframes bkp-hero-visual {
  from { opacity: .68; filter: saturate(.78) contrast(.96); }
  to { opacity: 1; }
}

/* Keep the technical grid language static; movement is reserved for content. */
.services::before,
.industry::before,
.parts::before,
.testimonials::before { animation: none !important; }

/* Buttons and arrow links share the same precise feedback language. */
.button::after {
  top: -35%;
  left: -35%;
  width: 22%;
  height: 170%;
  border-radius: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform: skewX(-18deg) translateX(-260%);
  transition: transform 560ms var(--motion-ease);
}
.button:hover::after { transform: skewX(-18deg) translateX(720%); }
.text-link,
.capability a,
.routing-list a,
.person-links a,
.direct-details a,
.site-footer a { transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) ease; }
.text-link b,
.capability a b,
.routing-list i,
.button b { display: inline-block; transition: transform var(--motion-fast) var(--motion-ease); }
.text-link:hover b,
.capability a:hover b,
.routing-list a:hover i,
.button:hover b { transform: translateX(5px); }

/* Clean lifts: no card rotation or exaggerated scale. */
.service-card,
.part-card,
.partner-card,
.principle,
.capability,
.quote-grid blockquote,
.commission-flow article,
.optimisation-list article,
.training-section article,
.next-steps article,
.career-value-grid article {
  will-change: auto;
  transition: transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) ease, border-color var(--motion-normal) ease, background var(--motion-normal) ease;
}
.service-card:hover,
.part-card:hover,
.partner-card:hover,
.principle:hover,
.capability:hover,
.quote-grid blockquote:hover,
.commission-flow article:hover,
.optimisation-list article:hover,
.training-section article:hover,
.next-steps article:hover,
.career-value-grid article:hover {
  transform: translateY(-6px);
}
.service-card:hover > a { transform: translateX(5px); }
.service-card > a { transition: transform var(--motion-fast) var(--motion-ease), color var(--motion-fast) ease; }
.service-card i,
.stats svg,
.hero-facts svg,
.approach li::before { animation: none !important; }

/* Quiet image zoom, always clipped by its container. */
.consultant-profile-photo,
.services-hero-image,
.about-hero-image,
.career-hero-media,
.person-photo,
.training-image,
.lifecycle-image,
.service-relocation .relocation-image { overflow: hidden; }
.consultant-profile-photo img,
.person-photo img { transition: transform 720ms var(--motion-ease), filter var(--motion-normal) ease; }
.consultant-profile-photo:hover img,
.person-photo:hover img { transform: scale(1.035); }

/* Section dividers draw once as their section becomes active. */
.motion-divider { position: relative; }
.motion-divider::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,var(--red),rgba(214,40,40,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 820ms var(--motion-ease);
}
.motion-divider.in-view::after { transform: scaleX(1); }

/* Corporate process progression for About and Services. */
.motion-sequence > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 560ms var(--motion-ease) var(--step-delay,0ms),
    transform 560ms var(--motion-ease) var(--step-delay,0ms),
    background var(--motion-normal) ease,
    border-color var(--motion-normal) ease;
}
.motion-sequence.in-view > * { opacity: 1; transform: none; }
.lifecycle-copy ol.motion-sequence::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 7px;
  bottom: 24px;
  left: 7px;
  width: 1px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1100ms var(--motion-ease) 140ms;
}
.lifecycle-copy ol.motion-sequence.in-view::after { transform: scaleY(1); }
.lifecycle-copy ol.motion-sequence li { z-index: 1; }
.lifecycle-copy ol.motion-sequence li::before { transition: background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
.lifecycle-copy ol.motion-sequence li:hover::before { background: var(--red); box-shadow: 0 0 0 5px rgba(214,40,40,.15); transform: scale(1.08); }
.commission-flow.motion-sequence article:hover,
.lifecycle-line.motion-sequence article:hover { background: rgba(227,38,46,.075); border-color: rgba(227,38,46,.55); }
.commission-flow.motion-sequence article::before,
.lifecycle-line.motion-sequence article::before { transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
.commission-flow.motion-sequence article:hover::before,
.lifecycle-line.motion-sequence article:hover::before { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(227,38,46,.12); }
.optimisation-list article { position: relative; }
.optimisation-list article::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transition: transform var(--motion-normal) var(--motion-ease);
}
.optimisation-list article:hover::before { transform: scaleY(1); }

/* Form feedback remains restrained and never shifts the layout. */
input,
select,
textarea { transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
input:hover,
select:hover,
textarea:hover { border-color: #aeb8be; }
input:focus,
select:focus,
textarea:focus { transform: translateY(-1px); }
.form-status { animation: bkp-status-in 360ms var(--motion-ease) both; }
@keyframes bkp-status-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Mobile menu is animated in both directions and the icon morphs to a close mark. */
.menu-toggle i { transition: transform var(--motion-normal) var(--motion-ease), opacity var(--motion-fast) ease; }
.site-header.menu-open .menu-toggle i:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.menu-open .menu-toggle i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 950px) {
  .site-header .main-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 18px;
    padding: 22px 30px;
    background: #fff;
    box-shadow: 0 12px 18px rgba(7,19,29,.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--motion-normal) ease, transform var(--motion-normal) var(--motion-ease), visibility 0s linear var(--motion-normal);
  }
  .site-header.menu-open .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .site-header .main-nav a { opacity: 0; transform: translateY(-5px); transition: opacity var(--motion-fast), transform var(--motion-fast), color var(--motion-fast); }
  .site-header.menu-open .main-nav a { opacity: 1; transform: none; }
  .site-header.menu-open .main-nav a:nth-child(2) { transition-delay: 35ms; }
  .site-header.menu-open .main-nav a:nth-child(3) { transition-delay: 70ms; }
  .site-header.menu-open .main-nav a:nth-child(4) { transition-delay: 105ms; }
  .site-header.menu-open .main-nav a:nth-child(5) { transition-delay: 140ms; }
  .site-header.menu-open .main-nav a:nth-child(6) { transition-delay: 175ms; }
  .site-header.menu-open .main-nav a:nth-child(7) { transition-delay: 210ms; }
}

@media (max-width: 700px) {
  .motion-reveal,
  .motion-reveal.motion-left,
  .motion-reveal.motion-right { transform: translate3d(0,14px,0); }
  .motion-reveal.motion-scale { transform: scale(.99); filter: none; }
  .motion-sequence > * { transform: translateY(12px); transition-delay: calc(var(--step-delay,0ms) * .55); }
  .hero-media { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .motion-reveal,
  .motion-reveal.motion-left,
  .motion-reveal.motion-right,
  .motion-reveal.motion-scale,
  .motion-sequence > *,
  .motion-loaded .hero-content > *,
  .motion-loaded .about-hero-copy > *,
  .motion-loaded .services-hero-copy > *,
  .motion-loaded .contact-hero-copy > *,
  .motion-loaded .career-hero-copy > *,
  .motion-loaded .hero-media,
  .motion-loaded .about-hero-image,
  .motion-loaded .services-hero-image,
  .motion-loaded .direct-panel,
  .motion-loaded .career-hero-media {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .lifecycle-copy ol.motion-sequence::after,
  .motion-divider::after { transform: scale(1); transition: none; }
  .button::after { display: none; }
}