/* HouseQuotes motion: the site should feel busy like Bea, never frantic.
   Everything here is switched off for people who ask for reduced motion (bottom of the file). */

/* Page to page: a soft cross-fade where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .28s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---- Bea is alive: wings flap, eyes blink, she bobs ---- */
.bea .wing { transform-box: fill-box; transform-origin: 50% 90%; animation: flap .16s ease-in-out infinite alternate; }
.bea .eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; transition: translate .25s var(--ease); }
.bea-sleepy .wing, .bea-sleepy .eye { animation: none; }
.bea-sleepy svg { animation: breathe 3.6s ease-in-out infinite; transform-origin: 50% 80%; }
.bea-celebrate svg { animation: hop 1.1s var(--spring) infinite; transform-origin: 50% 100%; }
.bea-wave svg { animation: sway 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.steps li:nth-child(2) .bea svg, .story li:nth-child(2) .bea svg { animation-delay: -.6s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .97); } }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

.float { animation: bob 3.2s ease-in-out infinite; }
.steps .bea, .story-bea .bea, .qf-bea .bea { animation: bob 2.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Sleepy Bea's z's drift up */
.zzz i { animation: zz 3.6s ease-in infinite; }
.zzz i:nth-child(2) { animation-delay: 1.2s; left: 14px; font-size: 18px; }
.zzz i:nth-child(3) { animation-delay: 2.4s; left: 26px; font-size: 14px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, -26px) scale(1.15); } }

/* ---- Hero ---- */
.trail path { animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -24; } }
.hero-bea-fly .wing { animation-duration: .1s; }
.hero-bea-fly:not(.on-trail) { animation: bob 3s ease-in-out infinite; }

.js h1.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js h1.split .w > span { display: inline-block; transform: translateY(105%); }
.js h1.split-ready .w > span { animation: word-up .7s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
@keyframes word-up { to { transform: none; } }

.js .rise { animation: rise .7s var(--ease) both; animation-delay: .45s; }
.js .rise + .rise { animation-delay: .55s; }
.js .rise + .rise + .rise { animation-delay: .65s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.js .quote-stack .qcard { animation: card-in .9s var(--spring) both; }
.js .quote-stack .tilt-l { --r: -4deg; animation-delay: .7s; }
.js .quote-stack .picked { --r: 0deg; animation-delay: .82s; }
.js .quote-stack .tilt-r { --r: 4deg; animation-delay: .94s; }
.quote-stack .qcard { transform: rotate(var(--r, 0)) translateY(10px); }
.quote-stack .picked { transform: translateY(0); }
@keyframes card-in { from { transform: rotate(0) translateY(140px); } }
.quote-stack:hover .tilt-l { transform: rotate(-8deg) translate(-10px, 4px); }
.quote-stack:hover .tilt-r { transform: rotate(8deg) translate(10px, 4px); }
.quote-stack .qcard { transition: transform .4s var(--spring); }
.tick-pop { display: inline-flex; animation: tick 1s var(--spring) 1.6s both; }
@keyframes tick { from { transform: scale(0) rotate(-90deg); } }

/* ---- Reveal on scroll (only when JS is running, so nothing hides without it) ---- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease) var(--delay, 0ms), transform .7s var(--ease) var(--delay, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .tile[data-reveal].in, .js .cost-card[data-reveal].in, .js .guide-card[data-reveal].in, .js .sub-card[data-reveal].in { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: opacity .6s var(--ease) var(--delay, 0ms), transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.js .tile[data-reveal].in:hover, .js .cost-card[data-reveal].in:hover, .js .guide-card[data-reveal].in:hover, .js .sub-card[data-reveal].in:hover { transform: translateY(-4px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); }
.hl { transition: background-size .9s var(--ease) .3s; }
.in .hl, [data-reveal].in .hl, .in.hl { background-size: 100% 100%; }
.no-js .hl, html:not(.js) .hl { background-size: 100% 100%; }

/* Promise box: the ticks pop in one by one */
.js .promise .promise-list li { opacity: 0; transform: scale(.8); transition: all .45s var(--spring); }
.js .promise.in .promise-list li { opacity: 1; transform: none; }
.js .promise.in .promise-list li:nth-child(2) { transition-delay: .12s; }
.js .promise.in .promise-list li:nth-child(3) { transition-delay: .24s; }
.js .promise.in .promise-list li:nth-child(4) { transition-delay: .36s; }

/* Matches: the picked one glows in */
.js .split-visual.in .match.picked { animation: picked 1.2s var(--spring) .4s both; }
@keyframes picked { from { transform: scale(.94); background: var(--surface); border-color: var(--surface); } }

/* ---- Marquee of jobs ---- */
.mq-track { animation: marquee 38s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Buttons ---- */
.btn-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); pointer-events: none; }
.btn-shine:hover::after { animation: shine .8s var(--ease); }
.hero .btn-shine::after { animation: shine 1s var(--ease) 2.2s; }
@keyframes shine { to { left: 130%; } }
.btn.loading { pointer-events: none; }
.btn.loading::before { content: ""; width: 16px; height: 16px; border: 2.5px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Quote flow ---- */
.qf-screen.in { animation: slide-in .38s var(--ease) both; }
.qf-screen.in-back { animation: slide-back .38s var(--ease) both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(36px); } }
@keyframes slide-back { from { opacity: 0; transform: translateX(-36px); } }
.qf-opt { animation: opt-in .45s var(--spring) both; animation-delay: var(--d, 0ms); }
@keyframes opt-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.qf-opt.chosen { animation: chosen .35s var(--spring); }
@keyframes chosen { 50% { transform: scale(.95); } }
.qf-guide.pop .qf-bea { animation: pop .5s var(--spring); }
.qf-guide.pop .qf-say { animation: rise .45s var(--ease) .08s both; }
@keyframes pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.found-chip { animation: pop .45s var(--spring); }
.qf { transition: box-shadow .3s; }
.qf:focus-within { box-shadow: 0 10px 0 var(--ink); }

/* ---- Pages ---- */
.pill-tag.pop { animation: pop .6s var(--spring) .3s both; }
.sl-live i { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,125,50,.5); } 100% { box-shadow: 0 0 0 10px rgba(46,125,50,0); } }
.trade-hero .sample-lead { animation: tilt-float 5s ease-in-out infinite; }
@keyframes tilt-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-8px); } }
.thanks-bea { animation: pop .8s var(--spring) .1s both; }
.mq-steps .now i { animation: now 1.4s ease-in-out infinite; }
@keyframes now { 50% { opacity: .45; } }
.faq details[open] p { animation: rise .35s var(--ease); }
.table-box tbody tr { transition: background .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .promise .promise-list li { opacity: 1 !important; transform: none !important; }
  .js h1.split .w > span { transform: none !important; }
  .hl { background-size: 100% 100%; }
  @view-transition { navigation: none; }
}