/* Home: trzy klikalne segmenty pierścienia z napisami po łuku. */
.hero-home{
  --hero-deep:#0a1526;
  --hero-arc:rgb(222 230 236 / .78);
  --hero-label:#e2e7eb;
  min-height:100svh;
  background:var(--hero-deep);
}
.hero-home .hero-kadr img{
  object-position:50% 42%;
  filter:grayscale(.48) saturate(.65) brightness(.68) contrast(1.03);
  transform:none;
}
.hero-home .hero-cien{
  background-color:rgb(10 21 38 / .58);
  background-image:
    radial-gradient(ellipse 38% 54% at 50% 48%,rgb(10 21 38 / .6),rgb(10 21 38 / .16) 68%,transparent),
    linear-gradient(180deg,rgb(10 21 38 / .2),transparent 30%,rgb(10 21 38 / .2) 70%,var(--hero-deep));
}
.hero-home .hero-mgla{opacity:.12}
.hero-home .hero-kadr .door-bg{transition:opacity 450ms ease-out;filter:grayscale(.2) saturate(.8) brightness(.8) contrast(1.03)}
.hero-home .hero-kadr .door-bg[data-door="0"]{object-position:50% 32%}
.hero-home .hero-kadr .door-bg[data-door="1"]{object-position:50% 44%}
.hero-home .hero-kadr .door-bg[data-door="2"]{object-position:64% 42%}

.hero-home .wheel-circular{--size:min(72svh,82vw,650px);top:46.5%}
.circle-nav,.circle-menu{position:absolute;inset:0;width:100%;height:100%}
.circle-menu{overflow:visible}
.wheel-door{cursor:pointer;outline:none}
.wheel-surface{fill:rgb(222 230 236 / .025);transition:fill 320ms ease-out}
.wheel-edge,.wheel-inner-edge{fill:none;vector-effect:non-scaling-stroke;transition:stroke 320ms ease-out,stroke-width 320ms ease-out}
.wheel-edge{stroke:rgb(222 230 236 / .64);stroke-width:1.2}
.wheel-inner-edge{stroke:rgb(222 230 236 / .17);stroke-width:.7}
.wheel-label{fill:var(--on-night);font:400 21px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;pointer-events:none;transition:fill 320ms ease-out}
.wheel-hit{fill:none;stroke:transparent;stroke-width:98;pointer-events:stroke}
.wheel-door:is(:hover,:focus-visible,.is-on) .wheel-surface{fill:rgb(201 169 122 / .11)}
.wheel-door:is(:hover,:focus-visible,.is-on) .wheel-edge{stroke:var(--punkt);stroke-width:2}
.wheel-door:is(:hover,:focus-visible,.is-on) .wheel-inner-edge{stroke:rgb(201 169 122 / .64)}
.wheel-door:is(:hover,:focus-visible,.is-on) .wheel-label{fill:#ead6b8}
.wheel-door:focus-visible .wheel-surface{stroke:var(--punkt);stroke-width:2;vector-effect:non-scaling-stroke}
.hero-home .hub{padding:25%;transform:none;gap:0}
.hero-home .hub-mark{font-size:clamp(21px,calc(var(--size) * .045),29px);letter-spacing:.18em;text-indent:.18em;white-space:nowrap}
.hero-home .slad-row{bottom:calc(var(--peek) + 5.5svh);height:9svh}
.hero-home .slad path{stroke-width:.85;opacity:.62}
@media (max-width:820px){
  .hero-home .wheel-circular{--size:min(100vw,62svh,550px);top:46%}
  .hero-home .hero-kadr img{object-position:56% 38%}
  .hero-home .slad-row{bottom:calc(var(--peek) + 7svh);height:8svh}
}
@media (max-width:640px){
  .hero-home .wheel-circular{--size:min(100vw,65svh);top:45%}
  .wheel-label{font-size:26px;letter-spacing:.13em}
  .hero-home .hub-mark{font-size:clamp(19px,5.3vw,24px);letter-spacing:.12em;text-indent:.12em}
}
@media (max-height:500px) and (min-width:641px){
  .hero-home .wheel-circular{--size:76svh;top:44%}
  .wheel-label{font-size:26px;letter-spacing:.13em}
  .hero-home .hub-mark{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .wheel-surface,.wheel-edge,.wheel-inner-edge,.wheel-label{transition:none}
}