/* Motion trial (branch: motion-trial). Each effect is switched on by a
   class that motion.js adds to <html>, one per feature. Turn any feature
   off in the FEATURES list at the top of motion.js.

   Safety rule: nothing here hides content unless motion.js has run, the
   browser supports it, and the visitor hasn't asked for reduced motion.
   If the script fails for any reason, the page looks exactly as it did
   before this branch. */

/* ---------- Scroll reveal + stagger (feature: reveal) ---------- */

.motion-reveal .reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .motion-reveal .reveal {
    transform: translateY(14px);
    transition-duration: 0.45s;
  }
}

/* ---------- Page-load fade for the banner text (feature: heroFade) ---------- */

.motion-heroFade .hero__content,
.motion-heroFade .page-hero__content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-heroFade .hero__content.is-loaded,
.motion-heroFade .page-hero__content.is-loaded {
  opacity: 1;
  transform: none;
}

/* ---------- Header shadow after scrolling (feature: navbarShadow) ---------- */

.motion-navbarShadow .site-header {
  transition: box-shadow 0.3s ease;
}

.motion-navbarShadow .site-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(10, 32, 68, 0.1);
}

/* ---------- Parallax on banner photos (feature: parallax) ---------- */
/* The movement itself is set inline by motion.js. */

@media (min-width: 901px) {
  .motion-parallax .hero__slide img,
  .motion-parallax .page-hero__bg,
  .motion-parallax .safety__bg {
    will-change: transform;
  }
}

/* ---------- Counting fleet numbers (feature: counters) ---------- */

.motion-counters .fleet-panel__count,
.motion-counters .fleet-stat__num {
  font-variant-numeric: tabular-nums;
}

/* ---------- Smooth open/close for job details (feature: accordion) ---------- */
/* Animated by motion.js (measures the real height, works in every browser).
   While a job is closing it's still technically [open], so switch the label
   back to "View Details" straight away instead of at the end. */

.motion-accordion .vacancy[data-closing="true"] .vacancy__toggle-open {
  display: inline;
}

.motion-accordion .vacancy[data-closing="true"] .vacancy__toggle-close {
  display: none;
}

/* ---------- Fade between Land / Marine fleet tabs (feature: tabs) ---------- */
/* motion.js dips the opacity when tabs.js reveals a panel; this makes it animate. */

.motion-tabs [role="tabpanel"] {
  transition: opacity 0.25s ease;
}

/* ---------- Form messages fade in (feature: formFade) ---------- */

.motion-formFade .form-status {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.motion-formFade .form-status.is-visible {
  opacity: 1;
  transform: none;
}