/* Small, one-time entrances. Nothing is hidden unless the observer is active. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transition: opacity 700ms var(--ease-out) var(--reveal-delay, 0ms),
      transform 700ms var(--ease-out) var(--reveal-delay, 0ms),
      box-shadow 250ms ease;
  }

  .reveal-pending {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }

  .reveal-immediate,
  [data-reveal]:focus-within {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }

  .reveal-immediate {
    transition-duration: 0ms;
  }

  .hero {
    overflow: clip;
  }

  .hero-entering .hero-image {
    animation: hero-settle 1800ms var(--ease-out) both;
    transform-origin: 70% 50%;
  }

  .hero-entering .hero-content > * {
    animation: rise-in 850ms var(--ease-out) both;
  }

  .hero-entering .hero-content > :nth-child(2) { animation-delay: 100ms; }
  .hero-entering .hero-content > :nth-child(3) { animation-delay: 210ms; }
  .hero-entering .hero-content > :nth-child(4) { animation-delay: 320ms; }

  .site-header {
    transition: box-shadow 250ms ease;
  }

  .site-header.is-scrolled {
    box-shadow: 0 4px 20px #10273d0e;
  }

  .site-header::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left;
    pointer-events: none;
  }

  .site-header nav > a:not([aria-current="page"])::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease-out);
  }

  .site-header nav > a:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
  }

  .button {
    transition: transform 220ms var(--ease-out), background 200ms ease,
      box-shadow 220ms ease;
  }

  .button:active { transform: translateY(0) scale(.98); }

  .transport-item strong,
  .transport-item .mode-symbol {
    transition: transform 300ms var(--ease-out);
  }

  .service-card { overflow: hidden; }
  .about-image { overflow: hidden; }

  .service-card > img,
  .about-image > img {
    transition: transform 750ms var(--ease-out);
  }

  .service-card details[open] .service-detail {
    animation: rise-in-small 300ms var(--ease-out) both;
  }

  .journey-card.is-revealed .journey-steps::before {
    transform-origin: left;
    animation: route-draw 1000ms var(--ease-out) 250ms both;
  }

  .journey-card.is-revealed .journey-dot {
    animation: checkpoint 650ms var(--ease-out) 300ms both;
  }

  .journey-card.is-revealed li:nth-child(2) .journey-dot { animation-delay: 650ms; }
  .journey-card.is-revealed li:nth-child(3) .journey-dot { animation-delay: 1000ms; }

  .process-steps > .is-revealed .step-number {
    animation: checkpoint 650ms var(--ease-out) var(--reveal-delay, 0ms) both;
  }

  .quote-dialog[open] {
    animation: dialog-enter 280ms var(--ease-out) both;
  }

  .quote-dialog[open]::backdrop {
    animation: backdrop-enter 220ms ease both;
  }

  .menu-toggle span {
    transition: transform 220ms var(--ease-out), opacity 150ms ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (hover: hover) and (pointer: fine) {
    .button:hover { transform: translateY(-3px); }
    .button-dark:hover { box-shadow: 0 8px 22px #10273d22; }
    .button:active { transform: translateY(0) scale(.98); }
    .transport-item:hover strong { transform: translateY(-3px); }
    .transport-item:hover .mode-symbol { transform: translateX(5px); }
    .service-card:not(.reveal-pending):hover { box-shadow: 0 16px 32px #10273d14; }
    .service-card:hover > img { transform: scale(1.035); }
    .about-image:hover > img { transform: scale(1.025); }
    .client-list img { transition: transform 300ms var(--ease-out); }
    .client-list li:hover img { transform: scale(1.045); }
  }

  @media (max-width: 850px) {
    [data-reveal] { --reveal-delay: 0ms !important; }
    .reveal-pending { transform: translate3d(0, 18px, 0); }
    .site-header nav.is-open { animation: rise-in-small 220ms var(--ease-out) both; }
    .site-header nav > a::after { display: none; }
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rise-in-small {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-settle {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}

@keyframes route-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes checkpoint {
  0% { box-shadow: 0 0 0 0 #21bce14d; }
  65% { box-shadow: 0 0 0 9px #21bce100; }
  100% { box-shadow: 0 0 0 0 #21bce100; }
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* This also covers a preference change while an entrance is running. */
@media (prefers-reduced-motion: reduce), print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-image, .hero-content > *, .journey-dot, .step-number,
  .journey-steps::before, .quote-dialog, .quote-dialog::backdrop,
  .service-detail, .site-header nav { animation: none !important; }
  .site-header::after { display: none; }
}