/* Shared CardonaLab whitepaper motion language.
   Content remains visible without JavaScript, in print, and with reduced motion. */
body[data-wp-motion] {
  --wp-motion-accent: var(--ac, var(--mg, var(--violet, #6d28d9)));
  --wp-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

.wp-reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  background: var(--wp-motion-accent);
  transform: scaleX(var(--wp-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.wp-motion-ready body[data-wp-motion] .wp-cover-item {
    opacity: 0;
    transform: translateY(14px);
  }

  html.wp-motion-ready body[data-wp-motion] .wp-cover-in .wp-cover-item {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease-out, transform .7s var(--wp-motion-ease);
    transition-delay: calc(.08s + var(--wp-order, 0) * 80ms);
  }

  /* The `main section` scope here MUST match the selector whitepaper-motion.js
     observes. Anything this rule hides is revealed only by that observer, so a
     section the observer never visits stays invisible forever. Widening this
     selector without widening the query in the JS reintroduces exactly the blank
     page the shared system exists to prevent. Change both or neither. */
  html.wp-motion-ready body[data-wp-motion] main section {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .58s ease-out, transform .7s var(--wp-motion-ease);
  }

  html.wp-motion-ready body[data-wp-motion] main section.wp-in {
    opacity: 1;
    transform: none;
  }

  html.wp-motion-ready body[data-wp-motion] main section h2,
  html.wp-motion-ready body[data-wp-motion] main section .section-head > * {
    opacity: 0;
    transform: translateY(8px);
  }

  html.wp-motion-ready body[data-wp-motion] main section.wp-in h2,
  html.wp-motion-ready body[data-wp-motion] main section.wp-in .section-head > * {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease-out, transform .55s var(--wp-motion-ease);
  }

  html.wp-motion-ready body[data-wp-motion] main section.wp-in .section-head > :nth-child(2) {
    transition-delay: 80ms;
  }

  html.wp-motion-ready body[data-wp-motion] .wp-motion-item {
    opacity: 0;
    transform: translateY(10px);
  }

  html.wp-motion-ready body[data-wp-motion] main section.wp-in .wp-motion-item {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease-out, transform .58s var(--wp-motion-ease);
    transition-delay: calc(.12s + var(--wp-order, 0) * 65ms);
  }

  html.wp-motion-ready body[data-wp-motion] .wp-figure img {
    opacity: .72;
    clip-path: inset(7% 0 7% 0);
  }

  html.wp-motion-ready body[data-wp-motion] main section.wp-in .wp-figure img {
    opacity: 1;
    clip-path: inset(0);
    transition: opacity .48s ease-out, clip-path .72s var(--wp-motion-ease);
    transition-delay: calc(.08s + var(--wp-order, 0) * 65ms);
  }

  html.wp-motion-ready body[data-wp-motion] .wp-figure figcaption {
    opacity: 0;
    transform: translateY(5px);
  }

  html.wp-motion-ready body[data-wp-motion] main section.wp-in .wp-figure figcaption {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease-out, transform .48s var(--wp-motion-ease);
    transition-delay: calc(.28s + var(--wp-order, 0) * 65ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-reading-progress { display: none; }
}

@media print {
  .wp-reading-progress { display: none !important; }
  body[data-wp-motion] *,
  body[data-wp-motion] *::before,
  body[data-wp-motion] *::after {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}