/* Duo Studio MAX (větev max, J 20. 10. 2026): teplé barvy místo bílé a efekty navíc.
   Z: „na max s efektama s padajícíma a se vším všudy … aby to pořád bylo přehledně a zároveň nádherné“.
   Barvy z fotek salonu: krémová, latte a pudrová, mocha místo černé, terakota jako jediný akcent. */
:root{--bg:#f7efe7;--paper:#f0ddd1;--card:#fffaf6;--ink:#2e211c;--ink-2:#4a362d;--muted:#725d52;--line:#e6d3c5;--wood:#b8654c;
  --hover:#e9cfc0;--deep:#3a2621;--glass:247,239,231;--cream:#f7efe7}
::selection{background:#f0c9b8;color:var(--ink)}
.hero-small{border-color:var(--card)}

/* průběh čtení */
.progress{position:fixed;left:0;top:0;right:0;z-index:80;height:3px;background:var(--wood);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* úvod: měkké barevné skvrny za textem, pomalu plují */
.hero{position:relative;isolation:isolate;overflow-x:clip}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.75;pointer-events:none}
.hero::before{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,#f2c9b6,transparent 68%)}
.hero::after{width:620px;height:620px;right:-180px;bottom:-220px;background:radial-gradient(circle,#e6d3bd,transparent 66%)}

/* úvod: písmena nadpisu spadnou shora a dopadnou s odrazem */
.hero h1 .ln{overflow:visible}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block}

/* čísla salonu */
.stats{padding:72px 0 8px}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stat{border-top:1px solid var(--line);padding-top:18px}
.stat b{display:block;font-size:clamp(46px,6vw,84px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat b::after{content:"";display:inline-block;width:.16em;height:.16em;margin-left:.08em;border-radius:50%;background:var(--wood);vertical-align:.12em}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:15px;max-width:220px}

/* fotky prací: náklon za kurzorem a odlesk */
.grid{perspective:900px}
.grid a .glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy2,50%),rgba(255,255,255,.38),transparent 55%)}
.grid a:hover .glare{opacity:1}
.grid a{position:relative}

/* patička: padající služby, barvy vlasů, nůžky a hřebeny */
.foot{background:var(--deep);color:#e7d8cc;border-top:0;padding-top:0}
.foot strong{color:var(--cream)}
.foot a{color:#e7d8cc}
.ft-play{position:relative;overflow:hidden;height:clamp(300px,42vw,520px);margin-bottom:28px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ft-play.is-over{cursor:grab}.ft-play.is-link{cursor:pointer}.ft-play.is-grab{cursor:grabbing}
.ft-cv{position:absolute;inset:0;width:100%;height:100%}
.ft-word{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:min(18vw,260px);font-weight:500;letter-spacing:-.05em;line-height:.8;color:var(--cream);white-space:nowrap}
.ft-word.is-drawn{visibility:hidden}
html:not(.js) .ft-hint{display:none}
.ft-hint{position:absolute;left:0;right:0;top:clamp(86px,9vw,120px);z-index:2;margin:0;text-align:center;font-size:14px;color:#c9b3a5;pointer-events:none}

/* oslava po odeslané rezervaci */
.fete{position:fixed;inset:0;z-index:95;pointer-events:none;width:100%;height:100%}

@media (max-width:900px){
  .stats-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .stats{padding-top:56px}
  .ft-play{height:340px}
}

@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:drift1 18s ease-in-out infinite alternate}
  .hero::after{animation:drift2 22s ease-in-out infinite alternate}
  /* the heading waits for max.js to split it; if the script never comes, it shows anyway */
  .js .hero h1:not(.split){opacity:0;animation:show 0s 2.5s forwards}
  .js .hero h1 .ln>span{animation:none}
  .js .hero h1 .ch{animation:fall 1.25s cubic-bezier(.3,0,.3,1) calc(var(--hd,0s) + var(--d,0s)) both}
  .js .grid a.rv{transition:clip-path 1.3s var(--ease) var(--rd,0s),transform .6s var(--ease)}
  .mq-track span{transform:skewX(var(--sk,0deg))}
  .btn.mag{transition:background-color .35s,color .35s,box-shadow .5s var(--ease),transform .5s var(--ease),translate .6s var(--ease)}
}
@keyframes show{to{opacity:1}}
@keyframes fall{
  0%{transform:translateY(-110vh) rotate(var(--r,0deg));opacity:0}
  8%{opacity:1}
  58%{transform:translateY(0) rotate(0)}
  70%{transform:translateY(-.22em) rotate(calc(var(--r,0deg) * -.12))}
  82%{transform:translateY(0) rotate(0)}
  91%{transform:translateY(-.06em)}
  100%{transform:none;opacity:1}
}
@keyframes drift1{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-140px,-60px) scale(.9)}}