/* Optional motion layer. Every page remains fully visible without timeline support. */
.scroll-progress { display: none; }

.reveal { opacity: 1; }
.orbit-art .orbit-ring {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .button > span,
  .text-link > span,
  .circle-arrow {
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
  }
  .button:is(:hover, :focus-visible) > span,
  .text-link:is(:hover, :focus-visible) > span {
    transform: translateX(3px);
  }

  @supports (animation-timeline: view()) and (animation-range: entry 0% cover 25%) {
    .reveal {
      animation: v1-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    .parallax-media {
      overflow: hidden;
      view-timeline-name: --v1-media;
      view-timeline-axis: block;
    }
    .parallax-media > img {
      animation: v1-image-drift linear both;
      animation-timeline: --v1-media;
      animation-range: cover 0% cover 100%;
    }

    .journey-step {
      view-timeline-name: --v1-step;
      view-timeline-axis: block;
    }
    .journey-step::before {
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      height: 2px;
      background: var(--lime, #dcecaa);
      transform-origin: left center;
      pointer-events: none;
      animation: v1-line-draw linear both;
      animation-timeline: --v1-step;
      animation-range: entry 0% cover 40%;
    }

    .orbit-art {
      view-timeline-name: --v1-orbit;
      view-timeline-axis: block;
    }
    .orbit-art .orbit-ring {
      animation: v1-orbit-turn linear both;
      animation-timeline: --v1-orbit;
      animation-range: cover 0% cover 100%;
    }
    .orbit-art .orbit-ring:nth-of-type(even) {
      animation-direction: reverse;
    }
    .orbit-art .orbit-core {
      animation: v1-core-light linear both;
      animation-timeline: --v1-orbit;
      animation-range: entry 0% cover 40%;
    }
  }

  @supports (animation-timeline: scroll(root block)) {
    .scroll-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      height: 2px;
      z-index: 1000;
      background: var(--lime, #dcecaa);
      transform-origin: left center;
      pointer-events: none;
      animation: v1-line-draw linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes v1-reveal {
  from { opacity: .3; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v1-image-drift {
  from { transform: translateY(-3%) scale(1.1); }
  to { transform: translateY(3%) scale(1.1); }
}
@keyframes v1-line-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes v1-orbit-turn {
  from { transform: rotate(-25deg); }
  to { transform: rotate(45deg); }
}
@keyframes v1-core-light {
  from { opacity: .55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .reveal,
  .parallax-media > img,
  .journey-step::before,
  .orbit-art .orbit-ring,
  .orbit-art .orbit-core {
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  .scroll-progress,
  .journey-step::before { display: none !important; }
  .reveal,
  .parallax-media > img,
  .orbit-art .orbit-ring,
  .orbit-art .orbit-core {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}