/* ============================================================
   Business Ocean — motion. Loads last; .no-motion always wins.
   All animation CSS is scoped under html:not(.no-motion).
   ============================================================ */

/* -- scroll reveals ------------------------------------------- */
html:not(.no-motion) [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 55ms);
}

html:not(.no-motion) [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* -- masked word reveals for display headings ---------------------- */
/* the words do the entrance — no double fade on the heading itself */
html:not(.no-motion) [data-reveal].has-words {
  opacity: 1;
  transform: none;
}

/* gradient <em> words: gradient per word (em-level clip breaks on masks) */
.has-words em { background: none !important; }

.has-words em .w > span {
  background: var(--grad-metric);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.has-words .w {
  /* an inline-block is atomic: without this a single long word sets the
     column's minimum width and drags the layout past the viewport */
  max-width: 100%;
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-block-end: 0.08em;
  margin-block-end: -0.08em;
}

.has-words .w > span {
  display: inline-block;
  translate: 0 108%;
  transition: translate 640ms var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 50ms);
}

[data-reveal].is-inview .has-words .w > span,
[data-reveal].is-inview.has-words .w > span,
.has-words.is-inview .w > span {
  translate: 0 0;
}

/* -- marquee ----------------------------------------------------- */
/* .marquee--live is set by marquee.js once the clone exists, so the original
   and the clone start together — otherwise the seam drifts by the load time */
html:not(.no-motion) .marquee--live .marquee__track {
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}

html:not(.no-motion) .marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* the gutter comes back with the mask: unwrapped, the track is bled to the
   screen edge on purpose, but once it wraps into rows the icons sat at x=0
   while every other block kept its margin */
.no-motion .marquee { mask-image: none; -webkit-mask-image: none; flex-wrap: wrap; padding-inline: var(--gutter); }
.no-motion .marquee__track { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; row-gap: var(--space-3); }
.no-motion .marquee__track[aria-hidden="true"] { display: none; }

/* -- floating hero chips ------------------------------------------ */
html:not(.no-motion) .float-chip {
  animation: buoy 5.5s var(--ease-inout) infinite;
}

html:not(.no-motion) .float-chip--b {
  animation-delay: -2.75s;
}

@keyframes buoy {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -7px; rotate: -0.5deg; }
}

/* -- tide line drift ------------------------------------------------ */
html:not(.no-motion) .tide path {
  stroke-dasharray: 6 10;
  animation: tide-drift 26s linear infinite;
}

@keyframes tide-drift {
  to { stroke-dashoffset: -640; }
}

/* -- hero photo entrance --------------------------------------------- */
html:not(.no-motion) .hero__media .frame img {
  scale: 1.06;
  transition: scale 1.4s var(--ease-out);
}

html:not(.no-motion) .hero__media.is-inview .frame img {
  scale: 1;
}

/* -- dive gauge number ------------------------------------------------- */
.dive__gauge-depth { transition: color var(--dur-2) var(--ease-out); }

/* -- reduced-motion / static: hard off switch --------------------------- */
.no-motion *,
.no-motion *::before,
.no-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

.no-motion .header.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--paper);
}

.no-motion .float-chip,
.no-motion .dive__principles article {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--paper);
}