/* Styles for assets/motion.js. Every rule is scoped under .motion, which the script sets only
   when the visitor allows motion, so removing the script removes all of this. */

/* Halftone spotlight: between the rings and the content (.page is z-index 1). */
.motion .spotlight { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.motion .spotlight canvas { position: absolute; left: 0; top: 0; will-change: transform; }

/* Click ring. */
.motion .click-ring {
  position: fixed;
  z-index: 1000;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  animation: click-ring .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes click-ring {
  from { transform: scale(.15); opacity: .9; }
  to   { transform: scale(1);   opacity: 0; }
}

/* Ring door: a blue disc grows from the click, a background-coloured disc follows just behind
   it, so a blue ring sweeps outward and leaves a clean page. */
.motion .ring-door { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }
.motion .ring-door i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform .5s cubic-bezier(.55, 0, .35, 1);
}
.motion .ring-door i + i { background: var(--bg); transition-delay: .12s; }
.motion .ring-door.is-open i { transform: scale(1); }

/* Reveal on scroll: cards, KPIs and chart panels float up from 48px and 98% size, slow and soft. */
/* An animation, not a transition: elements already on screen get .is-in before the first paint,
   when a transition would have no start state and simply jump. */
.motion .reveal:not(.is-in) { opacity: 0; }
.motion .reveal.is-in { animation: rv-lift 1.6s cubic-bezier(.16, 1, .3, 1) backwards; }
.motion h2.reveal.is-in { animation: rv-title .8s cubic-bezier(.16, 1, .3, 1) backwards; }   /* a short rise only */
@keyframes rv-lift { from { opacity: 0; translate: 0 48px; scale: .98; } 60% { opacity: 1; } }
@keyframes rv-title { from { opacity: 0; translate: 0 14px; } }

/* Intro on every page load: the headline's words (or letters, for a one-word title) rise out of a
   hidden slot one after another; the label, tagline and lead fade up; the halftone rings fade in. */
.motion .rv-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em 0; margin: 0 -.04em -.14em 0; }
.motion .rv-w { display: inline-block; animation: rv-rise .8s cubic-bezier(.215, .61, .355, 1) var(--d, 0s) backwards; }
.motion .intro-up { animation: rv-up .7s cubic-bezier(.16, 1, .3, 1) var(--d, .3s) backwards; }
.motion .dots-top { animation: ring-spin 150s linear infinite, rv-fade 1.4s cubic-bezier(.16, 1, .3, 1) .15s backwards; }
.motion .dots-bottom { animation: ring-spin 120s linear infinite reverse, rv-fade 1.4s cubic-bezier(.16, 1, .3, 1) .15s backwards; }
@keyframes rv-rise { from { transform: translateY(110%); } }
@keyframes rv-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes rv-fade { from { opacity: 0; } }

/* Screen-reader copy of a split headline (the animated letters are hidden from assistive tech). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Printing or "Save as PDF": show everything, including what never scrolled into view. */
@media print {
  .motion .reveal, .motion .rv-w, .motion .intro-up { opacity: 1 !important; animation: none !important; transform: none !important; translate: none !important; scale: none !important; }
  .motion .spotlight, .motion .click-ring, .motion .ring-door { display: none !important; }
}