/* ============================================================
   MOTION — signature motion grafika V7
   Vše transform/opacity (CWV-safe), prefers-reduced-motion
   respektováno přes body.motion-ok (přidává motion.js).
   ============================================================ */

/* ---------- Scroll progress lišta ---------- */
.scrollprog{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:300; pointer-events:none;
}
.scrollprog i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-400),var(--gold-500));
  transform:scaleX(0); transform-origin:left;
}

/* ---------- Hero vstup (homepage, hned po loadu) ---------- */
body.motion-home .hero--v5 .container > div:first-child > *{
  opacity:0; transform:translateY(26px);
  animation:heroUp .65s cubic-bezier(.22,1,.36,1) forwards;
}
body.motion-home .hero--v5 .kicker,
body.motion-home .hero--v5 .svjbadge{ animation-delay:.05s; }
body.motion-home .hero--v5 .hero__title{ animation-delay:.14s; }
body.motion-home .hero--v5 .hero__sub{ animation-delay:.26s; }
body.motion-home .hero--v5 .hero__trust{ animation-delay:.38s; }
body.motion-home .hero--v5 .container > div:last-child{
  opacity:0; transform:translateY(30px) scale(.985);
  animation:heroUp .75s cubic-bezier(.22,1,.36,1) .3s forwards;
}
@keyframes heroUp{ to{ opacity:1; transform:none; } }
/* podtržení headline: kreslí se až po vstupu (přepis delay z styles.css) */
body.motion-home .hero__title em svg path{ animation-delay:1s; }

/* ============================================================
   WASHSCENE — mytí domu (homepage)
   Přehraje se JEDNOU sama při dojezdu do viewportu (bez scroll-jackingu,
   bez pinu, bez změny výšky → stránka scrolluje 100% normálně, nikdy neposkočí).
   ============================================================ */
.wsc{
  position:relative; padding-block:clamp(80px,11vh,150px);
  background:linear-gradient(180deg,#fff, var(--blue-50) 55%, var(--blue-50) 100%);
}
.wsc__pin{ display:flex; align-items:center; }
/* .wsc__grid je zároveň .container → NEpřepisovat width, jinak se rozjede přes celou šířku */
.wsc__grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,70px);
  align-items:center;
}
.wsc__copy h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); color:var(--navy-900); margin:10px 0 14px; }
.wsc__copy > p{ color:var(--muted); font-size:1.05rem; max-width:44ch; }
.wsc__chips{ list-style:none; display:grid; gap:12px; margin:26px 0 30px; }
.wsc__chips li{
  display:flex; align-items:center; gap:13px;
  background:#fff; border:1.5px solid var(--line); border-radius:16px;
  padding:12px 16px; box-shadow:var(--shadow-sm);
  opacity:.45; transform:translateX(-6px);
  transition:opacity .45s ease, transform .45s var(--ease), border-color .45s ease, box-shadow .45s ease;
}
.wsc__chips li.is-done{
  opacity:1; transform:none; border-color:rgba(0,184,240,.55);
  box-shadow:0 6px 20px rgba(0,120,190,.14);
}
.wsc__check{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:#C9CFD6; transition:background .45s ease, transform .45s var(--ease);
}
.wsc__check svg{ width:15px; height:15px; }
.wsc__chips li.is-done .wsc__check{ background:linear-gradient(135deg,var(--blue-400),var(--blue-600)); transform:scale(1.08); }
.wsc__chips strong{ display:block; font-family:var(--font-head); font-size:.98rem; color:var(--navy-900); }
.wsc__chips em{ display:block; font-style:normal; font-size:.83rem; color:var(--muted); }
.wsc__stage{ position:relative; }
.wsc__stage svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 26px 48px rgba(0,40,80,.18)); }
.wsc__bar{ opacity:0; transition:opacity .3s ease; will-change:transform; }
.wsc.is-live .wsc__bar{ opacity:1; }
.wsc.is-clean .wsc__bar{ opacity:0; }
.wsc__spark path{
  opacity:0; transform-box:fill-box; transform-origin:center;
  transform:scale(.2);
}
/* jiskry se po vyčištění blýskají trvale */
.wsc__spark.is-on path{ animation:wsSpark 2.6s ease infinite; }
.wsc__spark.is-on g:nth-child(2) path{ animation-delay:1.2s; }
.wsc__spark[data-wsspark="2"].is-on path{ animation-delay:.6s; }
.wsc__spark[data-wsspark="2"].is-on g:nth-child(2) path{ animation-delay:1.8s; }
.wsc__spark[data-wsspark="3"].is-on path{ animation-delay:.9s; }
.wsc__spark[data-wsspark="3"].is-on g:nth-child(2) path{ animation-delay:2.1s; }
@keyframes wsSpark{
  0%{ opacity:0; transform:scale(.2); }
  14%{ opacity:1; transform:scale(1.25); }
  28%{ opacity:1; transform:scale(1); }
  42%{ opacity:0; transform:scale(.5); }
  100%{ opacity:0; transform:scale(.5); }
}
.wsc__hint{ display:none; }
@media(max-width:920px){
  .wsc{ padding-block:44px 40px; }
  /* mobil: nadpis → dům → chipy → CTA */
  .wsc__grid{ display:grid; grid-template-columns:1fr; gap:0; }
  .wsc__copy{ display:contents; }
  .wsc__copy .kicker{ order:0; }
  .wsc__copy h2{ order:1; margin:8px 0 12px; }
  .wsc__copy h2 br{ display:none; }
  .wsc__copy > p{ order:1; margin-bottom:16px; }
  .wsc__stage{ order:2; max-width:360px; margin-inline:auto; width:100%; }
  .wsc__chips{ order:3; gap:8px; margin:20px 0 16px; }
  .wsc__chips li{ padding:9px 13px; }
  .wsc__cta{ order:4; justify-self:center; }
}
@media(prefers-reduced-motion:reduce){
  .wsc__chips li{ opacity:1; transform:none; }
  .wsc__chips .wsc__check{ background:linear-gradient(135deg,var(--blue-400),var(--blue-600)); }
  .wsc__bar{ display:none; }
}

/* ============================================================
   WSMINI — smyčková mycí scéna na podstránkách služeb
   (stejný princip jako SVJ panelák: dirt clip + lišta, sync 14/55)
   ============================================================ */
.wsmini{ max-width:440px; margin-inline:auto; }
.wsmini svg{ display:block; width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.wsmini__dirt{ animation:wsmDirt 7.5s ease-in-out infinite; will-change:clip-path, opacity; }
.wsmini__bar{ opacity:0; animation:wsmBar 7.5s ease-in-out infinite; will-change:transform, opacity; }
@keyframes wsmDirt{
  0%   { clip-path:inset(0 0 0 0) view-box;    opacity:1; }
  14%  { clip-path:inset(0 0 0 0) view-box;    opacity:1; }
  55%  { clip-path:inset(0 0 0 100%) view-box; opacity:1; }
  56%  { clip-path:inset(0 0 0 100%) view-box; opacity:0; }
  60%  { clip-path:inset(0 0 0 0) view-box;    opacity:0; }
  82%  { clip-path:inset(0 0 0 0) view-box;    opacity:0; }
  96%  { clip-path:inset(0 0 0 0) view-box;    opacity:1; }
  100% { clip-path:inset(0 0 0 0) view-box;    opacity:1; }
}
/* Lišta = přesná hrana čištění. Reveal hrana = inset% × 320 (view-box),
   line X = 17,5 (střed lišty) + translateX. 14%→55%: obojí 0→320 → 1:1 sync. */
@keyframes wsmBar{
  0%   { transform:translateX(-17.5px); opacity:0; }
  13.9%{ transform:translateX(-17.5px); opacity:0; }
  14%  { transform:translateX(-17.5px); opacity:1; }
  55%  { transform:translateX(302.5px); opacity:1; }
  56%  { transform:translateX(302.5px); opacity:0; }
  100% { transform:translateX(302.5px); opacity:0; }
}
.wsmini__cap{
  text-align:center; margin-top:12px; font-size:.85rem; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.wsmini__cap svg{ width:15px; height:15px; color:var(--blue-500); flex:0 0 15px; }
@media(prefers-reduced-motion:reduce){
  .wsmini__dirt{ animation:none; clip-path:inset(0 0 0 50%) view-box; }
  .wsmini__bar{ animation:none; opacity:1; transform:translateX(142.5px); }
}

/* ---------- Subhero (podstránky): vstupní stagger ---------- */
body.motion-ok .subhero .container > div:first-child > *,
body.motion-ok .subhero--wide .container > *{
  opacity:0; transform:translateY(22px);
  animation:heroUp .6s cubic-bezier(.22,1,.36,1) forwards;
}
body.motion-ok .subhero .container > * :is(.crumbs){ animation-delay:.05s; }
body.motion-ok .subhero .container > div:first-child > *:nth-child(1),
body.motion-ok .subhero--wide .container > *:nth-child(1){ animation-delay:.08s; }
body.motion-ok .subhero .container > div:first-child > *:nth-child(2),
body.motion-ok .subhero--wide .container > *:nth-child(2){ animation-delay:.16s; }
body.motion-ok .subhero .container > div:first-child > *:nth-child(3),
body.motion-ok .subhero--wide .container > *:nth-child(3){ animation-delay:.26s; }
body.motion-ok .subhero .container > div:first-child > *:nth-child(4),
body.motion-ok .subhero--wide .container > *:nth-child(4){ animation-delay:.36s; }
body.motion-ok .subhero .container > div:first-child > *:nth-child(n+5),
body.motion-ok .subhero--wide .container > *:nth-child(n+5){ animation-delay:.46s; }
body.motion-ok .subhero .container > img,
body.motion-ok .subhero .container > form{
  opacity:0; transform:translateY(26px) scale(.985);
  animation:heroUp .7s cubic-bezier(.22,1,.36,1) .3s forwards;
}
body.motion-ok .subhero .container > img{
  animation:heroUp .7s cubic-bezier(.22,1,.36,1) .3s forwards, kenburns 24s ease-in-out 1s infinite alternate;
}
@media(prefers-reduced-motion:reduce){
  body.motion-ok .subhero .container > div:first-child > *,
  body.motion-ok .subhero--wide .container > *,
  body.motion-ok .subhero .container > img,
  body.motion-ok .subhero .container > form{ opacity:1; transform:none; animation:none; }
}

/* ---------- Ken Burns na hero fotce ---------- */
body.motion-ok .hero__bg img{
  animation:kenburns 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{ transform:scale(1) translate(0,0); }
  to{ transform:scale(1.07) translate(-1.2%,1%); }
}

/* ---------- CTA: lesk přes zlatá tlačítka ---------- */
.btn--gold{ position:relative; overflow:hidden; }
.btn--gold::before{
  content:""; position:absolute; top:-4px; bottom:-4px; left:-70%; width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5) 50%,transparent);
  transform:skewX(-20deg) translateX(0);
  pointer-events:none; opacity:0;
}
body.motion-ok .btn--gold:hover::before{
  opacity:1; animation:btnShine .7s ease forwards;
}
/* velká CTA (formuláře, hero) se periodicky zablýsknou sama */
body.motion-ok .btn--gold.btn--lg::before{
  opacity:1; animation:btnShineLoop 4.6s ease-in-out 2s infinite;
}
@keyframes btnShine{ to{ transform:skewX(-20deg) translateX(420%); } }
@keyframes btnShineLoop{
  0%{ transform:skewX(-20deg) translateX(0); }
  18%{ transform:skewX(-20deg) translateX(420%); }
  100%{ transform:skewX(-20deg) translateX(420%); }
}

/* ---------- Plovoucí „kapky“ v tmavých sekcích ---------- */
body.motion-ok .gallery{ overflow:hidden; }
body.motion-ok .gallery::before{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  top:6%; left:3%; pointer-events:none;
  background:radial-gradient(circle,rgba(0,184,240,.13),transparent 68%);
  animation:floaty 12s ease-in-out infinite alternate;
}
@keyframes floaty{
  from{ transform:translate(0,0); }
  to{ transform:translate(34px,-42px); }
}
body.motion-ok .final::before{ animation:floaty 13s ease-in-out infinite alternate; }
body.motion-ok .final::after{ animation:floaty 16s ease-in-out infinite alternate-reverse; }

/* ---------- BA slider: jemný glow na handle, ať zve k tahu ---------- */
body.motion-ok .ba:not(.ba--touched) .ba__handle::after{
  animation:handlePulse 2.6s ease-in-out 1.2s infinite;
}
@keyframes handlePulse{
  0%,100%{ box-shadow:0 4px 14px rgba(0,0,0,.35); }
  50%{ box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 9px rgba(0,184,240,.25); }
}

/* ---------- Reduced motion: vše zhasnout ---------- */
@media(prefers-reduced-motion:reduce){
  .scrollprog{ display:none; }
  body.motion-home .hero--v5 .container > div:first-child > *,
  body.motion-home .hero--v5 .container > div:last-child{ opacity:1; transform:none; animation:none; }
  body.motion-ok .hero__bg img,
  .btn--gold::before,
  body.motion-ok .gallery::before,
  body.motion-ok .final::before,
  body.motion-ok .final::after,
  body.motion-ok .ba .ba__handle::after{ animation:none !important; }
}