/* benefitmoney.co.uk — motion layer
   Rules of the house:
   1. Nothing is hidden unless JS is running (everything is gated on html.js).
   2. Only transform/opacity/filter animate — no layout properties, so no CLS.
   3. prefers-reduced-motion switches the whole layer off, including hover lifts.
   4. Entrance animations run once, then the element is released.                */

:root{
  --m-fast:.16s; --m-base:.28s; --m-slow:.52s; --m-slower:.8s;
  --m-out:cubic-bezier(.2,.7,.3,1);
  --m-in-out:cubic-bezier(.4,0,.2,1);
  --m-spring:cubic-bezier(.34,1.4,.64,1);
  --m-accent:var(--accent,var(--green,#12A566));
  --m-accent-soft:var(--accent-soft,var(--green-bg,rgba(18,165,102,.12)));
  --m-rule:var(--rule,var(--line,rgba(0,0,0,.09)));
  --m-surface:var(--surface,var(--card,#fff));
  --m-ink3:var(--ink-3,var(--ink3,#8195a1));
}

/* ── entrance ─────────────────────────────────────────────────────────────── */
html.js .m-up{opacity:0;transform:translate3d(0,22px,0)}
html.js .m-left{opacity:0;transform:translate3d(-26px,0,0)}
html.js .m-right{opacity:0;transform:translate3d(26px,0,0)}
html.js .m-scale{opacity:0;transform:scale(.965)}
html.js .m-blur{opacity:0;filter:blur(6px);transform:translate3d(0,14px,0)}
html.js .m-up,html.js .m-left,html.js .m-right,html.js .m-scale,html.js .m-blur{
  transition:opacity var(--m-slow) var(--m-out),transform var(--m-slow) var(--m-out),filter var(--m-slow) var(--m-out);
  transition-delay:var(--m-d,0ms)}
html.js .m-in{opacity:1!important;transform:none!important;filter:none!important}

/* the answer box: the first thing on every page */
html.js .answer.m-scale{transform:scale(.97) translate3d(0,10px,0)}

/* key/value rows meet in the middle */
html.js dl.kv > dt.m-row{opacity:0;transform:translate3d(-14px,0,0)}
html.js dl.kv > dd.m-row{opacity:0;transform:translate3d(14px,0,0)}
html.js dl.kv > .m-row{transition:opacity .46s var(--m-out),transform .46s var(--m-out);transition-delay:var(--m-d,0ms)}
html.js dl.kv > .m-row.m-in{opacity:1;transform:none}

/* table rows */
html.js tbody tr.m-row{opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .42s var(--m-out),transform .42s var(--m-out);transition-delay:var(--m-d,0ms)}
html.js tbody tr.m-row.m-in{opacity:1;transform:none}

/* numbered checklist: the badge pops after the line lands */
html.js ol.check > li.m-row{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .44s var(--m-out),transform .44s var(--m-out);transition-delay:var(--m-d,0ms)}
html.js ol.check > li.m-row.m-in{opacity:1;transform:none}
html.js ol.check > li.m-row::before{transform:scale(.4);opacity:0;
  transition:transform .42s var(--m-spring),opacity .3s linear;
  transition-delay:calc(var(--m-d,0ms) + 140ms)}
html.js ol.check > li.m-row.m-in::before{transform:none;opacity:1}

/* breadcrumb items walk in */
html.js .crumb.m-crumb > *{opacity:0;transform:translate3d(-8px,0,0);
  transition:opacity .34s var(--m-out),transform .34s var(--m-out)}
html.js .crumb.m-crumb.m-in > *{opacity:1;transform:none}

/* footer columns */
html.js footer.site .m-foot{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .5s var(--m-out),transform .5s var(--m-out);transition-delay:var(--m-d,0ms)}
html.js footer.site .m-foot.m-in{opacity:1;transform:none}

/* ── interaction ──────────────────────────────────────────────────────────── */
a,button,summary{-webkit-tap-highlight-color:transparent}

/* text links: an underline that sweeps in from the left */
.m-link{background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--m-base) var(--m-out),color var(--m-fast) linear}
.m-link:hover,.m-link:focus-visible{background-size:100% 1.5px}

/* arrows travel on hover */
.btn svg,.go svg,.seeall svg,.more svg{transition:transform var(--m-base) var(--m-spring)}
.btn:hover svg,.go:hover svg,.seeall:hover svg,.more:hover svg{transform:translateX(4px)}
.go{transition:transform var(--m-base) var(--m-out),color var(--m-fast) linear}
.go:hover{transform:translateX(3px)}
.btn{transition:transform var(--m-base) var(--m-spring),box-shadow var(--m-base) var(--m-out),filter var(--m-fast) linear}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:var(--m-fast)}

/* external-link arrow lifts away */
.ext{display:inline-block;transition:transform var(--m-base) var(--m-spring)}
a:hover > .ext,a:hover .ext{transform:translate(2px,-2px)}

/* cards and grid tiles */
.card,.ben > div,.logo,.cn,.pick{transition:transform var(--m-base) var(--m-out),
  box-shadow var(--m-base) var(--m-out),border-color var(--m-base) linear}
.ben > div:hover,.cn:hover{transform:translateY(-3px)}

/* table + kv rows tint under the cursor, with an accent edge */
tbody tr{transition:background-color var(--m-fast) linear}
tbody tr:hover{background:var(--m-accent-soft)}
dl.kv > dt,dl.kv > dd{transition:background-color var(--m-fast) linear}
dl.kv.m-kv:hover > dt,dl.kv.m-kv:hover > dd{background:transparent}
dl.kv .m-hot{background:var(--m-accent-soft)}
dl.kv > dt{position:relative}
dl.kv > dt::before{content:"";position:absolute;left:-10px;top:.15em;bottom:.15em;width:2px;border-radius:2px;
  background:var(--m-accent);transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--m-base) var(--m-out)}
dl.kv > dt.m-hot::before{transform:scaleY(1)}

/* bullet ticks bloom when their line is hovered */
.mark li svg{transition:transform var(--m-base) var(--m-spring)}
.mark li:hover svg{transform:scale(1.14) rotate(-6deg)}

/* details: chevron turns, body glides open */
details > summary{transition:color var(--m-fast) linear}
details > summary::after{transition:transform var(--m-base) var(--m-spring)}
details[open] > summary::after{transform:rotate(45deg)}
html.js details .m-panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--m-base) var(--m-out)}
html.js details[open] .m-panel{grid-template-rows:1fr}
html.js details .m-panel > *{overflow:hidden}

/* focus is a first-class state */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--m-accent);outline-offset:3px;border-radius:4px;
  animation:m-focus .3s var(--m-spring)}
@keyframes m-focus{from{outline-offset:8px;outline-color:transparent}}

/* nav: the active rule grows from the centre */
header.site .menu a{position:relative}
header.site .menu a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;
  background:var(--m-accent);transform:scaleX(0);transform-origin:50%;
  transition:transform var(--m-base) var(--m-out)}
header.site .menu a:hover::after{transform:scaleX(.6)}
header.site .menu a.on::after{transform:scaleX(1)}

/* header condenses once you start reading */
header.site{transition:box-shadow var(--m-base) var(--m-out),backdrop-filter var(--m-base) linear}
header.site.m-stuck{box-shadow:0 6px 24px rgba(16,42,67,.10)}
header.site .brand svg{transition:transform var(--m-slow) var(--m-spring)}
header.site.m-stuck .brand svg{transform:scale(.88) rotate(-8deg)}

/* reading progress */
.m-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--m-accent),var(--accent-ink,var(--g1,#2FC584)));
  z-index:120;pointer-events:none;will-change:transform}

/* back to top */
.m-top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--m-rule);
  background:var(--m-surface);color:var(--m-accent);display:grid;place-items:center;cursor:pointer;z-index:110;
  box-shadow:0 6px 18px rgba(16,42,67,.12);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity var(--m-base) var(--m-out),transform var(--m-base) var(--m-spring)}
.m-top.m-on{opacity:1;transform:none;pointer-events:auto}
.m-top:hover{transform:translateY(-2px)}
.m-top svg{width:18px;height:18px}

/* table of contents scroll-spy */
nav.toc{position:relative}
nav.toc a{transition:color var(--m-fast) linear,transform var(--m-fast) var(--m-out)}
nav.toc a:hover{transform:translateX(2px)}
nav.toc a.m-cur{color:var(--m-accent);font-weight:600}
nav.toc .m-marker{position:absolute;left:0;width:2px;border-radius:2px;background:var(--m-accent);
  transition:transform var(--m-base) var(--m-out),height var(--m-base) var(--m-out),opacity var(--m-base) linear;
  opacity:0;top:0;height:10px}
nav.toc .m-marker.m-on{opacity:1}

/* the anchor you jumped to says hello */
@keyframes m-flash{0%{background:var(--m-accent-soft)}100%{background:transparent}}
:target{animation:m-flash 1.4s var(--m-out)}

/* horizontal scroll hint on wide tables */
.tablewrap{position:relative}
.tablewrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--m-surface));opacity:0;
  transition:opacity var(--m-base) linear}
.tablewrap.m-overflow::after{opacity:1}
.tablewrap.m-end::after{opacity:0}

/* postcode lookup: input glow, skeleton while it thinks, result slides in */
.pcf-form input{transition:border-color var(--m-fast) linear,box-shadow var(--m-base) var(--m-out)}
.pcf-form input:focus{box-shadow:0 0 0 4px var(--m-accent-soft)}
@keyframes m-shimmer{to{background-position:200% 0}}
.m-skel{display:inline-block;min-width:min(260px,70%);height:1em;border-radius:4px;vertical-align:-.15em;
  background:linear-gradient(90deg,var(--m-rule) 25%,var(--m-accent-soft) 50%,var(--m-rule) 75%);
  background-size:200% 100%;animation:m-shimmer 1.1s linear infinite}
@keyframes m-pop{from{opacity:0;transform:translateY(8px)}}
.pcf .out.m-said{animation:m-pop .36s var(--m-out) both}

/* copy-a-number button (phone numbers page) — out of the way until wanted */
.m-copy{margin-left:8px;border:1px solid var(--m-rule);background:transparent;color:var(--m-ink3);
  border-radius:7px;padding:2px 7px;font:inherit;font-size:12px;line-height:1.5;cursor:pointer;vertical-align:middle;
  white-space:nowrap;
  transition:color var(--m-fast) linear,border-color var(--m-fast) linear,opacity var(--m-fast) linear,
             transform var(--m-fast) var(--m-spring)}
@media (hover:hover) and (pointer:fine){
  .m-copy{opacity:0}
  tr:hover .m-copy,dl.kv > dd:hover .m-copy,.m-copy:focus-visible,.m-copy.m-done{opacity:1}
}
.m-copy:hover{color:var(--m-accent);border-color:var(--m-accent)}
.m-copy:active{transform:scale(.92)}
.m-copy.m-done{color:var(--m-accent);border-color:var(--m-accent)}

/* counting figures keep a stable width so nothing reflows */
.m-num{font-variant-numeric:tabular-nums}

/* closing a details panel collapses instead of snapping shut */
html.js details.m-closing .m-panel{grid-template-rows:0fr}
html.js details.m-closing > summary::after{transform:none}

/* nav items arrive in sequence on the first paint */
html.js .m-navitem{opacity:0;transform:translate3d(0,-6px,0);
  transition:opacity .34s var(--m-out),transform .34s var(--m-out);transition-delay:var(--m-d,0ms)}
html.js.m-navready .m-navitem{opacity:1;transform:none}

/* the brand mark draws itself once */
@keyframes m-brand{from{transform:scale(.7) rotate(-14deg);opacity:0}}
html.js header.site .brand svg{animation:m-brand .6s var(--m-spring) both}
html.js header.site .brand{transition:transform var(--m-base) var(--m-out)}
html.js header.site .brand:hover svg{transform:rotate(8deg) scale(1.06)}

/* search field opens up when focused */
.search{transition:border-color var(--m-fast) linear,box-shadow var(--m-base) var(--m-out),width var(--m-base) var(--m-out)}
.search:focus-within{border-color:var(--m-accent);box-shadow:0 0 0 4px var(--m-accent-soft)}

/* the burger becomes a cross */
.navtoggle svg path{transition:transform var(--m-base) var(--m-spring),opacity var(--m-fast) linear;transform-origin:50% 50%}
header.site.open .navtoggle svg{transform:rotate(90deg);transition:transform var(--m-base) var(--m-spring)}

/* sources list numbers tick over */
.sources ol li{transition:color var(--m-fast) linear}
.sources ol li:hover{color:var(--ink,inherit)}

/* ── the off switch ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html.js .m-up,html.js .m-left,html.js .m-right,html.js .m-scale,html.js .m-blur,
  html.js dl.kv > .m-row,html.js tbody tr.m-row,html.js ol.check > li.m-row,
  html.js ol.check > li.m-row::before,html.js .crumb.m-crumb > *,html.js footer.site .m-foot{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .m-link,.btn,.go,.ext,.card,.ben > div,.cn,.mark li svg,nav.toc a,
  header.site .brand svg,.m-copy,.m-top{transition:none!important}
  .btn:hover,.go:hover,.ben > div:hover,.cn:hover,.m-top:hover{transform:none}
  html.js details .m-panel{grid-template-rows:1fr;transition:none}
  .m-prog{display:none}
  .m-skel{animation:none;background:var(--m-rule)}
  html.js .m-navitem{opacity:1;transform:none;transition:none}
  html.js header.site .brand svg{animation:none}
  html.js details.m-closing .m-panel{grid-template-rows:1fr}
  .navtoggle svg path,header.site.open .navtoggle svg,.search{transition:none}
  :target{animation:none}
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{animation:none}
  .pcf .out.m-said{animation:none}
}