/* Ruch: kurtyna z logo, przejścia stron, odsłanianie zdjęć i nagłówków, paralaksa, kursor. Wspólne dla V1–V3. */
:root{--e:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.76,0,.24,1); --m-cur:#14161f; --m-logo:#efe3c8}
[data-v="1"]{--m-cur:#0c0d1b; --m-logo:#d6c29b}
[data-v="2"]{--m-cur:#4a0f1b; --m-logo:#efe1cf}
[data-v="3"]{--m-cur:#082a20; --m-logo:#d2b47e}

/* Kurtyna (na <html>, żeby przykrywała stronę zanim załaduje się JS) */
html.m-on::before{content:"";position:fixed;inset:0;z-index:9998;background:var(--m-cur);transform:translateY(101%);pointer-events:none}
html.m-on::after{content:"";position:fixed;left:50%;top:50%;z-index:9999;width:min(46vw,300px);aspect-ratio:2966/1091;translate:-50% -50%;background:var(--m-logo);
  -webkit-mask:url(../img/logo.svg) center/contain no-repeat;mask:url(../img/logo.svg) center/contain no-repeat;opacity:0;pointer-events:none}
html.m-intro::before,html.m-enter::before{transform:none}
html.m-intro::after{animation:mLogo 1.25s var(--e) .1s both}
@keyframes mLogo{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(12px)}to{opacity:1;clip-path:inset(0);transform:none}}
html.m-out::before{transform:translateY(-101%);transition:transform 1s var(--e2)}
html.m-out::after{opacity:0;transform:translateY(-40px);transition:opacity .45s,transform .9s var(--e2);animation:none}
html.m-reset::before{transform:translateY(101%);transition:none}
html.m-leave::before{transform:none;transition:transform .55s var(--e2)}
html.m-leave::after{opacity:0;animation:none}

/* Słowa nagłówków wjeżdżają spod maski */
m-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .04em .12em;margin:-.16em -.04em -.12em}
m-w>i{display:inline-block;font-style:inherit;will-change:transform}
.m-split:not(.m-in) m-w>i{transform:translateY(135%)}
.m-split.m-in m-w>i{animation:mUp 1.15s var(--e) calc(var(--d0,0s) + var(--i,0)*.065s) backwards}
@keyframes mUp{from{transform:translateY(135%)}}

/* Tekst i przyciski hero */
.m-f:not(.m-in){opacity:0}
.m-f.m-in{animation:mFade 1.1s var(--e) var(--d0,0s) backwards}
@keyframes mFade{from{opacity:0;transform:translateY(22px)}}

/* Zdjęcia: odsłonięcie od dołu + lekki zoom */
.m-r:not(.m-in){clip-path:inset(100% 0 0 0)}
.m-r.m-in{animation:mClip 1.5s var(--e2) var(--d0,0s) backwards}
@keyframes mClip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.m-r.m-in .m-z,.m-r.m-in.m-z{animation:mZoom 2.2s var(--e) var(--d0,0s) backwards}
@keyframes mZoom{from{scale:1.18}}

/* Paralaksa (osobna właściwość translate, nie gryzie się z hover/transform) */
.m-par{translate:0 var(--py,0px);scale:1.12;will-change:translate}

/* Nagłówek chowa się przy przewijaniu w dół */
.m-on .hd{transition:background .4s,color .4s,padding .4s,box-shadow .4s,transform .7s var(--e)}
.m-on .hd.m-hide{transform:translateY(-102%)}

/* Kursor-pierścień (tylko mysz) */
.m-ring{position:fixed;left:0;top:0;z-index:9000;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;
  display:grid;place-items:center;transition:width .45s var(--e),height .45s var(--e),margin .45s var(--e),background .45s,opacity .3s;opacity:0}
.m-ring.on{opacity:1}
.m-ring.big{width:92px;height:92px;margin:-46px 0 0 -46px;background:#fff}
.m-ring span{font:500 .72rem/1 system-ui,sans-serif;letter-spacing:.06em;color:#000;opacity:0;transition:opacity .25s}
.m-ring.big span{opacity:1}
.m-ring.link{width:58px;height:58px;margin:-29px 0 0 -29px}

@media (prefers-reduced-motion:reduce){
  html.m-on::before,html.m-on::after{display:none}
  .m-split m-w>i,.m-f,.m-r{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
  .m-ring{display:none}
}

/* Zdjęcia z zaokrąglonymi rogami jak na stronie Barvinok (24 px), żeby nie wyglądały na wklejone prostokąty */
:root{--rad:22px}
@media (max-width:860px){:root{--rad:16px}}
main img,.lb img{border-radius:var(--rad)}
main figure,.sx-ph,.fr,.ix-th,.ix-float img,.g-i button,.g-i a{border-radius:var(--rad)}