/* ==========================================================================
   Motion — hover, focus and entrance behaviour shared by every page.
   One easing, two durations. Effects are restrained so the Figma design
   stays intact; nothing moves more than a few pixels.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* long, soft settle for scroll-driven motion */
  --dur: 220ms;
  --dur-slow: 480ms;
  --dur-reveal: 1100ms;
}

/* --------------------------------------------------------------------------
   Buttons (primary pill)
   -------------------------------------------------------------------------- */
.btn {
  box-shadow: 0 0 0 rgba(23,123,235,0);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn img { transition: transform var(--dur) var(--ease); }
/* Brightness lift instead of an overlay pseudo-element, so the hover never depends on the button's positioning */
.btn:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(23,123,235,.28); filter: brightness(1.08); }
.btn:hover img { transform: translate(2px, -2px); }
.btn:active { translate: 0 0; box-shadow: 0 4px 12px rgba(23,123,235,.22); transition-duration: 90ms; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav__link, .nav__contact, .footer__link, .footer__text, .footer-m__item, .consent a {
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__contact { transition: opacity var(--dur) var(--ease); }
.nav__contact img { transition: transform var(--dur) var(--ease); }
.nav__contact:hover img { transform: translate(2px, -2px); }
.nav__logo img, .nav-m__logo img { transition: opacity var(--dur) var(--ease); }
.nav__logo:hover img, .nav-m__logo:hover img { opacity: .8; }
.nav-m__btn { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nav-m__btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.56); }
.nav-m--dark .nav-m__btn:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.2); }
.nav-m__btn:active { transform: scale(.96); }

/* Footer */
.footer__link:hover, .footer-m__item:hover, .footer__text[href]:hover { opacity: .7; }
.social a img { transition: transform var(--dur) var(--ease); }
.social a:hover img { transform: translateY(-2px) scale(1.06); }
.consent a:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.svc-card, .svc-feature, .svc-row, .info-card, .job {
  transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.svc-card:hover, .svc-feature:hover, .svc-row:hover, .info-card:hover, .job:hover {
  translate: 0 -4px; box-shadow: 0 16px 32px rgba(8,21,56,.08);
}

/* Round icon buttons inside cards */
.svc-card__icon, .svc-feature__icon span, .info-card__icon {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-card__icon img, .svc-feature__icon img { transition: transform var(--dur) var(--ease); }
.svc-card:hover .svc-card__icon { border-color: var(--blue); }
.svc-card__icon:hover img, .svc-feature__icon:hover img { transform: translate(2px, -2px); }
.svc-feature__icon { transition: border-color var(--dur) var(--ease); }
.svc-feature__icon:hover { border-color: rgba(23,123,235,.72); }

/* Photos zoom a touch inside their frames */
.svc-row__photo img, .svc-feature__photo img { transition: transform var(--dur-slow) var(--ease); }
.svc-row:hover .svc-row__photo img, .svc-feature:hover .svc-feature__photo img { transform: scale(1.03); }
.svc-row__photo--shifted img { transform-origin: 50% 50%; }
.svc-row--img-right:hover .svc-row__photo--shifted img,
.svc-row--img-left:hover .svc-row__photo--shifted img { transform: scale(1.03); }

/* Pager arrows */
.services__pager img { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); cursor: pointer; }
.services__pager img:first-child:hover { transform: translateX(-2px); }
.services__pager img:last-child:hover { transform: rotate(180deg) translateX(-2px); }

/* --------------------------------------------------------------------------
   Forms — focus mirrors the design's highlighted "First name" state
   -------------------------------------------------------------------------- */
.field__input, .field__textarea, .field__phone {
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:hover, .field__textarea:hover, .field__phone:hover { border-color: rgba(0,0,0,.16); }
.field__input:focus, .field__textarea:focus, .field__phone:focus-within {
  outline: none; border-color: var(--blue); background: rgba(23,123,235,.08);
  box-shadow: 0 0 0 2.5px rgba(23,123,235,.24);
}
.field__phone input:focus { outline: none; }
.consent img { transition: transform var(--dur) var(--ease); }
.consent:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Entrance — sections fade up once as they enter the viewport
   -------------------------------------------------------------------------- */
/* Uses the `translate`/`scale` properties so it never overrides layout transforms
   (e.g. translateX(-50%) centring). Long expo ease-out for a soft, unhurried settle. */
.reveal {
  transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out), scale var(--dur-reveal) var(--ease-out);
  will-change: opacity, translate;
}
.reveal:not(.is-visible) { opacity: 0; translate: 0 32px; scale: .985; }

/* Smooth in-page scrolling for anchor links */
html { scroll-behavior: smooth; }

/* Keyboard focus */
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { border-radius: 100px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .reveal:not(.is-visible) { opacity: 1; translate: 0 0; scale: 1; }
  html { scroll-behavior: auto; }
}

/* Carousel arrows (desktop) stay hidden until the pointer is over the section */
@media (hover: hover) and (min-width: 900px) {
  .deck-arrow { opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .corporate:hover .deck-arrow, .services:hover .deck-arrow,
  .corporate:focus-within .deck-arrow, .services:focus-within .deck-arrow { opacity: 1; translate: 0 0; pointer-events: auto; }
  .deck-arrow:hover { translate: 0 -2px; }
  .deck-arrow:active { translate: 0 0; }
}

/* --------------------------------------------------------------------------
   Page-load choreography — the hero assembles on first paint: photo settles
   from a slight zoom, the frame draws in, the emblem and copy rise into place.
   Pure CSS keyframes, so it plays without JavaScript.
   -------------------------------------------------------------------------- */
@keyframes hero-photo   { from { scale: 1.06; } to { scale: 1; } }
@keyframes fade-up      { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-down    { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in       { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes fade-up-ghost{ from { opacity: 0; translate: 0 24px; } to { opacity: .12; translate: 0 0; } }   /* ghost titles live at 12% */
@keyframes draw-x       { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y       { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Photo settle (Home hero + service-page heroes) */
.hero__photo img, .svc-hero img { animation: hero-photo 1.8s var(--ease-out) both; }

/* Navigation drops in */
.nav, .nav-m { animation: fade-down .9s var(--ease-out) .15s both; }

/* Home hero frame draws itself */
.hero__rule--top, .hero__rule--bottom { transform-origin: 50% 50%; animation: draw-x 1.1s var(--ease-out) .35s both; }
.hero__rule--left, .hero__rule--right { transform-origin: 50% 50%; animation: draw-y 1.1s var(--ease-out) .35s both; }
.hero__corner, .hero__notch { animation: fade-in .8s var(--ease-out) .9s both; }
.hero__tick { animation: fade-in .6s var(--ease-out) 1.1s both; }

/* Emblem and statement */
.hero__ring { animation: pop-in 1.2s var(--ease-out) .5s both; }
.hero__disc { animation: pop-in 1s var(--ease-out) .7s both; }
.hero__bird { animation: pop-in .9s var(--ease-out) .85s both; }
.hero__statement { animation: fade-up 1s var(--ease-out) 1s both; }

/* Other pages: banner / heading copy rises in */
.banner__title, .svc-copy__title { animation: fade-up 1s var(--ease-out) .3s both; }
.ghost-title { animation: fade-up-ghost 1s var(--ease-out) .3s both; }
.banner__sub, .contact__lead, .services__lead, .svc-copy__lead, .svc-copy__intro { animation: fade-up 1s var(--ease-out) .5s both; }
.banner__corner, .banner__rule, .banner__notch { animation: fade-in .9s var(--ease-out) .6s both; }
.info-cards { animation: fade-up 1s var(--ease-out) .7s both; }

@media (prefers-reduced-motion: reduce) {
  .hero__photo img, .svc-hero img, .nav, .nav-m, .hero__rule, .hero__corner, .hero__notch, .hero__tick,
  .hero__ring, .hero__disc, .hero__bird, .hero__statement, .banner__title, .ghost-title, .svc-copy__title,
  .banner__sub, .contact__lead, .services__lead, .svc-copy__lead, .svc-copy__intro, .banner__corner, .banner__rule, .banner__notch, .info-cards { animation: none; }
}

@media (prefers-reduced-motion: reduce) { .corporate__marquee { animation: none; } }

/* --------------------------------------------------------------------------
   Info cards (Contact, Careers) — the hovered card takes the navy treatment;
   the default navy card steps back to white while another card is hovered.
   -------------------------------------------------------------------------- */
.info-card { transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.info-card .grain, .info-card__lines, .info-card__sub, .info-card__icon, .info-card__icon img {
  transition: opacity var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.info-card:not(.info-card--2) .grain { opacity: 0; }
.info-card__icon { border: 1.5px solid transparent; padding: 12.5px; }

@media (hover: hover) {
  /* hovered → navy */
  .info-card:hover { background: var(--navy); color: var(--white); }
  /* grain arrives only once the colour has settled, so no speckle shows mid-fade */
  .info-card .grain { transition: opacity 200ms var(--ease); }
  .info-card:hover .grain { opacity: 1; transition: opacity 320ms var(--ease) 260ms; }
  .info-card:hover .info-card__lines { opacity: .29; }                     /* .56 → .16 line opacity */
  .info-card:hover .info-card__sub { color: var(--steel); opacity: 1; }
  .info-card:hover .info-card__icon { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .info-card:hover .info-card__icon img { filter: invert(1); }
  .info-card--2:hover .info-card__icon img, .info-card--2:hover .info-card__lines { filter: none; opacity: 1; }

  /* default navy card → white while a sibling is hovered */
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover),
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) { background: var(--white); color: var(--black); }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .grain,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .grain { opacity: 0; }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__lines,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__lines { opacity: 3.5; }   /* .16 → .56 (clamped to 1 on the image) */
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__sub,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__sub { color: var(--black); opacity: .7; }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon { background: #f5f5f5; border-color: transparent; }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img { filter: invert(1); }
}