/* KONCEPT_4 — animated homepage hero and continuous topic ticker */

/* Topbar: a seamless, continuously moving knowledge/product ticker. */
.topbar .wrap{gap:18px;overflow:hidden}
/* fix20 / 3.7 — MIEKKIE WYGASZENIE KRAWEDZI TICKERA.
   Bylo: maska liniowa 28px (transparent -> #000). Przy tekscie 11.5px/650
   liniowe przejscie na 28px to jeszcze nie jest wygaszenie, tylko szybkie
   sciemnienie jednej litery — zgloszenie QA 3.7 opisuje to jako "urwany bez
   maski" ("...ukasz skladnika" po lewej, "Pracujesz nad tekstur|" po prawej).
   Jest: 64px i krzywa zblizona do smoothstep (piec przystankow), wiec napis
   nie tyle znika, co wychodzi zza krawedzi paska.

   TECHNIKA NIEZALEZNA OD KOLORU TLA. Maska dziala na kanale alfa SAMEGO
   tickera (mask-mode:match-source dla gradientu CSS = alpha), nie zaslania go
   prostokatem w kolorze tla. Dzieki temu dziala tak samo na granacie strony
   glownej i na kazdym tle rodziny wprowadzanym przez family-topbar.css
   (turicoll #11195d, turiker #3b1232, turipro #073d31, turigel #663807,
   agro #0b291c, bio #292d1c) — tlo topbara przeswieca przez wygaszony napis,
   bo pod spodem nie ma zadnej dodatkowej warstwy.

   Szerokosc wygaszenia skaluje sie z szerokoscia okna tickera (--ticker-fade
   nizej w mediach), bo 64px w oknie 260px zjadloby polowe komunikatu. */
.topic-ticker{position:relative;flex:1 1 auto;min-width:0;height:34px;overflow:hidden;
  --ticker-fade:64px;
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.08) calc(var(--ticker-fade) * .22),
    rgba(0,0,0,.30) calc(var(--ticker-fade) * .45),
    rgba(0,0,0,.66) calc(var(--ticker-fade) * .70),
    rgba(0,0,0,.90) calc(var(--ticker-fade) * .88),
    #000 var(--ticker-fade),
    #000 calc(100% - var(--ticker-fade)),
    rgba(0,0,0,.90) calc(100% - var(--ticker-fade) * .88),
    rgba(0,0,0,.66) calc(100% - var(--ticker-fade) * .70),
    rgba(0,0,0,.30) calc(100% - var(--ticker-fade) * .45),
    rgba(0,0,0,.08) calc(100% - var(--ticker-fade) * .22),
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.08) calc(var(--ticker-fade) * .22),
    rgba(0,0,0,.30) calc(var(--ticker-fade) * .45),
    rgba(0,0,0,.66) calc(var(--ticker-fade) * .70),
    rgba(0,0,0,.90) calc(var(--ticker-fade) * .88),
    #000 var(--ticker-fade),
    #000 calc(100% - var(--ticker-fade)),
    rgba(0,0,0,.90) calc(100% - var(--ticker-fade) * .88),
    rgba(0,0,0,.66) calc(100% - var(--ticker-fade) * .70),
    rgba(0,0,0,.30) calc(100% - var(--ticker-fade) * .45),
    rgba(0,0,0,.08) calc(100% - var(--ticker-fade) * .22),
    rgba(0,0,0,0) 100%)}
.topic-ticker__track{display:flex;align-items:center;width:max-content;height:100%;will-change:transform;
  animation:topic-ticker-loop 48s linear infinite}
.topic-ticker__group{display:flex;align-items:center;flex:0 0 auto;height:100%;padding-right:28px}
.topic-ticker__item{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 18px;color:#fff;
  font-size:11.5px;font-weight:650;letter-spacing:.012em;white-space:nowrap;opacity:.88;transition:opacity .16s}
.topic-ticker__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan,#00AED9);
  box-shadow:0 0 0 3px rgba(0,174,217,.13);flex:0 0 auto}
.topic-ticker__item:hover{opacity:1}
.topbar .r{position:relative;z-index:2;flex:0 0 auto;margin-left:0;background:var(--navy,#17156d)}

@keyframes topic-ticker-loop{to{transform:translateX(-50%)}}

/* Hero: cross-fading lifestyle scenes with a restrained editorial pan/zoom. */
.hero-split .photo{isolation:isolate;touch-action:pan-y}
.hero-split .hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-split .hero-slide{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1)}
.hero-split .hero-slide.is-active{z-index:1;opacity:1;pointer-events:auto}
.hero-split .hero-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.075);will-change:transform}
.hero-split .hero-slide:nth-child(1).is-active img{animation:hero-pan-a 6.8s ease-out both}
.hero-split .hero-slide:nth-child(2).is-active img{animation:hero-pan-b 6.8s ease-out both}
.hero-split .hero-slide:nth-child(3).is-active img{animation:hero-pan-c 6.8s ease-out both}
.hero-split .photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,21,109,0) 56%,rgba(23,21,109,.36) 100%)}
.hero-split .caption{z-index:4;text-decoration:none;transition:background .18s,transform .18s}
.hero-split .caption:hover{background:rgba(23,21,109,.78);transform:translateY(-2px)}
.hero-split .caption svg{width:14px;height:14px;margin-left:2px;transition:transform .18s}
.hero-split .caption:hover svg{transform:translateX(3px)}
.hero-controls{position:absolute;right:20px;bottom:20px;z-index:5;display:flex;align-items:center}
.hero-dots{display:flex;align-items:center;gap:7px}
.hero-dot{position:relative;width:30px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-dot::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;border-radius:999px;
  background:rgba(255,255,255,.64);box-shadow:0 1px 5px rgba(23,21,109,.30);transition:background .18s,transform .18s}
.hero-dot:hover::before{background:#fff;transform:scaleY(1.35)}
.hero-dot:focus-visible{outline:3px solid rgba(0,174,217,.72);outline-offset:2px;border-radius:5px}
.hero-dot.is-active::before{background:rgba(255,255,255,.38)}
.hero-dot.is-active::after{content:"";position:absolute;left:0;top:10px;width:100%;height:3px;background:var(--cyan,#00AED9);
  border-radius:999px;box-shadow:0 0 8px rgba(0,174,217,.35);transform:scaleX(0);transform-origin:left;
  animation:hero-progress 6.2s linear forwards}

@keyframes hero-pan-a{from{transform:scale(1.09) translate3d(0,0,0)}to{transform:scale(1.025) translate3d(-1.2%,.35%,0)}}
@keyframes hero-pan-b{from{transform:scale(1.095) translate3d(1.2%,.4%,0)}to{transform:scale(1.025) translate3d(-.7%,-.5%,0)}}
@keyframes hero-pan-c{from{transform:scale(1.085) translate3d(-1%,.3%,0)}to{transform:scale(1.025) translate3d(.9%,-.35%,0)}}
@keyframes hero-progress{to{transform:scaleX(1)}}

@media(max-width:900px){
  .hero-split .hero-slide img{object-position:center 36%}
}
/* fix20 / 3.7 — wygaszenie skalowane do szerokosci okna tickera.
   Okno to reszta paska po mailu i przelaczniku jezyka: ~950px @1440,
   ~430px @900, ~300px @768. Ponizej 521px ticker jest schowany
   (fluid.css:562), wiec 34px to najwezszy wariant, jaki realnie widac. */
@media(max-width:900px){ .topic-ticker{--ticker-fade:46px} }
@media(max-width:768px){ .topic-ticker{--ticker-fade:34px} }
@media(max-width:600px){
  .topbar .wrap{gap:10px}
  .topic-ticker__item{padding:0 14px;font-size:10.5px}
  .hero-controls{top:14px;right:14px;bottom:auto}
  .hero-split .caption{top:auto;bottom:14px}
}

@media(prefers-reduced-motion:reduce){
  /* fix20 / 3.7b — bez `!important` ta deklaracja NIE dzialala: site-fixes.css:3
     ma `.topic-ticker{overflow:hidden}` o tej samej specyficznosci (0,1,0),
     ale jest ladowany PO home-motion.css (index.html:1341-1342), wiec wygrywal
     kolejnoscia. Efekt: przy wylaczonych animacjach ticker nie animowal sie
     ANI nie dawal sie przewinac — widac bylo tylko pierwszy komunikat, reszte
     ucinala krawedz. Nadpisujemy wylacznie os X i wylacznie w tym media query;
     `overflow-y` zostaje przyciete, zeby pasek trzymal 34px. */
  .topic-ticker{overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .topic-ticker::-webkit-scrollbar{display:none}
  .topic-ticker__track{animation:none}
  .topic-ticker__group[aria-hidden="true"]{display:none}
  .hero-split .hero-slide{transition:none}
  .hero-split .hero-slide.is-active img{animation:none!important;transform:none}
  .hero-dot.is-active::after{animation:none;transform:scaleX(1)}
}