/* ===== Livi Essence — pohyb ===== */

/* clona pri vstupe a odchode */
html.js body::before{
  content:'';position:fixed;inset:0;z-index:9999;background:var(--ivory);
  pointer-events:none;opacity:1;transition:opacity .7s cubic-bezier(.22,.61,.36,1);
}
html.js.loaded body::before{opacity:0}
html.js.leaving body::before{opacity:1;transition-duration:.42s}

/* riadkové masky */
.split .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.split .ln i{
  display:block;font-style:inherit;
  transform:translate3d(0,112%,0);
  transition:transform 1.15s cubic-bezier(.19,1,.22,1);
}
.split.in .ln i{transform:none}

/* jemný nábeh blokov */
.rv{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

/* stagger deti */
.stagger>*{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.stagger.in>*{opacity:1;transform:none}

/* obrazová clona — zotretie zdola nahor + doje­dnanie mierky */
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.35s cubic-bezier(.19,1,.22,1)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
.reveal-img img{transform:scale(1.14);transition:transform 1.9s cubic-bezier(.19,1,.22,1)}
.reveal-img.in img{transform:scale(1)}

/* eyebrow — tracking sa usadí */
.eyebrow{transition:letter-spacing 1.4s cubic-bezier(.19,1,.22,1),opacity 1s ease}
.rv .eyebrow,.rv.eyebrow{letter-spacing:.62em;opacity:0}
.rv.in .eyebrow,.rv.in.eyebrow{letter-spacing:.36em;opacity:1}

/* hero */
.hero>picture>img,.hero>img{
  transform:scale(1.1);opacity:.55;
  transition:transform 2.4s cubic-bezier(.19,1,.22,1),opacity 1.6s ease;
}
.hero.in>picture>img,.hero.in>img{transform:scale(1);opacity:1}
.hero .scrim{opacity:0;transition:opacity 1.6s ease .3s}
.hero.in .scrim{opacity:1}

/* parallax vrstvy */
[data-parallax]{overflow:hidden}
[data-parallax] img{will-change:transform}

/* hlavička */
.hdr{transition:transform .55s cubic-bezier(.22,.61,.36,1),background .5s ease,border-color .5s ease}
.hdr{background:rgba(250,246,240,0);border-bottom-color:transparent}
.hdr.solid{background:rgba(250,246,240,.94);border-bottom-color:var(--line)}
.hdr.up{transform:translateY(-100%)}

/* linky v navigácii — podčiarknutie zdola, bez text-decoration */
.nav a{position:relative;padding-bottom:3px}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.19,1,.22,1);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* tlačidlo — plnenie zdola */
.btn{position:relative;overflow:hidden;z-index:0}
.btn>span{position:relative;z-index:2}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;background:var(--ink);
  transform:translateY(101%);transition:transform .6s cubic-bezier(.19,1,.22,1);
}
.btn:hover::before{transform:translateY(0)}
.btn.ghost::before{background:var(--plum)}
.btn.light::before{background:var(--paper)}
.btn.onphoto::before{background:#FAF6F0}

/* obrázok pri hoveri v mriežke */
.ph{overflow:hidden}
.ph img{transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.g3 .ph:hover img{transform:scale(1.045)}

/* riadky programu */
.tl .r{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.tl.in .r{opacity:1;transform:none}

/* tichý celoplošný pás */
.breathe{position:relative;overflow:hidden}
.breathe .cap{
  position:absolute;left:0;right:0;bottom:0;padding:0 56px 56px;
  color:#FAF6F0;z-index:2;
}
.breathe::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(43,36,41,.5),rgba(43,36,41,0) 55%);
}

html.no-motion .split .ln i,
html.no-motion .rv,
html.no-motion .stagger>*,
html.no-motion .tl .r{transform:none!important;opacity:1!important}
html.no-motion .reveal-img{clip-path:none!important}
html.no-motion .reveal-img img,
html.no-motion .hero>picture>img,
html.no-motion .hero>img{transform:none!important;opacity:1!important}
html.no-motion body::before{display:none}
html.no-motion .hero .scrim{opacity:1}

@media (max-width:820px){
  .breathe .cap{padding:0 26px 32px}
}