/* ==========================================================================
   Nálet přetáčením videa — stejná mechanika jako mercury.com.
   Video se nepřehrává; scroll mu nastavuje currentTime. Proto se v záběru
   mění perspektiva, což žádný CSS zoom neumí.
   ========================================================================== */
.scrub{ position:relative; background:var(--ink); }
.scrub__stage{
  --p:0;            /* postup náletu 0–1 */
  --live:0;         /* prolnutí živé kalkulačky na konci 0–1 */
  position:sticky; top:76px; height:calc(100vh - 76px); overflow:hidden;
}

/* film */
.scrub__vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:var(--ink);
}
/* ztmavení pro čitelnost titulku — s náletem mizí, ať vynikne obraz */
.scrub__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,14,17,.16) 0%, rgba(12,14,17,.04) 46%, rgba(12,14,17,.20) 100%);
  opacity:calc(1 - var(--p) * .55);
}
/* zúžení pohledu — okraje temní, jak kamera nalétá */
.scrub__vig{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse 78% 70% at 50% 48%, rgba(0,0,0,0) 42%, rgba(0,0,0,.45) 100%);
  opacity:calc(var(--p) * .8);
}

/* titulek — odplouvá v první třetině náletu */
.scrub__intro{
  position:absolute; z-index:3; inset:auto 0 auto 0; top:12%;
  text-align:center; padding-inline:var(--pad);
  opacity:calc(1 - var(--p) * 6.5);          /* pryč už v šestině náletu */
  transform:translateY(calc(var(--p) * -150px));
  filter:blur(calc(var(--p) * 6px));
  pointer-events:none;
}
.scrub__intro h1{ color:#fff; margin:0 auto; max-width:15ch; text-wrap:balance;
  text-shadow:0 2px 40px rgba(12,14,17,.5); }
/* tři údaje, které rozhodují: komu to je, co k tomu není potřeba a za kolik */
.scrub__fakta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
  margin:26px auto 0; max-width:56ch;
}
.scrub__fakta span{
  font-size:15px; font-weight:500; color:#EDEDF3; letter-spacing:-.002em;
  background:rgba(18,18,26,.55); border:1px solid rgba(237,237,243,.18);
  border-radius:999px; padding:9px 18px; backdrop-filter:blur(6px);
}

.pocitadlo__box .scr{ height:100%; }

/* Uvnitř displeje nesmí plavat karta se stínem — obsah je obrazovka, ne nálepka.
   Kalkulačka proto odkládá pozadí, rámeček i stín a rozlévá se přes celou plochu. */
.pocitadlo__box .scr__body{ padding:30px 40px 34px; align-items:stretch; }
.pocitadlo__box .calc{
  background:transparent; box-shadow:none; border-radius:0; padding:0;
  width:100%; max-width:none; height:100%; align-content:space-between;
}
.pocitadlo__box .calc__head{ margin-bottom:26px; }
.pocitadlo__box .calc__head h2{ font-size:26px; }
.pocitadlo__box .calc__out{ border-left:1px solid var(--line); }

/* sklo displeje — odlesk a mírné ztmavení k okrajům, aby obsah patřil do fotky */
.pocitadlo__box .scr__bar{ height:44px; background:#101216; }
.pocitadlo__box .scr__bar img{ height:21px; }
.pocitadlo__box .scr__type{ font-size:14px; }

/* rovnoměrný svit plochy — bez něj čte oko obsah jako list papíru nalepený na víko */
/* Návrhová plocha displeje: pevných 1000×667 (poměr 3:2 jako výřez ve videu).
   JS ji zvětší přesně na velikost displeje v záběru — bez pevných rozměrů
   by se scale počítal z rozlitého divu a obsah by na displeji plaval. */

/* pobídka ke scrollu — jen na začátku */
.scrub__hint{
  position:absolute; z-index:3; left:50%; bottom:26px; translate:-50% 0;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:#C9C5BE; opacity:calc(1 - var(--p) * 5); pointer-events:none;
  display:flex; align-items:center; gap:9px;
}
.scrub__hint::after{
  content:""; width:1px; height:22px; background:linear-gradient(#C9C5BE, transparent);
}

/* bez animace a na mobilu — poslední záběr staticky, kalkulačka pod ním */
@media (prefers-reduced-motion:reduce){
  .scrub{ height:auto !important; }
  .scrub__stage{ position:static; height:auto; }
  .scrub__vid{ position:relative; height:52vh; }
  .scrub__veil,.scrub__vig,.scrub__hint{ display:none; }
  .scrub__intro{ position:static; opacity:1; transform:none; padding:34px var(--pad) 0; }
  .pocitadlo__box .scr__bar{ display:none; }
    .pocitadlo__box .calc{ width:100%; max-width:430px; margin:0 auto; display:block; }
  .pocitadlo__box .calc__out{ border-left:0; padding-left:0; margin-top:26px; padding-top:22px;
    border-top:1px solid var(--line); }
}


/* ==========================================================================
   Obsah displeje v tmavém — klíč k tomu, aby obraz patřil do notebooku.
   Světlá plocha na tmavém displeji vždycky čte jako nalepený papír; tmavé
   rozhraní s displejem splyne, přesně jako dashboard na mercury.com.
   Platí jen uvnitř .pocitadlo__box, zbytek webu zůstává světlý.
   ========================================================================== */
.pocitadlo__box{
  --d-bg:      #0D0F12;   /* plocha displeje */
  --d-panel:   #16191F;   /* panely a vyvýšené plochy */
  --d-line:    #262B33;   /* linky */
  --d-text:    #EDEAE4;   /* hlavní text */
  --d-mute:    #8C939F;   /* popisky */
  --d-accent:  #E4FDC1;   /* akcent na tmavém */
}
.pocitadlo__box .scr{ background:var(--d-bg); }
.pocitadlo__box .scr__bar{ background:#0A0C0F; border-bottom:1px solid var(--d-line); }

.pocitadlo__box .calc__head h2{ color:var(--d-text); }
.pocitadlo__box .calc__head .muted{ color:var(--d-mute); }

.pocitadlo__box .calc__tabs{ background:var(--d-panel); }
.pocitadlo__box .calc__tab{ color:var(--d-mute); }
.pocitadlo__box .calc__tab[aria-selected="true"]{ background:#2B313A; color:#fff; }

.pocitadlo__box .field__lbl{ color:var(--d-mute); }
.pocitadlo__box .field__val{ color:var(--d-text); }
.pocitadlo__box .field__scale{ color:#8C939F; }
.pocitadlo__box input[type=range]{ background:#2A2F38; }
.pocitadlo__box input[type=range]::-webkit-slider-thumb{ border-color:#0D0F12; }
.pocitadlo__box input[type=range]::-moz-range-thumb{ border-color:#0D0F12; }

.pocitadlo__box .calc__out{ border-left-color:var(--d-line); }
.pocitadlo__box .calc__pay small{ color:var(--d-mute); }
.pocitadlo__box .calc__pay b{ color:#fff; }
.pocitadlo__box .calc__meta{ color:var(--d-mute); }
.pocitadlo__box .calc__meta b{ color:var(--d-text); }
.pocitadlo__box .calc__note{ color:#8C939F; }

/* na tmavém podkladu musí být hlavní akce oranžová, tmavé tlačítko by zmizelo */
.pocitadlo__box .btn--dark{ background:var(--limet); color:#0D0F12; }
/* přebíjí obecné pravidlo pro světlou kalkulačku — tady je tlačítko oranžové */
.pocitadlo__box .calc .btn--dark.btn--stack small{ color:#0D0F12; opacity:.72; }

/* ==========================================================================
   Sekce s živou kalkulačkou — navazuje na nálet.
   V heru je obsah displeje vypálený přímo do videa, takže tam není co
   překrývat a nic nemůže odskočit. Počítá se tady, kde nic neběží.
   ========================================================================== */
.pocitadlo{
  background:#0D0F12; color:#EDEAE4;
  padding-block:clamp(56px,7vw,104px);
  border-top:1px solid #1B1F26;
}
/* Nadpis nad kalkulačku, ne vedle ní: ve dvou sloupcích vedle sebe zbylo
   na čísla tak málo místa, že se lámalo „800 000 / Kč“. */
.pocitadlo__in{ display:block; }
.pocitadlo__hd{ max-width:52ch; margin-bottom:clamp(28px,3.4vw,48px); }
.pocitadlo__hd h2{ color:#fff; margin-bottom:18px; }
.pocitadlo__hd .lede{ color:#9AA1AC; }
.pocitadlo__hd .eyebrow{ color:var(--limet); }
.pocitadlo__box{
  background:#12151A; border:1px solid #232830; border-radius:10px;
  padding:clamp(24px,2.6vw,38px);
}
.pocitadlo__box .calc{
  background:transparent; box-shadow:none; border-radius:0; padding:0;
  width:100%; max-width:none;
  display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,2.6vw,40px);
}
.pocitadlo__box .calc__head{ grid-column:1 / -1; margin-bottom:30px; }
.pocitadlo__box .calc__head h2{ font-size:clamp(21px,2vw,27px); }
.pocitadlo__box .field__val{ white-space:nowrap; }
.pocitadlo__box .calc__pay b{ white-space:nowrap; }
.pocitadlo__box .calc__pay{ align-items:baseline; }
.pocitadlo__box .calc__tab{ white-space:nowrap; }
.pocitadlo__box .btn--stack b{ white-space:nowrap; }
.pocitadlo__box .calc__out{
  grid-column:2; grid-row:2 / span 4; align-self:start;
  margin-top:0; padding-top:0; border-top:0;
  border-left:1px solid var(--d-line); padding-left:clamp(24px,2.6vw,40px);
}
.pocitadlo__box .field:last-of-type{ margin-bottom:0; }
@media (max-width:980px){
  .pocitadlo__in{ grid-template-columns:1fr; }
  .pocitadlo__box .calc{ grid-template-columns:1fr; }
  .pocitadlo__box .calc__out{
    grid-column:1; grid-row:auto; border-left:0; padding-left:0;
    margin-top:26px; padding-top:22px; border-top:1px solid var(--d-line);
  }
}

/* mobil a bez animací: místo náletu poslední záběr, počítá se v sekci pod ním */
/* Nálet běží i na telefonu; statický záběr zůstává jen při omezení pohybu. */
@media (prefers-reduced-motion:reduce){
  .scrub{ height:auto !important; }
  .scrub__stage{ position:static; height:auto; }
  .scrub__vid{ position:relative; height:52vh; filter:none; transform:none; opacity:1; }
  .scrub__veil,.scrub__vig{ display:none; }
  .scrub__panel{ position:static; width:auto; height:auto; opacity:1;
    transform:none !important; border-radius:0; border:0; box-shadow:none; }
}



/* ==========================================================================
   Druhá fáze náletu: obsah vystoupí z notebooku
   Mercury nechá dashboard vyjet z displeje a pokračovat jako samostatná plocha.
   Panel má pevné rozměry a JS ho promítá homografií — z výřezu displeje
   až na obdélník přes celou scénu.
   ========================================================================== */
.scrub__panel{
  position:absolute; left:0; top:0; width:1128px; height:742px;
  /* ve finále vyplní celou plochu, proto rám i zaoblení mizí */
  transform-origin:0 0; will-change:transform; backface-visibility:hidden;
  z-index:5; overflow:hidden; border-radius:10px;
  background:#0E1014; border:1px solid #262B35;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  opacity:calc(var(--p2, 0) * 14);
}
.scrub__panel-in{ padding:44px 52px 48px; height:100%; display:flex; flex-direction:column; }
.scrub__panel-hd{ margin-bottom:30px; }
.scrub__panel-hd h2{
  font-size:34px; letter-spacing:-.014em; line-height:1.15; color:#fff; margin:0;
}
.scrub__panel .calc{
  background:transparent; box-shadow:none; border:0; border-radius:0; padding:0;
  width:100%; max-width:none; flex:1;
  display:grid; grid-template-columns:1fr 1fr; column-gap:52px; align-content:start;
}
.scrub__panel .calc__head{ display:none; }
.scrub__panel .calc__out{
  grid-column:2; grid-row:2 / span 4; align-self:start;
  margin-top:0; padding-top:0; border-top:0;
  border-left:1px solid #262B35; padding-left:52px;
}
.scrub__panel .field:last-of-type{ margin-bottom:0; }
/* tmavé rozhraní uvnitř panelu */
.scrub__panel .calc__head h2,.scrub__panel .calc__pay b,
.scrub__panel .field__val,.scrub__panel .calc__meta b{ color:#EDEDF3; }
.scrub__panel .calc__head .muted,.scrub__panel .calc__pay small,
.scrub__panel .field__lbl,.scrub__panel .calc__meta,
.scrub__panel .calc__note{ color:#9096A3; }
.scrub__panel .field__scale{ color:#8B91A0; }
.scrub__panel .calc__tabs{ background:#191C23; }
.scrub__panel .calc__tab{ color:#9096A3; }
.scrub__panel .calc__tab[aria-selected="true"]{ background:#313644; color:#fff; }
.scrub__panel input[type=range]{ background:#333846; }
.scrub__panel input[type=range]::-webkit-slider-thumb{ border-color:#0E1014; }
.scrub__panel input[type=range]::-moz-range-thumb{ border-color:#0E1014; }
.scrub__panel .btn--dark{ background:var(--limet); color:#0D0F12; }
.scrub__panel .calc .btn--dark.btn--stack small{ color:#0D0F12; opacity:.72; }

/* jak panel vystupuje, scéna za ním ustupuje */
.scrub__vid{
  opacity:calc(1 - var(--p2, 0) * .9);
  filter:blur(calc(var(--p2, 0) * 26px)) brightness(calc(1 - var(--p2, 0) * .55));
  transform:scale(calc(1 + var(--p2, 0) * .12));
}
.scrub__veil{ opacity:calc((1 - var(--p) * .55) + var(--p2, 0) * .6); }

@media (prefers-reduced-motion:reduce){
  .scrub__panel{
    position:static; width:auto; height:auto; opacity:1; transform:none !important;
    border-radius:0; border:0; box-shadow:none; background:#0E1014;
  }
  .scrub__panel-in{ padding:34px var(--pad) 40px; }
  .scrub__panel .calc{ grid-template-columns:1fr; }
  .scrub__panel .calc__out{ grid-column:1; grid-row:auto; border-left:0; padding-left:0;
    margin-top:26px; padding-top:22px; border-top:1px solid #262B35; }
  .scrub__vid{ opacity:1; }
}


/* Obsah je vidět od začátku rozvinutí — mercury nikde neukazuje prázdnou desku.
   Náběh řeší krytí celého panelu, ne jeho obsah. */
.scrub__panel-hd,
.scrub__panel .calc{
  opacity:calc(var(--p2, 0) * 3.5);
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  .scrub__panel-hd,.scrub__panel .calc{ opacity:1 !important; transform:none !important; }
}


/* --- telefon: kalkulačka v obrazovce musí zůstat ovladatelná palcem --- */
@media (max-width:900px){
  /* Film je 16:9, telefon na výšku. Přes celou scénu by cover mac oříznul
     po stranách, proto video sedí jako pás uprostřed tmavé plochy. */
  .scrub__vid{ inset:17% 0 auto 0; height:64%; }
  .scrub__veil,.scrub__vig{ inset:17% 0 auto 0; height:64%; }
  .scrub__intro{ top:6%; }
  .scrub__intro h1{ font-size:30px; }
  .scrub__fakta{ margin-top:18px; gap:8px; }
  .scrub__fakta span{ font-size:13px; padding:7px 13px; }

  .scrub__panel{ width:auto; height:auto; }   /* rozměr dodá skript podle displeje */
  .scrub__panel-in{ padding:18px 16px 20px; overflow-y:auto;
    display:flex; flex-direction:column; }
  .scrub__panel-hd{ margin-bottom:16px; }
  .scrub__panel-hd h2{ font-size:22px; }
  .scrub__panel-hd .eyebrow{ font-size:12px; margin-bottom:8px; }
  /* Obsah vyplní rám a volné místo se rozdělí mezi bloky — jinak se všechno
     natlačí nahoru a pod tlačítkem zbude prázdná plocha. */
  .scrub__panel .calc{ grid-template-columns:1fr; column-gap:0;
    flex:1 1 auto; align-content:space-between; }
  .scrub__panel .calc__out{
    grid-column:1; grid-row:auto; border-left:0; padding-left:0;
    margin-top:18px; padding-top:16px; border-top:1px solid #262B35;
  }
  .scrub__panel .field{ margin-bottom:16px; }
  .scrub__panel .calc__pay b{ font-size:34px; }
  .scrub__panel .calc__note{ display:none; }
  .scrub__panel .calc__tab{ font-size:13px; padding:11px 4px; }
  /* Splátka je hlavní údaj panelu — musí být vidět bez posouvání uvnitř rámu,
     proto volba typu leží vedle sebe a krajní hodnoty posuvníků odpadají. */
  .scrub__panel .calc__tabs{ grid-template-columns:1fr 1fr; gap:5px; }
  .scrub__panel .field__scale{ display:none; }
  .scrub__panel .field{ margin-bottom:11px; }
  .scrub__panel .field__hd{ margin-bottom:4px; }
  /* Spodní blok musí dýchat stejně jako pole nad ním — jinak splátka, rozpis
     a tlačítko splynou v jeden slepenec. */
  .scrub__panel .calc__out{ margin-top:18px; padding-top:20px; }
  .scrub__panel .calc__pay{ margin-bottom:20px; }
  .scrub__panel .calc__pay b{ font-size:31px; line-height:1.05; }
  .scrub__panel .calc__meta{ margin-top:0; margin-bottom:32px; font-size:12.5px; gap:8px 18px; }
  .scrub__panel .btn--stack{ padding:14px 16px; }
}


/* Střední telefony (kolem 844 px): velkorysé rozestupy spodního bloku se sem
   ještě nevejdou celé, ubíráme jim pár pixelů — pořadí ostatních mezer zůstává. */
@media (max-width:900px) and (max-height:880px){
  .scrub__panel .calc__out{ margin-top:12px; padding-top:14px; }
  .scrub__panel .calc__pay{ margin-bottom:12px; }
  .scrub__panel .calc__meta{ margin-bottom:18px; }
}

/* Nízký telefon (iPhone SE a spol.): plocha nestačí na hlavičku i rozpis,
   proto zůstává jen samotný výpočet — otázku už položil nadpis nad sekcí. */
@media (max-width:900px) and (max-height:760px){
  .scrub__panel-hd{ display:none; }
  .scrub__panel-in{ padding:14px 14px 16px; }
  .scrub__panel .calc__meta{ margin-bottom:14px; }
  .scrub__panel .calc__out{ margin-top:12px; padding-top:12px; }
  .scrub__panel .btn--stack small{ display:none; }
  .scrub__panel .btn--stack{ padding:13px 16px; }
  .scrub__panel .calc__pay b{ font-size:29px; }
}

/* Nejnižší telefony (SE, 667 px) — poslední zhuštění, aby tlačítko zůstalo v rámu.
   Posuvník si drží 38 px dotykové výšky, pod to už se palcem míří špatně. */
@media (max-width:900px) and (max-height:700px){
  .scrub__panel input[type=range]{ height:38px; }
  .scrub__panel .field{ margin-bottom:7px; }
  .scrub__panel .field__hd{ margin-bottom:2px; }
  .scrub__panel-in{ padding:10px 12px 12px; }
  .scrub__panel .calc__pay b{ font-size:26px; }
  .scrub__panel .calc__tab{ padding:9px 4px; font-size:12.5px; }
  .scrub__panel .btn--stack{ padding:11px 14px; font-size:14px; }
  .scrub__panel .calc__out{ margin-top:8px; padding-top:8px; }
  .scrub__panel .calc__pay{ margin-bottom:8px; }
  .scrub__panel .calc__meta{ display:none; }   /* na 667 px se rozpis nevejde */
}