/* static.css — interakcje bez JavaScriptu dla wersji SSR strony. */

/* ── Nawigacja: przezroczysta na hero, biała po przewinięciu (scroll-timeline) ── */
@property --nav-bg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --nav-fg { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --nav-link { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --nav-shadow { syntax: "<color>"; inherits: true; initial-value: transparent; }
.sn-nav {
  --nav-bg: transparent; --nav-fg: #fff; --nav-link: #fff; --nav-shadow: transparent;
  background-color: var(--nav-bg);
  box-shadow: 0 10px 15px -3px var(--nav-shadow), 0 4px 6px -4px var(--nav-shadow);
}
@keyframes sn-scrolled {
  to { --nav-bg: rgba(255,255,255,.95); --nav-fg: #000; --nav-link: #374151; --nav-shadow: rgba(0,0,0,.1); }
}
@supports (animation-timeline: scroll()) {
  .sn-nav { animation: sn-scrolled linear both; animation-timeline: scroll(root); animation-range: 0 60px; backdrop-filter: blur(12px); }
}
/* Przeglądarki bez scroll-timeline: stałe ciemne, półprzezroczyste tło (czytelne wszędzie). */
@supports not (animation-timeline: scroll()) {
  .sn-nav { --nav-bg: rgba(0,0,0,.85); backdrop-filter: blur(12px); }
}
.sn-fg { color: var(--nav-fg); }
.sn-link { color: var(--nav-link); }
.sn-link:hover { color: #2B9EB3; }
.sn-menu > summary { list-style: none; }
.sn-menu > summary::-webkit-details-marker { display: none; }
.sn-menu .sn-close-icon, .sn-menu[open] .sn-open-icon { display: none; }
.sn-menu[open] .sn-close-icon { display: block; }
.sn-panel { background: rgba(0,0,0,.95); backdrop-filter: blur(12px); }
.sn-mlink { color: #fff; }
.sn-mlink:hover { background: rgba(255,255,255,.1); }

/* ── Karuzela „stos kart” (radio) ── */
.sc-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sc-card {
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease, box-shadow .5s ease;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.sc-open { display: none; }
.sc-next { display: none; }
.sc-dot { width: .5rem; background: #C5C1B0; }
.sc-dot:hover { background: rgba(43,158,179,.5); }
#sc-r0:checked~.sc-stack .sc-card-0{z-index:3;transform:scale(1) rotate(0deg) translate(0,0);opacity:1;box-shadow:0 10px 40px rgba(0,0,0,.3);pointer-events:auto}
#sc-r0:checked~.sc-stack .sc-card-0 .sc-open{display:block}#sc-r0:checked~.sc-stack .sc-card-0 .sc-pick{display:none}
#sc-r0:checked~.sc-stack .sc-card-1{z-index:2;transform:rotate(6deg) translate(34px,10px);opacity:.9;pointer-events:auto}
#sc-r0:checked~.sc-stack .sc-card-2{z-index:1;transform:rotate(-4deg) translate(-22px,12px);opacity:.8;pointer-events:auto}
#sc-r0:checked~.sc-stack .sc-card-3{z-index:0;transform:scale(.8) translate(0,20px);opacity:0;pointer-events:none}
#sc-r0:checked~.sc-stack .sc-next-0{display:block}
#sc-r0:checked~div .sc-dot-0{width:1.5rem;background:#2B9EB3}
#sc-r0:focus-visible~div .sc-dot-0{outline:2px solid #2B9EB3;outline-offset:3px}
#sc-r1:checked~.sc-stack .sc-card-0{z-index:0;transform:scale(.8) translate(0,20px);opacity:0;pointer-events:none}
#sc-r1:checked~.sc-stack .sc-card-1{z-index:3;transform:scale(1) rotate(0deg) translate(0,0);opacity:1;box-shadow:0 10px 40px rgba(0,0,0,.3);pointer-events:auto}
#sc-r1:checked~.sc-stack .sc-card-1 .sc-open{display:block}#sc-r1:checked~.sc-stack .sc-card-1 .sc-pick{display:none}
#sc-r1:checked~.sc-stack .sc-card-2{z-index:2;transform:rotate(6deg) translate(34px,10px);opacity:.9;pointer-events:auto}
#sc-r1:checked~.sc-stack .sc-card-3{z-index:1;transform:rotate(-4deg) translate(-22px,12px);opacity:.8;pointer-events:auto}
#sc-r1:checked~.sc-stack .sc-next-1{display:block}
#sc-r1:checked~div .sc-dot-1{width:1.5rem;background:#2B9EB3}
#sc-r1:focus-visible~div .sc-dot-1{outline:2px solid #2B9EB3;outline-offset:3px}
#sc-r2:checked~.sc-stack .sc-card-0{z-index:1;transform:rotate(-4deg) translate(-22px,12px);opacity:.8;pointer-events:auto}
#sc-r2:checked~.sc-stack .sc-card-1{z-index:0;transform:scale(.8) translate(0,20px);opacity:0;pointer-events:none}
#sc-r2:checked~.sc-stack .sc-card-2{z-index:3;transform:scale(1) rotate(0deg) translate(0,0);opacity:1;box-shadow:0 10px 40px rgba(0,0,0,.3);pointer-events:auto}
#sc-r2:checked~.sc-stack .sc-card-2 .sc-open{display:block}#sc-r2:checked~.sc-stack .sc-card-2 .sc-pick{display:none}
#sc-r2:checked~.sc-stack .sc-card-3{z-index:2;transform:rotate(6deg) translate(34px,10px);opacity:.9;pointer-events:auto}
#sc-r2:checked~.sc-stack .sc-next-2{display:block}
#sc-r2:checked~div .sc-dot-2{width:1.5rem;background:#2B9EB3}
#sc-r2:focus-visible~div .sc-dot-2{outline:2px solid #2B9EB3;outline-offset:3px}
#sc-r3:checked~.sc-stack .sc-card-0{z-index:2;transform:rotate(6deg) translate(34px,10px);opacity:.9;pointer-events:auto}
#sc-r3:checked~.sc-stack .sc-card-1{z-index:1;transform:rotate(-4deg) translate(-22px,12px);opacity:.8;pointer-events:auto}
#sc-r3:checked~.sc-stack .sc-card-2{z-index:0;transform:scale(.8) translate(0,20px);opacity:0;pointer-events:none}
#sc-r3:checked~.sc-stack .sc-card-3{z-index:3;transform:scale(1) rotate(0deg) translate(0,0);opacity:1;box-shadow:0 10px 40px rgba(0,0,0,.3);pointer-events:auto}
#sc-r3:checked~.sc-stack .sc-card-3 .sc-open{display:block}#sc-r3:checked~.sc-stack .sc-card-3 .sc-pick{display:none}
#sc-r3:checked~.sc-stack .sc-next-3{display:block}
#sc-r3:checked~div .sc-dot-3{width:1.5rem;background:#2B9EB3}
#sc-r3:focus-visible~div .sc-dot-3{outline:2px solid #2B9EB3;outline-offset:3px}

/* ── Lightbox (:target) ── */
.sc-lightbox { display: none; }
.sc-lightbox:target { display: flex; }

/* ── Ocena gwiazdkami (radio, odwrócona kolejność) ── */
.rating-star svg { color: #d1d5db; }
.rating-input:checked ~ .rating-star svg,
.rating-star:hover svg, .rating-star:hover ~ .rating-star svg { color: #2B9EB3; fill: #2B9EB3; }
.rating:hover .rating-input:checked ~ .rating-star:not(:hover):not(:hover ~ .rating-star) svg { color: #d1d5db; fill: none; }
.rating-input:focus-visible + .rating-star { outline: 2px solid #2B9EB3; outline-offset: 2px; border-radius: 4px; }

/* ── Formularz ── */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.file-input { max-width: 220px; }
.file-input::file-selector-button { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-card { transition: none; }
}

/* Kotwice nie chowają się pod stałą nawigacją */
section[id], #dodaj-komentarz { scroll-margin-top: 96px; }