/* ================================== RESET ================================== */
/* ------ Global links: zawsze białe, bez podkreśleń ------ */
a,
a:link,
a:visited {
  color: #fff;
  text-decoration: none;
}

/* nie narzucamy koloru na :hover, żeby nie zabić podświetleń w stopce/socialach */
a:hover,
a:active,
a:focus {
  text-decoration: none; /* brak podkreślenia również przy hover/focus */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ================================== NAVBAR ================================== */
:root {
  --color-primary: #60009c;
}

body {
  font-family: "Euclid Circular A", "Poppins", sans-serif;
  background-image: url('img/bg.svg');
  background-size: cover; /* całość widoczna, zachowuje proporcje */
  background-color: #1b1526; /* kolor tła dla kontrastu */
  color: white;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* dla accordionu */
  justify-content: flex-start; /* navbar zostaje u góry */
  padding-top: 50px;
}

nav {
  position: relative;
  background: #1f2635;
  font-weight: 400;
  font-size: 0;
  display: flex;
  padding: 0;
  width: 50%;
}

nav .item {
  font-size: 0.8rem;
  display: inline-block;
  position: relative;
  padding: 0 20px;
  cursor: pointer;
  z-index: 5;
  min-width: 25%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.dropdown {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 62px;
}
.dropdown > div {
  transform: translate(0, -100%);
  transition: all 0.5s 0.1s;
  position: relative;
}

.dropdown a {
  display: block;
  padding: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: var(--color-primary);
}

.dropdown a:hover {
  background: #2c0047;
}

.underline {
  height: 6px;
  background: var(--color-primary);
  position: absolute;
  bottom: 0;
  width: 25%;
  z-index: 2;
  pointer-events: none;
  transition: 0.35s;
}

nav .item:hover > .dropdown > div {
  transform: translate(0);
}

nav .item:nth-child(1):hover ~ .underline {
  transform: translate(0, 0);
}

nav .item:nth-child(2):hover ~ .underline {
  transform: translate(100%, 0);
}

nav .item:nth-child(3):hover ~ .underline {
  transform: translate(200%, 0);
}

nav .item:nth-child(4):hover ~ .underline {
  transform: translate(300%, 0);
}

/* ================= ACCORDION ================= */
.accordion-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 120px; /* odstęp od nav */
}

.accordion {
  width: 80%;
  display: flex;
  justify-content: center;
  height: 400px;
  gap: 16px;
  transition: 0.3s;
}

.accordion:hover {
  gap: 0;
}

.accordion li {
  position: relative;
  overflow: hidden;
  flex: 0 0 80px;
  border-radius: 50px;
  opacity: 0.75;
  cursor: pointer;
}

.accordion li img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5);
}

.accordion li,
.accordion li img,
.accordion li .content,
.accordion li .content span {
  transition: 0.3s;
}

.accordion h2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 45px;
  border-bottom: 2px solid #fff;
  margin-bottom: 10px;
  white-space: nowrap;
}

.accordion li .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  padding: 15px;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 70%) 10%,
    rgb(255 255 255 / 0%) 100%
  );
  opacity: 0;
  visibility: hidden;
}

.accordion li .content span {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 50px;
  translate: -50%;
  scale: 0.85;
  visibility: hidden;
  opacity: 0;
}

.accordion li:hover {
  flex: 0 1 260px;
  scale: 1.1;
  z-index: 10;
  opacity: 1;
}

.accordion li:hover .content {
  opacity: 1;
  visibility: visible;
}

.accordion li:hover span {
  scale: 1;
  opacity: 1;
  visibility: visible;
}

/* ================= SECTION/BANNER ================= */
section {
  padding: 0px 0%;
}

@media (width <= 720px) {
  section {
    padding: 0px 0%;
  }
}

@keyframes morph {
  0%,
  100% {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
  }
  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
}

.banner img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  animation: morph 3.5s linear infinite;
}
/* ================================================== */

/* ====== Animated fixed footer (scoped) ====== */
.site-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 270px;
  display: flex;
  pointer-events: none; /* Background shouldn't block interactions above */
  z-index: 5; /* Above bg.svg but below dropdowns etc. */
}

/* make room so content doesn't sit under the fixed footer */
body {
  padding-bottom: 270px;
}

.site-footer__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  width: 100%;
  pointer-events: auto; /* allow clicks on links */
}

.site-footer__background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  translate: -50% 0;
  width: 150vw;
  height: 600px;
  pointer-events: none;
}

.site-footer svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(3) scaleX(2.25);
  transform-origin: bottom;
  display: block;
}

.site-footer ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__socials { gap: 20px; }
.site-footer__socials a { font-size: 24px; }

.site-footer__links { gap: 10px; }

.site-footer__legal {
  font-size: 12px;
  margin: 0;
}

@media (width > 520px) {
  .site-footer { padding-top: 150px; }
  .site-footer__background { height: 600px; }
}

/* === Footer link colors === */
.site-footer__socials a,
.site-footer__links a {
  color: #ffffff;              /* białe */
  text-decoration: none;       /* bez podkreślenia */
  transition: color 0.3s ease; /* płynna zmiana koloru przy hoverze */
}

/* efekt po najechaniu myszką */
.site-footer__socials a:hover,
.site-footer__links a:hover {
  color: #60009c; /* lekko niebieskawy efekt przy hoverze */
}

/* === Responsive footer spacing to avoid overlap on zoom === */
:root {
  /* wysokość stopki rośnie wraz z viewportem, ale ma bezpieczne min/max */
  --footer-h: clamp(220px, 28vh, 360px);
}

/* stopka korzysta ze zmiennej zamiast stałej liczby */
.site-footer {
  height: var(--footer-h) !important;
}

/* treść dostaje taki sam odstęp, żeby nic nie wchodziło pod stopkę */
body {
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom)) !important;
}

/* na bardzo niskich ekranach jeszcze lekko zmniejszamy stopkę */
@media (max-height: 700px) {
  :root { --footer-h: clamp(200px, 24vh, 320px); }
}

/* na bardzo wąskich ekranach można jeszcze odchudzić falę/stopkę */
@media (max-width: 480px) {
  :root { --footer-h: clamp(180px, 26vh, 300px); }
}

/* upewnij się, że nawigacja siedzi nad tłem strony i stopką */
nav {
  position: relative;
  z-index: 20;
}

/* mała rezerwa pod akordeon, żeby przy zoomie nie dotykał stopki */
.accordion-section {
  margin-bottom: 16px;
}

/* === PRZEJŚCIE NA SCROLLUJĄCY UKŁAD (footer w przepływie strony) === */

/* wysokość stopki w przepływie dokumentu */
:root {
  --footer-h: 320px; /* dostosuj, jeśli chcesz wyższą/niższą */
}

/* footer już NIE jest fixed — jedzie ze scrollem jak reszta */
.site-footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  height: var(--footer-h) !important;
  display: block !important;
  pointer-events: auto !important; /* pozwól klikać w linki */
  z-index: 1; /* zwykła warstwa */
}

/* tło fal zostaje absolutne, ale w obrębie stopki */
.site-footer__background {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* treść stopki układamy przy dolnej krawędzi jak wcześniej */
.site-footer__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  padding-block: 24px;
}

/* fale – bez zmian funkcjonalnych (zostawiamy skalowanie) */
.site-footer svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(3) scaleX(2.25);
  transform-origin: bottom;
  display: block;
}

/* USUŃ rezerwę pod fixed footerem */
body {
  padding-bottom: 0 !important;
}

/* navbar/accordion pozostają w normalnym przepływie (scrollują się naturalnie) */
nav {
  position: relative !important;
  z-index: 2; /* delikatnie nad tłem, ale nie musi być wysokie */
}

/* opcjonalnie: jeśli chcesz mniejszą stopkę na małych ekranach */
@media (max-width: 480px) {
  :root { --footer-h: 280px; }
}
@media (max-height: 700px) {
  :root { --footer-h: 300px; }
}

/* === FIX: wyrównanie i skalowanie fal po przejściu footera na relative === */

/* kontrola wysokości stopki i fal */
:root {
  --footer-h: 320px;                                  /* wysokość stopki (przewijanej) */
  --wave-h: clamp(520px, calc(var(--footer-h) * 2.1), 900px); /* wysokość tła fal */
}

.site-footer {
  position: relative !important;
  width: 100%;
  height: var(--footer-h) !important;
  overflow: hidden;           /* ważne: obciąć nadmiar fal */
  z-index: 1;
}

/* PRZYWRACAMY wcześniejsze centrowanie i szerokość tła fal */
.site-footer__background {
  position: absolute !important;
  top: 0;
  left: 50%;
  translate: -50% 0;          /* centruje 150vw względem stopki */
  width: 150vw;               /* szerzej niż viewport -> nie „rozjeżdża” się przy skalowaniu */
  height: var(--wave-h);      /* stała, stabilna wysokość dla SVG */
  pointer-events: none;
}

/* SVG zostaje z tym samym przeskalowaniem i punktem odniesienia przy dolnej krawędzi */
.site-footer svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: scaleY(3) scaleX(2.25);
  transform-origin: bottom;
  display: block;
}

/* (opcjonalnie) odcień fal – zostawiamy ciemny */
.site-footer svg path#wave-shape {
  fill: rgba(10, 11, 10, 0.6);
}

/* === SHOOTING STARS: tylko niebo (górna połowa) === */
#shooting-stars {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;           /* tylko górna połowa ekranu */
  width: 100%;
  pointer-events: none;   /* nie blokuje kliknięć */
  z-index: 0;             /* pod treścią, nad tłem */
}

/* upewnij się, że reszta treści (logo, navbar, akordeon, footer) jest wyżej */
.banner,
nav,
.accordion-section,
.site-footer {
  position: relative;
  z-index: 2;
}

/* === AUDIO TOGGLE (top-right) === */
.audio-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 0;
  border-radius: 12px;
  border: 1px solid var(--color-primary);
  background: rgba(31, 38, 53, 0.8);
  backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transition: transform .1s ease, box-shadow .2s ease;
  color: #fff;
}
.audio-toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
.audio-toggle:active { transform: translateY(0); }

.audio-toggle .icon-on { display: none; }
.audio-toggle.is-playing .icon-on { display: inline-block; }
.audio-toggle.is-playing .icon-off { display: none; }

/* make sure button is focusable/visible for keyboard users */
.audio-toggle:focus { outline: 2px solid #ffffff66; outline-offset: 2px; }

/* Identyczne rozmiary przycisków sterujących */
#audioToggle,
#starsToggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;     /* ten sam szerokość */
  height: 44px;    /* ta sama wysokość */
  padding: 0;      /* żeby rozmiar był sztywny */
  line-height: 1;  /* brak wpływu fontu na wysokość */
}

/* Neonowy efekt hover dla przycisków */
#audioToggle,
#starsToggle {
  transition: box-shadow .2s ease, background .2s ease, transform .08s ease;
  border-radius: 14px; /* dla ładnego glow */
  background: rgba(17,17,29,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px #7c3aed inset; /* fioletowa obwódka bazowa */
  color: #fff;
}

/* Neon na hover */
#audioToggle:hover,
#starsToggle:hover {
  background: rgba(17,17,29,.75);
  box-shadow:
    0 0 0 2px #a855f7 inset,   /* mocniejsza fioletowa obwódka */
    0 0 14px #a855f7,          /* zewnętrzna poświata */
    0 0 28px rgba(168,85,247,.6);
}

/* Klik (lekki „press”) */
#audioToggle:active,
#starsToggle:active {
  background: rgba(17,17,29,.7);
  transform: translateY(1px) scale(.98);
  outline: none !important;
}

/* Dostępność: fokus z klawiatury */
#audioToggle:focus-visible,
#starsToggle:focus-visible {
  outline: 2px solid #e9d5ff;
  outline-offset: 2px;
}

/* Bez białej obwódki przy kliknięciu / trzymaniu */
#audioToggle:active,
#starsToggle:active,
#audioToggle:focus:not(:focus-visible),
#starsToggle:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none; /* jeśli coś jeszcze świeci – wyłącz */
}

/* Zachowaj ładny fokus tylko dla klawiatury (wcześniej dodaliśmy) */
#audioToggle:focus-visible,
#starsToggle:focus-visible {
  /* zostaw co już masz dla focus-visible, lub dopisz tu swój neon */
}

/* Mobilne przeglądarki – brak białego flasha po tapnięciu */
#audioToggle,
#starsToggle {
  -webkit-tap-highlight-color: transparent;
}

/* === Kontrolki: audio, gwiazdy, zmiana tła (bg), udostępnij (share) === */
#audioToggle,
#starsToggle,
#bgToggle,
#shareToggle {
  /* layout */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 1;

  /* wygląd */
  border-radius: 14px;
  background: rgba(17, 17, 29, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 0 0 2px #7c3aed inset; /* fioletowa obwódka jak u pozostałych */

  /* UX */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* animacje */
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.08s ease;
}

/* Hover glow (neon) */
#audioToggle:hover,
#starsToggle:hover,
#bgToggle:hover,
#shareToggle:hover {
  background: rgba(17, 17, 29, 0.75);
  box-shadow:
    0 0 0 2px #a855f7 inset,
    0 0 14px #a855f7,
    0 0 28px rgba(168, 85, 247, 0.6);
}

/* Active / press */
#audioToggle:active,
#starsToggle:active,
#bgToggle:active,
#shareToggle:active {
  background: rgba(17, 17, 29, 0.7);
  transform: translateY(1px) scale(0.98);
  outline: none !important;          /* bez białej ramki po kliknięciu */
  box-shadow: 0 0 0 2px #7c3aed inset;/* szybki powrót ramki */
}

/* Focus (klawiatura/a11y) */
#audioToggle:focus-visible,
#starsToggle:focus-visible,
#bgToggle:focus-visible,
#shareToggle:focus-visible {
  outline: 2px solid #e9d5ff;
  outline-offset: 2px;
}

/* Usuwamy "ghost outline", gdy focus nie jest z klawiatury */
#audioToggle:focus:not(:focus-visible),
#starsToggle:focus:not(:focus-visible),
#bgToggle:focus:not(:focus-visible),
#shareToggle:focus:not(:focus-visible) {
  outline: none !important;
}

/* Emoji w przyciskach — niech będą czytelne */
#audioToggle,
#starsToggle,
#bgToggle,
#shareToggle {
  font-size: 20px;             /* rozmiar symboli/emoji */
  font-weight: 600;
  text-rendering: optimizeLegibility;
}

/* Delikatny blur tła pod przyciskiem (jeśli masz w projekcie półprzezroczyste panele) */
@supports (backdrop-filter: blur(4px)) {
  #audioToggle,
  #starsToggle,
  #bgToggle,
  #shareToggle {
    backdrop-filter: blur(4px);
  }
}

/* Responsywna kosmetyka na bardzo małych ekranach */
@media (max-width: 360px) {
  #audioToggle,
  #starsToggle,
  #bgToggle,
  #shareToggle {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
  }
}

/* Preferencje systemowe — mniej ruchu dla wrażliwych użytkowników */
@media (prefers-reduced-motion: reduce) {
  #audioToggle,
  #starsToggle,
  #bgToggle,
  #shareToggle {
    transition: none;
  }
}

/* Desktop hover: delikatny podskok jak u górnych przycisków */
@media (hover: hover) and (pointer: fine) {
  #bgToggle:hover,
  #shareToggle:hover {
    transform: translateY(-1px) !important;
  }
}