/* Additive rules for behavior implemented fresh in the Astro rebuild
   (kept separate from the ported legacy stylesheet on purpose). */

.l-overlay {
	transition: opacity 0.5s ease;
}
.l-overlay.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* The ported legacy stylesheet hides the header by default (display:none)
   and only reveals it via inline style from the original (unrecoverable,
   minified) all453b.js. Show it unconditionally instead — there's no
   legitimate reason found in the CSS to ever keep it hidden. */
.l-header {
	display: flex;
	align-items: flex-start;
	/* leave room for the fixed .top-notice bar (components/TopNotice.astro) */
	margin-top: 8px;
}

/* The home hero (.p-index) is `position: fixed` with no background color,
   and its flow parent (.l-content) has no explicit height — so the static
   footer right after it collapsed to the very top of the page and showed
   through the hero's transparent areas. Give the hero an opaque backdrop
   and make sure its flow container is always at least one viewport tall. */
.p-index {
	background-color: #fff;
}
.l-content {
	min-height: 100vh;
}

#main-menu.is-open {
	display: block;
}

#main-menu .l-menu-active {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease 0.25s;
}
#main-menu.is-open .l-menu-active {
	opacity: 1;
	pointer-events: auto;
}

.l-menu-bgs .l-menu-bg,
.l-menu-bgs2 .l-menu-bg {
	transition: width 0.7s cubic-bezier(0.77, 0, 0.175, 1), left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
#main-menu:not(.is-open) .l-menu-bgs .l-menu-bg,
#main-menu:not(.is-open) .l-menu-bgs2 .l-menu-bg {
	width: 10%;
	left: 50%;
}
#main-menu.is-open .l-menu-bgs .l-menu-bg,
#main-menu.is-open .l-menu-bgs2 .l-menu-bg {
	width: 100%;
	left: 0;
}

body.menu-open {
	overflow: hidden;
}

.p-what-service__slider-object {
	transition: opacity 0.4s ease;
}
.p-what-service__slider-title h3 span,
.p-what-service__slider-text p {
	transition: opacity 0.4s ease;
}

/* The ported legacy stylesheet reveals most photos/video via a "cover_scale"
   keyframe that only animates transform, relying on inline opacity toggling
   from the original (unrecoverable, minified) all453b.js to make them visible
   at all. Restore a matching opacity fade here so images never stay stuck
   invisible behind their blurred ".shadow" duplicate. */
img.cover,
video.cover {
	opacity: 0;
	transform: scale3d(1.08, 1.08, 1);
	transition: opacity 1.1s ease, transform 1.3s ease;
}
.start img.cover,
.start video.cover,
.animation-start-delay img.cover,
.animation-start-delay video.cover {
	opacity: 1;
	transform: scale3d(1, 1, 1);
}

/* Project captions sit on top of the pastel glow image; keep them readable. */
.p-prj-caption-credit {
	color: #2b2b2b;
}

/* Project titles are drawn over the thumbnail; a bottom gradient keeps
   them readable on bright shop screenshots. */
.p-prj-thum-main {
	position: relative;
}
.p-prj-thum-main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 40;
}

.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;
}

/* Home hero is a normal-flow, viewport-tall block so crawlable content can follow it. */
.p-index {
	position: relative;
	overflow: hidden;
}

/* The white loading overlay must never depend on JavaScript: without this it would stay on screen
   forever when scripts are slow, blocked or disabled, and it delayed the first paint of the content
   (LCP) until the script bundle had executed. It now fades out on its own after a short moment. */
#loading {
	animation: devback-overlay-out 0.3s ease 0.3s forwards;
}
@keyframes devback-overlay-out {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* The legacy footer row was designed for a single KONTAKT link; with four links the fixed 122px
   widths pushed the page wider than the viewport on phones and tablets. Let the links size to
   their text and share the row. */
.l-footer-contact {
	width: auto;
	margin-right: 32px;
	white-space: nowrap;
}
@media (max-width: 750px) {
	.l-footer {
		box-sizing: border-box;
		padding: 0 5vw;
	}
	.l-footer-contact {
		flex: 1 1 auto;
		margin: 147px 0 0 0;
		font-size: 12px;
		letter-spacing: 2px;
		text-align: center;
	}
}

/* The fixed logo (200px) covered the top of the first project card on /realizacje/. */
.p-prj-list {
	padding-top: 240px;
}
@media (max-width: 750px) {
	.p-prj-list {
		padding-top: 235px;
	}
}

/* Contact details on /kim-jestesmy/ were rendered in the browser's default link blue. */
.p-who-company-info-text a {
	color: inherit;
}

/* Reveal-mask headings clip their text to a box as tall as the font size. The replacement font has a
   taller default line height than the original, which cut off the bottom of capitals (E, F, L). */
.p-who-tagline-text-box span {
	line-height: 1.05;
}

/* The slider headline sat underneath the floating 3D objects, which hid half of its words. */
.p-what-service__slider-tagline {
	position: relative;
	z-index: 5;
}

/* These taglines became <h2> for a valid heading order; keep the font size they had as <h3>. */
.p-who-tagline-text,
.p-what-tagline {
	font-size: 18.72px;
}