/* BurrowUp — motion & polish layer (2026-11-03)
   Loaded only on marketing pages (home, how-it-works, planner, about, pricing).
   Legal, auth and form pages never load this file, so their content stays static.
   Rules: transform/opacity only, one-shot animations (no loops), content readable without JS,
   and everything non-essential is switched off under prefers-reduced-motion. */

.bu-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Texture: faint soil grain on warm surfaces (static, decorative) ---------- */
.bu-hero, .bu-page-hero, .bu-section-alt { position: relative; isolation: isolate; }
.bu-hero::before, .bu-page-hero::before, .bu-section-alt::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .17 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Hero: sunrise behind the plan card ---------- */
.bu-hero-grid { position: relative; }
.bu-sunrise {
  position: absolute; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; right: -140px; top: -40px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(242,165,65,.55) 0%, rgba(242,165,65,.22) 38%, rgba(242,165,65,0) 68%);
}
@media (max-width: 899px) { .bu-sunrise { width: 380px; height: 380px; right: -120px; top: auto; bottom: 40px; } }

/* Plan card: lifts in, rows settle, progress bars fill, "paid off" row gets a check pop */
.bu-preview { position: relative; }
.bu-preview-row .bar span { transform-origin: left center; }
.bu-preview-row b.done { color: var(--bu-forest); }

/* Strata layers under the hero */
.bu-strata path { transform-box: fill-box; transform-origin: bottom; }


/* ---------- Scroll reveal (only applied by JS to content below the first screen) ---------- */
.bu-reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.bu-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Steps: dashed tunnel draws downward, then each number pops */
.bu-steps.bu-dig .bu-step::after { transform-origin: top; transform: scaleY(0); }
.bu-steps.bu-dig .bu-step::before { transform: scale(.4); opacity: 0; }
.bu-steps.bu-dig.is-in .bu-step::before { transform: none; opacity: 1; transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .3s; transition-delay: calc(var(--i, 0) * 220ms); }
.bu-steps.bu-dig.is-in .bu-step::after { transform: none; transition: transform .5s ease-out; transition-delay: calc(var(--i, 0) * 220ms + 180ms); }
.bu-steps.bu-dig .bu-step > * { opacity: 0; transform: translate3d(10px, 0, 0); }
.bu-steps.bu-dig.is-in .bu-step > * { opacity: 1; transform: none; transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 220ms + 80ms); }

/* CTA band: its sun glow rises into place */
.bu-cta-band::after { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s; }
.bu-cta-band.bu-reveal::after { transform: translate3d(-40px, 60px, 0) scale(.6); opacity: 0; }
.bu-cta-band.bu-reveal.is-in::after { transform: none; opacity: 1; transition-delay: .25s; }

/* ---------- Micro-interactions ---------- */
.bu-btn { transition: background-color .2s, border-color .2s, color .2s, transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s; }
.bu-btn .bu-ico-arrow-right, .bu-btn .bu-ico-arrow-down { transition: transform .2s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .bu-btn:hover .bu-ico-arrow-right { transform: translateX(4px); }
  .bu-btn:hover .bu-ico-arrow-down { transform: translateY(3px); }
  .bu-btn-sun:hover, .bu-btn-primary:hover { box-shadow: 0 10px 22px -12px rgba(20,52,36,.55); }
  .bu-tile:hover .bu-tile-icon { transform: translateY(-2px) rotate(-4deg); }
}
.bu-tile-icon { transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.bu-btn:active { transform: translateY(1px) scale(.98); }

/* ---------- Planner: balance-over-time chart ---------- */
.bu-chart { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 16px 16px 12px; margin: 0 0 14px; }
.bu-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; }
.bu-chart-head h3 { font-size: 1.05rem; margin: 0; }
.bu-chart-note { font-size: .8rem; color: var(--text-muted); }
.bu-lanes { display: grid; gap: 14px; margin-top: 6px; }
.bu-lane-label { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; margin-bottom: 8px; color: var(--text-secondary); }
.bu-lane-label span { font-weight: 600; color: var(--bu-ink); }
.bu-lane-label b { font-weight: 600; color: var(--c); white-space: nowrap; }
.bu-lane-track { position: relative; height: 22px; margin: 0 11px; }
.bu-lane-track::before { content: ''; position: absolute; left: -11px; right: -11px; top: 9px; height: 4px; border-radius: 4px; background: var(--bu-sand); }
.bu-lane-fill { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 4px; background: var(--c); transform-origin: left center; }
.bu-lane.best .bu-lane-fill { height: 6px; top: 8px; box-shadow: 0 0 0 3px rgba(242,165,65,.25); }
.bu-dot { position: absolute; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--c); color: var(--c); font-size: .7rem; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.bu-dot.lift { top: -14px; }
.bu-dot:last-child { background: var(--c); color: #fff; }
.bu-chart-x { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: 10px; }
.bu-chart.is-drawing .bu-lane-fill { animation: bu-grow 1.2s cubic-bezier(.45,.05,.25,1) both; animation-delay: calc(var(--i, 0) * 120ms); }
.bu-chart.is-drawing .bu-dot { animation: bu-pop .4s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i, 0) * 120ms + var(--d, 0) * 1.1s + .05s); }

/* Result cards: first reveal staggers in, best plan gets a restrained sunrise */
.bu-results.is-entering .bu-result { animation: bu-rise .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.bu-results.is-entering .bu-order li { animation: bu-slide .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.35s + var(--i, 0) * 110ms + var(--j, 0) * 70ms); }
.bu-result.best::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 100% 0%, rgba(242,165,65,.26), rgba(242,165,65,0) 58%);
}
.bu-result > * { position: relative; z-index: 1; }
.bu-result .badge { z-index: 2; }
.bu-results.is-entering .bu-result.best::before { animation: bu-glow 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms + .25s); }
.bu-results.is-entering .bu-result.best .badge { animation: bu-pop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i, 0) * 110ms + .5s); }
.bu-metric b { font-variant-numeric: tabular-nums; }

@keyframes bu-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes bu-slide { from { opacity: 0; transform: translate3d(-12px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes bu-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes bu-sun { from { opacity: 0; transform: translate3d(-30px, 50px, 0) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bu-lift { from { transform: translate3d(0, 24px, 0); } to { transform: none; } }
@keyframes bu-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes bu-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes bu-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- One-shot load sequence (motion-OK users only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bu-sunrise { animation: bu-sun 1.6s cubic-bezier(.2,.7,.2,1) .1s both; }
  .bu-preview { animation: bu-rise .8s cubic-bezier(.2,.7,.2,1) .15s both; }
  .bu-preview-row { animation: bu-slide .5s cubic-bezier(.2,.7,.2,1) both; }
  .bu-preview-row:nth-of-type(2) { animation-delay: .45s; }
  .bu-preview-row:nth-of-type(3) { animation-delay: .55s; }
  .bu-preview-row:nth-of-type(4) { animation-delay: .65s; }
  .bu-preview-row:nth-of-type(5) { animation-delay: .75s; }
  .bu-preview-row .bar span { animation: bu-grow 1.1s cubic-bezier(.45,.05,.25,1) both; }
  .bu-preview-row:nth-of-type(2) .bar span { animation-delay: .6s; }
  .bu-preview-row:nth-of-type(3) .bar span { animation-delay: .75s; }
  .bu-preview-row:nth-of-type(4) .bar span { animation-delay: .9s; }
  .bu-preview-row:nth-of-type(5) .bar span { animation-delay: 1.05s; }
  .bu-preview-row b.done { animation: bu-pop .45s cubic-bezier(.3,1.6,.5,1) 1.55s both; display: inline-block; }
  .bu-preview-foot { animation: bu-fade .6s ease-out 1.5s both; }
  .bu-strata path { animation: bu-lift .9s cubic-bezier(.2,.7,.2,1) both; } /* transform only: keeps each layer's own opacity */
  .bu-strata path:nth-child(2) { animation-delay: .12s; }
  .bu-strata path:nth-child(3) { animation-delay: .24s; }

}

/* Returning to Home in the same session: hero renders in its final state (set by an inline <head> script) */
html.bu-hero-seen .bu-sunrise, html.bu-hero-seen .bu-preview, html.bu-hero-seen .bu-preview-row,
html.bu-hero-seen .bu-preview-row .bar span, html.bu-hero-seen .bu-preview-row b.done,
html.bu-hero-seen .bu-preview-foot, html.bu-hero-seen .bu-strata path { animation: none !important; }

/* ---------- Reduced motion: show everything in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .bu-reveal, .bu-steps.bu-dig .bu-step > *, .bu-steps.bu-dig .bu-step::before { opacity: 1 !important; transform: none !important; }
  .bu-steps.bu-dig .bu-step::after, .bu-cta-band.bu-reveal::after { transform: none !important; opacity: 1 !important; }
    .bu-btn:active, .bu-tile:hover, .bu-tile:hover .bu-tile-icon { transform: none; }
}