/* Story Core — order tracking page: the lookup scene + form, and the motion on the result.
   Colours: Story palette tokens, swapped for Milano's (--m-*) when the Milano layout is on. */
/* the tone tokens (--st-*) are defined in auth.css (loaded on this page too); the scene reads them as --tk-* */
.bdcs-track{--tk-bg:var(--st-ink,var(--sb-ink));--tk-fg:var(--st-paper,#fff);--tk-acc:var(--st-red,var(--sb-copper));--tk-ease:cubic-bezier(.22,1,.36,1)}
.bdcs-trk-scene{--tk-bg:var(--st-bg);--tk-fg:var(--st-fg);--tk-acc:var(--st-acc)}

/* ---------- lookup: scene beside the form ---------- */
.bdcs-trk-find.is-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:calc(28px*var(--sb-sp,1));align-items:stretch;max-width:1120px;margin:0 auto;padding:calc(6px*var(--sb-sp,1)) 0 calc(20px*var(--sb-sp,1))}
.bdcs-trk-scene{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:460px;padding:calc(36px*var(--sb-sp,1));border-radius:var(--trk-r,18px);overflow:hidden;background:var(--st-back,var(--tk-bg));color:var(--tk-fg);isolation:isolate;animation:bdcs-tk-up .8s var(--tk-ease) both}
.bdcs-trk-scene-copy{position:relative;z-index:1;max-width:420px}
.bdcs-trk-scene .bdcs-eyebrow{color:color-mix(in srgb,var(--tk-fg) 70%,transparent);margin:0 0 calc(6px*var(--sb-sp,1))}
body .bdcs-track .bdcs-trk-find .bdcs-trk-scene h2,body.bdcs-l-milano .bdcs-track .bdcs-trk-scene :is(h2,p,.bdcs-eyebrow){color:var(--tk-fg)}
.bdcs-trk-find .bdcs-trk-scene h2{font-size:clamp(calc(30px*var(--sb-fs,1)),3.6vw,calc(46px*var(--sb-fs,1)));line-height:1.04;letter-spacing:-.02em}
.bdcs-trk-scene p{margin:calc(10px*var(--sb-sp,1)) 0 0;color:var(--tk-fg);opacity:.75;font-size:calc(15px*var(--sb-fs,1));line-height:1.55}
.bdcs-trk-art{position:absolute;z-index:0;left:0;right:0;bottom:0;width:100%;height:auto;max-height:72%}
.bdcs-trk-art *{transform-box:fill-box}
.bdcs-trk-art .tk-sun{fill:var(--tk-acc);opacity:.85;transform-origin:center;animation:bdcs-tk-pulse calc(6s*var(--k,1)) ease-in-out infinite}
.bdcs-trk-art .tk-cloud{fill:var(--tk-fg);opacity:.16;animation:bdcs-tk-drift calc(26s*var(--k,1)) linear infinite}
.bdcs-trk-art .tk-c2{opacity:.1;animation-duration:calc(38s*var(--k,1));animation-delay:-12s}
.bdcs-trk-art .tk-town{fill:color-mix(in srgb,var(--tk-fg) 9%,transparent)}
.bdcs-trk-art .tk-wins rect{fill:var(--tk-acc);opacity:.0;animation:bdcs-tk-win calc(5s*var(--k,1)) ease-in-out infinite}
.bdcs-trk-art .tk-wins rect:nth-child(2n){animation-delay:calc(1.4s*var(--k,1))}.bdcs-trk-art .tk-wins rect:nth-child(3n){animation-delay:calc(2.8s*var(--k,1))}
.bdcs-trk-art .tk-road{fill:color-mix(in srgb,var(--tk-fg) 6%,transparent)}
.bdcs-trk-art .tk-lane{stroke:var(--tk-fg);stroke-opacity:.45;stroke-width:3;stroke-dasharray:22 18;stroke-linecap:round;animation:bdcs-tk-road calc(.9s*var(--k,1)) linear infinite}
.bdcs-trk-art .tk-van{animation:bdcs-tk-arrive calc(1.4s*var(--k,1)) var(--tk-ease) calc(.2s*var(--k,1)) both}
.bdcs-trk-art .tk-bounce{animation:bdcs-tk-bounce calc(.45s*var(--k,1)) ease-in-out infinite alternate}
.bdcs-trk-art .tk-body{fill:var(--tk-fg)}
.bdcs-trk-art .tk-cab{fill:var(--tk-acc)}
.bdcs-trk-art .tk-glass{fill:var(--tk-bg);opacity:.75}
.bdcs-trk-art .tk-parcel{fill:none;stroke:var(--tk-bg);stroke-width:2;stroke-linejoin:round}
.bdcs-trk-art .tk-speed{fill:none;stroke:var(--tk-fg);stroke-width:3;stroke-linecap:round;opacity:.5;stroke-dasharray:30;animation:bdcs-tk-speed calc(.9s*var(--k,1)) linear infinite}
.bdcs-trk-art .tk-wheel circle:first-child{fill:var(--tk-bg);stroke:var(--tk-fg);stroke-width:3}
.bdcs-trk-art .tk-wheel .tk-hub{fill:var(--tk-fg)}
.bdcs-trk-art .tk-wheel path{stroke:var(--tk-fg);stroke-width:2;transform-origin:center;animation:bdcs-tk-spin calc(.5s*var(--k,1)) linear infinite}
.bdcs-trk-art .tk-pin path{fill:var(--tk-acc);transform-origin:50% 100%;animation:bdcs-tk-drop calc(1s*var(--k,1)) var(--tk-ease) calc(1.2s*var(--k,1)) both,bdcs-tk-hop calc(2.4s*var(--k,1)) ease-in-out calc(2.4s*var(--k,1)) infinite}
.bdcs-trk-art .tk-pin-hole{fill:var(--tk-bg);animation:bdcs-tk-fade calc(.3s*var(--k,1)) ease calc(1.8s*var(--k,1)) both}
/* fresh: a white van with ink outlines on the light street */
.tone-fresh .bdcs-trk-art .tk-body{fill:var(--st-paper);stroke:var(--st-ink);stroke-width:2.5}
.tone-fresh .bdcs-trk-art .tk-cab{stroke:var(--st-ink);stroke-width:2.5}
.tone-fresh .bdcs-trk-art .tk-parcel{stroke:var(--st-ink)}
.tone-fresh .bdcs-trk-art .tk-glass{fill:var(--st-ink);opacity:.18}
.tone-fresh .bdcs-trk-art .tk-wheel circle:first-child{fill:var(--st-ink)}.tone-fresh .bdcs-trk-art .tk-wheel :is(.tk-hub){fill:var(--st-paper)}.tone-fresh .bdcs-trk-art .tk-wheel path{stroke:var(--st-paper)}
.tone-fresh .bdcs-trk-art .tk-town{fill:color-mix(in srgb,var(--st-green) 14%,transparent)}
.tone-fresh .bdcs-trk-art .tk-cloud{fill:var(--st-paper);opacity:.95;filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--st-ink) 10%,transparent))}
.tone-fresh .bdcs-trk-art .tk-road{fill:color-mix(in srgb,var(--st-ink) 6%,transparent)}
/* image / video banner: media fills the scene, the copy sits on a soft tint */
.bdcs-trk-scene .bdcs-st-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.bdcs-trk-scene:is(.is-image,.is-video,.is-banner)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--st-bg) 88%,transparent),transparent 60%)}
.bdcs-trk-scene .bdcs-st-cta{background:var(--st-fg);color:var(--st-bg)}
.bdcs-trk-art .tk-pin-shadow{fill:var(--tk-fg);opacity:.2;transform-origin:center;animation:bdcs-tk-shadow calc(2.4s*var(--k,1)) ease-in-out calc(2.4s*var(--k,1)) infinite}
/* while a lookup runs, the van speeds up */
.bdcs-trk-find:has(.is-busy) .tk-lane{animation-duration:.35s}
.bdcs-trk-find:has(.is-busy) .tk-bounce{animation-duration:.2s}

/* Settings → Scene motion. calm: the van drives in and the pin drops once, then all holds still. off: a still picture. */
.bdcs-trk-art.anim-calm :is(.tk-sun,.tk-cloud,.tk-wins rect,.tk-lane,.tk-bounce,.tk-speed,.tk-wheel path,.tk-pin-shadow){animation:none}
.bdcs-trk-art.anim-calm .tk-pin path{animation:bdcs-tk-drop calc(1s*var(--k,1)) var(--tk-ease) calc(1.2s*var(--k,1)) both}
.bdcs-trk-art.anim-calm .tk-speed{opacity:0}
.bdcs-trk-art:is(.anim-calm,.anim-off) .tk-wins rect:nth-child(odd){opacity:.75}
.bdcs-trk-art.anim-off *{animation:none!important}
.bdcs-trk-art.anim-off .tk-speed{opacity:0}

/* the form side */
.bdcs-trk-find.is-stage .bdcs-trk-label{max-width:none;display:flex;flex-direction:column;animation:bdcs-tk-up .8s var(--tk-ease) .1s both}
.bdcs-trk-find.is-stage .bdcs-trk-form{flex:1;align-content:start}
.bdcs-trk-find.is-stage .bdcs-trk-label-top h2{font-size:clamp(calc(22px*var(--sb-fs,1)),2.2vw,calc(28px*var(--sb-fs,1)))}
.bdcs-trk-find.is-stage .bdcs-trk-f{animation:bdcs-tk-up .6s var(--tk-ease) both}
.bdcs-trk-find.is-stage .bdcs-trk-f:nth-child(1){animation-delay:.2s}.bdcs-trk-find.is-stage .bdcs-trk-f:nth-child(2){animation-delay:.28s}.bdcs-trk-find.is-stage .bdcs-trk-go{animation:bdcs-tk-up .6s var(--tk-ease) .36s both}
.bdcs-trk-fl{display:flex;align-items:center;justify-content:space-between;gap:calc(10px*var(--sb-sp,1));flex-wrap:wrap}
.bdcs-trk-by{display:inline-flex;padding:3px;border-radius:var(--sb-pill,999px);background:color-mix(in srgb,var(--sb-taupe) 16%,transparent)}
body.bdcs-l-milano .bdcs-trk-by{background:var(--m-soft)}
.bdcs-track .bdcs-trk-by button{display:inline-flex;align-items:center;gap:5px;height:auto;min-height:0;margin:0;padding:calc(5px*var(--sb-sp,1)) calc(11px*var(--sb-sp,1));border:0;border-radius:var(--sb-pill,999px);background:transparent;color:inherit;font:inherit;font-size:calc(12.5px*var(--sb-fs,1));font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0;cursor:pointer;opacity:.7;box-shadow:none;transition:background .3s var(--tk-ease),color .3s,opacity .3s}
.bdcs-track .bdcs-trk-by button[aria-pressed=true]{background:var(--tk-bg);color:var(--tk-fg);opacity:1}
.bdcs-track .bdcs-trk-go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:calc(10px*var(--sb-sp,1));overflow:hidden;transition:transform .25s var(--tk-ease),box-shadow .25s,background .25s}
.bdcs-track .bdcs-trk-go svg{width:18px;height:18px;transition:transform .3s var(--tk-ease)}
.bdcs-track .bdcs-trk-go:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--tk-bg) 80%,transparent)}
.bdcs-track .bdcs-trk-go:hover svg{transform:translateX(4px)}
.bdcs-track .is-busy .bdcs-trk-go{pointer-events:none}
.bdcs-track .is-busy .bdcs-trk-go svg{animation:bdcs-tk-zoom .6s var(--tk-ease) infinite}
.bdcs-track .is-busy .bdcs-trk-go::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:currentColor;opacity:.5;animation:bdcs-tk-load 1s ease-in-out infinite}
.bdcs-track .bdcs-trk-err{animation:bdcs-tk-shake .5s var(--tk-ease) both}

/* ---------- the result: each part arrives in turn ---------- */
.bdcs-trk>*{animation:bdcs-tk-up .7s var(--tk-ease) both}
.bdcs-trk>:nth-child(2){animation-delay:.08s}.bdcs-trk>:nth-child(3){animation-delay:.16s}.bdcs-trk>:nth-child(4){animation-delay:.24s}.bdcs-trk>:nth-child(n+5){animation-delay:.32s}
.bdcs-trk-route::after{animation:bdcs-tk-fill 1.3s var(--tk-ease) .45s both}
.bdcs-trk-route li{animation:bdcs-tk-pop .55s var(--tk-ease) both}
.bdcs-trk-route li:nth-child(1){animation-delay:.3s}.bdcs-trk-route li:nth-child(2){animation-delay:.45s}.bdcs-trk-route li:nth-child(3){animation-delay:.6s}.bdcs-trk-route li:nth-child(4){animation-delay:.75s}.bdcs-trk-route li:nth-child(5){animation-delay:.9s}
.bdcs-trk-log li{animation:bdcs-tk-up .5s var(--tk-ease) both}
.bdcs-trk-log li:nth-child(1){animation-delay:.35s}.bdcs-trk-log li:nth-child(2){animation-delay:.42s}.bdcs-trk-log li:nth-child(3){animation-delay:.49s}.bdcs-trk-log li:nth-child(4){animation-delay:.56s}.bdcs-trk-log li:nth-child(n+5){animation-delay:.63s}
.bdcs-trk-now h2:focus{outline:0}
::view-transition-old(root){animation:bdcs-tk-out .3s ease both}
::view-transition-new(root){animation:bdcs-tk-in .45s var(--tk-ease,ease) both}

@keyframes bdcs-tk-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bdcs-tk-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes bdcs-tk-fill{from{width:0}}
@keyframes bdcs-tk-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes bdcs-tk-in{from{opacity:0;transform:translateY(12px)}}
@keyframes bdcs-tk-road{to{stroke-dashoffset:40}}
@keyframes bdcs-tk-bounce{to{transform:translateY(-2.5px)}}
@keyframes bdcs-tk-spin{to{transform:rotate(360deg)}}
@keyframes bdcs-tk-speed{to{stroke-dashoffset:60}}
@keyframes bdcs-tk-arrive{from{transform:translateX(-260px)}to{transform:none}}
@keyframes bdcs-tk-drop{from{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes bdcs-tk-hop{0%,70%,100%{transform:none}80%{transform:translateY(-8px)}90%{transform:translateY(0)}}
@keyframes bdcs-tk-shadow{0%,70%,100%{transform:none;opacity:.2}80%{transform:scale(.6);opacity:.1}}
@keyframes bdcs-tk-fade{from{opacity:0}}
@keyframes bdcs-tk-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes bdcs-tk-drift{from{transform:translateX(-120px)}to{transform:translateX(560px)}}
@keyframes bdcs-tk-win{0%,100%{opacity:0}40%,60%{opacity:.8}}
@keyframes bdcs-tk-zoom{0%{transform:translateX(-14px);opacity:0}50%{opacity:1}100%{transform:translateX(14px);opacity:0}}
@keyframes bdcs-tk-load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes bdcs-tk-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* phones and tablets: the scene becomes a hero, the label overlaps it like a ticket */
@media(max-width:899px){
	.bdcs-trk-find.is-stage{display:block;padding-top:0}
	.bdcs-trk-scene{min-height:300px;padding:calc(24px*var(--sb-sp,1)) calc(22px*var(--sb-sp,1)) calc(70px*var(--sb-sp,1))}
	.bdcs-trk-scene{min-height:340px}
	.bdcs-trk-art{bottom:calc(46px*var(--sb-sp,1));max-height:56%}
	.bdcs-trk-find .bdcs-trk-scene h2{font-size:calc(30px*var(--sb-fs,1))}
	.bdcs-trk-scene p{font-size:calc(13.5px*var(--sb-fs,1))}
	.bdcs-trk-find.is-stage .bdcs-trk-label{position:relative;z-index:1;width:auto;margin:calc(-48px*var(--sb-sp,1)) calc(10px*var(--sb-sp,1)) 0;box-shadow:0 18px 40px -22px rgba(0,0,0,.35);background:var(--sb-card,#fff)}
	body.bdcs-l-milano .bdcs-trk-find.is-stage .bdcs-trk-label{background:var(--m-bg)}
	.bdcs-trk-find.is-stage .bdcs-trk-label-top .bdcs-eyebrow{display:none}
}
@media(prefers-reduced-motion:reduce){
	.bdcs-track *,.bdcs-track{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
}