/* Editorial motion: progressive enhancement, with native scrolling throughout. */
html.cls-motion-loading::before {
  content: '';
  position: fixed;
  z-index: 1000;
  inset: 0 auto auto -35%;
  width: 35%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #53d8e9 45%, #b4f1f7);
  animation: cls-loading-line 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
.loading-content::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 18px;
  border: 2px solid #d6edf0;
  border-top-color: #16778a;
  border-radius: 50%;
  animation: cls-loading-ring .9s linear infinite;
}
@keyframes cls-loading-line { to { transform: translateX(390%); } }
@keyframes cls-loading-ring { to { transform: rotate(360deg); } }

.motion-reveal { opacity: 1; }
html.cls-motion-ready .motion-reveal {
  transition: opacity 850ms cubic-bezier(.2, .65, .25, 1), translate 850ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}
html.cls-motion-ready .motion-reveal:not(.is-revealed) {
  opacity: 0;
  translate: 0 20px;
}
html.cls-motion-ready .motion-reveal.is-revealed {
  opacity: 1;
  translate: none;
}
html.cls-motion-ready .motion-reveal:focus-visible,
html.cls-motion-ready .motion-reveal:focus-within {
  opacity: 1;
  translate: none;
  transition: none;
}
html.cls-motion-ready .motion-reveal.is-motion-immediate {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}
html.cls-motion-ready .motion-reveal-opacity:not(.is-revealed),
html.cls-motion-ready .motion-reveal-opacity.is-revealed { translate: none; }

/* Real text is wrapped once. No cloned headings or alternative reading order. */
.motion-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
html.cls-motion-ready .motion-word-heading .motion-word {
  opacity: 0;
  translate: 0 .15em;
  transition: opacity 820ms cubic-bezier(.2, .65, .25, 1), translate 850ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--motion-delay, 0ms) + var(--word-delay, 0ms));
}
html.cls-motion-ready .motion-word-heading.is-words-revealed .motion-word,
html.cls-motion-ready .motion-word-heading:focus-within .motion-word {
  opacity: 1;
  translate: none;
}
html.cls-motion-ready .motion-word-heading.is-words-immediate .motion-word {
  opacity: 1;
  translate: none;
  transition: none;
}
.motion-route-entry { animation: cls-route-enter 450ms ease-out; }
@keyframes cls-route-enter { from { opacity: .88; } to { opacity: 1; } }

/* A small photographic drift, isolated from the frame, curves and controls. */
.motion-parallax-frame { overflow: hidden; }
.motion-parallax-image {
  scale: 1.045;
  translate: 0 var(--motion-photo-y, 0px);
  transform-origin: center;
}

/* Only photographs respond to the pointer; copy and controls remain still. */
.motion-card .motion-card-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.motion-card .motion-card-frame::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--motion-x, 50%) var(--motion-y, 50%), #ffffff16, transparent 75%);
  opacity: 0;
  transition: opacity 450ms ease;
}
.motion-card .motion-card-frame:has(> figcaption)::after { display: none; }
.motion-card .motion-card-frame > span { z-index: 2; }
.motion-card .motion-card-frame > img {
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  html.cls-motion-ready .motion-card.is-pointer-active .motion-card-frame > img {
    transform: perspective(1400px) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg)) scale(1.015);
    transition-duration: 300ms;
  }
  html.cls-motion-ready .motion-card.is-pointer-active .motion-card-frame::after { opacity: 1; }
  html.cls-motion-ready :is(.button, .text-link) > span[aria-hidden="true"] {
    transition: transform 180ms ease;
  }
  html.cls-motion-ready :is(.button, .text-link):hover > span[aria-hidden="true"] {
    transform: translateX(2px);
  }
}

/* Soft light and ocean currents, isolated from the video and text layers. */
.motion-scene { position: relative; isolation: isolate; }
.motion-scene > .motion-ambient {
  --motion-ambient-opacity: .05;
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 30%, #53d8e9, transparent 58%);
  opacity: var(--motion-ambient-opacity);
  animation: cls-ambient-drift 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.solutions-ocean-hero.motion-scene > .motion-ambient { --motion-ambient-opacity: .12; }
.motion-scene.is-scene-active > .motion-ambient { animation-play-state: running; }
.home-hero.motion-scene > :is(.eyebrow, h1, p, .hero-actions) { position: relative; z-index: 1; }
.motion-scene .ocean-current-art {
  animation: cls-ocean-drift 20s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.motion-scene.is-scene-active .ocean-current-art { animation-play-state: running; }
html.cls-motion-paused .motion-ambient,
html.cls-motion-paused .motion-scene .ocean-current-art { animation-play-state: paused; }
@keyframes cls-ambient-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(.98); opacity: calc(var(--motion-ambient-opacity) * .7); }
  to { transform: translate3d(2%, 2%, 0) scale(1.04); opacity: var(--motion-ambient-opacity); }
}
@keyframes cls-ocean-drift {
  from { transform: translate3d(-1%, 0, 0); }
  to { transform: translate3d(1%, 0, 0); }
}

dialog[open] { animation: cls-dialog-enter 300ms cubic-bezier(.22, 1, .36, 1) both; }
dialog[open]::backdrop { animation: cls-backdrop-enter 250ms ease-out both; }
@keyframes cls-dialog-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cls-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

@media (hover: none), (pointer: coarse) {
  html.cls-motion-ready .motion-card.is-pointer-active .motion-card-frame > img { transform: none; }
  .motion-card .motion-card-frame::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.cls-motion-ready .motion-reveal,
  html.cls-motion-ready .motion-reveal:not(.is-revealed) {
    opacity: 1;
    translate: none;
    transition: none;
  }
  html.cls-motion-ready .motion-word-heading .motion-word { opacity: 1; translate: none; transition: none; }
  .motion-route-entry { animation: none; }
  .motion-parallax-image { scale: none; translate: none; }
  .motion-card .motion-card-frame > img,
  html.cls-motion-ready .motion-card.is-pointer-active .motion-card-frame > img,
  html.cls-motion-ready :is(.button, .text-link):hover > span[aria-hidden="true"] { transform: none; transition: none; }
  .motion-card .motion-card-frame::after,
  .motion-scene > .motion-ambient { display: none; }
  .motion-scene .ocean-current-art { animation: none; transform: none; }
  dialog[open], dialog[open]::backdrop, .loading-content::before { animation: none; }
  html.cls-motion-loading::before {
    animation: none;
    left: 0;
    width: 100%;
    background: #53d8e9;
  }
}