/* Motion for the landing pages, after the mkl-motion skill (Wobblz/mkl-design-skills).
   The landing page is the showcase register: one hero moment (the sample report
   card filling in), everything else daily-register feedback. CSS first; the bits
   that need measuring or observing live in motion.js. Every number is a token. */

:root {
  /* Durations, named by size of change */
  --dur-instant: 0ms;     /* high-frequency actions */
  --dur-micro: 120ms;     /* press, toggle, small exits */
  --dur-fast: 150ms;      /* colour/hover */
  --dur-base: 200ms;      /* chevron turn, tab exits */
  --dur-moderate: 280ms;  /* panel collapse */
  --dur-showcase: 550ms;  /* showcase rises */
  --dur-sweep: 750ms;     /* one lap of light round the form card when a request is sent */

  /* Curves, named by job */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* default arrival, hairline draws, hover travel */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* short exits only (≤200ms) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* travel that starts and ends at rest */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* neutral collapse (height to 0) */
  --ease-hover: ease;                             /* colour only */

  /* Named springs baked into linear() (skill §4d), with their settle times */
  /* REVEAL_SPRING: a block rising in as it arrives or scrolls into view; no bounce */
  --dur-reveal: 489ms;
  --ease-reveal: linear(0, 0.049, 0.156, 0.278, 0.407, 0.52, 0.619, 0.707, 0.775, 0.83, 0.875, 0.908, 0.934, 0.953, 0.966, 0.977, 0.984, 0.989, 0.993, 0.996, 0.997, 0.999, 0.999, 1, 1);
  /* FOLD_SPRING: a panel folding open under its trigger (height 0 → auto) */
  --dur-fold: 401ms;
  --ease-fold: linear(0, 0.053, 0.152, 0.278, 0.405, 0.522, 0.619, 0.705, 0.776, 0.83, 0.874, 0.909, 0.935, 0.953, 0.967, 0.978, 0.985, 0.99, 0.994, 0.996, 0.998, 0.999, 1, 1, 1);
  /* SNAP_SPRING: a small piece snapping into place (segmented pill, step content) */
  --dur-snap: 331ms;
  --ease-snap: linear(0, 0.074, 0.21, 0.349, 0.489, 0.61, 0.708, 0.785, 0.841, 0.886, 0.919, 0.943, 0.961, 0.972, 0.981, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 1, 1);
  /* FILL_SPRING: a slot filling with its value; felt bounce, spatial properties only */
  --dur-fill: 473ms;
  --ease-fill: linear(0, 0.072, 0.209, 0.377, 0.539, 0.679, 0.786, 0.872, 0.932, 0.971, 0.997, 1.011, 1.017, 1.018, 1.017, 1.015, 1.012, 1.009, 1.006, 1.004, 1.002, 1.001, 1.001, 1, 1);

  /* Cascades */
  --stagger: 45ms;          /* items in a row: the sample report's verdict chips */
  --stagger-enter: 60ms;    /* top-of-page blocks, 40–80ms apart */
  --stagger-reveal: 60ms;   /* sibling cards revealing together */

  /* Distances */
  --rise: 14px;             /* how far a block rises as it arrives */
  --step-shift: 20px;       /* step content slides in from the side you're heading */
  --fill-rise: 6px;         /* a check rising as it lands */
  --lean: 2px;              /* a → arrow leaning toward its destination */

  /* Press scales */
  --press: 0.97;            /* buttons, pills, cards */
  --press-small: 0.96;      /* small pills and chips */
}

/* Anchor jumps travel instead of teleporting. Not scroll hijacking: native, and only for in-page links. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Press: every button and pill shows it was pressed ---- */
.press, .rq-btn, .rq-type, .rq-tier, .rq-link, summary {
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover), border-color var(--dur-fast) var(--ease-hover);
}
.rq-pill {
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-fast) var(--ease-hover), background-color var(--dur-fast) var(--ease-hover);
}
.press:active, .rq-btn:active, .rq-type:active, .rq-tier:active { transform: scale(var(--press)); }
.rq-pill:active, .rq-link:active { transform: scale(var(--press-small)); }

/* Hover: colour only, gated to real pointers so touch never sticks */
@media (hover: hover) and (pointer: fine) {
  .rq-btn:not(.primary):hover { border-color: #111111; }
  .rq-type:hover { border-color: #8A8A84; }
  .rq-type[aria-pressed="true"]:hover { border-color: #111111; }
  .rq-tier:not([aria-pressed="true"]):hover { border-color: #8A8A84; }
  .rq-pill:hover { border-color: #8A8A84; }
  .rq-pill:has(input:checked) { border-color: #111111; }
}
.rq-pill:has(input:checked) { border-color: #111111; background-color: #F6F6F2; }

/* ---- Links: a hairline draws from the left; the arrow leans toward where it goes ---- */
.link .ln {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-reveal) var(--ease-out);
}
.link:hover .ln, .link:focus-visible .ln { background-size: 100% 1.5px; }
/* The example-report link had a resting underline; keep it legible as a link at rest */
.link[href*="example-report"] .ln { background-image: linear-gradient(currentColor, currentColor), linear-gradient(#CFCFC8, #CFCFC8); background-size: 0% 1.5px, 100% 1.5px; background-position: 0 100%, 0 100%; }
.link[href*="example-report"]:hover .ln, .link[href*="example-report"]:focus-visible .ln { background-size: 100% 1.5px, 100% 1.5px; }
.arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link:hover .arrow, .link:focus-visible .arrow, .press:hover .arrow, .press:focus-visible .arrow { transform: translateX(var(--lean)); }

/* ---- FAQ: chevron turns with the fold (the fold itself is in motion.js) ---- */
.chev { transition: transform var(--dur-base) var(--ease-out); }
details > p { overflow: clip; }

/* ---- Top of the page arrives (CSS, so it plays before any script) ---- */
@keyframes enter {
  from { opacity: 0; translate: 0 var(--rise); }
}
@keyframes chip-pop {
  from { opacity: 0; scale: 0.8; }
}
@media (prefers-reduced-motion: no-preference) {
  #top > div > div:first-child > * {
    animation: enter var(--dur-reveal) var(--ease-reveal) backwards;
    animation-delay: calc(var(--enter-i, 0) * var(--stagger-enter));
  }
  #top > div > div:first-child > :nth-child(2) { --enter-i: 1; }
  #top > div > div:first-child > :nth-child(3) { --enter-i: 2; }
  #top > div > div:first-child > :nth-child(4) { --enter-i: 3; }
  #top > div > div:first-child > :nth-child(5) { --enter-i: 4; }

  /* The hero moment: the sample report rises in, then its verdicts fill in, top to bottom */
  #top > div > div:nth-child(2) {
    animation: enter var(--dur-showcase) var(--ease-reveal) backwards;
    animation-delay: calc(2 * var(--stagger-enter));
  }
  #top > div > div:nth-child(2) > div > span:first-child[style*="width: 112px"] {
    animation: chip-pop var(--dur-fill) var(--ease-fill) backwards;
    animation-delay: calc(5 * var(--stagger-enter) + var(--chip-i, 0) * var(--stagger));
  }
  #top > div > div:nth-child(2) > div:nth-child(4) > span:first-child { --chip-i: 1; }
  #top > div > div:nth-child(2) > div:nth-child(5) > span:first-child { --chip-i: 2; }
  #top > div > div:nth-child(2) > div:nth-child(6) > span:first-child { --chip-i: 3; }
  #top > div > div:nth-child(2) > div:nth-child(7) > span:first-child { --chip-i: 4; }
  #top > div > div:nth-child(2) > div:nth-child(8) > span:first-child { --chip-i: 5; }
}

/* ---- Below the fold: blocks reveal once as they come into view (motion.js adds .reveal) ---- */
.reveal {
  transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-reveal);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger-reveal));
}
.reveal:not(.in) { opacity: 0; translate: 0 var(--rise); }

/* Figures count up in tabular digits, so the width never jitters */
.count { font-variant-numeric: tabular-nums; }

/* ---- Request form ---- */

/* Progress: each step's slot fills from its centre */
.rq-progress li::before { content: none; }
.rq-progress .bar { position: relative; height: 6px; border-radius: 999px; background: #E3E3DE; overflow: hidden; }
.rq-progress .bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #111111;
  transform: scaleX(0);
  transition: transform var(--dur-micro) var(--ease-in);
}
.rq-progress li.on .bar::after { transform: scaleX(1); transition: transform var(--dur-fill) var(--ease-fill); }

/* Which-check segmented control: one dark pill glides between options (motion.js places it) */
.rq-pills.seg { position: relative; isolation: isolate; }
.seg-pill { display: none; }
.rq-pills.seg.glide .seg-pill {
  display: block; position: absolute; left: 0; top: 0; z-index: -1;
  border-radius: 14px; background: #111111;
  transition: transform var(--dur-snap) var(--ease-snap), width var(--dur-snap) var(--ease-snap);
}
.rq-pills.seg.glide .rq-tier { background: transparent; }
.rq-pills.seg.glide .rq-tier[aria-pressed="true"] { border-color: transparent; }

/* Copy message: confirmed by a wash that opens from the middle of the button */
.rq-btn.small { position: relative; isolation: isolate; overflow: hidden; }
.rq-btn.copied::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #D4F25C;
  animation: wash var(--dur-moderate) var(--ease-out) both;
}
@keyframes wash {
  from { clip-path: inset(0 50% round 999px); }
  to { clip-path: inset(0 0 round 999px); }
}

/* Sent: the check rises into its tile, and one lap of light runs round the card */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.rq-card { position: relative; }
.rq-done .icon svg { animation: check-in var(--dur-fill) var(--ease-fill) var(--dur-base) backwards; }
@keyframes check-in {
  from { opacity: 0; translate: 0 var(--fill-rise); scale: 0.8; }
}
.rq-card.swept::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--sweep), transparent 0 60%, #D4F25C 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sweep var(--dur-sweep) var(--ease-in-out) both;
}
@keyframes sweep {
  0% { --sweep: 0deg; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { --sweep: 360deg; opacity: 0; }
}

/* ---- Reduced motion: the meaning stays, the movement goes ---- */
@media (prefers-reduced-motion: reduce) {
  .press:active, .rq-btn:active, .rq-type:active, .rq-tier:active, .rq-pill:active, .rq-link:active { transform: none; }
  .rq-btn:active, .rq-type:active, .rq-tier:not([aria-pressed="true"]):active, .rq-pill:active { background-color: #F0F0EA; }
  .rq-btn.primary:active { background-color: #C4E24C; }
  .link .ln, .arrow, .chev { transition: none; }
  .link:hover .arrow, .link:focus-visible .arrow, .press:hover .arrow, .press:focus-visible .arrow { transform: none; }
  .reveal { transition: none; }
  .reveal:not(.in) { opacity: 1; translate: none; }
  .rq-progress .bar::after, .rq-progress li.on .bar::after { transition: none; }
  .rq-pills.seg.glide .seg-pill { transition: none; }
  .rq-btn.copied::before { animation: none; }
  .rq-done .icon svg { animation: fade-in var(--dur-fast) var(--ease-out) backwards; }
  .rq-card.swept::after { background: #D4F25C; animation: glow var(--dur-sweep) var(--ease-in-out) both; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes glow { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }