/* Motion is opt-in at runtime, with an entirely static reduced-motion mode. */
.button,
.round-button {
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.button-primary:hover {
  background: #064258;
  box-shadow: 0 8px 24px #005f7f22;
}
.button-glass:hover {
  background: #ffffff45;
}
.round-button:not(:disabled):hover {
  background: var(--ink);
  border-color: var(--ink);
}
.round-button:not(:disabled):hover img {
  filter: invert(1);
}
.motion-enabled .button {
  transform: translate(
    calc(var(--pointer-x, 0) * 7px),
    calc(var(--pointer-y, 0) * 7px)
  );
}
.hero-banner {
  overflow: hidden;
}
.hero-banner:after {
  content: "";
  position: absolute;
  inset: -100% -40%;
  background: linear-gradient(
    110deg,
    transparent 40%,
    #ffffff16 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  pointer-events: none;
}
.motion-enabled .hero-banner:hover:after {
  animation: glass-sheen 1.1s ease-out;
}
.banner-action > span {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-banner:hover .banner-action > span {
  transform: translateX(8px);
}
.deliverables {
  position: relative;
}
.deliverables:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #005f7f, #8ebccb);
  transform: scaleX(var(--deliverable-progress, 0));
  transform-origin: left;
}
.deliverable-list > span {
  transition:
    opacity 0.5s,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.5s;
}
.motion-enabled .deliverable-list > span.active {
  transform: translateX(8px);
  color: #fff;
}
.motion-enabled .deliverable-list > span:not(.active) {
  transform: translateX(-4px);
}
.story {
  transition:
    box-shadow 0.4s,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.story > img {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-enabled .story:hover {
  transform: perspective(1400px) rotateX(calc(var(--pointer-y, 0) * -3deg))
    rotateY(calc(var(--pointer-x, 0) * 3deg));
  box-shadow: 0 20px 36px #090a0c15;
}
.motion-enabled .story:hover > img {
  transform: scale(1.055);
}
.story p {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-enabled .story:hover p {
  transform: translateX(8px);
}
.benefit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.benefit:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    circle at calc((var(--pointer-x, 0) + 0.5) * 100%)
      calc((var(--pointer-y, 0) + 0.5) * 100%),
    #005f7f12,
    transparent 65%
  );
  transition: opacity 0.5s;
}
.benefit:hover:after {
  opacity: 1;
}
.technical-icon {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-enabled .benefit:hover .discovery-icon {
  transform: rotate(90deg);
}
.motion-enabled .benefit:hover .quality-icon {
  transform: rotate(180deg);
}
.motion-enabled .benefit:hover .capacity-icon img {
  animation: trace-offset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-enabled .capacity-icon img:nth-child(2) {
  animation-delay: 0.1s;
}
.motion-enabled .capacity-icon img:nth-child(3) {
  animation-delay: 0.2s;
}
.security-grid > div {
  transition: background 0.4s;
}
.security-grid > div:hover {
  background: #005f7f06;
}
.security-grid > div > span {
  transition:
    border-color 0.4s,
    color 0.4s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-enabled .security-grid > div:hover > span {
  border-color: #005f7f66;
  color: var(--accent);
  transform: translateY(-5px);
}
@keyframes glass-sheen {
  to {
    transform: translateX(100%);
  }
}
@keyframes trace-offset {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .hero-image,
  .closing > img,
  .button,
  .story,
  .technical-icon {
    transform: none !important;
  }
  .deliverables:after {
    display: none;
  }
}