/*
* Kineza Studio - Fixed Production Stylesheet
*/

/* ==================================================
   #Reset & Base Styles
   ================================================== */
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box; /* Dodane dla lepszej kontroli boxów */
}

html, body {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Zapobiega poziomemu przewijaniu */
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
	background: #11181f;
	font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #e6ecf2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

/* ==================================================
   #Accessibility
   ================================================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
a:focus, button:focus, [tabindex]:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ==================================================
   #Typography
   ================================================== */
h1, h2, h3, h4, h5, h6 {
	color: #fff;
	font-family: "Canela-Light", serif;
	font-weight: normal;
}
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px; }
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
strong { font-weight: bold; }

/* ==================================================
   #Main Page Styles
   ================================================== */
.wrap {
	width: 100%;
	overflow: hidden;
	margin: 0; /* Usunięcie marginesów */
	padding: 0; /* Usunięcie paddingu */
}

/* Container poprawka */
.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px; /* Dodane padding dla bezpieczeństwa */
}

/* --- Header Section --- */
#section1 {
	position: relative;
	width: 100%;
	height: 100vh;
	color: #fff;
	margin: 0;
	padding: 0;
}

.video-background-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.video-background-container video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.se-content {
  position: absolute;
  top: 33vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 70%;
  padding: 0 20px;
  text-align: left;
  z-index: 1;
}

/* Nagłówek */
.se-content h1 {
  font-family: 'Canela-Light', serif;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* Marka */
#kineza {
  font-size: clamp(60px, 10vw, 110px);
  color: #fff;
	font-family: 'Canela-Light', serif;
  display: block;
  margin-bottom: 0.2em;
}
#claim {
  font-size: clamp(1.6rem, 2.0vw, 2.3rem);
  color: rgba(255,255,255,255);
  display: block;
  margin-top: 0.2em;
}
/* Link */
#opis00 {
  font-size: clamp(1.6rem, 2.0vw, 2.3rem);
  line-height: 1.2;
	font-family: 'Canela-Light', serif;
  color: rgba(255,255,255,0.85);
  margin-top: 0.2em;
}

#opis00 a {
  text-decoration: none;
  color: rgba(255,255,255,1);
  transition: color 0.3s ease;
  font-weight: 200;
}

#opis00 a:hover,
#opis00 a:focus {
  color: rgba(255,255,255,0.5);
}

/* --- Text Sections --- */
#section3 {
	background-color: #11181f;
	padding: 100px 0;
	width: 100%;
	margin: 0;
}

#section5 {
	background-color: #11181f;
	padding: 80px 0;
	width: 100%;
	margin: 0;
}


/* Nowe, poprawione style dla logo */
.logo-bottom {
		    display: block;
	padding: 0px 0;
	    margin: 0 auto 35px;
	    /* TA LINIA ODPOWIADA ZA PŁYNNE SKALOWANIE */
	    width: clamp(22px, 3.5vw, 34px);
	    height: auto;

	}


#section5-services {
	background-color: #11181f;
	padding: 100px 0;
	width: 100%;
	margin: 0;
		background: linear-gradient(180deg,rgba(18, 24, 31, 1) 75%, rgba(30, 2, 100, 1) 100%);
}

#section5-hand2 {
	background-color: #14481f;
	padding:100px 0;
	width: 100%;
	margin: 0;
}




 #section3 h3 p,#section5 h3 p,#section5-services h3 p {
	font-family: "Canela-Light", serif;
	line-height: 1.4;
	margin-top: 100px;
	padding: 0;
	font-weight: 300;
	font-size: clamp(1.6rem, 2vw, 2.2rem);
	color: rgba(255,255,255,0.85);
	text-align: center;
	max-width: 100%;
	word-wrap: break-word;
	hyphens: auto;
}

#experience-heading  p, #experience-heading h3 {
  font-family: "Canela-Light", serif;
  line-height: 1.8;
  margin-top: 100px;
  padding: 0;
  font-weight: 300;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  color: rgba(255,255,255,0.85);
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
  hyphens: auto;
	}

/* POPRAWKA: Zastąpiono '#casestudies p' nowym selektorem h2
   i przeniesiono style z usuniętej sekcji '#section5-hand' */
h2#casestudies-heading {
  font-family: "Canela-Light", serif;
  line-height: 1.8;
  margin: 0; /* Resetowanie domyślnych marginesów h2 */
  padding: 140px 0; /* Przejęcie paddingu z usuniętej sekcji #section5-hand */
  font-weight: 300; /* Resetowanie domyślnego pogrubienia h2 */
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  color: rgba(255,255,255,0.85);
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
  hyphens: auto;
  background-color: #11181f; /* Przejęcie tła z #section5-hand */
}

/* POPRAWKA: Usunięto stary selektor, który został zastąpiony powyższym */
/*
#casestudies  p, #casestudies h3 {
  font-family: "Canela-Light", serif;
  line-height: 1.8;
  margin-top: 0px;
  padding: 0;
  font-weight: 300;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  color: rgba(255,255,255,0.85);
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
  hyphens: auto;
}
*/

/* POPRAWKA: Ta sekcja została usunięta z HTML, jej style przeniesiono do h2#casestudies-heading */
/*
#section5-hand {
	background-color: #11181f;
	padding:140px 0;
	width: 100%;
	margin: 0;
}
*/

#section5-hand #experience-heading h2 {
  font-family: "Canela-Light", serif;
  line-height: 1.4;
  margin-top: 10px;
  padding: 0;
  font-weight: 300;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  color: rgba(255,255,255,0.85);
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
  hyphens: auto;
}

#about-heading h2 {
  font-family: "Canela-Light", serif;
  font-weight: 200;
	line-height: 1.4;
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  color: rgba(255,255,255,0.85);
  margin-top: 60px;
}

#about-heading h3 {
  font-family: "Canela-Light", serif;
  font-weight: 200;
	line-height: 1.4;
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  color: rgba(255,255,255,0.85);
  margin-top: 60px;
}

#about-heading .creative-title {
  display: block;
  margin-bottom: 0px;
  font-weight: 200;
}

.service-block {
  font-family: "Canela-Light", serif;
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  margin-bottom: 0px;
  text-align: left;
	max-width: 100%;
	word-wrap: break-word;
	hyphens: auto;

}

.service-note {
  font-family: "Canela-Light", serif;
	line-height: 1.4;
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  color: rgba(255,255,255,0.85);
  margin-top: 90px;
  text-align: left;
	max-width: 100%;
	word-wrap: break-word;
	hyphens: auto;

}

#section3 #about-heading h3,
#section3 #about-heading h2,
#section3 #about-heading p, #section5 h2 p, #section5-services h2 p {
	font-family: "Canela-Light", serif;
	line-height: 1.4;
	margin-top: 10px;
	padding: 0;
	font-weight: 200;
	font-size: clamp(1.4rem, 1.7vw, 1.8rem);
	color: rgba(255,255,255,0.85);

	text-align: left;
	max-width: 100%;
	word-wrap: break-word;
	hyphens: auto;
}
.founding-year {
  font-family: "Canela-Light", serif; /* dziedziczenie */
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);               /* lekko mniejszy font */
  color: rgba(255,255,255,0.85);                     /* ten sam kolor */

}

.se-content3 .creative-title {
  opacity: 0.70;           /* przezroczystość tekstu */
        /* opcjonalnie pogrubienie */
  display: inline-block;  /* pozwala lepiej kontrolować wygląd */
}
.section-title {
	font-family: 'Canela-Light', serif;
	font-size: 32px;
	color: #e6ecf2;
	margin-top: 80px;
	margin-bottom: 40px;
	text-align: left;
}

/* --- Contact Section (Footer) --- */
#section4 {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 50px 0 30px 0;
	background: #1d0065;
	color: #1d0065;
	margin: 0;
}

.se-content4 {
	margin-top: 15px;
	position: relative;
	text-align: center;
	width: 100%;
}

.footer-greeting {
	font-family: 'Canela-Light', sans-serif;
	font-size: clamp(1.6rem, 2vw, 2.2rem);
	font-weight: 400;
	color: #fff;
}

.contact-row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 20px 0; /* Dodane padding */
}

.contact-column {
	flex: 1;
	min-width: 280px;
	text-align: center;
}

.contact-column p {
	font-family: 'Canela-Light', sans-serif;
	font-size: 21px;
	line-height: 33px;
}

#section4 a {
	text-decoration: none;
	color: rgba(255,255,255,0.5);
	transition: color 0.3s ease;
}

#section4 a:hover, #section4 a:focus {
	color: rgba(255,255,255,1);
}

/* POPRAWKA: Nie było tu selektora #studioat, więc nie trzeba nic zmieniać.
   Style są poprawnie nadawane na tag <a>. */

.copyright-notice {
	text-align: center;
	margin-top: 100px;
	font-size: 12px;
	font-family: 'Lato', sans-serif;
	color: rgba(255, 255, 255, 0.4);
}

/* ==================================================
   #Project Tiles
   ================================================== */
#section_under {
	background-color: #11181f;
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.project-tile {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 400px;
	padding: 2rem;
	box-sizing: border-box;
	background-color: #11181f;
	width: 100%;
	margin: 0;
	overflow: hidden;  /* ⬅️ KLUCZOWA POPRAWKA: ukrywa overflow */
}

.project-tile::before { /* Layer for background images */
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	transition: transform 0.7s ease;
	will-change: transform;
	transform-origin: center center;
}

.project-tile::after { /* Darkening overlay */
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, 0.15);
	opacity: 1;
	z-index: 2;
	transition: opacity 0.7s ease;
	will-change: opacity;
}

a:hover .project-tile::before, a:focus .project-tile::before {
	transform: scale(1.03);  /* ⬅️ ZMNIEJSZONE z 1.05 na 1.03 */
}

a:hover .project-tile::after, a:focus .project-tile::after {
	opacity: 0;
}

.project-tile video.tile-video {
	position: absolute;
	top: 50%; left: 50%;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: 1;
	transition: transform 0.7s ease;
	will-change: transform;
	transform-origin: center center;
}

a:hover .project-tile video.tile-video, a:focus .project-tile video.tile-video {
	transform: translate(-50%, -50%) scale(1.03);  /* ⬅️ ZMNIEJSZONE z 1.05 na 1.03 */
}

/* POPRAWKA: Synchronizacja alignmentu z nagłówkiem Kineza */
.se-content0 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	top: 50%;
	left: 50%;                          /* Powrót do wyśrodkowania jak w Kineza */
	transform: translate(-50%, -50%);   /* Pełne wyśrodkowanie jak w Kineza */
	text-align: left;
	width: 100%;
	max-width: 70%;
	gap: 0.2rem;                  /* Taka sama szerokość jak Kineza */
	z-index: 3;
	padding: 0 20px;                    /* Taki sam padding jak Kineza */
	box-sizing: border-box;
}

/* Styl nagłówka */
.project-tile h2, h3 {
	position: static;
	font-family: 'Canela-Light', serif;
	font-weight: 400;
	color: rgba(255,255,255,0.85);
	font-size: clamp(2.3rem, 3.4vw, 3.8rem);
	line-height: clamp(1.2rem, 2vw, 4rem);
	margin: 0;
	width: 100%;
	/* Dodane właściwości dla lepszego łamania wyrazów */
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	word-break: break-word;
}

/* POPRAWKA: Zmiana selektora id="title0" na class="tytul-projektu" */
.tytul-projektu {
	color: #fff;
	line-height: calc(0.9em + 0.6vw);
	display: block;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* POPRAWKA: Zmiana selektora id="opis0" na class="opis-projektu" */
.opis-projektu {
	color: rgba(255,255,255,0.85);
	font-family: 'Canela-Light';
	font-weight: 300;
	font-size: clamp(1.6rem, 2.0vw, 2.3rem);
	line-height: clamp(1.7rem, 2.0vw, 2.2rem);
	margin-top: 0.6rem;
	text-align: left;
	display: block;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	/* Dodane właściwości dla lepszego łamania wyrazów */
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	word-break: break-word;
}

/* --- Individual Backgrounds for Tiles --- */
#section0::before { background-image: url(../images/background_001.jpg); }
#section0a::before { background-image: url(../images/background_018.jpg); }
#section0b::before { background-image: url(../images/background_004.jpg); }
#section0d::before { background-image: url(../images/background_003.jpg); }
#section0e { background-position: 50% 65%; }
#section0e::before {
	background-image: url(../images/gifs/este_lauder/bg001_0049.jpg);
	background-position: 50% 65%;
}
#section0f { background-position: 50% 55%; }
#section0f::before {
	background-image: url(../images/gifs/merc/merc_001_1682.jpg);
	background-position: 50% 55%;
}
#section0g { background-position: 50% 15%; }
#section0g::before {
	background-image: url(../images/gifs/tvp/sh0080_0054.jpg);
	background-position: 50% 15%;
}
#section0h { background-position: 50% 40%; }
#section0h::before {
	background-image: url(../images/gifs/sacura/bg0042.jpg);
	background-position: 50% 40%;
}
#section0i::before { background-image: url(../images/gifs/nfm/skjold_735.jpg); }
#section0j { background-position: 50% 75%; }
#section0j::before {
	background-image: url(../images/background_006.jpg);
	background-position: 50% 75%;
}
#section0jj { background-position: 50% 75%; }
#section0jj::before {
	background-image: url(../images/gifs/eps_ret/background_003b.jpg);
	background-position: 50% 75%;
}
#section0k::before { background-image: url(../images/gifs/wtk/wtk_0133.jpg); }
#section0l { background-position: 50% 55%; }
#section0l::before {
	background-image: url(../images/jpg/bor_10.jpg);
	background-position: 50% 55%;
}
#section0m { background-position: 50% 75%; }
#section0m::before {
	background-image: url(../images/gifs/alekino/background_007.jpg);
	background-position: 50% 75%;
}
#section0n { background-position: 50% 55%; }
#section0n::before {
	background-image: url(../images/gifs/stare/GH_3.jpg);
	background-position: 50% 55%;
}
#section0r { background-position: 50% 35%; }
#section0r::before {
	background-image: url(../images/gifs/stare/helios.jpg);
	background-position: 50% 35%;
}

/* ==================================================
   #Overlay Navigation Menu
   ================================================== */
div.toolbar-wrapp {
	position: fixed;
	display: block;
	top: 4%;
	right: 4%;
	z-index: 1001;
}

div.sticky-toolbar {
	position: relative;
	width: 20px;
	height: 20px;
	float: left;
	transition: all .2s ease-in-out;
}

div.sticky-toolbar a {
	display: block;
	width: inherit;
	height: inherit;
}

div.sticky-toolbar a span {
	display: block;
	position: absolute;

	height: 2px;
	width: clamp(10px, 3vw, 20px);
	background-color: #000;
	transition: all .3s ease;
}

div.sticky-toolbar a span.line_1 { top: 0; }
div.sticky-toolbar a span.line_2 { top: 8px; }
div.sticky-toolbar a span.line_3 { top: 16px; }
div.sticky-toolbar.white a span { background-color: #fff; }

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.9);
	z-index: 1000;
	font-family: "Canela-Light", sans-serif;
	font-style: normal;
	font-weight: 300;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility 0s .5s;
}

.overlay.open {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s;
}

.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	outline: 0;
	z-index: 1002;
}

.overlay nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	top: 0;
	transform: none;
	text-align: center;
	perspective: 1200px;
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}

.overlay ul li {
	display: block;
	width: 100%;
	text-align: center;
}

.overlay ul li a {
	font-weight: 400;
	font-size: clamp(3rem, 4vw, 6rem);
	line-height: calc(1em + 0.8vw);
	text-decoration: none;
	display: block;
	color: #d9d9d9;
	transition: color 0.2s ease;
	padding: 1rem 0;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #fff;
	/* POPRAWKA: Usunięcie białej ramki przy focus */
	outline: none;
	box-shadow: none;
}

/* Ukrywa ikonkę hamburgera, gdy menu jest otwarte */
.overlay.open + .toolbar-wrapp {
	opacity: 0;
	pointer-events: none; /* Zapobiega przypadkowemu kliknięciu na niewidoczną ikonkę */
}

/* Dodaje płynne przejście do chowania i pokazywania się ikonki */
.toolbar-wrapp {
	transition: opacity 0.5s ease;
}

/* ==================================================
   #Responsiveness
   ================================================== */
@media screen and (max-width: 768px) {
	.project-tile {
		min-height: 280px;
		padding: 1.5rem 1rem;
		overflow: hidden;  /* Upewnij się że overflow jest ukryty również na mobile */
	}

	.se-content0 {
		max-width: 85%;     /* Na mobile jak Kineza */
		padding: 0 15px;    /* Na mobile jak Kineza */
	}

	#section1 h1 {
		max-width: 85%;
		padding: 0 15px;
	}
	#section3 {
		padding: 80px 0;
	}

	/* POPRAWKA: Zmiana paddingu dla nowego nagłówka H2 */
	h2#casestudies-heading {
		padding: 55px 0;
	}
	/* POPRAWKA: Usunięcie starego selektora */
	/*
	#section5-hand {
		padding: 55px 0;
	}
	*/

	#section5-services {
		padding: 40px 0;
	}
	#section5-hand2 {
		padding: 40px 0;
	}
	#section5 {
		padding: 100px 0;
	}
	#section4 {
		padding: 40px 0;
	}
	.container {
		padding: 0 15px;
	}

	.contact-row {
		padding: 40px 15px 0;
	}

	/* Jeszcze bardziej subtelna animacja na mobile */
	a:hover .project-tile::before, a:focus .project-tile::before {
		transform: scale(1.02);
	}

	a:hover .project-tile video.tile-video, a:focus .project-tile video.tile-video {
		transform: translate(-50%, -50%) scale(1.02);
	}
}

@media (max-width: 480px) {
	.overlay ul li a {
		font-size: clamp(1.5rem, 8vw, 3rem);
		line-height: calc(1em + 4vw);
		padding: 0.5rem 0;
	}

	.project-tile {
		min-height: 250px;
		padding: 1rem 0.5rem;
		overflow: hidden;
	}

	.se-content0 {
		max-width: 95%;     /* Na bardzo małych ekranach */
		padding: 0 10px;
	}

	/* Minimalna animacja na bardzo małych ekranach */
	a:hover .project-tile::before, a:focus .project-tile::before {
		transform: scale(1.01);
	}

	a:hover .project-tile video.tile-video, a:focus .project-tile video.tile-video {
		transform: translate(-50%, -50%) scale(1.01);
	}

}



/* ==================================================
   #Top Right UI (Menu + Language Switcher)
   ================================================== */

/* Kontener dla przełącznika i menu */
.top-right-ui {
	position: fixed;
	top: 4%;
	right: 4%;
	z-index: 1001;
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Przełącznik języka */
.top-right-ui .language-switcher {
	font-family: "Canela-Light", serif;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.top-right-ui .language-switcher a {
	color: #fff;
	text-decoration: none;
	font-weight: 300;
	font-size: clamp(16px, 1.5vw, 20px);
	padding: 5px;
	transition: color 0.3s ease;
}

.top-right-ui .language-switcher a:hover,
.top-right-ui .language-switcher a:focus {
	color: rgba(255, 255, 255, 0.7);
	outline: none;
}

/* Usuwamy stare pozycjonowanie hamburgera */
.top-right-ui .toolbar-wrapp {
	position: relative;
	top: auto;
	right: auto;
}

/* Ukrywanie przełącznika gdy menu jest otwarte */
.overlay.open ~ .top-right-ui .language-switcher {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Ukrywanie hamburgera gdy menu jest otwarte */
.overlay.open ~ .top-right-ui .toolbar-wrapp {
	opacity: 0;
	pointer-events: none;
}

/* Płynne przejście dla całego kontenera */
.top-right-ui {
	transition: opacity 0.5s ease;
}

@media screen and (max-width: 768px) {
	.top-right-ui {
		gap: 25px;
	}
}

@media (max-width: 480px) {
	.top-right-ui {
		gap: 20px;
		top: 3%;
		right: 3%;
	}

	.top-right-ui .language-switcher a {
		font-size: clamp(14px, 4vw, 16px);
	}
}









/* Performance optimization for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.video-background-container video {
		animation: none;
	}
	.project-tile::before,
	.project-tile video.tile-video {
		transition: none;
	}
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}