/* Deliberately separated from the core layout so the page remains readable
   even when motion is unavailable or disabled. */

h1 {
  animation: none;
}

.title-line {
  display: block;
  color: inherit;
  font-style: normal;
}

.title-line.title-accent {
  color: var(--accent);
  font-style: italic;
}

.hero-copy {
  animation: none;
}

.bearing-needle {
  position: absolute;
  top: calc(50% - 0.75px);
  left: 50%;
  display: block;
  width: 38%;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgb(52 111 91 / 8%));
  filter: drop-shadow(0 0 0.35rem rgb(52 111 91 / 18%));
  transform: rotate(-38deg);
  transform-origin: left center;
}

.bearing-needle::after {
  position: absolute;
  top: calc(50% - 0.28rem);
  right: -0.28rem;
  width: 0.56rem;
  height: 0.56rem;
  border: 1px solid rgb(52 111 91 / 45%);
  border-radius: 50%;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 0 0 0.4rem rgb(52 111 91 / 7%);
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    animation: motion-reveal 1s var(--entrance-easing) 100ms both;
  }

  .brand-needle {
    animation: motion-needle-settle 1.6s var(--entrance-easing) 580ms both;
  }

  .eyebrow {
    animation: motion-reveal 1s var(--entrance-easing) 240ms both;
  }

  .eyebrow::before {
    animation: motion-line-draw 1.1s var(--entrance-easing) 500ms both;
  }

  .title-line {
    animation: motion-title-reveal 1.2s var(--entrance-easing) both;
  }

  .title-line:nth-child(1) {
    animation-delay: 380ms;
  }

  .title-line:nth-child(2) {
    animation-delay: 530ms;
  }

  .title-line:nth-child(3) {
    animation-delay: 680ms;
  }

  .hero-copy p {
    animation: motion-reveal 1s var(--entrance-easing) both;
  }

  .hero-copy p:nth-child(1) {
    animation-delay: 880ms;
  }

  .hero-copy p:nth-child(2) {
    animation-delay: 1.05s;
  }

  .hero-copy p:nth-child(3) {
    animation-delay: 1.22s;
  }

  .site-footer {
    animation: motion-reveal 1s var(--entrance-easing) 1.4s both;
  }

  .orbital-mark {
    animation:
      motion-diagram-enter 1.8s var(--entrance-easing) 180ms both,
      motion-diagram-float 8s ease-in-out 2s infinite alternate;
  }

  .orbit::before {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
      from 15deg,
      transparent 0 60%,
      rgb(52 111 91 / 5%) 67%,
      rgb(52 111 91 / 58%) 78%,
      var(--accent) 82%,
      rgb(52 111 91 / 12%) 88%,
      transparent 96% 100%
    );
    content: "";
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      #000 calc(100% - 1px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      #000 calc(100% - 1px)
    );
  }

  .orbit::after {
    width: 0.62rem;
    height: 0.62rem;
    box-shadow:
      0 0 0 0.42rem rgb(52 111 91 / 9%),
      0 0 1.1rem rgb(52 111 91 / 28%);
  }

  .orbit-one {
    animation: motion-orbit-clockwise 18s linear infinite;
  }

  .orbit-two {
    animation: motion-orbit-counter-clockwise 12s linear infinite;
  }

  .orbit-two::after {
    width: 0.44rem;
    height: 0.44rem;
  }

  .axis {
    animation: motion-axis-breathe 4s ease-in-out infinite;
  }

  .axis-horizontal {
    animation-delay: -2s;
  }

  .bearing-needle {
    animation: motion-bearing-sweep 10s ease-in-out infinite alternate;
  }

  .centre-point {
    animation: motion-centre-pulse 2.8s ease-in-out infinite;
  }
}

@keyframes motion-reveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(1.6rem);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes motion-title-reveal {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(2.4rem) scale(0.975);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes motion-line-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes motion-needle-settle {
  from {
    opacity: 0;
    transform: rotate(-55deg) scale(0.7);
  }

  65% {
    opacity: 1;
    transform: rotate(6deg) scale(1.05);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes motion-diagram-enter {
  from {
    opacity: 0;
    filter: blur(14px);
    scale: 0.86;
  }

  to {
    opacity: 1;
    filter: blur(0);
    scale: 1;
  }
}

@keyframes motion-diagram-float {
  from {
    translate: 0 0;
  }

  to {
    translate: -1.35rem 0.9rem;
  }
}

@keyframes motion-orbit-clockwise {
  to {
    transform: rotate(1turn);
  }
}

@keyframes motion-orbit-counter-clockwise {
  to {
    transform: rotate(-1turn);
  }
}

@keyframes motion-axis-breathe {
  0%,
  100% {
    opacity: 0.38;
  }

  50% {
    opacity: 1;
  }
}

@keyframes motion-bearing-sweep {
  0% {
    opacity: 0.42;
    transform: rotate(-44deg);
  }

  45% {
    opacity: 0.95;
  }

  100% {
    opacity: 0.58;
    transform: rotate(18deg);
  }
}

@keyframes motion-centre-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0.55rem rgb(52 111 91 / 12%);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 1.45rem rgb(52 111 91 / 0%);
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .eyebrow,
  .title-line,
  .hero-copy,
  .hero-copy p,
  .site-footer,
  .orbital-mark,
  .brand-needle,
  .orbit,
  .axis,
  .bearing-needle,
  .centre-point {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    scale: 1 !important;
    translate: 0 0 !important;
  }
}