/* Page effects. Hidden states exist only under .js and never with reduced motion. */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10003;
  background: var(--purple-blast);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

header { transition: box-shadow 0.25s ease; }
header.is-scrolled { box-shadow: 0 6px 20px var(--black-a12); }

/* In-page anchors stop below the sticky header */
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .star-left,
  .star-right {
    animation: starEntrance 1s ease-out forwards, starFloat 7s ease-in-out 1s infinite;
  }

  .star-right { animation-delay: 0s, 1.8s; }

  /* Buttons answer a press */
  .more-btn:active,
  .plan-cta:active,
  .fn-btn:active,
  .service-more:active { transform: scale(0.98); }

  .plan-cta,
  .service-more,
  .more-btn,
  .fn-btn { transition-property: background-color, color, border-color, transform; }

  .footer-socials a { transition: opacity 0.2s ease; }
}

@keyframes starFloat {
  0%, 100% { transform: scale(2) translateY(0) rotate(0deg); }
  50% { transform: scale(2) translateY(-10px) rotate(4deg); }
}