/* partials/_motion.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
:root{
--mo-out:cubic-bezier(.23,1,.32,1); /* ease-out: enters, reveals, lifts */
--mo-inout:cubic-bezier(.77,0,.175,1); /* ease-in-out: on-screen moves */
--mo-fast:150ms; --mo-base:200ms; --mo-slow:320ms;
--mo-ink:#2b2620; --mo-paper:#f4eee1; --mo-accent:#a33d2e; --mo-soft:#f5b79a;
}
/* ---- base polish ---- */
body{-webkit-tap-highlight-color:transparent}
::selection{background:var(--mo-soft);color:var(--mo-ink)}
:focus-visible{outline:2px solid var(--mo-accent);outline-offset:2px}
a,button{transition:color var(--mo-fast) ease,background-color var(--mo-fast) ease,
border-color var(--mo-fast) ease,opacity var(--mo-fast) ease,box-shadow var(--mo-fast) ease,
translate var(--mo-fast) var(--mo-out),scale var(--mo-fast) var(--mo-out)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---- cross-document page transitions (Chrome 126+/Safari 18.2+; ignored elsewhere) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:140ms;animation-timing-function:ease}
::view-transition-new(root){animation-duration:200ms;animation-timing-function:var(--mo-out)}
.cat-header{view-transition-name:site-header}
/* ---- sticky header: shadow once content scrolls underneath ---- */
.cat-header{transition:box-shadow var(--mo-base) ease}
html.mo-scrolled .cat-header{box-shadow:var(--sh-md)}
/* ---- reading progress (long pages only, set by JS) ---- */
.mo-progress{position:fixed;top:0;left:50%;z-index:12;width:min(960px,100%);height:3px;
translate:-50% 0;pointer-events:none;background:var(--mo-accent);
transform:scaleX(var(--p,0));transform-origin:left center;opacity:0;transition:opacity var(--mo-base) ease}
html.mo-scrolled .mo-progress{opacity:1}
/* with a sticky jump bar (category / article / review): the line sits on the bar's top edge, spans the bar, and only
shows — and only counts — from the scroll position where the bar sticks (owner 2026-09-29 "should start as soon as
the bar becomes sticky over the bar not before"); JS sets top / left / width and is-on */
html .mo-progress.is-anchored{translate:none;left:0;width:auto;opacity:0}
html .mo-progress.is-anchored.is-on{opacity:1}
/* ---- menu: fade + slide, hamburger folds into an X ---- */
.cat-menu{opacity:0;translate:0 -6px;
transition:opacity var(--mo-base) ease,translate var(--mo-base) var(--mo-out),display var(--mo-base) allow-discrete}
.cat-menu.open{opacity:1;translate:0 0}
@starting-style{.cat-menu.open{opacity:0;translate:0 -6px}}
.cat-menu.open .home-row,.cat-menu.open .grp,.cat-menu.open .mm-item,.cat-menu.open .cat-search{animation:mo-rise var(--mo-slow) var(--mo-out) both}
.cat-menu.open .grp:nth-child(2),.cat-menu.open .mm-item:nth-child(2){animation-delay:40ms}
.cat-menu.open .grp:nth-child(3),.cat-menu.open .mm-item:nth-child(3){animation-delay:80ms}
.cat-menu.open .grp:nth-child(4),.cat-menu.open .mm-item:nth-child(4){animation-delay:120ms}
.cat-menu.open .grp:nth-child(5),.cat-menu.open .mm-item:nth-child(5){animation-delay:160ms}
.cat-menu.open .grp:nth-child(n+6),.cat-menu.open .mm-item:nth-child(n+6){animation-delay:200ms}
/* phone accordion chevron turns when its section opens */
.mm-chev{transition:background-color var(--mo-fast) ease}
.mm-chev::before{transition:rotate var(--mo-base) var(--mo-inout),border-color var(--mo-fast) ease}
.mm-item[open]>.mm-row .mm-chev::before{rotate:225deg;top:9px}
.cat-menu-btn .lines span{transition:transform var(--mo-base) var(--mo-inout),opacity var(--mo-fast) ease;transform-origin:center}
.cat-menu-btn[aria-expanded="true"] .lines span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.cat-menu-btn[aria-expanded="true"] .lines span:nth-child(2){opacity:0;transform:scaleX(.2)}
.cat-menu-btn[aria-expanded="true"] .lines span:nth-child(3){transform:translateY(-6px) rotate(-45deg) scaleX(1.5)}
/* ---- header live search ---- */
.cat-search form{transition:box-shadow var(--mo-fast) ease,color var(--mo-fast) ease}
.cat-search form:focus-within{box-shadow:0 0 0 3px rgba(163,61,46,.16)}
.cat-search-drop{transform-origin:top right;
transition:opacity var(--mo-base) ease,translate var(--mo-base) var(--mo-out),scale var(--mo-base) var(--mo-out),display var(--mo-base) allow-discrete}
.cat-search-drop[hidden]{display:none;opacity:0;translate:0 -4px;scale:.98}
@starting-style{.cat-search-drop:not([hidden]){opacity:0;translate:0 -4px;scale:.98}}
.cat-search-item{transition:background-color var(--mo-fast) ease}
/* ---- buttons: hard-shadow CTAs lift on hover, press flat on click ---- */
.home-hero .btns .go,.home-quiz .go,a.cat-cta-big,.cat-provider-actions .cta,.cat-page a.cta,
.geo-provider .cta-link,.cat-cta-banner .btn,.bq-cta,.bq-next,.bq-submit,#barometer .bar-cta-row .cta,.cta,.cat-menu .home-row a{
transition:translate var(--mo-fast) var(--mo-out),box-shadow var(--mo-fast) var(--mo-out),
background-color var(--mo-fast) ease,color var(--mo-fast) ease,opacity var(--mo-fast) ease}
.home-hero .btns .go:active,.home-quiz:active .go,a.cat-cta-big:active,.cat-provider-actions .cta:active,.cat-page a.cta:active,
.geo-provider .cta-link:active,.cat-cta-banner:active .btn,.bq-cta:active,.bq-next:not(.is-off):active,.bq-submit:active,
#barometer .bar-cta-row .cta:active,.cta:active,.cat-menu .home-row a:active{translate:2px 2px;box-shadow:0 0 0 transparent;opacity:1;transition-duration:80ms}
/* outline buttons + pills: fill in on hover, shrink a touch on press */
.home-hero .btns .ghost,.cat-provider-actions .ghost,.home-winner .review,.cat-menu-btn,.geo-provider .more,
.cat-jump a,.art-jump a,.mag-pills a,.cat-search-all,.bq-backbtn,.lb-overlay .lb-x{
transition:background-color var(--mo-fast) ease,color var(--mo-fast) ease,border-color var(--mo-fast) ease,
scale var(--mo-fast) var(--mo-out),opacity var(--mo-fast) ease}
.home-hero .btns .ghost:active,.cat-provider-actions .ghost:active,.cat-page a.home-winner:active .review,.cat-menu-btn:active,
.geo-provider .more:active,.cat-jump a:active,.art-jump a:active,.mag-pills a:active,.bq-opt:active{scale:.96;transition-duration:80ms}
/* podium press feedback (every pointer): the card settles, the CTA presses into its shadow */
.cat-page a.pod:active{scale:.985;translate:0 0}
.cat-page a.pod:active .pod-cta{translate:1px 1px;box-shadow:0 0 0 var(--mo-ink)}
.bq-opt{transition:background-color var(--mo-fast) ease,color var(--mo-fast) ease,box-shadow var(--mo-fast) ease,scale var(--mo-fast) var(--mo-out)}
.bq-opt .bq-opt-check{transition:scale var(--mo-base) var(--mo-out)}
.bq-opt.is-selected .bq-opt-check{animation:mo-pop var(--mo-slow) var(--mo-out)}
@media (hover:hover) and (pointer:fine){
.home-hero .btns .go:hover,.home-quiz:hover .go,a.cat-cta-big:hover,.cat-provider-actions .cta:hover,.cat-page a.cta:hover,
.geo-provider .cta-link:hover,.cat-cta-banner .btn:hover,.bq-cta:hover,.bq-next:not(.is-off):hover,.bq-submit:hover,
#barometer .bar-cta-row .cta:hover,.cta:hover,.cat-menu .home-row a:hover{translate:0 -1px;opacity:1;filter:brightness(1.06)}
.home-hero .btns .ghost:hover,.cat-provider-actions .ghost:hover,.cat-page a.home-winner:hover .review,.cat-menu-btn:hover,
.geo-provider .more:hover,.cat-jump a:hover,.art-jump a:hover{background:var(--mo-ink);color:var(--mo-paper);opacity:1}
.cat-menu-btn:hover .lines span{background:var(--mo-paper)}
.cat-menu .grp a,.cat-footer .col a,.cat-footer .links a,.toc-links a{transition:color var(--mo-fast) ease,translate var(--mo-fast) var(--mo-out)}
.cat-menu .grp a:hover{color:var(--mo-accent);translate:2px 0;opacity:1}
.cat-footer .col a:hover,.cat-footer .links a:hover{color:var(--mo-paper);opacity:1}
.toc-links a:hover{translate:2px 0}
/* cards: lift + shadow, photo eases in a notch */
.home-cats a,.cat-page a.home-winner,.mag-card,.mag-feature,.cat-radar-grid a,.review-list a,.mag-shortcuts .grid a,
.geo-provider,.cat-provider-card,.prs-item a,.cat-search-item{transition:translate var(--mo-base) var(--mo-out),box-shadow var(--mo-base) var(--mo-out),background-color var(--mo-fast) ease}
.home-cats a:hover,.cat-page a.home-winner:hover,.mag-card:hover,.mag-feature:hover,.cat-radar-grid a:hover,.review-list a:hover,
.mag-shortcuts .grid a:hover,.geo-provider:hover{translate:0 -2px;box-shadow:var(--sh-md);opacity:1}
.home-cats .ph img,.mag-card .shot img,.mag-feature .shot img{transition:scale .6s var(--mo-out),opacity .4s ease}
.home-cats a:hover .ph img,.mag-card:hover .shot img,.mag-feature:hover .shot img{scale:1.04}
.home-cats .go,.mag-card .go,.mag-feature .go{display:inline-block;transition:translate var(--mo-base) var(--mo-out)}
.home-cats a:hover .go,.mag-card:hover .go,.mag-feature:hover .go{translate:4px 0}
/* category Top 3 podium: the card lifts, the winner's hard shadow grows with it, the logo
and score swell a touch, the badge wiggles the other way and the CTA reacts like a solid CTA */
.cat-page a.pod{transition:translate var(--mo-base) var(--mo-out),box-shadow var(--mo-base) var(--mo-out),scale var(--mo-fast) var(--mo-out),opacity var(--mo-fast) ease}
.cat-page a.pod:hover{translate:0 -4px;box-shadow:var(--sh-lg);opacity:1}
.cat-page a.pod-1:hover{box-shadow:5px 5px 0 var(--mo-ink),var(--sh-lg)}
.pod .pod-logo img{transition:scale .5s var(--mo-out)}
.cat-page a.pod:hover .pod-logo img{scale:1.06}
.pod .pod-score b{display:inline-block;transition:scale var(--mo-base) var(--mo-out)}
.cat-page a.pod:hover .pod-score b{scale:1.1}
.pod .pod-badge{transition:rotate var(--mo-base) var(--mo-out)}
.cat-page a.pod:hover .pod-badge{rotate:3deg}
.pod .pod-cta{transition:translate var(--mo-fast) var(--mo-out),box-shadow var(--mo-fast) var(--mo-out),filter var(--mo-fast) ease}
.cat-page a.pod:hover .pod-cta{translate:0 -1px;box-shadow:3px 3px 0 var(--mo-ink);filter:brightness(1.06)}
.cat-page a.home-quiz{transition:box-shadow var(--mo-base) var(--mo-out),translate var(--mo-base) var(--mo-out)}
.cat-page a.home-quiz:hover{translate:0 -2px}
.zz-note{transition:color var(--mo-fast) ease}
tbody tr{transition:background-color var(--mo-fast) ease}
.factable tbody tr:hover,.scoretable tbody tr:hover,.stx-table tbody tr:hover{background:rgba(43,38,32,.035)}
}
/* ---- disclosure: FAQ answers and provider "more" rows slide in, plus turns into an x ---- */
details[open]>:not(summary){animation:mo-rise var(--mo-base) var(--mo-out)}
details summary .plus{display:inline-block;transition:rotate var(--mo-base) var(--mo-inout)}
details[open] summary .plus{rotate:45deg}
details summary{transition:color var(--mo-fast) ease}
.geo-provider.open .extra,.geo-provider.open .ttags{animation:mo-rise var(--mo-base) var(--mo-out)}
/* ---- scroll reveal (classes set by JS, so nothing hides without it) ---- */
/* !important: the reveal must win over a component's own hover transition; the
classes are removed again once the element is in, so hover keeps its timing */
.mo-reveal{opacity:0;translate:0 12px;transition:opacity .45s ease,translate .55s var(--mo-out)!important}
.mo-reveal.is-in{opacity:1;translate:0 0}
.cat-jump a.is-here,.art-jump a.is-here,.mag-pills a.is-here{background:var(--mo-soft);border-color:var(--mo-ink);color:var(--mo-ink)}
.mo-bar{transform-origin:left center;scale:0 1;transition:scale .7s var(--mo-out)}
.mo-bar.is-in{scale:1 1}
.mo-img{opacity:0;transition:opacity .4s ease}
.mo-img.is-loaded{opacity:1}
@media print{.mo-reveal,.mo-bar,.mo-img{opacity:1!important;translate:none!important;scale:none!important}}
/* ---- page-load delight: masthead copy rises, polaroid settles, stamp stamps ---- */
html.js .home-hero .left>*,html.js .rev-masthead .left>*,html.js .mag-masthead>*,html.js .bq-intro>*{animation:mo-rise .5s var(--mo-out) both}
html.js .home-hero .left>*:nth-child(2),html.js .rev-masthead .left>*:nth-child(2),html.js .mag-masthead>*:nth-child(2),html.js .bq-intro>*:nth-child(2){animation-delay:60ms}
html.js .home-hero .left>*:nth-child(3),html.js .rev-masthead .left>*:nth-child(3),html.js .mag-masthead>*:nth-child(3),html.js .bq-intro>*:nth-child(3){animation-delay:120ms}
html.js .home-hero .left>*:nth-child(n+4),html.js .rev-masthead .left>*:nth-child(n+4),html.js .mag-masthead>*:nth-child(n+4),html.js .bq-intro>*:nth-child(n+4){animation-delay:180ms}
html.js .home-hero .polaroid,html.js .rev-masthead .cat-polaroid,html.js .bq-polaroid{animation:mo-settle .6s var(--mo-out) both;animation-delay:120ms}
html.js .home-hero .stamp,html.js .cat-stamp,html.js .bq-stamp,html.js .bq-donestamp{animation:mo-stamp .45s var(--mo-out) both;animation-delay:420ms}
html.js .cat-hero img,html.js .art-emotion img,html.js .mag-emotion img{animation:mo-zoom-settle 1.1s var(--mo-out) both}
html.js .cat-hero .shade>*{animation:mo-rise .5s var(--mo-out) both;animation-delay:150ms}
html.js .cat-badge,html.js .pod-badge,html.js .home-quiz .ribbon,html.js .mag-feature .flag,html.js .mag-shortcuts .flag{animation:mo-flag .45s var(--mo-out) both;animation-delay:300ms}
@keyframes mo-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes mo-pop{0%{scale:.6}60%{scale:1.25}100%{scale:1}}
@keyframes mo-settle{from{opacity:0;translate:0 -10px;scale:1.03}to{opacity:1;translate:0 0;scale:1}}
@keyframes mo-stamp{from{opacity:0;scale:1.5}to{opacity:1;scale:1}}
@keyframes mo-zoom-settle{from{scale:1.05}to{scale:1}}
@keyframes mo-flag{from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}
/* ---- reduced motion: keep fades, drop every movement ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.mo-reveal,.mo-bar{translate:none;scale:none;opacity:1}
.mo-reveal{transition:opacity .2s ease}
.bq-spin{animation-duration:1s!important;animation-iteration-count:infinite!important}
}