/* ===========================
   General
   =========================== */

html, body {
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: #000000;
	background-image: url('../images/bg.png');
	background-repeat: repeat;
	background-position: 0 0;
}

:root
{
  	--gold-color: #fef9a1;
  	--red-color: #a60000;
	--blue-color: #10b2cb;
}

.sr-only {
	position: absolute !important;
	width: 1px; 
	height: 1px; 
	padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip: rect(0, 0, 0, 0); 
	white-space: nowrap; 
	border: 0;
}

.text
{
	font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	font-size:25px;
	text-shadow: 0 6px 15px rgba(0,0,0,0.7);
	text-align:left;
	color:var(--gold-color);
}

/* ===========================
   Logo
   =========================== */

#logo
{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	padding-top: 20px;
}

#logo img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border: 4px solid var(--red-color);
	box-sizing: border-box;
	box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

#companyLogo
{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
	padding-top: 20px;
}

#companyLogo img {
	display: block;
	max-width: 100%;
	width: 350px;
	height: 350px;
	margin: 0 auto;
	border: 4px solid var(--red-color);
	box-sizing: border-box;
	box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

/* ===========================
   Pitch
   =========================== */

#pitch
{
	width: min(700px, 90%);
	margin:30px auto;
	overflow:hidden;
	background: rgba(0,0,0,0.35);
	padding: 14px 18px;
	border-radius: 8px;
	box-shadow: 0 8px 200px var(--red-color) inset, 0 6px 20px rgba(0,0,0,0.35);
}

#pitch p
{
	margin-bottom:40px;
	font-size:30px;
	color: var(--gold-color);
	text-shadow: 0 6px 22px rgba(0,0,0,0.7);
}

#pitch ul li
{
	list-style: "★ " outside none;
	font-size:25px;
	margin: 0 0 30px 0;
	padding-left: 5px;
	color: var(--gold-color);
	text-shadow: 0 6px 22px rgba(0,0,0,0.7);
}

/* ===========================
   Screenshots
   =========================== */

#ssDescr
{
	font-size:20px;
	width: min(750px, 95%);
	margin:0 auto;
}

#screenshots
{
	width: min(800px, 95%);
	margin: 0 auto;
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-start;
}

#screenshots img
{
	display: inline-block;
	margin: 0;
	border: none;
	max-width: 100%;
	height: auto;
}

/* Mobile: reduce gap and ensure images fit */
@media (max-width: 768px) {
	#screenshots {
		gap: 10px;
		width: 100%;
	}
	
	#screenshots a {
		max-width: calc(97% - 5px);
	}
}

#screenshots a {
	position: relative;
	display: inline-block;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease;
	transform-origin: center;
	outline: none;
	border: 4px solid var(--gold-color);
	box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

#screenshots a img {
	display: block;
	transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
	will-change: transform;
	position: relative;
	z-index: 2;
	box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

#screenshots a::before {
	content: '';
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: 4px solid var(--gold-color);
	transform: scale(1);
	transform-origin: center;
	transition: transform 220ms ease;
	pointer-events: none;
	z-index: 1;
}

#screenshots a::after {
	content: '👁️';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	color: rgba(255,255,255,0.95);
	background: rgba(0,0,0,0);
	opacity: 0;
	transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
	transform: scale(0.95);
	pointer-events: none;
	z-index: 3;
}

#screenshots a:hover::after,
#screenshots a:focus::after {
	background: rgba(0,0,0,0.45);
	opacity: 1;
	transform: scale(1);
}

#screenshots a:hover::before,
#screenshots a:focus::before {
	transform: scale(1.06);
}

#screenshots a:hover img,
#screenshots a:focus img {
	transform: scale(1.08);
	box-shadow: 0 38px 96px rgba(0,0,0,0.65), 0 0 0 10px rgba(0,0,0,0.08);
	filter: saturate(1.03);
}

#screenshots a:hover,
#screenshots a:focus {
	box-shadow: 0 38px 96px rgba(0,0,0,0.65);
}

/* ===========================
   Social Links
   =========================== */

#socialLinks
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	margin: 30px auto;
	flex-wrap: wrap;
}

#socialLinks a {
	display: inline-block;
	transform-origin: center;
	transform-style: preserve-3d;
	perspective: 1000px;
}

#socialLinks img
{
	border:2px solid var(--gold-color);
	margin: 0;
	display: block;
	transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, filter 260ms ease;
	will-change: transform;
	box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

#socialLinks a:hover img,
#socialLinks a:focus img {
	transform: perspective(1000px) rotateX(28deg) rotateY(-28deg) scale(1.24) translateZ(10px);
	box-shadow: 0 44px 112px rgba(0,0,0,0.9), 0 0 0 12px rgba(0, 0, 0, 0.12);
}

#socialLinks a:active img {
	transform: perspective(1000px) rotateX(8deg) rotateY(-8deg) scale(1.08) translateZ(2px);
}

#contactForm
{
	width: min(900px, 95%);
	margin:0 auto;
}

#contactForm p
{
	margin-bottom:10px;
}

#contactForm li
{
	list-style:none;
}

#name {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#submit
{
	font-size:20px;
}

input,textarea
{
	border:2px solid var(--gold-color);
	padding:5px;
	margin-bottom:30px;
	background-color:#1A000A;
	box-sizing: border-box;
}

input
{
	width: min(400px, 90%);
}

textarea
{
	width: min(800px, 95%);
	height:200px;
}

#submit
{
	width:80px;
	height:40px;
	text-align:center;
	background-color:#3A222A;
}

#copyright
{
	width: min(850px, 95%);
	margin: 0 auto;
	padding-bottom: 20px;
}

#copyright p
{
	font-size:12px;
	color: var(--gold-color);
	text-align: center;
	text-shadow: 0 6px 10px rgba(0,0,0,0.7);
}

.lightbox-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.6);
	z-index: 9999;
	padding: 6px;
	box-sizing: border-box;
	opacity: 0;
	animation: lightbox-fade-in 220ms ease forwards;
}
.lightbox-overlay.closing {
	animation: lightbox-fade-out 180ms ease forwards;
}
.lightbox-inner {
	position: relative;
	max-width: calc(100vw - 12px);
	max-height: calc(100vh - 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 6px;
}
.lightbox-inner img {
	max-width: calc(100vw - 12px);
	max-height: calc(100vh - 12px);
	width: auto;
	height: auto;
	object-fit: contain;
	box-sizing: border-box;
	display: block;
	border: 1px solid var(--gold-color);
	border-radius: 1px;
	box-shadow: 0 18px 40px rgba(0,0,0,0.6);
	transform: none;
}
.lightbox-close {
	position: fixed;
	top: 12px;
	right: 12px;
	background: var(--gold-color);
	color: #000;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,0.4);
	z-index: 10001;
}

@keyframes lightbox-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes lightbox-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}
.lightbox-overlay[hidden] { display: none; }

.no-scroll { overflow: hidden; }