/* Premium marine motion — restrained, accessible and responsive. */
.hero-reference-art {
  transform: perspective(1400px) rotateX(var(--marine-tilt-x, 0deg)) rotateY(var(--marine-tilt-y, 0deg));
  transform-origin: center;
  transition: transform 650ms cubic-bezier(.2,.75,.25,1), filter 650ms ease;
  will-change: transform;
}
.hero-reference-image {
  opacity: .88;
  transform: translate3d(var(--marine-shift-x, 0px), calc(8px + var(--marine-shift-y, 0px)), 0) scale(1.012);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.75,.25,1), filter 700ms ease;
  filter: saturate(.96);
}
.marine-hero-loaded .hero-reference-image {
  opacity: 1;
  transform: translate3d(var(--marine-shift-x, 0px), var(--marine-shift-y, 0px), 0) scale(1);
  filter: saturate(1.035);
}
.marine-hero-ready .hero-reference-art { overflow: hidden; }
.marine-hero-ready .hero-reference-quote { transition: background-color 250ms ease, box-shadow 250ms ease; }
.marine-hero-ready .hero-reference-quote:hover { background: rgba(0, 92, 210, .055); box-shadow: inset 0 0 0 1px rgba(0, 105, 235, .18); }
.marine-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 720ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--marine-delay, 0ms);
}
.marine-reveal.marine-visible { opacity: 1; transform: translate3d(0, 0, 0); }
#app .card, #app .step, #app .person {
  background-image: radial-gradient(220px circle at var(--marine-spot-x, -300px) var(--marine-spot-y, -300px), rgba(20, 126, 255, .095), transparent 72%);
  transition: transform 350ms cubic-bezier(.2,.7,.2,1), box-shadow 350ms ease, border-color 350ms ease;
}
#app .pill, #app .btn-o, header .btn-o {
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 250ms ease, background-color 250ms ease;
}
#app .pill:hover, #app .btn-o:hover, header .btn-o:hover {
  transform: translate3d(var(--marine-button-x, 0px), var(--marine-button-y, 0px), 0) translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 76, 180, .15);
}
@media (max-width: 760px) {
  .hero-reference-art { transform: none !important; }
  .hero-reference-image { transform: none !important; }
  .marine-reveal { transform: translate3d(0, 14px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reference-art, .hero-reference-image, .marine-reveal,
  #app .card, #app .step, #app .person, #app .pill, #app .btn-o, header .btn-o {
    transition: none !important; transform: none !important; animation: none !important;
  }
  .marine-reveal { opacity: 1 !important; }
}