/* Scroll motion - stage 1b. Everything that hides content is scoped to html.motion,
   which is set in <head> only when the visitor does not prefer reduced motion. */

/* Header and navigation states (not motion-dependent) */
.site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.site-header.is-scrolled { background: rgba(10, 26, 40, 0.96); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.site-nav a.is-active { color: var(--c-gold-soft); opacity: 1; }

/* Reveal: fade and rise, staggered by --i (set in motion.js) */
.motion .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.65, 0.3, 1),
    transform 0.8s cubic-bezier(0.2, 0.65, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion .reveal.is-in { opacity: 1; transform: none; }

/* Gold rules draw from the left */
.motion .rule.reveal {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.motion .rule.reveal.is-in { transform: scaleX(1); }
.motion .rule--full.reveal { opacity: 0.35; }

/* Globe: grid fades in, arcs draw, dots appear last */
.motion .globe-lines__arcs path {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}
.motion .globe-lines.is-in .globe-lines__arcs path { stroke-dashoffset: 0; }
.motion .globe-lines__dots { opacity: 0; transition: opacity 0.6s ease 2.1s; }
.motion .globe-lines.is-in .globe-lines__dots { opacity: 1; }

/* Hero globe floats gently */
@keyframes cc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.motion .hero__visual { animation: cc-float 9s ease-in-out infinite; }

/* Buttons lift slightly on hover */
.motion .btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.motion .btn:hover { transform: translateY(-2px); }