@import url("https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=The+Nautigal:wght@400;700&display=swap');

:root {
--coverColor: #25002f;
--goldGradient: radial-gradient(ellipse farthest-corner at right bottom, #edc975 0%, #dab55f 8%, #b4995e 30%, #b8984d 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
--tloGradient: linear-gradient( 99deg,  rgba(115,18,81,1) 10.6%, rgba(28,28,28,1) 118% );
--logo: url("../images/logo_nowe2.webp");
}

html,
body {
    font-family: "Asap Condensed", sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    color: #d8d8bd;
}
body > section {
    scroll-snap-stop: always;
}

.the-nautigal-regular {
  font-family: "The Nautigal", cursive;
  font-weight: 400;
  font-style: normal;
}

.the-nautigal-bold {
  font-family: "The Nautigal", cursive;
  font-weight: 700;
  font-style: normal;
}

.hamburger-button {
    display: block;
    position: fixed;
    top: 20px;
    left: 10px;
    cursor: pointer;
    z-index: 50;
    transform: translateY(-50%);
    width: 42px;
}

.hamburger-button:hover span:nth-child(1) {
    width: 22px;
}

.hamburger-button:hover span:nth-child(2) {
    width: 32px;
}

.hamburger-button:hover span:nth-child(3) {
    width: 42px;
}

.hamburger-button span {
    display: block;
    height: 1px;
    background-color: #fff;
}

.hamburger-button span:nth-last-child(n + 2) {
    margin-bottom: 10px;
}

.hamburger-button span:nth-child(1) {
    width: 42px;
    transition: 0.3s ease;
}

.hamburger-button span:nth-child(2) {
    width: 32px;
}

.hamburger-button span:nth-child(3) {
    width: 22px;
    transition: 0.5s ease;
}

.menu,
.layer1,
.layer2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    z-index: 49;
}

.menu {
    background-color: #3498db;
    background-image: radial-gradient(
            rgba(255, 255, 255, 0),
            rgb(117 8 114 / 48%)
        ),
        url("../images/nowaMenuv2kopia.webp");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out 0.3s;
}

.layer1 {
    background-color: #5f5f5f;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out 0.2s;
    z-index: 48;
}

.layer2 {
    background-color: #aeaeae;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out 0.1s;
    z-index: 47;
}

.menu ul,
.layer1 ul,
.layer2 ul {
    list-style: none;
    position: relative;
    display: block;
}

.menu ul li {
    margin: 10px 0;
    list-style-type: none;
    padding: 5px 80px;
    transition: all 1s ease-in-out;
}
.menu ul li.active {
    background: #ffffff45;
}

.menu ul {
    padding: 0;
    margin: 0;
}

.menu ul a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;
    display: block;
    letter-spacing: 2px;
    position: relative;
    transition: 0.5s ease;
    text-shadow: 1px 1px 3px black;
    color: #f1ede9;
}

.menu ul a:hover {
    transform: translateX(15px);
}

.menu ul a:hover:before {
    opacity: 1;
}

.menu ul a::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Dodaj tę linię */
	font-size: 15px;
    display: inline-block;
    transition: 0.5s ease;
    opacity: 0;
    margin-left: -15px;
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.menu .menu-contacts {
    padding: 0 30px;
}

.menu .menu-contacts .menu-contacts__item {
    display: flex;
    align-items: center;
    font-size: 16px;
    letter-spacing: 0;
    color: #fff;
    opacity: 0.7;
    height: 30px;
    transition: opacity 0.8s ease;
    text-decoration: none;
    text-shadow: 1px 1px 2px black;
}

.menu .menu-contacts .menu-contacts__item:hover {
    opacity: 1;
}

.menu .menu-contacts .menu-contacts__icon {
    display: inline-block;
    margin-right: 15px;
    min-width: 20px;
    text-align: center;
}

.menu .menu-contacts .menu-contacts__icon i {
    display: inline-block;
    font-size: 20px;
}

.menu .menu-social {
    display: flex;
    column-gap: 10px;
    margin-top: 30px;
    margin-left: -10px;
    align-items: center;
    left: 30%;
    position: relative;
}

.menu .menu-social a {
    font-size: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: 0.7s ease;
    border: 2px solid transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.menu .menu-social a i {
    font-size: 18px;
}

.menu .menu-social a:hover {
    color: #fff;
    border: 2px solid #fff;
}

.menu .block {
    display: block;
    margin-top: 100px;
    float: left;
    width: -webkit-fill-available;
}

.layer1 ul li a,
.layer2 ul li a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(1.3em, 0.6vw, 15rem);
    opacity: 0;
}

.overlay,
.overlay1,
.overlay2 {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    background-color: #00000033;
}

.overlay {
    backdrop-filter: blur(15px);
    transition: all 0.5s linear 0.5s;
    z-index: 46;
	background-image: var(--logo);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: right center;
}

.overlay .footer {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2%;
    border-radius: 20px;
    box-shadow: 5px 5px 15px #00000061;
    margin: 2%;
    background: #ffe4c424;
    color: beige;
	text-align: center;
	text-shadow: 1px 1px 2px black;
}

.overlay .footer a, .menu .footer a {
    text-decoration: none;
    color: azure;
    font-style: italic;
}

.menu .footer {
	display: none;
}

.overlay1 {
    backdrop-filter: blur(15px);
    transition: all 0.3s ease-in-out 0.3s;
    z-index: 45;
}

.overlay2 {
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    z-index: 44;
}

.logo {
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 50;
    height: 60px;
    width: 170px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: var(--logo);
    /* background-image: url("https://cloud9lincoln.co.uk/images/logo-inverse-415x103nowy.webp");
    transition: transform 0.3s ease;
    backdrop-filter: blur(5px);
    border-radius: 20px;
    box-shadow: 5px 5px 15px #00000061; */
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked ~ .menu,
input[type="checkbox"]:checked ~ .layer1,
input[type="checkbox"]:checked ~ .layer2,
input[type="checkbox"]:checked ~ .overlay,
input[type="checkbox"]:checked ~ .overlay1,
input[type="checkbox"]:checked ~ .overlay2 {
    transform: translateX(0);
}

input[type="checkbox"]:not(:checked) ~ .layer1,
input[type="checkbox"]:not(:checked) ~ .layer2 {
    transform: translateX(-100%);
    transition-delay: 0.3s, 0.6s; /* add the delay back */
}

section {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    scroll-snap-align: center;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
}

#section1 {
    background-position: top center;
    scroll-snap-align: start;
}

.blackdrop {
    width: 100vw;
    height: 100vh;
    background: var(--coverColor);
	background-image: var(--gradient);
    background-size: 100vw;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 1;
	position: absolute;
}
.blackdrop::before {
	content: "";
    width: 100vw;
    height: 100vh;
    background-image: var(--logo);
    background-size: 80vw;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 1;
	display: block;
}
.blackdrop.show {
    opacity: 0;
    transition: opacity 4s ease-in-out 3s;
}

.blackdrop.no-js { /* Już istniało, upewniamy się, że działa */
    opacity: 0 !important; /* Użyj !important, aby nadpisać inne reguły, jeśli konieczne */
    display: none !important; /* Można też całkowicie ukryć, jeśli nie jest potrzebne jako tło */
}


.article-careers {
  /* 1. Ustawienie jako "okienko" (modal) na samym środku ekranu */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* Zapewnia, że okienko będzie nad resztą strony */
  
  /* 2. Rozmiar: 90% szerokości i 90% wysokości ekranu */
  width: 90vw;
  height: 90vh;
  
  /* 3. Tło z przezroczystością 20% (0.8 to poziom krycia, czyli 80%) */
  background-color: rgba(20, 20, 20, 0.8);
  
  /* Dodatkowy styl: zaokrąglenie, marginesy wewnętrzne i cień */
  border-radius: 16px;
  padding: 4%;
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px); /* Opcjonalny, ładny efekt rozmycia tła pod okienkiem */
  
  /* 4. Nowoczesne zapytania kontenerowe - pozwalają tekstowi reagować na wielkość div'a */
  container-type: size;
  
  /* 5. Wyśrodkowanie treści w pionie i poziomie */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  /* Zabezpieczenie paska przewijania, gdyby tekstu było ekstremalnie dużo */
  overflow-y: auto;
}

/* --- AUTOMATYCZNE SKALOWANIE TEKSTU --- */
/* Używamy clamp(minimum, preferowana_wielkość_w_cqmin, maksimum) */

.article-careers h2 {
  /* Czcionka nie mniejsza niż 1.5rem, optymalnie 8% mniejszego wymiaru kontenera, max 4rem */
  font-size: clamp(2rem, 8cqmin, 6rem);
  margin-top: 0;
  margin-bottom: 3cqmin;
  font-weight: bold;
  font-family: "The Nautigal", cursive;
  font-weight: 900;
}

.article-careers p {
  /* Czcionka dla akapitu dostosowująca się do okna */
  font-size: clamp(1rem, 4cqmin, 2.5rem);
  line-height: 1.4;
  margin: 0;
  max-width: 90%; /* Zabezpiecza przed dotykaniem krawędzi przy bardzo krótkich tekstach */
}

.article-careers span {
  /* Czcionka dla span */
  font-size: clamp(0.9rem, 3.5cqmin, 2rem);
  color: #a0aec0; /* Przykładowy, lekko wyszarzony kolor dla zróżnicowania */
  /*display: block; 
   Wyrównanie do lewej */
  text-align: left;
  margin-top: 2cqmin;
}

/* --- STYL DLA LINKU (a) --- */

.article-careers a {
  /* Złoty kolor (odcień Gold/Goldenrod) */
  color: #d4af37; 
  
  /* Usunięcie domyślnego podkreślenia */
  text-decoration: none;
  
  /* Skalowanie czcionki, by pasowała do reszty tekstu (np. do akapitu p) */
  font-size: inherit; 
  font-weight: 600; /* Lekkie pogrubienie, żeby link się wyróżniał */
  
  /* Płynne przejście koloru przy najechaniu */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.article-careers a:hover {
  /* Jaśniejszy złoty po najechaniu myszką */
  color: #f1c40f;
  
  /* Subtelny blask (glow), aby link "ożył" */
  text-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
  
  /* Jeśli jednak chcesz podkreślenie TYLKO po najechaniu: */
  /* text-decoration: underline; */
}

.article {
    position: absolute;
    top: auto;
    bottom: 90px;
    width: auto;
    height: auto;
    padding: 2%;
    margin: clamp(0.1em, 3vw, 15rem);
    z-index: 10;
    overflow: hidden;
    backdrop-filter: blur(25px);
    border-radius: 20px;
    box-shadow: 5px 5px 15px #00000061;
    font-size: xx-large;
    transition: all 1s ease-in-out;
    font-weight: 100;
    color: #d8d8bd;
	background: #00000085;
	font-weight: 100;
}

/* Style dla .article kiedy JS jest wyłączony */
.article.no-js {
    opacity: 1; /* Domyślnie widoczny */
    /* Można dodać inne style, jeśli .article też ma animacje wejścia */
}

.article.duzytekst {
    bottom: 0;
}

.article:hover {
	backdrop-filter: none;
    transition: all 1s ease-in-out;
    color: white;
    text-shadow: 1px 1px 3px black;
	background: transparent;
	text-shadow: 0px 0px 1px white, 1px 1px 3px black;
	font-weight: 600;
}

.article h2 {
    width: 100%;
    padding: 0;
    margin: 0;
	font-family: "The Nautigal", cursive;
  font-weight: 900;
  font-style: normal;
  font-size: clamp( 2em, 5vw, 15rem);
}

.article span, .article h2, .article p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--goldGradient);
}

#section2 .article span {
    width: 50%;
    float: left;
}

#section4 .article.scroll {
    bottom: 0;
    width: 90%;
    height: 35%;
}

#section4 .article.scroll.no-js {
    opacity: 0;
}

#section4 .article.text {
    bottom: unset;
	top: 5%;
    width: 90%;
}

#section1-careers {
	height: unset;
}

#section1-careers .article{
	position: relative;
	top: 60px;
	margin-bottom: 60px;
}

#section-gallery .article {
	height: 80vh;
    align-items: center;
    display: flex;
    justify-content: center;
    position: static;
}

.mb-licznik-zdjec {
	position: absolute;
	bottom: 5%;
}

@media screen and (min-width: 600px) {
	#section1-about {
		background-position: top center;
	}
}

@media screen and (max-width: 600px) {
    .article {
        margin: 2.5vw;
        padding-left: 5px;
        font-size: larger;
        padding-bottom: 10px;
    }
    .article span {
        width: 50%;
    }
	#section4 .article.text {
		top: 12%;
	}
	#section-gallery .article img {
        height: auto;
        width: 100%;
	}
	.menu .menu-contacts {
		margin-top: 5% !important;
	}
	#section-code {
        height: 150%;
	}
	.menu .menu-social {
		margin-top: 0px;
	}
	.event-poster {
		height: auto;
    }
}

.contRight {
    position: relative;
    padding: 2%;
}

.right {
    right: -100%; /* Pozycja div-a początkowa */
    opacity: 0;
    transition: right 1s ease-in-out;
}

.right.show {
    right: 0; /* Pozycja div-a po animacji */
    opacity: 1;
    transition: all 1s ease-in-out;
}

/* Style dla .right kiedy JS jest wyłączony */
.right.no-js {
    right: 0;
    opacity: 1;
}

.left {
    left: -100%; /* Pozycja div-a początkowa */
    opacity: 0;
    transition: all 1s ease-in-out;
}

.left.show {
    left: 0; /* Pozycja div-a po animacji */
    opacity: 1;
    transition: all 1s ease-in-out;
}

/* Style dla .left kiedy JS jest wyłączony */
.left.no-js {
    left: 0;
    opacity: 1;
}

.top {
    top: -100%; /* Pozycja div-a początkowa */
    opacity: 0;
    transition: top 1s ease-in-out; /* Zmieniono z left na top */
}

.top.show {
    top: 60px; /* Pozycja div-a po animacji */
    opacity: 1;
    /* transition: all 1s ease-in-out; Usunięto, aby nie konfliktowało z transition: top */
}

/* Style dla .top kiedy JS jest wyłączony */
.top.no-js {
    top: 60px; /* Ustawiamy na pozycję docelową */
    opacity: 1;
}

.bottom {
    bottom: -100%; /* Pozycja div-a początkowa */
    opacity: 0;
    transition: bottom 1s ease-in-out; /* Zmieniono z left na bottom */
}

.bottom.show {
    bottom: 0; /* Pozycja div-a po animacji */
    opacity: 1;
    /* transition: all 1s ease-in-out; Usunięto, aby nie konfliktowało z transition: bottom */
}

/* Style dla .bottom kiedy JS jest wyłączony */
.bottom.no-js {
    bottom: 0;
    opacity: 1;
}


/* Zasłona */
@keyframes coverAnimation {
    0% {
        right: 0;
    }
    100% {
        right: 100%;
    }
}
.coverDown {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100%;
    background: var(--coverColor);
    z-index: 1000;
	background-image: var(--tloGradient);
    background-size: 100vw;
    background-repeat: no-repeat;
    background-position: center center;
    animation: coverAnimation 1s ease-in-out forwards;
}
.coverDown::before {
	content: "";
	display: block;
    width: 100vw;
    height: 100vh;
    background-image: var(--logo);
    background-size: 80vw;
    background-repeat: no-repeat;
    background-position: center center;
}
.coverUp {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100%;
    background: var(--coverColor);
    z-index: 1000;
    transition: right 1s;
	background-image: var(--tloGradient);
    background-size: 100vw;
    background-repeat: no-repeat;
    background-position: center center;
}
.coverUp::before {
	content: "";
	display: block;
    width: 100vw;
    height: 100vh;
    background-image: var(--logo);
    background-size: 80vw;
    background-repeat: no-repeat;
    background-position: center center;
}

#myVideo {
    position: relative;
    right: 0;
    bottom: 0;
    top: 0;
    /* right: 0; usunięte, bo już jest */
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: black;
    background-image: /* our video */ ;
    background-position: center center;
    /* background-size: cover; usunięte, bo już jest background-size: 100% 100%; */
    object-fit: cover;
    z-index: 3;
}
.more {
    position: absolute;
    z-index: 3;
    animation: moreAnimation 2s ease-in-out 8s forwards;
    opacity: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100vw;
}
.arrow {
    box-shadow: 5px 5px 15px #00000061;
    font-size: 40px;
    transition: all 0.8s ease-in-out;
    font-weight: 600;
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #d4c0ac;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    text-shadow: 1px 1px 3px black;
}

.arrow:hover {
    background: #ffffff30;
    backdrop-filter: blur(5px);
    color: red;
    transition: all 0.8s ease-in-out;
}

.audio {
    display: block;
    position: absolute;
    top: 100px;
    left: 20px;
    cursor: pointer;
    z-index: 3;
    transform: translateY(-50%);
	pointer-events: auto;
}

.audio.muted {
    position: absolute;
}
.audio.muted:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #d4c0ac;
    transform: rotate(-45deg);
    transform-origin: center;
}

@keyframes moreAnimation {
    0% {
        bottom: -150px;
    }
    100% {
        bottom: 10px;
        opacity: 1;
    }
}

/*
* Strona główna napisy
*
*******************************************************/
.mb-title {
    z-index: 3;
    position: absolute;
    top: 20%;
    /* background: burlywood; */
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

.mb-title > h1 {
    -moz-background-clip: text;
    background-image: url(../images/dym1.webp);
    background-size: auto;
    -webkit-background-clip: text;
    font-size: clamp(3.9em, 10vw, 15rem);
    text-align: center !important;
    color: transparent;
    text-shadow: 1px 1px #c1b28f30;
    animation: titleAnimationLeft 2s ease-in-out forwards;
    left: 0;
    position: relative;
}

.mb-title > p {
    font-size: clamp(1.3em, 3vw, 15rem);
    text-align: center !important;
    color: #ffc7726b;
    text-shadow: 1px 1px 2px #000;
    right: 0;
    position: relative;
    animation: titleAnimationRight 2s ease-in-out forwards;
}

@keyframes titleAnimationLeft {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}
@keyframes titleAnimationRight {
    0% {
        right: -100%;
    }
    100% {
        right: 0;
    }
}

/**
*
* MB scroller przesuwanie zdjęć
* =====================================================
*/
.scroller {
    max-width: fit-content;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
        var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

.mb-gold {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--goldGradient);
	text-shadow: none;
}

/**
*
* MB przycisk events
* =====================================================
*/

.floating-button {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: 300px;
  height: 200px;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 3;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.default-img {
  opacity: 1;
}

.hover-img {
  opacity: 0;
}

.floating-button:hover {
  transform: scale(1.05);
}

.floating-button:hover .default-img {
  opacity: 0;
}

.floating-button:hover .hover-img {
  opacity: 1;
}

/**
*
* MB przycisk looking for new dancers looking.webp
* =====================================================
*/

.floating-button-l {
  position: absolute;
  left: 2%;
  bottom: 12%;
  width: 300px;
  height: 155px;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 3;
}

.floating-button-l img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

@media screen and (max-width: 600px) {
    .floating-button-l {
        width: 150px;
        height: 77px;
    }
}




/**
*
* MB wygląd archiwalnych plakatów
* =====================================================
*/

		.event-poster {
            position: relative; /* Konieczne dla pozycjonowania absolutnego elementów wewnętrznych */
            display: block;
            line-height: 0;
			height: 80vh;
			border-radius: 8px;
        }

        .event-poster .base-image { /* Usunięto .grayscale-middle-part z tej reguły */
            display: block;
            width: 100%;
            border-radius: 8px;
        }

        .event-poster .grayscale-middle-part {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* Pełna szerokość kontenera .event-poster */
            height: 100%; /* Pełna wysokość kontenera .event-poster */
            object-fit: cover;
            filter: grayscale(100%);
            /* clip-path pokazuje środkową 1/3 obrazka */
            clip-path: inset(33.33% 0 33.33% 0);
            z-index: 1; /* Grayscale part jest nad obrazem bazowym, ale pod tekstem */

            /* Dodane obracanie, aby pasowało do banera */
            transform-origin: center center; /* Obrót wokół środka elementu */
            transform: rotate(-5deg); /* Taki sam obrót jak baner */
        }

        .event-poster .status-banner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-5deg); /* Centruje i obraca baner */
            background-color: rgba(176, 0, 0, 0.85);
            color: white;
            padding: 12px 25px;
            border-radius: 6px;
            font-size: 1.6em;
            font-weight: bold;
            text-align: center;
            z-index: 2; /* Baner na samym wierzchu */
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            line-height: 1.3; /* Dodano dla lepszej separacji linii tekstu */
            white-space: nowrap; /* Zapobiega niechcianemu zawijaniu tekstu w banerze */
        }

/* Styl dla loadera */
        #loader-wrapper {
            position: fixed; /* Pozycjonowanie względem okna przeglądarki */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff; /* Kolor tła loadera (biały) */
            display: flex; /* Użycie flexbox do centrowania */
            justify-content: center; /* Centrowanie w poziomie */
            align-items: center; /* Centrowanie w pionie */
            z-index: 9999; /* Upewnienie się, że loader jest na wierzchu */
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Płynne znikanie */
            visibility: visible;
            opacity: 1;
        }

        .loader-spinner {
            border: 8px solid #f3f3f3; /* Jasnoszary okrąg */
            border-top: 8px solid #3498db; /* Niebieska część kręcąca się */
            border-radius: 50%; /* Tworzenie okręgu */
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite; /* Animacja kręcenia */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Styl dla głównej zawartości strony */
        #main-content {
            display: none; /* Początkowo ukryta */
            padding: 20px;
            font-family: 'Inter', sans-serif; /* Użycie czcionki Inter */
        }

        /* Klasa do ukrywania loadera */
        .loaded #loader-wrapper {
            opacity: 0;
            visibility: hidden;
        }

        /* Klasa do pokazywania zawartości */
        .loaded #main-content {
            display: block;
        }

/**
*
* MB media na samym końcu aby działały na cały kod
* =====================================================
*/


@media screen and (min-width: 600px) {
	#section1-about {
		background-position: top center;
	}
}

@media screen and (max-width: 600px) {
    .article {
        margin: 2.5vw;
        padding-left: 5px;
        font-size: larger;
        padding-bottom: 10px;
    }
    .article span {
        width: 50%;
    }
	#section4 .article.text {
		top: 12%;
	}
	#section-gallery .article img {
        height: auto;
        width: 100%;
	}
	.menu .menu-contacts {
		margin-top: 5% !important;
	}
	#section-code {
        height: 150%;
	}
	.menu .menu-social {
		margin-top: 0px;
	}
	.event-poster {
		height: auto;
    }
	.floating-button {
	  width: 150px;
	  height: 100px;
	}
}

@media screen and (max-width: 768px) {
    .overlay .footer {
        display: none;
    }
    .menu .footer {
        display: block;
        box-shadow: 5px 5px 15px #00000061;
        background: #ffe4c424;
        color: beige;
        text-align: center;
        text-shadow: 1px 1px 2px black;
        margin-top: 0 !important;
        font-size: 10px;
        bottom: 0;
        position: absolute;
    }
}


/* --- Pulsujący tekst --- */
.pulsating-text {
    display: inline-block; /* Wymagane, aby powiększanie (transform) działało na tekście */
    animation: textPulse 1.5s infinite ease-in-out; /* 1.5s to czas jednego pełnego cyklu */
}

@keyframes textPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1); /* Powiększa tekst o 10% */
        filter: brightness(1.5); /* Rozjaśnia tekst o 50% */
        text-shadow: 0 0 8px currentColor; /* Dodaje delikatną poświatę w aktualnym kolorze tekstu */
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}
/* --- Pulsujący tekst --- */


/* --- START AGE VERIFICATION STYLES --- */
#age-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    background-image: var(--tloGradient); /* Spójne tło */
    z-index: 99999999; /* Musi być wyżej niż loader (9999) */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* Kiedy ukrywamy modal */
#age-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Tło z logo */
#age-modal::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: var(--logo);
    background-size: 80vw;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.1; /* Delikatne logo w tle */
    z-index: -1;
}

.age-content {
    width: 90%;
    max-width: 600px;
    padding: 40px;
    border: 2px solid #c5a059;
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 0 0 30px rgba(197, 160, 89, 0.2);
    text-align: center;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.age-content h2 {
    font-family: "The Nautigal", cursive;
    font-weight: 700;
    font-size: clamp(3rem, 5vw, 5rem);
    margin: 0 0 20px 0;
    line-height: 1;
    /* Twój złoty gradient na tekście */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--goldGradient);
}

.age-content p {
    font-family: "Asap Condensed", sans-serif;
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #d8d8bd;
    line-height: 1.5;
}

.age-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-age {
    padding: 15px 40px;
    border: 1px solid #c5a059;
    background: transparent;
    color: #c5a059;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    font-family: "Asap Condensed", sans-serif;
    letter-spacing: 1px;
}

.btn-age:hover {
    background: #c5a059;
    color: #000;
    box-shadow: 0 0 20px #c5a059;
}

.btn-exit {
    border-color: #666;
    color: #888;
}

.btn-exit:hover {
    background: #333;
    color: #fff;
    border-color: #fff;
    box-shadow: none;
}

/* Blokada scrollowania */
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}
/* --- END AGE VERIFICATION STYLES --- */