/* Sophron® motion layer: subtle reveals and easing on the existing design.
   Nothing here changes colour, type or layout. Every effect is gated on
   html.sph-motion (added by sph-motion.js once it has loaded) so a page with
   JS off, or a reader who prefers reduced motion, gets the plain page. */

html.sph-motion { scroll-behavior: smooth; }

/* Reveal on entry: elements tagged by the script start slightly low and faded,
   then ease into place. The attribute is removed after the transition so the
   element's own hover transitions take over untouched. */
html.sph-motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
html.sph-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Background chart lines draw themselves in on load */
html.sph-motion .sph-chart-bg polyline[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sph-draw 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
html.sph-motion .sph-chart-bg polyline[pathLength]:nth-of-type(2) { animation-delay: 0.35s; }
html.sph-motion .sph-chart-bg polygon {
  opacity: 0;
  animation: sph-fade 1.8s ease-out 0.6s forwards;
}
@keyframes sph-draw { to { stroke-dashoffset: 0; } }
@keyframes sph-fade { to { opacity: 1; } }

/* Nav links: a hairline of gold grows in from the left on hover */
html.sph-motion .sph-topnav-links a {
  position: relative;
  padding-bottom: 3px;
}
html.sph-motion .sph-topnav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.sph-motion .sph-topnav-links a:hover::after { transform: scaleX(1); }

/* Popup: settles into place instead of appearing */
html.sph-motion .sph-popup-inner {
  transform: translateY(10px) scale(0.985);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.sph-motion .sph-popup.is-open .sph-popup-inner { transform: none; }

/* Buttons and arrows: a touch more ease than the defaults */
html.sph-motion .sph-cta-band-btn { transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  html.sph-motion { scroll-behavior: auto; }
  html.sph-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.sph-motion .sph-chart-bg polyline[pathLength],
  html.sph-motion .sph-chart-bg polygon { animation: none; stroke-dashoffset: 0; opacity: 1; }
  html.sph-motion .sph-topnav-links a::after { transition: none; }
  html.sph-motion .sph-popup-inner { transition: none; transform: none; }
}