/* PeteFinds.com /trad — the motion pass (2026-11-01). The same system as 4Quizz (play.4quizz.com's motion pass of
   2026-10-27 + the motion form's done mark), read from its live page:

     easing   --ease  cubic-bezier(.23, 1, .32, 1)    every UI move and entrance (strong ease-out; never ease-in)
              --pop   cubic-bezier(.34, 1.56, .64, 1) only small things that land: ticks, stickers, the done mark
              in-out  cubic (4t³ …)                    only programmatic scrolls
     duration press 160ms · hover/state 180-220ms · question change 420ms · entrances 560-700ms · celebration 600ms
              (+100ms delay) · tick pop 420ms · the "beat" after a tap before the next question 180ms
     distance press scale(.97) (stamps .94) · hover lift 2-3px · entrances 16-26px up / 22px sideways for the form
              (+ blur 4-8px, from 6% opacity, never 0 → nothing is ever "missing") · stagger 40ms (form) / 60-90ms (lists)
     rules    transform / opacity (clip-path only on 5px bars and receipt lines); entrances played by
              pete-finds-trad.js with the Web Animations API (fill: backwards), so the page is whole without the script;
              the only things hidden at rest wait under html.tr-mo (set in <head> only with motion allowed, removed after
              3s if the script never booted); hover only where there is a mouse; prefers-reduced-motion = all still.
     not here 4Quizz has no haptics and no confetti on the web — so neither does /trad.                                  */
:root { --pop: cubic-bezier(.34, 1.56, .64, 1); }

/* ── the form card ─────────────────────────────────────────────────────────────────── */
/* its height eases between questions (pete-finds-trad.js resize(): one WAAPI height animation per step, measured
   border-box → the card must size border-box for the measured px to be the drawn px; no effect while it is auto) */
#stage.card { box-sizing: border-box; }
/* the stepper: a track and a fill per stage; the fill is clipped (keeps the pill ends) and animated by the script */
.stepper li { position: relative; padding-bottom: 11px; }
.stepper li::after, .stepper li::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; margin: 0; border-radius: 999px; }
.stepper li::before { background: #EEEAE3; }
.stepper li::after { background: linear-gradient(90deg, var(--ps-a), var(--ps-b), var(--ps-c)); clip-path: inset(0 100% 0 0 round 999px); }
.stepper li.done::after { background: var(--ink); clip-path: inset(0 0 0 0 round 999px); }
.stepper li[aria-current="step"]::after { background: linear-gradient(90deg, var(--ps-a), var(--ps-b), var(--ps-c)); clip-path: inset(0 calc(100% - var(--p, .25) * 100%) 0 0 round 999px); }
.stepper li { transition: color 220ms ease; }
.tr-bar i { width: 100% !important; clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 999px); transition: none; }

/* tiles, chips, options: press, hover (mouse only), the picked tick */
.tiles button, .chips button, .opts button, .seg button, .fs-trip button { position: relative; transition: transform 160ms var(--ease), border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 220ms ease; -webkit-tap-highlight-color: transparent; }
.tiles button:active, .chips button:active, .opts button:active, .seg button:active, .fs-trip button:active { transform: scale(.97); }
.tiles button:not([aria-pressed="true"]):hover, .opts button:not([aria-pressed="true"]):hover { border-color: var(--line2); }
@media (hover: hover) and (pointer: fine) {
    .tiles button:not([aria-pressed="true"]):hover, .opts button:not([aria-pressed="true"]):hover { border-color: #8C84FF; }
    .tiles button:hover, .opts button:hover { transform: translateY(-2px); }
    .tiles button:hover:active, .opts button:hover:active { transform: scale(.97); }
}
.tiles button[aria-pressed="true"]::after, .opts button[aria-pressed="true"]::after { content: ''; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--vi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 2px #fff; }
.tiles button.is-picked::after, .opts button.is-picked::after { animation: tr-tick 420ms var(--pop) both; }
.tiles button.is-picked, .opts button.is-picked { animation: tr-ring 520ms var(--ease); }
@keyframes tr-tick { from { opacity: .06; transform: scale(.4) rotate(-30deg); } }
@keyframes tr-ring { from { box-shadow: 0 0 0 0 rgba(102,86,251,.38); } to { box-shadow: 0 0 0 9px rgba(102,86,251,0); } }
.opts button[aria-pressed="true"] { border-color: var(--vi); color: var(--vi2); background: #F6F5FF; }

/* inputs: the focus glow grows in */
.card input[type=text], .card input[type=tel], .card input[type=email], .card input[type=number], .card input[type=date], .card input[type=search], .card select { transition: border-color 180ms ease, box-shadow 220ms var(--ease); }
.card label { transition: color 180ms ease; }
.card div:focus-within > label, .card label:has(+ input:focus), .card label:has(+ .phone input:focus) { color: var(--vi2); }
.card .phone span { transition: border-color 180ms ease; }
.card .phone:focus-within span { border-color: var(--vi); }

/* buttons: press; the send button's busy → done morph */
.go, .tr-back, .q-back, .skip, .link, .quote-only, .fare .p button, .deck-ui button, .pf-me, .pp-switch summary, .sec-more { transition: transform 160ms var(--ease), background-color 200ms ease, opacity 200ms ease; -webkit-tap-highlight-color: transparent; }
.go:active, .fare .p button:active, .pf-me:active, .pp-switch summary:active { transform: scale(.97); }
.tr-back:active, .q-back:active, .skip:active, .link:active, .quote-only:active { transform: scale(.96); }
.go-in { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.go-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; animation: tr-spin .7s linear infinite; }
@keyframes tr-spin { to { transform: rotate(360deg); } }
.go.is-busy:disabled { opacity: 1; background: #2A2A2A; }
.go.is-ok, .go.is-ok:disabled { opacity: 1; background: var(--ok); }
.go.is-ok svg path { stroke-dasharray: 24; animation: tr-draw 320ms var(--ease) 60ms both; }
@keyframes tr-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* the result: the mark (4Quizz's done pop, with a soft ring going out) */
.done-ok { position: relative; background: var(--ok); color: #fff; }
.done-ok svg path { stroke-dasharray: 24; }
.done-ok::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; pointer-events: none; }
.promo { transition: transform 160ms var(--ease), border-color 200ms ease, box-shadow 220ms ease; }
.promo:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .promo:hover { transform: translateY(-2px); border-color: #8C84FF; box-shadow: 0 14px 26px -20px rgba(15,23,42,.45); } }

/* ── the top bar ───────────────────────────────────────────────────────────────────── */
.pf-top .pp-switch[open] > nav { animation: tr-menu 180ms var(--ease); transform-origin: top right; }
.pf-top .pf-vertical[open] > nav { transform-origin: top left; }
@keyframes tr-menu { from { opacity: .06; transform: translateY(-4px) scale(.96); } }
.pp-switch summary span[aria-hidden] { display: inline-block; transition: transform 200ms var(--ease); }
.pp-switch[open] summary span[aria-hidden] { transform: rotate(180deg); }
.pp-switch nav a { transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .pf-me:hover, .pp-switch summary:hover { box-shadow: 0 6px 16px -10px rgba(15,23,42,.35); } }
/* the Demo badge: a slow sheen every few seconds, nothing more */
.pf-demo { position: relative; overflow: hidden; }
.pf-demo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: tr-sheen 5.5s var(--ease) 1.2s infinite; pointer-events: none; }
@keyframes tr-sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

/* ── the country's verticals (home) ────────────────────────────────────────────────── */
.tr-vcard { transition: border-color 200ms ease, transform 180ms var(--ease), box-shadow 220ms ease; }
.tr-vcard:hover { transform: none; }
.tr-vcard:active { transform: scale(.98); }
.tr-vcard .arr svg { transition: transform 200ms var(--ease); }
.tr-vcard span.ic { transition: transform 260ms var(--pop); }
@media (hover: hover) and (pointer: fine) {
    .tr-vcard:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(15,23,42,.5); }
    .tr-vcard:hover:active { transform: scale(.98); }
    .tr-vcard:hover .arr svg { animation: tr-nudge 700ms var(--ease) infinite; }
    .tr-vcard:hover span.ic { transform: rotate(-6deg) scale(1.06); }
}
@keyframes tr-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ── flights ───────────────────────────────────────────────────────────────────────── */
.fs-trip { position: relative; }
.fs-trip button { transition: background-color 200ms ease, color 200ms ease, box-shadow 220ms ease, transform 160ms var(--ease); }
.fs-grid input:focus, .fs-grid select:focus { box-shadow: 0 0 0 4px rgba(102,86,251,.16), 0 10px 22px -16px rgba(58,45,176,.55); }
.ac ul { animation: tr-menu 160ms var(--ease); transform-origin: top left; }
.ac li button { transition: background-color 140ms ease; }
.sorttabs { position: relative; }
.sorttabs button[aria-pressed="true"] { box-shadow: none; transition: background-color 220ms ease; }
.sorttabs .st-ind { position: absolute; left: 0; bottom: 0; width: calc(100% / 3); height: 3px; background: var(--vi); border-radius: 3px 3px 0 0; transform: translateX(calc(var(--i, 0) * 100%)); pointer-events: none; }
.fare { transition: transform 160ms var(--ease), border-color 200ms ease, box-shadow 220ms ease; }
.fare:has(button:active) { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .fare:hover { transform: translateY(-2px); border-color: #D9D2C7; box-shadow: 0 16px 30px -24px rgba(15,23,42,.45); } .fare:hover:has(button:active) { transform: scale(.99); } }

/* ── below the form: the coupon wallet ─────────────────────────────────────────────── */
/* the coupons: on a phone the script tilts the cards with the swipe (inline transforms, so no CSS transition) */
@media (max-width: 959px) { .deck-track .cp { transition: box-shadow 220ms ease; will-change: transform; } .deck-track.is-held .cp { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 26px 40px -22px rgba(40,30,10,.55); } }
.cp:active .get, .cp .get { transition: transform 160ms var(--ease); }
.cp:active .get { transform: scale(.96); }
.tr-mo .deck:not(.stamped) .cp-stamp { opacity: 0; }
.deck-ui button:hover { border-color: #8C84FF; }

/* the quiet entrances (.rv / [data-io] get .in from the script when in view; hidden only with motion on) */
.tr-mo .rv { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.tr-mo .rv.in { opacity: 1; transform: none; filter: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }

/* the stickers: slapped on with a wobble */
.tr-mo .stk.rv { opacity: 0; transform: rotate(var(--r)); filter: none; transition: none; }
.tr-mo .stk.rv.in { opacity: 1; transform: rotate(var(--r)); transition: none; animation: tr-slap 640ms var(--pop) backwards; animation-delay: calc(var(--d) * 55ms); }
@keyframes tr-slap { 0% { opacity: .06; transform: rotate(calc(var(--r) + 16deg)) scale(1.4); } 55% { opacity: 1; transform: rotate(calc(var(--r) - 5deg)) scale(.96); } 80% { transform: rotate(calc(var(--r) + 2deg)) scale(1.01); } 100% { transform: rotate(var(--r)) scale(1); } }
.stk a { transition: transform 220ms var(--ease), box-shadow 220ms ease; }
.stk a:hover { transform: none; }
.stk a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .stk a:hover { transform: translateY(-4px) scale(1.06) rotate(calc(var(--r) * -1)); box-shadow: 0 2px 0 #E6DED1, 0 18px 26px -14px rgba(40,30,10,.55); } }

/* the receipt: the paper feeds, each line types in with a mechanical tick (steps), the total is stamped, then the barcode */
.tr-mo .rc .ln, .tr-mo .rc .ok, .tr-mo .rc .bar { clip-path: inset(0 100% 0 0); }
.tr-mo .rc.in { animation: tr-feed 700ms var(--ease) backwards; }
.tr-mo .rc.in .ln, .tr-mo .rc.in .ok, .tr-mo .rc.in .bar { clip-path: inset(0 0 0 0); transition: clip-path 300ms steps(14, end); transition-delay: calc(var(--d, 0) * 150ms + 260ms); }
.tr-mo .rc.in .bar { transition: clip-path 420ms var(--ease); transition-delay: calc(var(--d, 0) * 150ms + 380ms); }
.tr-mo .rc.in .ln.tot .v { display: inline-block; animation: tr-thunk 420ms var(--ease) backwards; animation-delay: calc(var(--d, 0) * 150ms + 520ms); }
@keyframes tr-feed { from { opacity: .06; transform: translateY(-18px); } }
@keyframes tr-thunk { from { opacity: .06; transform: scale(1.5) rotate(-4deg); } 70% { opacity: 1; transform: scale(.96); } to { transform: none; } }

/* the price tag: swings on its hole when a stamp is pressed; stamps press down */
.tag { transform-origin: 29px 50%; }
.stamps button:active { transform: rotate(0) scale(.94) translateY(1px); transition-duration: 120ms; }
@media (hover: none) { .stamps button:hover { transform: rotate(var(--r)); } .stamps button[aria-pressed="true"]:hover { transform: rotate(0) scale(1.04); } }

/* the fine print: the answer settles in under the question */
.fq summary { transition: color 180ms ease; }
.fq summary:active i { transform: scale(.9); }
.fq[open] summary:active i { transform: rotate(45deg) scale(.9); }
.fq[open] p { animation: tr-fq 380ms var(--ease) both; }
@keyframes tr-fq { from { opacity: .06; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) { .fq summary:hover { color: var(--vi2); } .fq summary:hover i { background: #FFF6CC; } }

/* the clippings: pressed flat; the hover tilt only with a mouse */
.clip:hover { transform: rotate(var(--r)); }
.clip:active { transform: rotate(0) scale(.98); transition-duration: 140ms; }
@media (hover: hover) and (pointer: fine) { .clip:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 22px 30px -18px rgba(40,30,10,.5); } .clip .ph img { transition: transform 600ms var(--ease); } .clip:hover .ph img { transform: scale(1.04); } }

/* the ticket: the stub tears off (the script plays it), then the page goes to the form */
.tr-mo .ticket.rv.in:active { transform: scale(.985); transition-duration: 160ms; }
.tk-stub span { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .ticket:hover .tk-stub span { transform: rotate(180deg) translateY(-3px); } }

/* scroll reveals (the hold is put on by the script, only on things below the fold) */
.tr-hold { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .pf-demo::after { display: none; }
    .tr-hold, .tr-mo .stk.rv, .tr-mo .ticket.rv, .tr-mo .deck .cp-stamp { opacity: 1 !important; }
    .tr-mo .rc .ln, .tr-mo .rc .ok, .tr-mo .rc .bar { clip-path: none !important; }
}