/* =========================================================
   SITE.CSS – elegancki, minimalistyczny, czysty CSS (bez Tailwinda)
   Kolory marki: sekcja TOKENS (--a1, --a2, --a3)
   ========================================================= */
@layer reset, tokens, base, layout, components, blocks, motion;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body,h1,h2,h3,p,figure,ul,blockquote{margin:0}
  img,video,canvas{max-width:100%;display:block}
  ul{padding:0;list-style:none}
  button{font:inherit;color:inherit}
}

@layer tokens {
  @property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
  :root{
    color-scheme:light dark;
    --bg:light-dark(#faf8f4,#0b0a09);
    --fg:light-dark(#17140f,#f4efe6);
    --muted:light-dark(#6f685d,#a39b8c);
    --surface:light-dark(rgb(255 255 255/.7),rgb(28 25 21/.6));
    --line:light-dark(#e7e0d3,#2a2620);
    --a1:#c4a373;   /* złoto szampańskie */
    --a2:#e9cdbd;   /* róż pudrowy */
    --a3:#8c6a3f;   /* brąz */
    --grad:linear-gradient(120deg,#d8bb8a,#f1dcc8 50%,#c29a68);
    --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-display:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;
    --w:1040px;--w-wide:1240px;--r:20px;
    --ease:cubic-bezier(.2,.8,.2,1);
  }
}

@layer base {
  body{background:var(--bg);color:var(--fg);font:400 1.0625rem/1.75 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
  body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.05;text-wrap:balance}
  h1{font-size:clamp(3rem,8vw,6.5rem)}
  h2{font-size:clamp(2.1rem,4.6vw,3.5rem)}
  h3{font-size:1.7rem;line-height:1.15}
  p{text-wrap:pretty}
  a{color:inherit;text-decoration-thickness:.07em;text-underline-offset:.22em}
  ::selection{background:var(--a1);color:#fff}
  :focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:6px}
  .skip{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--fg);color:var(--bg);padding:.6rem 1rem;border-radius:10px}
  .skip:focus{top:1rem}
}

@layer layout {
  .container{width:min(100% - 2.5rem,var(--w));margin-inline:auto}
  .container--wide{width:min(100% - 2.5rem,var(--w-wide))}
  .block{margin-block:0 clamp(5rem,10vw,9rem)}
  .page{padding-bottom:1rem}

  .site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1rem clamp(1.25rem,4vw,3rem);
    background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);transition:transform .5s var(--ease)}
  .site-header.is-hidden{transform:translateY(-100%)}
  .brand{font:400 1.75rem/1 var(--font-display);letter-spacing:-.01em;text-decoration:none}
  .site-nav{display:flex;gap:2rem;align-items:center}
  .site-nav a{position:relative;text-decoration:none;font-size:.9rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);transition:color .25s;padding-block:.3rem}
  .site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--a1);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
  .site-nav a:hover,.site-nav a[aria-current]{color:var(--fg)}
  .site-nav a:hover::after,.site-nav a[aria-current]::after{transform:scaleX(1)}
  .nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
  .nav-toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
  .nav-toggle span:first-child{top:18px}.nav-toggle span:last-child{top:25px}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  @media (max-width:760px){
    .nav-toggle{display:block}
    .site-nav{position:absolute;inset:100% 0 auto 0;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.4rem 1.5rem 1.8rem;background:var(--bg);border-bottom:1px solid var(--line);
      clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:clip-path .5s var(--ease),opacity .3s}
    .site-nav.is-open{clip-path:inset(0);opacity:1;pointer-events:auto}
  }

  .site-footer{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline;
    width:min(100% - 2.5rem,var(--w-wide));margin-inline:auto;padding:2.5rem 0 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
  .site-footer__brand{font:400 1.4rem var(--font-display);color:var(--fg)}
  .breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;padding-block:1.4rem;color:var(--muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
  .breadcrumbs a{text-decoration:none}.breadcrumbs a:hover{color:var(--fg)}
}

@layer components {
  /* przyciski */
  .btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.8rem;border-radius:999px;font-weight:500;font-size:.95rem;letter-spacing:.03em;
    text-decoration:none;cursor:pointer;border:0;isolation:isolate;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);will-change:transform}
  .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,rgb(196 163 115/.55) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s var(--ease)}
  .btn:hover::after{transform:translateX(130%)}
  .btn svg{transition:transform .4s var(--ease)}.btn:hover svg{transform:translateX(4px)}
  .btn--primary{background:var(--fg);color:var(--bg)}
  .btn--primary:hover{box-shadow:0 14px 34px -14px var(--a1)}
  .stage .btn--primary{background:#f4efe6;color:#17140f}
  .btn--secondary,.btn--outline,.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}

  /* nagłówki sekcji */
  .section-head{max-width:46rem;margin-bottom:clamp(2rem,5vw,3.5rem);display:grid;gap:1rem}
  .section-head::before{content:"";width:44px;height:1px;background:var(--a1)}
  .section-head p{color:var(--muted);font-size:1.15rem}
  .section-head--row{max-width:none;grid-template-columns:1fr auto;align-items:end}
  .section-head--row::before{grid-column:1/-1}

  /* treść */
  .prose{font-size:1.125rem;max-width:66ch}
  .prose>*+*{margin-top:1.15em}
  .prose h2,.prose h3,.prose h4{margin-top:1.9em}
  .prose h4{font:600 1.05rem var(--font-body);letter-spacing:.02em}
  .prose a{color:var(--a3);font-weight:500}
  @media (prefers-color-scheme:dark){.prose a{color:var(--a1)}}
  .prose ul{list-style:disc;padding-left:1.3rem}.prose ol{padding-left:1.4rem}
  .prose li::marker{color:var(--a1)}
  .prose blockquote{padding-left:1.4rem;border-left:1px solid var(--a1);font:400 1.6em/1.3 var(--font-display);color:var(--fg)}
  .prose table{width:100%;border-collapse:collapse;font-size:.95em}
  .prose th,.prose td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left}
  .prose img{border-radius:var(--r)}

  /* WYSIWYG: wąski tekst, zdjęcia na całą szerokość strony */
  .prose--flow{max-width:none;display:grid;
    grid-template-columns:[full-start] minmax(1.25rem,1fr) [content-start] min(66ch,100% - 2.5rem) [content-end] minmax(1.25rem,1fr) [full-end]}
  .prose--flow>*{grid-column:content}
  .prose--flow>img,
  .prose--flow>figure,
  .prose--flow>p:has(>img:only-child),
  .prose--flow>p:has(>a:only-child>img:only-child){grid-column:full;margin-block:clamp(2rem,5vw,3.5rem);text-align:center}
  .prose--flow>img,.prose--flow>figure img,.prose--flow>p>img,.prose--flow>p>a>img{width:100%;max-height:82svh;object-fit:cover;border-radius:0;margin-inline:auto}
  .prose--flow>figure figcaption{max-width:66ch;margin:.7rem auto 0;padding-inline:1.25rem;font-size:.85rem;color:var(--muted)}

  /* karty z delikatnym reflektorem */
  .card,.form-card,.t-card{position:relative;isolation:isolate;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(10px);overflow:hidden}
  .card::before,.form-card::before,.t-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
    background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--a1) 18%,transparent),transparent 65%)}
  .card:hover::before,.form-card:hover::before,.t-card:hover::before{opacity:1}

  /* formularz */
  .form{display:grid;gap:1.2rem}
  .form__field label{display:block;font-weight:500;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
  .form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.form textarea,.form select{width:100%;padding:.9rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--fg);font:inherit;transition:border-color .3s}
  .form textarea{min-height:140px;resize:vertical}
  .form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--a1)}
  .form__success{padding:1rem 1.2rem;border-radius:14px;background:color-mix(in srgb,var(--a1) 16%,transparent);font-weight:500}
  .form__errors,.form__error{color:#b4234a;font-size:.9rem}

  .progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;background:var(--a1);transform-origin:0 50%;transform:scaleX(0)}
  .cursor-glow{position:fixed;left:0;top:0;width:480px;height:480px;margin:-240px 0 0 -240px;z-index:0;pointer-events:none;opacity:0;
    background:radial-gradient(circle,color-mix(in srgb,var(--a1) 12%,transparent),transparent 65%);transition:opacity .5s;will-change:transform}
  #fx{position:fixed;inset:0;width:100%;height:100%;z-index:150;pointer-events:none}
}

@layer blocks {
  /* === SCENA: hero + page header === */
  .stage{position:relative;isolation:isolate;display:grid;align-items:center;color:#f4efe6;background:#0d0b09;
    width:min(100% - 1.5rem,1360px);margin:.75rem auto clamp(5rem,10vw,9rem);border-radius:clamp(18px,2.5vw,32px);overflow:hidden;min-height:clamp(540px,86svh,820px)}
  .stage--short{min-height:clamp(320px,46svh,500px)}
  .stage__bg{position:absolute;inset:0;z-index:-1}
  .stage__media,.slides{position:absolute;inset:0}
  .stage__video,.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .slide{opacity:0;transition:opacity 1.6s ease}
  .slide.is-active{opacity:1;animation:kenburns 16s ease-out forwards}
  .stage__shade{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,rgb(11 10 9/.85),transparent 60%)}
  .has-tint .stage__shade,.stage__media:not(:empty)~.stage__shade{background:linear-gradient(180deg,rgb(11 10 9/.35),rgb(11 10 9/.78))}
  .stage__inner{position:relative;width:min(100% - 2.5rem,var(--w));padding-block:clamp(4rem,10vw,8rem);display:grid;gap:1.6rem;justify-items:start}
  .stage__title{max-width:14ch}
  .stage__subtitle{max-width:44ch;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;color:rgb(244 239 230/.82)}
  .stage__cta:empty{display:none}
  .aurora{position:absolute;inset:-20%;filter:blur(90px) saturate(1.2);opacity:.5}
  .aurora i{position:absolute;border-radius:50%;width:50vmax;height:50vmax;mix-blend-mode:screen}
  .aurora i:nth-child(1){background:var(--a1);left:-5%;top:-20%;animation:float1 26s ease-in-out infinite alternate}
  .aurora i:nth-child(2){background:var(--a2);right:-10%;top:10%;opacity:.6;animation:float2 30s ease-in-out infinite alternate}
  .aurora i:nth-child(3){background:var(--a3);left:30%;bottom:-40%;opacity:.7;animation:float3 34s ease-in-out infinite alternate}
  .scroll-cue{position:absolute;left:50%;bottom:1.6rem;width:22px;height:36px;margin-left:-11px;border:1px solid rgb(244 239 230/.5);border-radius:12px}
  .scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;border-radius:2px;background:#f4efe6;animation:cue 2s ease-in-out infinite}

  /* === LOGOTYPY === */
  .logo-row{overflow:hidden}
  .marquee{display:flex;gap:5rem;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marquee__track{display:flex;flex:0 0 auto;min-width:100%;gap:5rem;align-items:center;justify-content:space-around;animation:marquee 38s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
  .marquee img{height:38px;width:auto;max-width:150px;object-fit:contain;opacity:.5;filter:grayscale(1);transition:opacity .3s,filter .3s}
  .marquee img:hover{opacity:1;filter:none}
  @media (prefers-color-scheme:dark){.marquee img{filter:grayscale(1) invert(1) brightness(1.1)}.marquee img:hover{filter:none}}

  /* === ZDJĘCIE NA CAŁĄ SZEROKOŚĆ === */
  .full-image{width:min(100% - 1.5rem,1360px);margin-inline:auto;border-radius:clamp(18px,2.5vw,32px);overflow:hidden}
  .full-image img{width:100%;max-height:78svh;object-fit:cover;aspect-ratio:21/9}

  /* === DWIE KOLUMNY === */
  .two-col{display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
  @media (min-width:860px){.two-col{grid-template-columns:1fr 1fr}.two-col.is-swapped .two-col__text{order:2}}
  .frame{position:relative;isolation:isolate;transform:perspective(1000px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .35s ease-out}
  .frame::before{content:"";position:absolute;inset:16px -16px -16px 16px;z-index:-1;border:1px solid var(--a1);border-radius:var(--r);transition:transform .7s var(--ease)}
  .frame:hover::before{transform:translate(-6px,-6px)}
  .frame img{width:100%;border-radius:var(--r);aspect-ratio:4/5;object-fit:cover}

  /* === TRZY KOLUMNY === */
  .three-col__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
  .card{display:grid;align-content:start;gap:1rem;padding:1.1rem 1.1rem 1.7rem;transition:border-color .4s}
  .card:hover{border-color:color-mix(in srgb,var(--a1) 60%,var(--line))}
  .card__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) - 8px)}
  .card__title,.card__text,.card .btn{margin-inline:.4rem}
  .card__text{color:var(--muted)}
  .card .btn{justify-self:start;margin-top:.3rem}

  /* === FORMULARZ === */
  .form-card{max-width:680px;margin-inline:auto;padding:clamp(1.6rem,4vw,3rem)}
  .form-card__title{margin-bottom:1.6rem}

  /* === CENNIK === */
  .pricing__groups{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
  .price-group__title{padding-bottom:.8rem;margin-bottom:.6rem;border-bottom:1px solid var(--line)}
  .price-item{padding-block:1rem}
  .price-item__head{display:flex;align-items:baseline;gap:.8rem}
  .price-item__name{font-weight:500;font-size:1.1rem}
  .price-item__dots{flex:1;min-width:1rem;border-bottom:1px dotted color-mix(in srgb,var(--muted) 55%,transparent);transform:translateY(-.25em)}
  .price-item__price{font:400 1.6rem/1 var(--font-display);white-space:nowrap}
  .price-item__desc{margin-top:.3rem;max-width:56ch;font-size:.95rem;color:var(--muted)}
  .price-item.is-featured .price-item__name::after{content:"★";margin-left:.55rem;font-size:.75em;color:var(--a1)}
  .pricing__note{margin-top:2.5rem;font-size:.9rem;color:var(--muted);max-width:60ch}

  /* cennik w wersji „karty” */
  .pricing--cards .price-list{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
  .pricing--cards .price-item{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:transform .5s var(--ease),border-color .4s}
  .pricing--cards .price-item:hover{transform:translateY(-4px);border-color:var(--a1)}
  .pricing--cards .price-item__head{flex-direction:column;align-items:flex-start;gap:.9rem}
  .pricing--cards .price-item__dots{display:none}
  .pricing--cards .price-item__price{order:-1;font-size:2.6rem}
  .pricing--cards .price-item.is-featured{border:1px solid transparent;background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    conic-gradient(from var(--angle),var(--a1),var(--a2),var(--a3),var(--a1)) border-box;animation:spin 9s linear infinite}
  .pricing--cards .price-item.is-featured .price-item__name::after{content:none}

  /* === GALERIA === */
  .gallery{--gap:.9rem}
  .gallery--masonry{column-count:var(--cols,3);column-gap:var(--gap)}
  .gallery--masonry .gallery__item{break-inside:avoid;margin-bottom:var(--gap)}
  .gallery--grid{display:grid;gap:var(--gap);grid-template-columns:repeat(var(--cols,3),1fr)}
  .gallery--grid img{aspect-ratio:4/5;object-fit:cover}
  @media (max-width:860px){.gallery--masonry{column-count:2}.gallery--grid{grid-template-columns:repeat(2,1fr)}}
  .gallery__item a{display:block;position:relative;overflow:hidden;border-radius:14px;cursor:zoom-in;background:var(--line)}
  .gallery__item img{width:100%;height:auto;transition:transform 1.1s var(--ease),filter .6s}
  .gallery__item a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgb(11 10 9/.4));opacity:0;transition:opacity .5s}
  .gallery__item a:hover img{transform:scale(1.05)}
  .gallery__item a:hover::after{opacity:1}
  .gallery:hover .gallery__item:not(:hover) img{filter:saturate(.75) brightness(.95)}

  /* === OPINIE === */
  .t-controls{display:flex;gap:.5rem}
  .t-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1.1rem;transition:background .3s,border-color .3s,opacity .3s}
  .t-btn:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .t-btn:disabled{opacity:.3;cursor:default}
  .t-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,430px);gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
  .t-track::-webkit-scrollbar{display:none}
  .t-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:1.2rem;padding:1.8rem}
  .t-card blockquote{font:400 1.45rem/1.35 var(--font-display);flex:1}
  .t-card figcaption{display:flex;align-items:center;gap:.9rem}
  .t-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
  .t-who{display:grid;line-height:1.3}
  .t-name{font-weight:500}.t-info{font-size:.85rem;color:var(--muted)}
  .stars{--c:var(--a1);font-size:1.05rem;letter-spacing:.2em;background:linear-gradient(90deg,var(--c) calc(var(--r)/5*100%),var(--line) 0);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}

  /* === PODGLĄD ZDJĘĆ (lightbox) === */
  .lightbox{width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:transparent;color:#f4efe6;overflow:hidden}
  .lightbox::backdrop{background:rgb(9 8 7/.94);backdrop-filter:blur(10px)}
  .lightbox[open]{display:grid;place-items:center;animation:lb-in .4s var(--ease)}
  .lightbox__figure{display:grid;gap:.8rem;justify-items:center;max-width:min(94vw,1500px)}
  .lightbox__figure img{max-width:100%;max-height:84svh;width:auto;height:auto;border-radius:6px;object-fit:contain;animation:lb-img .5s var(--ease)}
  .lightbox figcaption{font-size:.9rem;color:rgb(244 239 230/.7);min-height:1.4em}
  .lightbox__close,.lightbox__nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgb(244 239 230/.25);background:rgb(244 239 230/.06);color:inherit;cursor:pointer;font-size:1.6rem;line-height:1;transition:background .3s}
  .lightbox__close:hover,.lightbox__nav:hover{background:rgb(244 239 230/.18)}
  .lightbox__close{top:1.2rem;right:1.2rem}
  .lightbox__nav{top:50%;margin-top:-24px}.lightbox__prev{left:1.2rem}.lightbox__next{right:1.2rem}
}

@layer motion {
  @keyframes float1{to{transform:translate(18vmax,12vmax) scale(1.2)}}
  @keyframes float2{to{transform:translate(-16vmax,16vmax) scale(.85)}}
  @keyframes float3{to{transform:translate(-12vmax,-12vmax) scale(1.15)}}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.1)}}
  @keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
  @keyframes marquee{to{transform:translateX(calc(-100% - 5rem))}}
  @keyframes spin{to{--angle:360deg}}
  @keyframes lb-in{from{opacity:0}}
  @keyframes lb-img{from{opacity:0;transform:scale(.97)}}

  /* wejście elementów – tylko gdy działa JS */
  .js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .three-col__grid>:nth-child(2),.gallery__item:nth-child(3n+2){transition-delay:.1s}
  .three-col__grid>:nth-child(3),.gallery__item:nth-child(3n){transition-delay:.2s}

  /* tytuły odsłaniane słowo po słowie */
  .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*80ms)}
  [data-split].is-in .w>span{transform:none}

  /* animacje sterowane przewijaniem (reszta przeglądarek dostaje wersję statyczną) */
  @supports (animation-timeline:view()){
    @keyframes parallax{to{transform:translateY(16%) scale(1.06)}}
    @keyframes reveal-img{from{clip-path:inset(8% 6% round 32px);transform:scale(1.12)}to{clip-path:inset(0 round 0);transform:scale(1)}}
    @keyframes grow{to{transform:scaleX(1)}}
    .stage__media{animation:parallax linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .full-image img,.prose--flow>img,.prose--flow>p>img,.prose--flow>figure img{animation:reveal-img linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .progress{animation:grow linear both;animation-timeline:scroll(root)}
  }

  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(root){animation:.3s ease both vt-out}
  ::view-transition-new(root){animation:.5s ease both vt-in}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}

  @media (hover:hover) and (pointer:fine){.cursor-glow{opacity:1}}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .js [data-reveal]{opacity:1;transform:none}
    .w>span{transform:none}
    .slide.is-active{opacity:1}
    .cursor-glow{display:none}
  }
}