/* ⚠️ READ _Spec_Starsoft_StyleGuide.md BEFORE making ANY changes */

html,
body {
	background-color: rgb(30, 30, 30);
	margin: 0;
	padding: 0;
}

/* Fade in page content after NavBar is visible */
#full_View,
#Savior_NavBar_Container {
	opacity: 0;
	transition: opacity 0.3s ease-in 0.15s;
}
body.Chrome_Ready #full_View,
body.Chrome_Ready #Savior_NavBar_Container {
	opacity: 1;
}

@font-face {
	font-family: 'NoplatoMono';
	src: url('../Fonts/Noplato%20Mono.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

#content {
	color: rgb(0, 0, 0);
	position: relative;
}

#full_View {
	margin-top: -28px;
}

/* ============================================================================== */
/* BANNER */
/* ============================================================================== */

.Savior_Banner {
	position: relative;
	display: block;
	text-align: center;
	margin-top: 0px;
	height: 624px;  /* Fixed height for consistent rendering */
	overflow: hidden;  /* Clip parallax images that extend beyond */

	/* Background fills the banner area */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: rgb(34, 78, 106);
	z-index: 1;  /* Below backdrop but allows children (Steam button) to have higher z-index */
}

/* TODO: Restrict scaling on this to 100%. */
.Savior_Banner .parallax {
  position: absolute;
  bottom: 0;
  /* centers layer horizontally */
  left: 50%;
  transform: translate3d(-50%, 0, 0); 
  height: 512px;  /* Match banner height */
  width: auto;  /* Width scales proportionally to maintain aspect ratio */
  will-change: transform;
  z-index: 1;  /* Lower than Steam button to allow interaction */
  transition: opacity 0.5s ease-in-out;  /* Smooth fade when hiding/showing layers */
}

.Savior_Banner .parallax.base {
  /* Defines container height */
  position: relative;
  display: block;
  height: 624px;
  width: auto;
  left: 50%;
  top: -112px;
  transform: translateX(-50%);
  z-index: 1;
}

/* HOME text layer - second from back, no scrolling */
.Banner_Home_Text {
	position: fixed;
	top: 48px;
	left: 50%;
	transform: translateX(calc(-50% + 1px));
	z-index: 1;
	font-size: 12px;
	color: var(--White);
	font-family: PixelPower;
	pointer-events: none;
	text-transform: uppercase;
}

/* Layer visibility controlled by JavaScript based on actual banner width */
.Savior_Banner .parallax.layer-hidden {
  opacity: 0;  /* Fade out instead of display:none */
  pointer-events: none;  /* Disable interactions when hidden */
}

/* Progressive haze effect - gets thicker for layers further back */
.Savior_Banner .parallax[data-parallax="0.8"] {
  filter: brightness(0.80) contrast(0.9);
}

.Savior_Banner .parallax[data-parallax="0.6"] {
  filter: brightness(0.85) contrast(0.925);
}

.Savior_Banner .parallax[data-parallax="0.4"] {
  filter: brightness(0.90) contrast(0.95);
}

.Savior_Banner .parallax[data-parallax="0.25"] {
  filter: brightness(0.95) contrast(0.975);
}

.Savior_Banner .parallax[data-parallax="0.1"] {
  filter: brightness(1) contrast(1);
}

/* ============================================================================== */
/* TRAILER GROUP */
/* ============================================================================== */

/* Trailer Group - 3 column grid layout */
#Trailer_Group {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	justify-items: center;
	gap: 0px;
	max-width: 1200px;
	margin: 0 auto 2% auto;
}

#Button_Trailer {
	position: relative;
	grid-column: 2;
	justify-self: center;
	background-color: black;
	width: 288px;
	height: 288px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 51;
	margin-top: -112px;
}

/* Border straddles video edge: 2px inside, 2px outside */
#Button_Trailer::after {
	content: '';
	position: absolute;
	inset: -2px;
	border: 4px solid var(--color-highlight);
	border-radius: 50%;
	overflow: visible;
	pointer-events: none;
}

#Button_Trailer:hover {
	filter: brightness(1.15);
}

#Button_Trailer video {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
	pointer-events: none;
}

.Button_Trailer_Play_Icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0.75;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#Button_Trailer:hover .Button_Trailer_Play_Icon {
	opacity: 1;
}

#Trailer_Background {
	position: absolute;
	top: -128px;
	left: 50%;
	transform: translateX(-128px);
	border: 2px solid var(--color-highlight);
	width: 256px;
	height: 256px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 51;
	overflow: hidden;
}

#Trailer_Background video {
	width: 100%;
	height: 100%;
	object-fit: none;
	object-position: center;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	transform: scale(1);
}

#Trailer_Background:hover {
	border-color: var(--color-accent-orange);
}

/* Position Steam Button on Savior Page */
.Button_Steam {
	grid-column: 1;
	justify-self: end;
	margin-right: 8px;
	--Button_Color: var(--Steam);
	color: var(--Steam) !important;
}

/* Position Patreon Button on Savior Page */
.Button_Patreon {
	grid-column: 3;
	justify-self: start;
	margin-left: 8px;
	--Button_Color: var(--Patreon);
	color: var(--Patreon) !important;
}

.Button_Steam,
.Button_Patreon {
	
	position: relative;
	height: 72px;
	width: auto;
	border-color: var(--White_250) !important;
	background-color: var(--Button_Color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
	image-rendering: auto;
}

.Button_Patreon:hover,
.Button_Steam:hover {
	filter: brightness(1.15);
}

.Logo_Patreon,
.Logo_Steam {
	filter: brightness(0) invert(1);
	height: 60px;
	width: auto;
}

.Button_Patreon_Text,
.Button_Steam_Text {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: var(--White_250);
	text-align: center;
	white-space: nowrap;
	position: absolute;
	left: 36.5%;
	top: 8.5%;
}

/* ============================================================================== */
/* ABOUT */
/* ============================================================================== */

.Backdrop {
	position: relative;
	padding-top: 8px;
	padding-bottom: 32px;
	background: linear-gradient(to bottom, var(--Blue_200) 0%, var(--Beige_230) 25vh, var(--Beige_230) 100%);
	z-index: 20;  /* Above banner (z-index: 1) but below Steam button (z-index: 60 within banner) */
}

#About_Frame {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

#About_Title {
	font-family: Arial, sans-serif;
	font-size: 200%;
	font-weight: bold;
	text-align: center;
	color: var(--Gray_120);
	margin-bottom: 2%;
}

#About_Scroll_Chevron {
	display: block;
	text-align: center;
	color: var(--Gray_120);
	margin: 0;
	opacity: 0.7;
	animation: bounce 2s infinite;
}

#About_Scroll_Chevron svg {
	display: inline-block;
	width: 32px;
	height: 32px;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

#About_Text {
	font-size: 110%;
	text-align: center;
	border-top: 2px solid rgba(150, 150, 150, 0.5);
	padding-top: 2%;
	margin: 0 0 4% 0;
}

#FeatureSet_Title {
	font-family: Arial, sans-serif;
	font-size: 200%;
	font-weight: bold;
	text-align: center;
	color: var(--Gold);
	margin-bottom: 2%;
	color: color-mix(in srgb, var(--Gold) 75%, var(--Gray_80) 25%);
}


/* ============================================================================== */
/* FEATURES SECTION */
/* ============================================================================== */

.Features_Frame {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 64px 288px 360px 288px 360px;
	gap: 12px;
	width: 896px;
	height: 1520px;
	margin: -16px auto;
}

#Feature_Parkour_Description {
	display: grid;
	align-content: center;
	background-color: rgb(100, 100, 100);
	border-radius: 16px 0px 0px 0px;
	padding: 0px 16px 0px 16px;
	height: 288px;
	width: 352px;
	font-size: 16px !important;
}

#FeatureSet_Combat,
#FeatureSet_Parkour,
#FeatureSet_FlowerFort,
#FeatureSet_Sigil {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: start;
	justify-self: center;
}

/* Parkour: description left, animation right */
#FeatureSet_Parkour {
	grid-row: 2;
	width: 896px;
	height: 280px;
	margin-bottom: 8px;
}

#Feature_Parkour_Video {
	grid-column: 2;
	grid-row: 1;
	width: 512px;
	height: 288px;
	border-radius: 0px 16px 0px 0px;
}

/* Combat: animation left, description right */
#FeatureSet_Combat {
	grid-row: 3;
	width: 896px;
	height: 360px;
	border-radius: 16px 0px 0px 16px;
}

#Feature_Combat_Video {
	grid-column: 1;
	width: 640px;
	height: 360px;
	border-radius: 0px;
}

#Feature_Combat_Description {
	grid-column: 2;
	display: grid;
	align-content: center;
	background-color: rgb(100, 100, 100);
	border-radius: 0px;
	padding: 0px 16px 0px 16px;
	width: 224px;
	height: 360px;
}

/* Sigil: description left, video right */
#FeatureSet_Sigil {
	grid-row: 4;
	width: 896px;
	height: 288px;
}

#Feature_Sigil_Description {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	align-content: center;
	background-color: rgb(100, 100, 100);
	border-radius: 0px;
	padding: 0px 16px 0px 16px;
	height: 288px;
	width: 336px;
}

#Feature_Sigil_Video {
	grid-column: 2;
	grid-row: 1;
	width: 528px;
	height: 288px;
	border-radius: 0px;
}

/* Dragon: animation left, description right */

/* FlowerFort: video left, description right */
#FeatureSet_FlowerFort {
	grid-row: 5;
	width: 896px;
	height: 360px;
}

#Feature_FlowerFort_Video {
	grid-column: 1;
	grid-row: 1;
	border-radius: 0px 0px 0px 16px;
}

/* Feature Video Hover Effects */
#Feature_Parkour_Video:hover,
#Feature_Combat_Video:hover,
#Feature_Sigil_Video:hover,
#Feature_FlowerFort_Video:hover {
	filter: brightness(1.25);
}

#Feature_FlowerFort_Description {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	width: 224px;
	height: 360px;
	align-content: center;
	background-color: rgb(100, 100, 100);
	border-radius: 0px 0px 16px 0px;
	padding: 0px 16px 0px 16px;
}

.FeatureShot {
	display: block;
	text-align: left;
	margin-left: 0px;
	margin-top: 10px;
	position: relative;
	width: 352px;
	cursor: pointer;
	border-radius: 16px 0px 0px 16px;
}

.FeatureShot:hover {
	-webkit-filter: brightness(150%);
	filter: brightness(150%);
}

/* Parkour video maximum size in desktop mode */
video.FeatureShot {
	max-width: 512px;
	max-height: 288px;
	width: 100%;
	height: auto;
}

.Features_Title {
	text-align: Center;
	font-family: Trebuchet MS, sans-serif;
	font-weight: bold;
	font-size: 200%;
	color: var(--Coral);
	position: relative;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.Features_SubTitle {
	text-align: left;
	font-family: Trebuchet MS, sans-serif;
	font-weight: bold;
	font-size: 19pt;
	color: var(--Gold);
	margin-left: 24px;
	margin-right: 24px;
	margin-bottom: 0px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--Gold);
	position: relative;
}

.Features_List {
	font-family: Arial, sans-serif;
	font-size: 18px;
	color: var(--Gray_180);
	text-align: left;
	list-style-type: disc;
	padding-left: 24px;
	margin: 0;
}

/* ============================================================================== */
/* CLIPS */
/* ============================================================================== */

.Clips_Container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto;
	margin-bottom: 64px;
	padding-bottom: 32px;
	width: 869px;
}

.Clip_Thumb {
	width: 211.25px;
	height: 118.83px; /* 16:9 aspect ratio */
	cursor: pointer;
	border-radius: 8px;
	object-fit: cover;
	transition: 0.1s;
}

.Clip_Thumb:hover {
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-filter: brightness(150%);
	filter: brightness(150%);
}

/* ============================================================================== */
/* JOIN JOURNEY BUTTON */
/* ============================================================================== */

.Button_Journey_Open {
	display: block;
	position: fixed;
	right: 2%;
	bottom: 6%;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	/* Flat gold background */
	background: #f4a624;
	border: 3px solid white;
	color: white;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
	z-index: 9999;
	opacity: 0;
	transform: scale(0);
}

@keyframes pulseAndShift {
	0% {
		background: var(--Coral);
	}
	50% {
		background: var(--Gold);
	}
	100% {
		background: var(--Coral);
	}
}

.Button_Journey_Open.animate-in {
	animation: journeyButtonPopIn 0.5s ease 1.5s forwards, pulseAndShift 8s ease-in-out 2s infinite alternate;
}

@keyframes journeyButtonPopIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	70% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ensure multi-line button label stacks and centers */
.Button_Journey_Open_Text {
	display: grid;
	grid-template-rows: 2fr 1fr 2fr;
	text-align: center;
	font-size: 26px;
	letter-spacing: 0px;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-items: center;
	position: relative;
	z-index: 2;
}

.Button_Journey_Text_Follow {
	align-self: end;
	font-size: 100%;
}

.Button_Journey_Text_The {
	align-self: center;
	font-size: 80%;
}

.Button_Journey_Text_Journey {
	align-self: start;
	font-size: 100%;
}

.Button_Journey_Open:hover {
	filter: brightness(1.2);
}

.Button_Journey_Open:active {
	filter: brightness(0.9);
}

/* ============================================================================== */
/* MEDIA QUERIES */
/* ============================================================================== */

/* Tablet/Small Desktop - 1024px and below */
@media (max-width: 1024px) {	
	.Clips_Container {
		width: 640px;
		gap: 8px;
	}
	
	.Clip_Thumb {
		width: 312px;
		height: 175.5px; /* 16:9 aspect ratio */
	}
	
	.Features_Frame {
		display: flex;
		flex-direction: column;
		width: 640px;
		height: auto;
		margin: auto;
		padding: 0;
	}
	
	/* Stack description above each feature shot */
	.FeatureShot {
		margin: 0 auto 32px auto;
	}
	
	/* Parkour: Stack description above video */
	#FeatureSet_Parkour {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 640px;
		height: auto;
		margin: 0 auto 0 auto;
	}
	
	#Feature_Parkour_Description {
		width: 640px;
		max-width: 100%;
		height: auto;
		border-radius: 16px 16px 0 0;
		order: 1;
		box-sizing: border-box;
		padding-bottom: 16px;
		padding-top: 20px;
	}
	
	#Feature_Parkour_Video {
		width: 640px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 0;
		order: 2;
	}
	
	/* Combat: Stack description above video */
	#FeatureSet_Combat {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 640px;
		height: auto;
		margin: 0 auto 0 auto;
	}
	
	#Feature_Combat_Description {
		width: 640px;
		max-width: 100%;
		height: auto;
		border-radius: 0;
		order: 1;
		box-sizing: border-box;
		padding-left: 16px;
		padding-bottom: 16px;
		padding-top: 20px;
	}
	
	#Feature_Combat_Video {
		width: 640px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 0;
		order: 2;
	}
	
	/* Sigil: Stack description above video */
	#FeatureSet_Sigil {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 640px;
		height: auto;
		margin: 0 auto 0 auto;
	}
	
	#Feature_Sigil_Description {
		width: 640px;
		max-width: 100%;
		height: auto;
		border-radius: 0;
		order: 1;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 16px;
		padding-top: 20px;
	}
	
	#Feature_Sigil_Video {
		width: 640px;
		max-width: 100%;
		height: auto;
		border-radius: 0;
		order: 2;
	}
	
	/* FlowerFort: Stack description above video */
	#FeatureSet_FlowerFort {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 640px;
		height: auto;
		margin: 0 auto 32px auto;
	}
	
	#Feature_FlowerFort_Description {
		width: 640px;
		max-width: 100%;
		height: auto;
		border-radius: 0;
		order: 1;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 16px;
		padding-top: 20px;
	}
	
	#Feature_FlowerFort_Video {
		width: 640px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 0 0px 16px 16px;
		order: 2;
	}
	
	/* Smaller Steam and Patreon buttons below 1024px */
	.Button_Steam {
		grid-column: 1;
		height: 64px;
	}
	.Button_Patreon {
		grid-column: 3;
		height: 64px;
	}
}

@media (max-width: 768px) {
	
	#full_View {
		margin-top: -8px !important;
	}
	
	.Clips_Container {
		width: calc(100% - 32px);
		max-width: 640px;
		gap: 8px;
	}
	
	.Clip_Thumb {
		width: calc(50% - 4px);
		height: auto;
		aspect-ratio: 16 / 9;
	}


	/* Restructure Trailer_Group for mobile - stack vertically */
	#Trailer_Group {
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: auto auto;
		row-gap: 0px;
		column-gap: 12px;
		justify-items: center;
	}

	#Button_Trailer {
		grid-column: span 2 !important;
		grid-row: 1;
		width: 256px;
		height: 256px;
		justify-self: center;
	}
	
	/* Narrower Steam and Patreon buttons on mobile */
	.Button_Steam {
		grid-column: 1 !important;
		grid-row: 2;
		justify-self: end;
		height: 48px !important;
		width: 128px !important;
		font-size: 18px !important;
		margin-top: -24px !important;
		padding: 0 16px !important;
		z-index: 10000;
	}

	.Button_Patreon {
		grid-column: 2 !important;
		grid-row: 2;
		justify-self: start;
		height: 48px !important;
		width: 128px !important;
		font-size: 18px !important;
		margin-top: -24px !important;
		padding: 0 16px !important;
		z-index: 10000;
	}
	
	.Logo_Steam,
	.Logo_Patreon {
		height: 32px !important;
	}

	
	#About_Frame {
		width: 320px;
		margin: 0 auto;
	}
	
	#About_Title {
		font-size: 150%;
		margin: 0 auto 5% auto;
	}
	
	#About_Text {
		font-size: 112%;
		padding-top: 2.5%;
		font-size: 100% !important;
	}
	
	#FeatureSet_Title {
		font-size: 150%;
	}
	
	/* Reorganize features for mobile - full width images with text above */
	.Features_Frame {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	
	.FeatureShot {
		width: auto;
		max-width: 100%;
		margin: 0 auto;
		border-radius: 0px;
		display: block;
	}
	
	/* Scale parkour video to viewport width with max size */
	video.FeatureShot {
		max-width: 512px;
		max-height: 288px;
		width: 100%;
		height: auto;
	}
	
	.Features_List {
		margin-left: 0;
	}
	
	.Feature_Shot {
		width: 100%;
	}
	
	/* Need a little more vertical space to compensate for the scroll effect on iPhone */
	.Savior_Banner {
		height: 352px !important;
		margin-top: -8px;
	}
	
	/* Adjust parallax layers for smaller mobile banner */
	.Savior_Banner .parallax {
		height: 256px !important;
		width: auto !important;
		bottom: auto !important;
		top: 72px !important;
	}
	
	.Savior_Banner .parallax.base {
		height: 352px !important;
		width: auto !important;
		top: -24px !important;
	}
	
	/* Adjust backdrop to butt up against scaled banner */
	.Backdrop {
		top: -24px;
		padding-top: 40px;
	}
	
	/* Move trailer down on mobile */
	#Trailer_Background {
		top: -48px;
	}
	

	
	.Text_Title {
		font-size: 26px !important;
	}
		
	.Button_Journey_Open {
		width: 80px;
		height: 80px;
		border: 2px solid white;
		padding: 0;
		text-align: center;
	}
	
	.Button_Journey_Open_Text {
		font-size: 12px !important;
	}
}

/* =================================
   Gallery Type Switcher (CLIPS / ZONES / ACTORS / ITEMS)
   Shared across all gallery pages
   ================================= */

#Gallery_Type_Switcher {
	position: fixed;
	top: 132px; /* Below NavBar (64px) + Savior_NavBar (48px) + Progress_Tabs (110px) */
	left: 0;
	right: 0;
	z-index: 900;
	display: flex;
	justify-content: center;
	gap: 1%;
	height: 48px;
	background-color: var(--Black);
	border-bottom: 2px solid var(--Gray_100);
}

#Gallery_Type_Switcher::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 64px; /* Half of Savior_NavBar height (48px / 2) */
	background-color: rgb(0, 0, 0);
	z-index: -1;
}

.Gallery_Type_Tab {
	flex: 0 0 auto;
	width: 6%;
	min-width: 80px;
	height: 48px;
	padding: 0 8px;
	background-color: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: PixelPower, sans-serif;
	font-size: 16px !important;
	font-weight: normal !important;
	letter-spacing: 0px;
	color: var(--Gray_120);
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-font-smoothing: none;
	text-rendering: geometricPrecision;
}

.Gallery_Type_Tab:hover {
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(255, 255, 255, 0.03);
}

.Gallery_Type_Tab_Active {
	color: var(--Accent);
	border-bottom-color: var(--Gray_100);
	background-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
	#Gallery_Type_Switcher {
		top: 128px; /* Adjusted for mobile NavBar + spacing */
		height: 32px;
	}

	.Gallery_Type_Tab {
		min-width: 80px;
		padding: 0 16px;
		font-size: 12px;
		height: 32px;
	}
	
	.Banner_Home_Text {
		font-size: 12px;
		top: 41px;
	}
}