/* Original vector artwork; decorative loading, not measured API progress. */
:root { --loading-icon-size:128px; --loading-cycle:1000ms; --skeleton-wave-duration:600ms; --skeleton-sweep-duration:1000ms; --skeleton-row-delay:100ms; --skeleton-highlight:rgba(255,255,255,.65); }
@media(prefers-color-scheme:dark) { :root { --skeleton-highlight:rgba(255,255,255,.12); } }
.page-transition-old { position:fixed; inset:0; z-index:70; overflow:hidden; background:var(--ds-bg,#fff); pointer-events:none; }
.page-transition-new { position:relative; z-index:71; }
.page-transition-vehicle { background:var(--ds-bg,#fff); }
.page-transition-vehicle .fade-in > * { animation:none !important; }
body:has(.page-transition-old) { overflow-x:clip; }
.page-skeleton { position:fixed; inset:0; z-index:75; background:var(--ds-bg,#fff); pointer-events:none; }
.skeleton-shape { position:absolute; display:block; overflow:hidden; border-radius:var(--radius-small,8px); background:var(--ds-border,#e6e9eb); animation:skeletonBreathe var(--skeleton-wave-duration) ease-in-out infinite alternate; animation-delay:calc(var(--skeleton-row,0) * var(--skeleton-row-delay)); }
.skeleton-shape::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 15%,var(--skeleton-highlight) 50%,transparent 85%); transform:translateX(-100%); animation:skeletonSweep var(--skeleton-sweep-duration) ease-in-out infinite; animation-delay:calc(var(--skeleton-row,0) * var(--skeleton-row-delay)); }
@keyframes skeletonSweep { from {transform:translateX(-100%)} to {transform:translateX(100%)} }
@keyframes skeletonBreathe { from {opacity:.55} to {opacity:.95} }
#app[aria-busy="true"] .fade-in, #app[aria-busy="true"] .fade-in > * { animation:none !important; }

.car-loading-icon { display:block; width:var(--loading-icon-size); aspect-ratio:10/7; flex:0 0 auto; }
.car-loading-icon svg { display:block; width:100%; height:100%; overflow:visible; }
.front-body { fill:#343f4a; }
.front-tire { fill:#26323c; }
.front-mirrors { fill:#343f4a; }
.front-charge { fill:#79cdbb; transform:translateY(86px); animation:frontCharge var(--loading-cycle) linear infinite; }
.front-glass { fill:#243944; }
.front-glass-shine { stroke:#627985; stroke-width:2; stroke-linecap:round; }
.front-lamp-base { fill:#526974; }
.front-smile { stroke:#2b5260; stroke-width:3; stroke-linecap:round; }
.front-headlamps { fill:#fff8df; opacity:0; animation:lampWake var(--loading-cycle) ease-out infinite; }
@keyframes frontCharge { 0% {transform:translateY(86px)} 90%,100% {transform:translateY(0)} }
@keyframes lampWake { 0%,90% {opacity:0} 100% {opacity:1} }
.quote-loading { animation:none; }
.quote-loading .quote-visual { display:grid; place-items:center; width:100%; height:188px; margin:var(--space-6) auto var(--space-4); }
.quote-loading .status-indicator { display:none; }
.quote-loading-copy, .quote-loading-status,
.quote-loading-result, .quote-loading-error {
  display:none !important;
}
.request-loading { position:fixed; z-index:var(--z-toast,100); inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-3); padding:var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); background:transparent; color:var(--ds-text-secondary); font:500 14px/1.5 var(--font-sans); pointer-events:auto; }


.loading-preview #main > :not(h1.big):not(p.lead), .loading-preview #cta { visibility:hidden; }
.loading-preview #main > h1.big, .loading-preview #main > p.lead { animation:none !important; }

:root { --loading-caption-size:12px; --loading-caption-tracking:.04em; --loading-caption-cycle:1800ms; }
.loading-caption { display:block; max-width:min(100%,24em); text-align:center; font-family:"SFMono-Regular",Consolas,"Apple SD Gothic Neo","Malgun Gothic",monospace; font-size:var(--loading-caption-size); font-weight:500; line-height:1.6; letter-spacing:var(--loading-caption-tracking); color:var(--ds-text-secondary); overflow-wrap:anywhere; animation:loadingCaptionPulse var(--loading-caption-cycle) ease-in-out infinite; }
@supports (-webkit-background-clip:text) {
 .loading-caption { background:linear-gradient(100deg,var(--ds-text-secondary) 35%,var(--ds-text-tertiary) 45%,var(--ds-text) 50%,var(--ds-text-tertiary) 55%,var(--ds-text-secondary) 65%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:loadingCaptionSweep var(--loading-caption-cycle) linear infinite; }
}
@keyframes loadingCaptionPulse { 0%,100% {opacity:.65} 50% {opacity:1} }
@keyframes loadingCaptionSweep { from {background-position:100% 50%} to {background-position:0% 50%} }


:root { --loading-letter-cycle:2200ms; --loading-letter-stagger:65ms; --loading-letter-lift:3px; --loading-dots-cycle:1200ms; }
.loading-caption { background:none; color:var(--ds-text-secondary); animation:none; }
.loading-letter { display:inline-block; animation:loadingLetterTap var(--loading-letter-cycle) ease-in-out infinite; animation-delay:calc(var(--letter-index) * var(--loading-letter-stagger)); }
.loading-dots { display:inline-flex; width:1.5em; margin-left:.15em; }
.loading-dots span { animation:loadingDotStep var(--loading-dots-cycle) steps(1,end) infinite; animation-delay:calc(var(--dot-index) * 200ms); }
@keyframes loadingLetterTap { 0%,22%,100% {transform:translateY(0); opacity:.78} 10% {transform:translateY(calc(-1 * var(--loading-letter-lift))); opacity:1} }
@keyframes loadingDotStep { 0%,24% {opacity:0} 25%,74% {opacity:1} 75%,100% {opacity:0} }


/* Static caption with a slow accumulating ellipsis. */
:root { --loading-dots-cycle:1400ms; }
.loading-letter { animation:none; transform:none; opacity:1; }
.loading-dots span { animation:loadingDotAccumulate var(--loading-dots-cycle) steps(1,end) infinite; animation-delay:0ms; }
.loading-dots span:nth-child(1) { --dot-start:0; animation-name:loadingFirstDot; }
.loading-dots span:nth-child(2) { animation-name:loadingSecondDot; }
.loading-dots span:nth-child(3) { animation-name:loadingThirdDot; }
@keyframes loadingFirstDot { 0%,24.99% {opacity:0} 25%,100% {opacity:1} }
@keyframes loadingSecondDot { 0%,49.99% {opacity:0} 50%,100% {opacity:1} }
@keyframes loadingThirdDot { 0%,74.99% {opacity:0} 75%,100% {opacity:1} }


.request-loading.is-skeleton-only { visibility:hidden; pointer-events:none; }

/* Original paired punctuation mark; one fill + one small finishing bounce. */
.comma-loading-icon{display:block;width:92px;height:78px;flex:none}.comma-loading-icon svg{display:block;width:100%;height:100%;overflow:visible}.comma-loading-fill{transform-box:fill-box;transform-origin:50% 100%;animation:comma-fill var(--comma-duration,850ms) linear infinite;will-change:transform}.comma-loading-mark{transform-origin:60px 50px;animation:comma-settle var(--comma-duration,850ms) linear infinite;will-change:transform}.request-loading{background:var(--ds-bg,#fff)}.request-loading .loading-caption{display:none}@keyframes comma-fill{0%{transform:scaleY(0)}84%,100%{transform:scaleY(1)}}@keyframes comma-settle{0%,84%,100%{transform:translateY(0) rotate(0deg) scale(1)}89%{transform:translateY(-4px) rotate(-4deg) scale(1.035)}95%{transform:translateY(1px) rotate(2deg) scale(.99)}}
