/* Wygląd DataDrive (kierunek B), część 5 z 5: ruch, menu mobilne wysuwane z prawej, tło pierwszego ekranu i długie H1 na telefonie. Spis plików 20–24: 20-wyglad-baza-i-elementy.css */

/* 11. Ruch: tylko krótkie przejścia koloru */
.js .hero__text>*,.js .hero__shot{animation:none}
.js .reveal{opacity:1;transform:none;transition:none}
.is-ruch .panel.is-active .media img,.is-ruch .panel.is-active .panel__head,.is-ruch .panel.is-active .mini--ok li{animation:none}

/* Menu mobilne wysuwane z prawej (właściciel 19.10.2026): panel o szerokości do 420 px wjeżdża od prawej krawędzi pod paskiem z logo,
   strona obok jest przyciemniona (warstwa 49, pod nagłówkiem z warstwą 50), kliknięcie w nią zamyka menu (dd.js). Nadpisuje pełny ekran z 06-naglowek-i-menu.css */
@media (max-width:1200px){
  .js .nav__panel{left:auto;right:0;width:min(420px,88vw);border-left:1px solid var(--line);opacity:1;visibility:hidden;transform:translateX(100%);transition:transform .35s var(--ease),visibility 0s linear .35s}
  .js .nav.is-open .nav__panel{visibility:visible;transform:none;transition:transform .35s var(--ease)}
  html.js body::after{content:"";position:fixed;left:0;right:0;top:var(--menu-top,72px);bottom:0;z-index:49;background:rgba(5,27,43,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
  html.js.menu-open body::after{opacity:1;visibility:visible;transition:opacity .3s}
}
@media (max-width:1200px) and (prefers-reduced-motion:reduce){.js .nav__panel,html.js body::after{transition:none}}

/* Tło pierwszego ekranu strony głównej: canvas z miękkimi smugami (dd.js, moduł 14). Obraz w 1/4 rozdzielczości rozciągnięty i dodatkowo rozmyty,
   za treścią, bez kliknięć, pojawia się płynnie. Przy tekście po lewej prawie niewidoczny (maska), żeby nie przeszkadzał w czytaniu */
.hero,.page-hero{isolation:isolate}
.hero__tlo{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;filter:blur(10px);-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.85) calc(50% - 660px),rgba(0,0,0,.36) calc(50% - 560px),rgba(0,0,0,.36) calc(50% - 80px),#000 calc(50% + 140px));mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.85) calc(50% - 660px),rgba(0,0,0,.36) calc(50% - 560px),rgba(0,0,0,.36) calc(50% - 80px),#000 calc(50% + 140px))} /* lewy margines poza kolumną tekstu widoczny (właściciel 19.10.2026), pod nagłówkiem i opisem przygaszone; liczone od środka, bo kontener ma 1240 px */
/* Telefon i tablet (do 900 px): tekst zajmuje całą szerokość, więc smugi równo przygaszone na całym nagłówku (właściciel 19.10.2026: tło także na telefonie) */
@media (max-width:900px){.hero__tlo{-webkit-mask-image:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85));mask-image:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85))}}
/* Płynne pojawienie się smug liczy dd.js (moduł 14, globalAlpha), nie animacja CSS: animacja przezroczystości razem z blur i maską chowała warstwę na telefonie */

/* Długie H1 na wąskich telefonach (≤400 px) nie łamią się na 4 linie (przegląd 19.10.2026) */
@media (max-width:400px){.page-hero h1{font-size:clamp(1.75rem,8vw,2.1rem)}}