/* Načítanie modelu v kalkulačke zákazníka (nacenenie UX K3). Iba CSS nad existujúcimi háčikmi views.js:
   .calculator-upload-status[data-upload-phase] (upload-feedback.js), .customer-part-list a .calculator-model-price[data-price-state].
   Pohyb je iba počas čakania (nahrávanie, analýza, výpočet ceny), nikdy pri hotovom obsahu: pridanie modelu prekreslí všetky karty
   (calculator-render.js), takže animácia nábehu karty by blikala. Pohyb je iba v bloku prefers-reduced-motion:no-preference na konci;
   pri zníženom pohybe sa animácia vôbec nezapne (aj pás lišty, ktorý globálne pravidlo design.css nezasiahne) a obsah ostáva viditeľný. */

/* Kruh pri názve stavu, kým sa súbor nahráva alebo analyzuje. */
[data-calculator-root] .calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
 [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"])
 .calculator-upload-status-line>strong::before{content:"";display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;
 border:2px solid #c2d8f3;border-top-color:var(--accent);border-radius:50%}
/* Hotová analýza: zelená fajka namiesto kruhu, bez pohybu. */
[data-calculator-root] .calculator-upload-status[data-upload-phase="ready"] .calculator-upload-status-line>strong::before{content:"";display:inline-block;
 width:5px;height:9px;margin:0 9px 0 3px;vertical-align:1px;border:solid #347455;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Nahrávanie s percentami: lišta má jemný pohyblivý pás, aby bolo vidno, že prenos beží. */
[data-calculator-root] .calculator-upload-status:is([data-upload-phase="uploading"],[data-upload-phase="finalizing"])
 .calculator-upload-progress progress::-webkit-progress-value{background:linear-gradient(110deg,#4c8bde 0%,#4c8bde 40%,#7fb0ee 50%,#4c8bde 60%,#4c8bde 100%);
 background-size:220% 100%}
[data-calculator-root] .calculator-upload-status:is([data-upload-phase="uploading"],[data-upload-phase="finalizing"])
 .calculator-upload-progress progress::-moz-progress-bar{background:linear-gradient(110deg,#4c8bde 0%,#4c8bde 40%,#7fb0ee 50%,#4c8bde 60%,#4c8bde 100%);
 background-size:220% 100%}

/* Kostra karty modelu, kým nahrávanie alebo analýza beží: miesto, kam karta príde, s náhľadom, názvom a cenou. */
[data-calculator-root]:has(.calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
 [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"]))
 .customer-part-list::after{content:"";display:block;height:176px;border:1px solid var(--line);border-radius:var(--radius);
 background:
  linear-gradient(100deg,#fff0 30%,#ffffffb3 50%,#fff0 70%) 0 0/250% 100% no-repeat,
  linear-gradient(#e8eef6,#e8eef6) 16px 16px/112px 112px no-repeat,
  linear-gradient(#e8eef6,#e8eef6) 144px 22px/min(42%,320px) 14px no-repeat,
  linear-gradient(#eef2f7,#eef2f7) 144px 46px/min(24%,180px) 10px no-repeat,
  linear-gradient(#eef2f7,#eef2f7) 144px 84px/min(22%,150px) 10px no-repeat,
  linear-gradient(#e8eef6,#e8eef6) 144px 102px/min(18%,120px) 20px no-repeat,
  linear-gradient(#eef2f7,#eef2f7) 144px 144px/min(56%,420px) 12px no-repeat,
  var(--surface)}
/* Prázdny stav „Objednávka je prázdna“ počas prvého nahrávania nahradí kostra. */
[data-calculator-root]:has(.calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
 [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"]))
 .customer-part-list>.panel:has(.empty-state){display:none}

/* Cena, ktorú server ešte počíta: trblietavý podklad pod textom „počítam“, text ostáva čitateľný. */
[data-calculator-root] .calculator-model-price:is([data-price-state="pending"],[data-price-state="analyzing"],[data-price-state="uploaded"]) dd strong{
 display:inline-block;min-width:7em;padding:0 6px;border-radius:6px;background:linear-gradient(100deg,#eef2f7 30%,#dfe8f4 50%,#eef2f7 70%);
 background-size:250% 100%}

@keyframes model-loading-spin{to{transform:rotate(360deg)}}
@keyframes model-loading-band{from{background-position:100% 0}to{background-position:-120% 0}}
@keyframes model-loading-sheen{from{background-position:100% 0}to{background-position:-100% 0}}
/* Kostra má viac vrstiev: animácia posúva iba prvú (lesk), ostatné ostávajú na mieste. */
@keyframes model-loading-skeleton{
 from{background-position:100% 0,16px 16px,144px 22px,144px 46px,144px 84px,144px 102px,144px 144px}
 to{background-position:-100% 0,16px 16px,144px 22px,144px 46px,144px 84px,144px 102px,144px 144px}}
@keyframes model-loading-skeleton-sm{
 from{background-position:100% 0,12px 12px,96px 18px,96px 42px,96px 72px,96px 90px,12px 124px}
 to{background-position:-100% 0,12px 12px,96px 18px,96px 42px,96px 72px,96px 90px,12px 124px}}

@media(max-width:480px){
 [data-calculator-root]:has(.calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
  [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"]))
  .customer-part-list::after{height:150px;background-size:250% 100%,72px 72px,52% 14px,32% 10px,40% 10px,30% 20px,60% 12px;
  background-position:0 0,12px 12px,96px 18px,96px 42px,96px 72px,96px 90px,12px 124px}
}
/* Pohyb iba bez požiadavky na znížený pohyb; selektory sú tie isté ako vyššie. */
@media(prefers-reduced-motion:no-preference){
 [data-calculator-root] .calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
  [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"])
  .calculator-upload-status-line>strong::before{animation:model-loading-spin .8s linear infinite}
 [data-calculator-root] .calculator-upload-status:is([data-upload-phase="uploading"],[data-upload-phase="finalizing"])
  .calculator-upload-progress progress::-webkit-progress-value{animation:model-loading-band 1.4s linear infinite}
 [data-calculator-root] .calculator-upload-status:is([data-upload-phase="uploading"],[data-upload-phase="finalizing"])
  .calculator-upload-progress progress::-moz-progress-bar{animation:model-loading-band 1.4s linear infinite}
 [data-calculator-root]:has(.calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
  [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"]))
  .customer-part-list::after{animation:model-loading-skeleton 1.5s ease-in-out infinite}
 [data-calculator-root] .calculator-model-price:is([data-price-state="pending"],[data-price-state="analyzing"],[data-price-state="uploaded"]) dd strong{
  animation:model-loading-sheen 1.5s ease-in-out infinite}
}
@media(prefers-reduced-motion:no-preference) and (max-width:480px){
 [data-calculator-root]:has(.calculator-upload-status:is([data-upload-phase="queued"],[data-upload-phase="checking"],[data-upload-phase="uploading"],
  [data-upload-phase="finalizing"],[data-upload-phase="analysis-queued"],[data-upload-phase="analysis"],[data-upload-phase="verifying"]))
  .customer-part-list::after{animation-name:model-loading-skeleton-sm}
}