/* Site-wide motion details (assets/js/motion.js).
   Everything here is progressive: without JS the page looks as before, and reduced motion
   gets the finished states without movement. */

:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 0.2s;
  --motion-medium: 0.45s;
}

/* ---- A4: buttons -------------------------------------------------------------------- */
/* Only arrow icons move; WhatsApp, checkbox and other icons stay where they are. */
.button svg:has(polyline[points="12 5 19 12 12 19"]) {
  transition: transform var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) {
  .button:hover svg:has(polyline[points="12 5 19 12 12 19"]) {
    transform: translateX(3px);
  }
}
.button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* ---- A5: in-text links -------------------------------------------------------------- */
/* A thin underline stays visible at rest (links must be recognisable); on hover a full
   underline grows from the left. Scoped to running text inside the main content. */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  #mainContent :is(p, li, td, dd) a:not(.button):not([class*="button"]):not(.pdl-breadcrumb a) {
    text-decoration: none !important;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent));
    background-size: 0% 2px, 100% 1px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
    transition: background-size var(--motion-medium) var(--motion-ease);
  }
  #mainContent :is(p, li, td, dd) a:not(.button):not([class*="button"]):not(.pdl-breadcrumb a):is(:hover, :focus-visible) {
    background-size: 100% 2px, 100% 1px;
  }
}

/* ---- B6: timeline over the 4 steps ------------------------------------------------- */
.pdl-rail {
  position: relative;
  height: 22px;
  margin: 0 0 18px;
}
.pdl-rail__track,
.pdl-rail__fill {
  position: absolute;
  top: 10px;
  height: 2px;
  border-radius: 2px;
}
.pdl-rail__track { background: var(--slate-200); }
.pdl-rail__fill {
  background: var(--emerald-600);
  transform-origin: left center;
}
.pdl-rail__node {
  position: absolute;
  top: 4px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--slate-300, #CBD5E1);
  transition: background var(--motion-medium) var(--motion-ease), border-color var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) var(--motion-ease);
}
.pdl-rail__node.is-lit {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
  box-shadow: 0 0 0 5px var(--emerald-glow);
}

/* Steps: the number lights up and a short accent line draws on top of the card. */
.roadmap-step.pdl-step { position: relative; }
.roadmap-step.pdl-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--emerald-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--motion-ease);
}
.roadmap-step.pdl-step.is-lit::before { transform: scaleX(1); }
.roadmap-step.pdl-step .roadmap-number { transition: color var(--motion-medium) var(--motion-ease); }
.roadmap-step.pdl-step.is-lit .roadmap-number {
  color: var(--emerald-600);
  animation: pdl-number-glow 1.2s var(--motion-ease) 1;
}
@keyframes pdl-number-glow {
  0% { text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  35% { text-shadow: 0 0 18px rgba(16, 185, 129, 0.55); }
  100% { text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
}

/* The rail needs the 4-column layout; narrower layouts use the card accents only. */
@media (max-width: 1024px) {
  .pdl-rail { display: none; }
}

/* ---- B7: reading progress on inner pages ------------------------------------------- */
.pdl-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
}
.pdl-progress__bar {
  display: block;
  height: 100%;
  background: var(--emerald-600);
  transform: scaleX(0);
  transform-origin: left center;
}
body.admin-bar .pdl-progress { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .pdl-progress { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-step.pdl-step::before,
  .pdl-rail__node,
  .roadmap-step.pdl-step .roadmap-number { transition: none; }
  .roadmap-step.pdl-step.is-lit .roadmap-number { animation: none; }
}