Spaces:

jerrrycans
/

gta6

Running

App Files Files Community

gta6 / index.html

jerrrycans

Update index.html

12782cb verified 9 months ago

raw

history blame contribute delete

114 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GTA 6 Countdown</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
	<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Montserrat', sans-serif;
	background-color: #000;
	color: #fff;
	overflow-x: hidden;
	position: relative;
	height: 100vh;
	width: 100vw;
	}

	#background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	filter: brightness(0.7) saturate(1.2);
	transition: opacity 1s ease;
	}

	.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 50, 80, 0.2), rgba(0, 20, 40, 0.6));
	z-index: -1;
	transition: background 1s ease;
	}

	.water-effect {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><path d="M0,20 Q25,40 50,20 T100,20 V100 H0 Z" fill="rgba(0,60,120,0.1)"/></svg>');
	background-size: 200px;
	opacity: 0.3;
	animation: wave 10s linear infinite;
	z-index: -1;
	pointer-events: none;
	transition: opacity 1s ease;
	}

	@keyframes wave {
	0% { background-position: 0 0; }
	100% { background-position: 200px 0; }
	}

	.bubbles {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	transition: opacity 1s ease;
	}

	.bubble {
	position: absolute;
	bottom: -100px;
	width: 40px;
	height: 40px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
	border-radius: 50%;
	opacity: 0.4;
	animation: rise 15s infinite ease-in;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
	}

	.bubble:nth-child(1) {
	width: 20px;
	height: 20px;
	left: 20%;
	animation-duration: 16s;
	}

	.bubble:nth-child(2) {
	width: 25px;
	height: 25px;
	left: 80%;
	animation-duration: 18s;
	animation-delay: 3s;
	}

	.bubble:nth-child(3) {
	width: 30px;
	height: 30px;
	left: 55%;
	animation-duration: 17s;
	animation-delay: 6s;
	}

	@keyframes rise {
	0% {
	bottom: -100px;
	transform: translateX(0) rotate(0);
	}
	30% {
	transform: translateX(20px) rotate(10deg);
	}
	60% {
	transform: translateX(-20px) rotate(-5deg);
	}
	100% {
	bottom: 120%;
	transform: translateX(0) rotate(0);
	}
	}

	.container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	z-index: 1;
	padding: 20px;
	overflow-y: auto;
	}

	.logo {
	width: 80%;
	max-width: 500px;
	margin-bottom: 30px;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
	animation: underwater-logo 5s infinite ease-in-out;
	transform-origin: center;
	}

	@keyframes underwater-logo {
	0% {
	transform: scale(1) translateY(0);
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)) brightness(1);
	}
	25% {
	transform: scale(1.01) translateY(-5px);
	filter: drop-shadow(0 0 15px rgba(100, 200, 255, 0.6)) brightness(1.1);
	}
	50% {
	transform: scale(1.02) translateY(0);
	filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)) brightness(1.2);
	}
	75% {
	transform: scale(1.01) translateY(5px);
	filter: drop-shadow(0 0 15px rgba(100, 200, 255, 0.6)) brightness(1.1);
	}
	100% {
	transform: scale(1) translateY(0);
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)) brightness(1);
	}
	}

	.nav-buttons {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 550px;
	}

	.tagline {
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 25px;
	font-weight: 600;
	color: #ffffff;
	text-shadow: 0 0 15px rgba(100, 200, 255, 0.8);
	opacity: 0.9;
	max-width: 800px;
	letter-spacing: 1px;
	background: linear-gradient(to right, #ffffff, #a0d8ff, #ffffff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: text-shadow 1s ease, background 1s ease;
	}

	.forest-tagline {
	text-shadow: 0 0 15px rgba(142, 157, 98, 0.8);
	background: linear-gradient(to right, #ffffff, #6b8445, #ffffff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.countdown-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 30px;
	perspective: 1000px;
	}

	.countdown-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(0, 20, 40, 0.7);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	padding: 20px;
	min-width: 120px;
	border: 1px solid rgba(100, 200, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(100, 200, 255, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 1s ease, border-color 1s ease;
	transform-style: preserve-3d;
	}

	.forest-countdown-box {
	background: rgba(0, 90, 5, 0.7);
	border: 1px solid rgba(142, 157, 98, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(142, 157, 98, 0.2);
	}

	.countdown-box:hover {
	transform: translateY(-8px) rotateX(5deg);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(100, 200, 255, 0.3);
	border-color: rgba(100, 200, 255, 0.4);
	}

	.forest-countdown-box:hover {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(142, 157, 98, 0.3);
	border-color: rgba(142, 157, 98, 0.4);
	}

	.countdown-value {
	font-size: 3.5rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 8px;
	text-shadow: 0 0 10px rgba(100, 200, 255, 0.8);
	background: linear-gradient(to bottom, #ffffff, #a0d8ff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: text-shadow 1s ease, background 1s ease;
	}

	.forest-countdown-value {
	text-shadow: 0 0 10px rgba(142, 157, 98, 0.8);
	background: linear-gradient(to bottom, #ffffff, #6b8445);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.countdown-label {
	font-size: 0.9rem;
	font-weight: 500;
	color: #a0d8ff;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 1s ease;
	}

	.forest-countdown-label {
	color: #8E9D62;
	}

	/* Glass Button Styles */
	.button-wrap {
	position: relative;
	z-index: 2;
	border-radius: 999vw;
	background: transparent;
	pointer-events: none;
	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
	margin: 0 5px;
	flex-grow: 1;
	max-width: 250px;
	}

	.button-shadow {
	--shadow-cuttoff-fix: 2em;
	position: absolute;
	width: calc(100% + var(--shadow-cuttoff-fix));
	height: calc(100% + var(--shadow-cuttoff-fix));
	top: calc(0% - var(--shadow-cuttoff-fix) / 2);
	left: calc(0% - var(--shadow-cuttoff-fix) / 2);
	filter: blur(clamp(2px, 0.125em, 12px));
	-webkit-filter: blur(clamp(2px, 0.125em, 12px));
	-moz-filter: blur(clamp(2px, 0.125em, 12px));
	-ms-filter: blur(clamp(2px, 0.125em, 12px));
	overflow: visible;
	pointer-events: none;
	transition: all 1s ease;
	}

	.button-shadow::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: 999vw;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
	width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
	height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
	top: calc(var(--shadow-cuttoff-fix) - 0.5em);
	left: calc(var(--shadow-cuttoff-fix) - 0.875em);
	padding: 0.125em;
	box-sizing: border-box;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
	overflow: visible;
	opacity: 1;
	}

	button {
	/* Basic Styling */
	--border-width: clamp(1px, 0.0625em, 4px);
	all: unset;
	width: 100%;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	pointer-events: auto;
	z-index: 3;
	background: linear-gradient(
	-75deg,
	rgba(255, 255, 255, 0.03),
	rgba(255, 255, 255, 0.1),
	rgba(255, 255, 255, 0.03)
	);
	border-radius: 999vw;
	box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
	inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.3),
	0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
	0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.15),
	0 0 0 0 rgba(255, 255, 255, 1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	-moz-backdrop-filter: blur(10px);
	-ms-backdrop-filter: blur(10px);
	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1), color 1s ease, text-shadow 1s ease, background 1s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	}

	button:hover {
	transform: scale(0.975);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	-moz-backdrop-filter: blur(12px);
	-ms-backdrop-filter: blur(12px);
	box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
	inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.3),
	0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
	0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.4),
	0 0 0 0 rgba(255, 255, 255, 1);
	background: linear-gradient(
	-75deg,
	rgba(255, 255, 255, 0.05),
	rgba(255, 255, 255, 0.15),
	rgba(255, 255, 255, 0.05)
	);
	}

	button span {
	position: relative;
	display: block;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.5px;
	font-weight: 800; /* Changed from 600 to 800 for bolder text */
	font-size: 1rem;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1), text-shadow 1s ease, background 1s ease;
	padding: 0.8em 1.5em;
	background: linear-gradient(to bottom, #ffffff, #a0d8ff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.forest-button span {
	text-shadow: 0 0 8px rgba(142, 157, 98, 0.5);
	background: linear-gradient(to bottom, #ffffff, #6b8445);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	button:hover span {
	text-shadow: 0 0 12px rgba(100, 200, 255, 0.7);
	}

	.forest-button:hover span {
	text-shadow: 0 0 12px rgba(142, 157, 98, 0.7);
	}

	button span::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: calc(100% - var(--border-width));
	height: calc(100% - var(--border-width));
	top: calc(0% + var(--border-width) / 2);
	left: calc(0% + var(--border-width) / 2);
	box-sizing: border-box;
	border-radius: 999vw;
	overflow: clip;
	background: linear-gradient(
	-45deg,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.3) 40% 50%,
	rgba(255, 255, 255, 0) 55%
	);
	z-index: 3;
	mix-blend-mode: screen;
	pointer-events: none;
	background-size: 200% 200%;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	transition: background-position calc(400ms * 1.25) cubic-bezier(0.25, 1, 0.5, 1);
	}

	button:hover span::after {
	background-position: 25% 50%;
	}

	button:active span::after {
	background-position: 50% 15%;
	}

	button::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: 999vw;
	width: calc(100% + var(--border-width));
	height: calc(100% + var(--border-width));
	top: calc(0% - var(--border-width) / 2);
	left: calc(0% - var(--border-width) / 2);
	padding: var(--border-width);
	box-sizing: border-box;
	background: conic-gradient(
	from -75deg at 50% 50%,
	rgba(0, 0, 0, 0.3),
	rgba(0, 0, 0, 0) 5% 40%,
	rgba(0, 0, 0, 0.3) 50%,
	rgba(0, 0, 0, 0) 60% 95%,
	rgba(0, 0, 0, 0.3)
	),
	linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
	box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.4);
	}

	button:hover::after {
	--angle-1: -125deg;
	}

	button:active::after {
	--angle-1: -75deg;
	}

	.button-wrap:has(button:hover) .button-shadow {
	filter: blur(clamp(2px, 0.0625em, 6px));
	-webkit-filter: blur(clamp(2px, 0.0625em, 6px));
	-moz-filter: blur(clamp(2px, 0.0625em, 6px));
	-ms-filter: blur(clamp(2px, 0.0625em, 6px));
	transition: filter 400ms cubic-bezier(0.25, 1, 0.5, 1);
	}

	.button-wrap:has(button:hover) .button-shadow::after {
	top: calc(var(--shadow-cuttoff-fix) - 0.875em);
	opacity: 1;
	}

	.button-wrap:has(button:active) {
	transform: rotate3d(1, 0, 0, 25deg);
	}

	.button-wrap:has(button:active) button {
	box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
	inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.3),
	0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
	0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.15),
	0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
	0 0.25em 0 0 rgba(255, 255, 255, 0.5),
	inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
	}

	.button-wrap:has(button:active) .button-shadow {
	filter: blur(clamp(2px, 0.125em, 12px));
	-webkit-filter: blur(clamp(2px, 0.125em, 12px));
	-moz-filter: blur(clamp(2px, 0.125em, 12px));
	-ms-filter: blur(clamp(2px, 0.125em, 12px));
	}

	.button-wrap:has(button:active) .button-shadow::after {
	top: calc(var(--shadow-cuttoff-fix) - 0.5em);
	opacity: 0.75;
	}

	.button-wrap:has(button:active) span {
	text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
	}

	#convert-button {
	margin-top: 15px;
	max-width: 280px; /* Increased from 200px to 280px */
	}

	#convert-button button span {
	font-size: 1.2rem; /* Increased from 1rem to 1.2rem */
	padding: 0.9em 1.6em; /* Slightly increased padding */
	}

	.scene-button {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(100, 200, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: background 0.3s ease, transform 0.3s ease;
	cursor: pointer;
	}

	.scene-button:hover {
	transform: translateY(-50%) scale(1.1);
	background: rgba(255, 255, 255, 0.2);
	}

	.scene-button span {
	font-size: 1.6rem;
	font-weight: 800;
	color: white;
	text-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
	transition: text-shadow 1s ease;
	}

	.scene-button.forest-arrow span {
	text-shadow: 0 0 8px rgba(142, 157, 98, 0.5);
	}

	@media (max-width: 768px) {
	.countdown-container {
	gap: 12px;
	}

	.countdown-box {
	min-width: 90px;
	padding: 12px;
	}

	.countdown-value {
	font-size: 2.4rem;
	}

	.countdown-label {
	font-size: 0.7rem;
	}

	.tagline {
	font-size: 1.2rem;
	margin-bottom: 25px;
	}

	.logo {
	max-width: 280px;
	margin-bottom: 20px;
	}

	button span {
	font-size: 0.9rem;
	padding: 0.7em 1.2em;
	}

	#convert-button button span {
	font-size: 1.1rem;
	padding: 0.8em 1.4em;
	}

	.nav-buttons {
	gap: 12px;
	margin-bottom: 15px;
	}

	.scene-button {
	width: 50px;
	height: 50px;
	right: 10px;
	}

	.scene-button span {
	font-size: 1.4rem;
	}
	}

	@media (max-width: 480px) {
	.countdown-container {
	gap: 8px;
	}

	.countdown-box {
	min-width: 65px;
	padding: 8px;
	}

	.countdown-value {
	font-size: 1.9rem;
	}

	.countdown-label {
	font-size: 0.6rem;
	letter-spacing: 1px;
	}

	.tagline {
	font-size: 1rem;
	margin-bottom: 20px;
	}

	.logo {
	max-width: 220px;
	margin-bottom: 15px;
	}

	button span {
	font-size: 0.8rem;
	padding: 0.6em 1em;
	}

	#convert-button {
	max-width: 220px;
	}

	#convert-button button span {
	font-size: 1rem;
	padding: 0.7em 1.2em;
	}

	.nav-buttons {
	gap: 8px;
	margin-bottom: 12px;
	}

	.scene-button {
	width: 40px;
	height: 40px;
	right: 5px;
	}

	.scene-button span {
	font-size: 1.2rem;
	}
	}

	/* Time Converter Modal Styles */
	.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 20, 40, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease, background 1s ease;
	}

	.forest-modal {
	background: rgba(0, 90, 5, 0.85);
	}

	.modal-overlay.active {
	opacity: 1;
	visibility: visible;
	}

	.time-card-container {
	position: relative;
	width: 100%;
	max-width: 1000px; /* Increased from 380px to 800px for wider card */
	aspect-ratio: 16 / 8; /* Changed from 9/16 to 16/9 for wider card */
	max-height: 90vh;
	transform-style: preserve-3d;
	transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(0.9);
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 0;
	}

	.modal-overlay.active .time-card-container {
	transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
	opacity: 1;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease 0.2s;
	}

	.time-card {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 1.75rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow:
	0 0 0 2px rgba(0, 160, 255, 0.4),
	0 0 25px 8px rgba(0, 160, 255, 0.2);
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
	box-shadow 0.4s ease-out;
	cursor: grab;
	will-change: transform, box-shadow;
	}

	.forest-time-card {
	box-shadow:
	0 0 0 2px rgba(142, 157, 98, 0.4),
	0 0 25px 8px rgba(142, 157, 98, 0.2);
	}

	.card-inner-border {
	position: absolute;
	inset: 14px;
	border-radius: 1.375rem;
	pointer-events: none;
	z-index: 10;
	box-shadow:
	inset 0.5px 0.5px 1.5px rgba(100, 200, 255, 0.6),
	inset -1px -1px 1px rgba(0, 60, 120, 0.5),
	inset 3px 3px 6px rgba(0, 0, 0, 0.25);
	transform: translateZ(30px);
	will-change: transform;
	border: 1px solid rgba(100, 200, 255, 0.2);
	transition: box-shadow 1s ease, border-color 1s ease;
	}

	.forest-card-inner-border {
	box-shadow:
	inset 0.5px 0.5px 1.5px rgba(142, 157, 98, 0.6),
	inset -1px -1px 1px rgba(0, 90, 5, 0.5),
	inset 3px 3px 6px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(142, 157, 98, 0.2);
	}

	.card-content {
	position: absolute;
	inset: 14px;
	border-radius: 1.375rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	z-index: 5;
	transform: translateZ(20px);
	will-change: transform;
	background: rgba(0, 20, 40, 0.85);
	padding: 20px;
	transition: background 1s ease;
	}

	.forest-card-content {
	background: rgba(0, 90, 5, 0.85);
	}

	.gradient-card-overlay {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 75%;
	background: linear-gradient(to top, rgba(0, 20, 40, 0.95) 0%, rgba(0, 40, 80, 0.75) 50%, rgba(0, 60, 120, 0.5) 100%);
	pointer-events: none;
	z-index: 4;
	transition: background 1s ease;
	}

	.forest-gradient-card-overlay {
	background: linear-gradient(to top, rgba(0, 90, 5, 0.95) 0%, rgba(0, 90, 5, 0.75) 50%, rgba(0, 90, 5, 0.5) 100%);
	}

	.card-title {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	font-size: 3rem; /* Increased from 1.8rem to 2.4rem */
	font-weight: 800;
	margin-bottom: 12px;
	letter-spacing: 1px;
	transform: translateZ(40px);
	will-change: transform;
	text-shadow: 0 0 15px rgba(100, 200, 255, 0.8);
	background: linear-gradient(to bottom, #ffffff, #a0d8ff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 15;
	transition: text-shadow 1s ease, background 1s ease;
	}

	.forest-card-title {
	text-shadow: 0 0 15px rgba(142, 157, 98, 0.8);
	background: linear-gradient(to bottom, #ffffff, #6b8445);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.card-subtitle {
	color: #a0d8ff;
	text-align: center;
	font-size: 1.5rem; /* Increased from 1.1rem to 1.3rem */
	font-weight: 600;
	margin-bottom: 30px;
	transform: translateZ(35px);
	will-change: transform;
	position: relative;
	z-index: 15;
	transition: color 1s ease;
	}

	.forest-card-subtitle {
	color: #8E9D62;
	}

	.tabs-container {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-bottom: 20px;
	z-index: 15;
	position: relative;
	transform: translateZ(35px);
	}

	.tab {
	background: rgba(0, 40, 80, 0.6);
	border: 1px solid rgba(100, 200, 255, 0.3);
	border-radius: 15px;
	padding: 12px 25px;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease, background 1s ease, border-color 1s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.forest-tab {
	background: rgba(0, 90, 5, 0.6);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	.tab.active {
	background: rgba(0, 120, 210, 0.6);
	border-color: rgba(100, 200, 255, 0.8);
	box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
	transform: translateY(-3px);
	}

	.forest-tab.active {
	background: rgba(0, 90, 5, 0.6);
	border-color: rgba(142, 157, 98, 0.8);
	box-shadow: 0 0 15px rgba(142, 157, 98, 0.5);
	}

	.tab:hover:not(.active) {
	background: rgba(0, 80, 160, 0.6);
	transform: translateY(-2px);
	}

	.forest-tab:hover:not(.active) {
	background: rgba(0, 90, 5, 0.6);
	}

	.tab-content {
	display: none;
	z-index: 15;
	position: relative;
	transform: translateZ(25px);
	will-change: transform;
	height: 100%;
	}

	.tab-content.active {
	display: block;
	}

	/* Converter Tab Styles */
	.unit-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 12px; /* Increased from 8px to 12px */
	justify-content: center;
	margin-bottom: 25px; /* Increased from 20px to 25px */
	position: relative;
	z-index: 15;
	transform: translateZ(30px);
	will-change: transform;
	}

	.time-unit {
	background: rgba(0, 40, 80, 0.6);
	border: 1px solid rgba(100, 200, 255, 0.3);
	border-radius: 15px;
	padding: 12px 22px; /* Increased from 8px 12px to 10px 18px */
	color: #fff;
	font-size: 1.3rem; /* Increased from 0.9rem to 1.1rem */
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease, background 1s ease, border-color 1s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.forest-time-unit {
	background: rgba(0, 90, 5, 0.6);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	.time-unit.active {
	background: rgba(0, 120, 210, 0.6);
	border-color: rgba(100, 200, 255, 0.8);
	box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
	transform: translateY(-3px); /* Increased from -2px to -3px */
	}

	.forest-time-unit.active {
	background: rgba(0, 90, 5, 0.6);
	border-color: rgba(142, 157, 98, 0.8);
	box-shadow: 0 0 15px rgba(142, 157, 98, 0.5);
	}

	.time-unit:hover:not(.active) {
	background: rgba(0, 80, 160, 0.6);
	transform: translateY(-2px); /* Increased from -1px to -2px */
	}

	.forest-time-unit:hover:not(.active) {
	background: rgba(0, 90, 5, 0.6);
	}

	.time-display {
	background: rgba(0, 30, 60, 0.8);
	border-radius: 18px; /* Increased from 15px to 18px */
	padding: 20px; /* Increased from 15px to 20px */
	margin-bottom: 25px; /* Increased from 20px to 25px */
	border: 1px solid rgba(100, 200, 255, 0.2);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
	position: relative;
	z-index: 15;
	transform: translateZ(25px);
	will-change: transform;
	transition: background 1s ease, border-color 1s ease, box-shadow 1s ease;
	}

	.forest-time-display {
	background: rgba(0, 90, 5, 0.8);
	border: 1px solid rgba(142, 157, 98, 0.2);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(142, 157, 98, 0.1);
	}

	.time-value {
	font-size: 4rem; /* Increased from 2.4rem to 3.2rem */
	font-weight: 800;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 22px rgba(100, 200, 255, 0.8); /* Increased blur from 18px to 22px */
	margin-bottom: 12px; /* Increased from 5px to 8px */
	background: linear-gradient(to bottom, #ffffff, #a0d8ff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: text-shadow 1s ease, background 1s ease;
	}

	.forest-time-value {
	text-shadow: 0 0 22px rgba(142, 157, 98, 0.8);
	background: linear-gradient(to bottom, #ffffff, #6b8445);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.time-label {
	font-size: 1.3rem; /* Increased from 0.9rem to 1.1rem */
	text-align: center;
	color: #a0d8ff;
	letter-spacing: 1.2px;
	transition: color 1s ease;
	}

	.forest-time-label {
	color: #8E9D62;
	}

	.timezone-section {
	margin-top: 8px; /* Increased from 5px to 8px */
	position: relative;
	z-index: 15;
	transform: translateZ(20px);
	will-change: transform;
	}

	.timezone-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px; /* Increased from 8px to 10px */
	margin-bottom: 12px; /* Increased from 10px to 12px */
	}

	.toggle-switch {
	position: relative;
	width: 50px; /* Increased from 40px to 50px */
	height: 24px; /* Increased from 20px to 24px */
	}

	.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}

	.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 40, 80, 0.6);
	border: 1px solid rgba(100, 200, 255, 0.3);
	transition: 0.4s, background-color 1s ease, border-color 1s ease;
	border-radius: 30px;
	}

	.forest-toggle-slider {
	background-color: rgba(0, 90, 5, 0.6);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px; /* Increased from 14px to 18px */
	width: 18px; /* Increased from 14px to 18px */
	left: 3px;
	bottom: 2px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
	}

	input:checked + .toggle-slider {
	background-color: rgba(0, 120, 210, 0.6);
	border-color: rgba(100, 200, 255, 0.8);
	}

	input:checked + .forest-toggle-slider {
	background-color: rgba(0, 90, 5, 0.6);
	border-color: rgba(142, 157, 98, 0.8);
	}

	input:checked + .toggle-slider:before {
	transform: translateX(25px); /* Increased from 19px to 25px */
	}

	.toggle-label {
	color: #a0d8ff;
	font-size: 1.1rem; /* Increased from 0.9rem to 1.1rem */
	font-weight: 500;
	transition: color 1s ease;
	}

	.forest-toggle-label {
	color: #8E9D62;
	}

	.timezone-info {
	text-align: center;
	color: #ffffff;
	font-size: 1.1rem; /* Increased from 0.9rem to 1.1rem */
	background: rgba(0, 40, 80, 0.6);
	border-radius: 12px; /* Increased from 10px to 12px */
	padding: 12px; /* Increased from 10px to 12px */
	border: 1px solid rgba(100, 200, 255, 0.2);
	transition: background 1s ease, border-color 1s ease;
	}

	.forest-timezone-info {
	background: rgba(0, 90, 5, 0.6);
	border: 1px solid rgba(142, 157, 98, 0.2);
	}

	/* Global Release Times Tab Styles */
	.countries-container {
	height: 350px;
	overflow-y: auto;
	padding-right: 15px;
	margin-bottom: 20px;
	background: rgba(0, 30, 60, 0.5);
	border-radius: 15px;
	border: 1px solid rgba(100, 200, 255, 0.2);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
	transition: background 1s ease, border-color 1s ease;
	}

	.forest-countries-container {
	background: rgba(0, 90, 5, 0.5);
	border: 1px solid rgba(142, 157, 98, 0.2);
	}

	.countries-container::-webkit-scrollbar {
	width: 10px;
	}

	.countries-container::-webkit-scrollbar-track {
	background: rgba(0, 30, 60, 0.3);
	border-radius: 10px;
	transition: background 1s ease;
	}

	.forest-countries-container::-webkit-scrollbar-track {
	background: rgba(0, 90, 5, 0.3);
	}

	.countries-container::-webkit-scrollbar-thumb {
	background: rgba(0, 120, 210, 0.6);
	border-radius: 10px;
	border: 2px solid rgba(0, 30, 60, 0.3);
	transition: background 1s ease, border-color 1s ease;
	}

	.forest-countries-container::-webkit-scrollbar-thumb {
	background: rgba(0, 90, 5, 0.6);
	border: 2px solid rgba(0, 90, 5, 0.3);
	}

	.countries-container::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 160, 255, 0.7);
	}

	.forest-countries-container::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 90, 5, 0.7);
	}

	.country-item {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	border-bottom: 1px solid rgba(100, 200, 255, 0.2);
	transition: all 0.3s ease, border-color 1s ease, background 1s ease;
	}

	.forest-country-item {
	border-bottom: 1px solid rgba(142, 157, 98, 0.2);
	}

	.country-item:hover {
	background: rgba(0, 80, 160, 0.3);
	}

	.forest-country-item:hover {
	background: rgba(0, 90, 5, 0.3);
	}

	.country-item:last-child {
	border-bottom: none;
	}

	.country-name {
	font-weight: 600;
	color: #ffffff;
	font-size: 1.1rem;
	}

	.country-time {
	color: #a0d8ff;
	font-size: 1.1rem;
	transition: color 1s ease;
	}

	.forest-country-time {
	color: #8E9D62;
	}

	.release-date-header {
	text-align: center;
	color: #ffffff;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 15px;
	text-shadow: 0 0 10px rgba(100, 200, 255, 0.6);
	transition: text-shadow 1s ease;
	}

	.forest-release-date-header {
	text-shadow: 0 0 10px rgba(142, 157, 98, 0.6);
	}

	.action-buttons {
	display: flex;
	justify-content: center;
	gap: 25px; /* Increased from 15px to 20px */
	margin-top: 30px; /* Increased from 20px to 25px */
	transform: translateZ(40px);
	will-change: transform;
	position: relative;
	z-index: 15;
	}

	.card-btn {
	background: linear-gradient(145deg, #0080ff, #0060c0);
	color: white;
	border: none;
	border-radius: 16px; /* Increased from 12px to 14px */
	padding: 15px 30px; /* Increased from 10px 20px to 12px 24px */
	font-size: 1.2rem; /* Added font-size */
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease, background 1s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	}

	.forest-card-btn {
	background: linear-gradient(145deg, #006d05, #005300);
	}

	.card-btn:hover {
	background: linear-gradient(145deg, #00a0ff, #0080ff);
	transform: translateY(-3px); /* Increased from -2px to -3px */
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
	}

	.forest-card-btn:hover {
	background: linear-gradient(145deg, #008205, #006d05);
	}

	.close-btn {
	background: linear-gradient(145deg, #ff4060, #c03050);
	}

	.forest-close-btn {
	background: linear-gradient(145deg, #c03050, #902040);
	}

	.close-btn:hover {
	background: linear-gradient(145deg, #ff5070, #ff4060);
	}

	.forest-close-btn:hover {
	background: linear-gradient(145deg, #d04060, #c03050);
	}

	@media (max-width: 768px) {
	.time-card-container {
	max-width: 700px; /* Increased from 320px to 600px */
	aspect-ratio: 16 / 10; /* Adjusted for tablets */
	}

	.card-title {
	font-size: 2.4rem; /* Increased from 1.5rem to 2rem */
	margin-bottom: 8px;
	}

	.card-subtitle {
	font-size: 1.3rem; /* Increased from 0.95rem to 1.1rem */
	margin-bottom: 20px;
	}

	.time-unit {
	font-size: 1.1rem; /* Increased from 0.8rem to 0.9rem */
	padding: 10px 16px; /* Increased from 7px 10px to 8px 14px */
	}

	.time-value {
	font-size: 3rem; /* Increased from 2rem to 2.6rem */
	}

	.time-label {
	font-size: 1.1rem; /* Increased from 0.8rem to 0.95rem */
	}

	.tab {
	font-size: 1.1rem;
	padding: 10px 18px;
	}

	.countries-container {
	height: 300px;
	}

	.country-name, .country-time {
	font-size: 0.95rem;
	}
	}

	@media (max-width: 480px) {
	.time-card-container {
	max-width: 300px; /* Increased from 280px to 300px */
	aspect-ratio: 10 / 16; /* Adjusted for portrait mode */
	}

	.card-title {
	font-size: 1.5rem; /* Increased from 1.3rem to 1.5rem */
	}

	.card-subtitle {
	font-size: 0.9rem; /* Increased from 0.85rem to 0.9rem */
	margin-bottom: 15px;
	}

	.time-unit {
	font-size: 0.8rem; /* Increased from 0.75rem to 0.8rem */
	padding: 7px 10px; /* Increased from 6px 8px to 7px 10px */
	}

	.unit-selector {
	gap: 8px; /* Increased from 6px to 8px */
	margin-bottom: 15px;
	}

	.time-value {
	font-size: 2rem; /* Increased from 1.7rem to 2rem */
	}

	.card-btn {
	padding: 10px 18px; /* Increased from 8px 15px to 10px 18px */
	font-size: 0.95rem; /* Increased from 0.9rem to 0.95rem */
	}

	.tab {
	font-size: 0.8rem;
	padding: 6px 12px;
	}

	.countries-container {
	height: 250px;
	}

	.country-name, .country-time {
	font-size: 0.85rem;
	}

	.release-date-header {
	font-size: 1.1rem;
	}
	}

	/* Music Player Styles */
	#music-player-toggle {
	position: fixed;
	bottom: 20px;
	left: 20px;
	background: rgba(0, 40, 80, 0.4);
	border-radius: 15px;
	padding: 10px 16px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	z-index: 99;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(100, 200, 255, 0.3);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease, background 1s ease, border-color 1s ease;
	font-family: 'Montserrat', sans-serif;
	}

	.forest-music-player-toggle {
	background: rgba(0, 90, 5, 0.4);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	#music-player-toggle:hover {
	background: rgba(0, 80, 160, 0.5);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
	}

	.forest-music-player-toggle:hover {
	background: rgba(0, 90, 5, 0.5);
	}

	#player-container {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 400px;
	height: 100px;
	z-index: 100;
	transform: translateY(150px);
	transition: transform 0.4s ease;
	display: none;
	}

	#player-container.active {
	transform: translateY(0);
	display: block;
	}

	#player {
	position: relative;
	height: 100%;
	z-index: 3;
	}

	#player-track {
	position: absolute;
	top: 0;
	right: 15px;
	left: 15px;
	padding: 13px 22px 10px 184px;
	background-color: rgba(0, 60, 120, 0.5);
	border-radius: 15px 15px 0 0;
	transition: 0.3s ease top, background-color 1s ease;
	z-index: 1;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(100, 200, 255, 0.3);
	border-bottom: none;
	}

	.forest-player-track {
	background-color: rgba(0, 90, 5, 0.5);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	#player-track.active {
	top: -92px;
	}

	#album-name {
	color: #a0d8ff;
	font-size: 17px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 1s ease;
	}

	.forest-album-name {
	color: #8E9D62;
	}

	#track-name {
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	margin: 2px 0 13px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	#track-time {
	height: 12px;
	margin-bottom: 3px;
	overflow: hidden;
	}

	#current-time {
	float: left;
	}

	#track-length {
	float: right;
	}

	#current-time,
	#track-length {
	color: transparent;
	font-size: 11px;
	background-color: rgba(100, 200, 255, 0.3);
	border-radius: 10px;
	transition: 0.3s ease all, background-color 1s ease;
	}

	.forest-current-time,
	.forest-track-length {
	background-color: rgba(142, 157, 98, 0.3);
	}

	#track-time.active #current-time,
	#track-time.active #track-length {
	color: #a0d8ff;
	background-color: transparent;
	}

	#track-time.active .forest-current-time,
	#track-time.active .forest-track-length {
	color: #8E9D62;
	}

	#seek-bar-container,
	#seek-bar {
	position: relative;
	height: 4px;
	border-radius: 4px;
	}

	#seek-bar-container {
	background-color: rgba(100, 200, 255, 0.3);
	cursor: pointer;
	transition: background-color 1s ease;
	}

	.forest-seek-bar-container {
	background-color: rgba(142, 157, 98, 0.3);
	}

	#seek-time {
	position: absolute;
	top: -29px;
	color: #fff;
	font-size: 12px;
	white-space: pre;
	padding: 5px 6px;
	border-radius: 4px;
	display: none;
	}

	#s-hover {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	opacity: 0.2;
	z-index: 2;
	}

	#seek-time,
	#s-hover {
	background-color: rgba(0, 40, 80, 0.8);
	transition: background-color 1s ease;
	}

	.forest-seek-time,
	.forest-s-hover {
	background-color: rgba(0, 90, 5, 0.8);
	}

	#seek-bar {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background-color: #a0d8ff;
	transition: 0.2s ease width, background-color 1s ease;
	z-index: 1;
	}

	.forest-seek-bar {
	background-color: #8E9D62;
	}

	#player-content {
	position: relative;
	height: 100%;
	background-color: rgba(0, 40, 80, 0.5);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	z-index: 2;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(100, 200, 255, 0.3);
	transition: background-color 1s ease, border-color 1s ease;
	}

	.forest-player-content {
	background-color: rgba(0, 90, 5, 0.5);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	#album-art {
	position: absolute;
	top: -40px;
	width: 115px;
	height: 115px;
	margin-left: 40px;
	transform: rotateZ(0);
	transition: 0.3s ease all;
	box-shadow: 0 0 0 6px rgba(0, 40, 80, 0.5);
	border-radius: 50%;
	overflow: hidden;
	}

	.forest-album-art {
	box-shadow: 0 0 0 6px rgba(0, 90, 5, 0.5);
	}

	#album-art.active {
	top: -60px;
	box-shadow: 0 0 0 4px rgba(0, 60, 120, 0.5), 0 20px 40px -10px rgba(0, 0, 0, 0.5);
	}

	.forest-album-art.active {
	box-shadow: 0 0 0 4px rgba(0, 90, 5, 0.5), 0 20px 40px -10px rgba(0, 0, 0, 0.5);
	}

	#album-art:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	width: 20px;
	height: 20px;
	margin: -10px auto 0 auto;
	background-color: rgba(0, 40, 80, 0.5);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #a0d8ff;
	z-index: 2;
	transition: background-color 1s ease, box-shadow 1s ease;
	}

	.forest-album-art:before {
	background-color: rgba(0, 90, 5, 0.5);
	box-shadow: inset 0 0 0 2px #8E9D62;
	}

	#album-art img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: -1;
	object-fit: cover;
	}

	#album-art img.active {
	opacity: 1;
	z-index: 1;
	}

	#album-art.active img.active {
	z-index: 1;
	animation: rotateAlbumArt 3s linear 0s infinite forwards;
	}

	@keyframes rotateAlbumArt {
	0% {
	transform: rotateZ(0);
	}
	100% {
	transform: rotateZ(360deg);
	}
	}

	#buffer-box {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 13px;
	color: #a0d8ff;
	font-size: 13px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	font-weight: bold;
	line-height: 1;
	padding: 6px;
	margin: -12px auto 0 auto;
	background-color: rgba(0, 30, 60, 0.6);
	opacity: 0;
	z-index: 2;
	border-radius: 6px;
	transition: color 1s ease, background-color 1s ease;
	}

	.forest-buffer-box {
	color: #8E9D62;
	background-color: rgba(0, 90, 5, 0.6);
	}

	#album-art img,
	#buffer-box {
	transition: 0.1s linear all;
	}

	#album-art.buffering img {
	opacity: 0.25;
	}

	#album-art.buffering img.active {
	opacity: 0.8;
	filter: blur(2px);
	-webkit-filter: blur(2px);
	}

	#album-art.buffering #buffer-box {
	opacity: 1;
	}

	#player-controls {
	width: 250px;
	height: 100%;
	margin: 0 5px 0 141px;
	float: right;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.control {
	width: 33.333%;
	float: left;
	padding: 12px 0;
	text-align: center;
	}

	.button {
	width: 26px;
	height: 26px;
	padding: 25px;
	background-color: rgba(0, 60, 120, 0.6);
	border-radius: 12px;
	cursor: pointer;
	border: 1px solid rgba(100, 200, 255, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease, background-color 1s ease, border-color 1s ease;
	}

	.forest-player-button {
	background-color: rgba(0, 90, 5, 0.6);
	border: 1px solid rgba(142, 157, 98, 0.3);
	}

	.button i {
	display: block;
	color: #a0d8ff;
	font-size: 26px;
	text-align: center;
	line-height: 1;
	transition: all 0.2s ease, color 1s ease;
	}

	.forest-button i {
	color: #8E9D62;
	}

	.button:hover {
	background-color: rgba(0, 100, 180, 0.8);
	border-color: rgba(100, 200, 255, 0.5);
	}

	.forest-player-button:hover {
	background-color: rgba(0, 90, 5, 0.8);
	border-color: rgba(142, 157, 98, 0.5);
	}

	.button:hover i {
	color: #fff;
	}

	.lossless-indicator {
	position: absolute;
	top: -28px;
	right: 25px;
	background-color: rgba(100, 200, 255, 0.25);
	color: #a0d8ff;
	padding: 5px 10px;
	border-radius: 10px 10px 0 0;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: 0 0 8px rgba(100, 200, 255, 0.6);
	border: 1px solid rgba(100, 200, 255, 0.4);
	border-bottom: none;
	backdrop-filter: blur(4px);
	transition: background-color 1s ease, color 1s ease, border-color 1s ease, text-shadow 1s ease;
	}

	.forest-lossless-indicator {
	background-color: rgba(142, 157, 98, 0.25);
	color: #8E9D62;
	text-shadow: 0 0 8px rgba(142, 157, 98, 0.6);
	border: 1px solid rgba(142, 157, 98, 0.4);
	}

	@media (max-width: 768px) {
	#music-player-toggle {
	padding: 10px 16px;
	font-size: 0.9rem;
	bottom: 15px;
	left: 15px;
	}

	#player-container {
	width: 300px;
	height: 80px;
	bottom: 15px;
	left: 15px;
	}

	#album-art {
	width: 90px;
	height: 90px;
	top: -30px;
	margin-left: 30px;
	}

	#album-art.active {
	top: -45px;
	}

	#player-track {
	padding: 10px 15px 8px 130px;
	}

	#player-track.active {
	top: -75px;
	}

	#album-name {
	font-size: 15px;
	}

	#track-name {
	font-size: 12px;
	margin: 2px 0 10px 0;
	}

	#player-controls {
	width: 200px;
	margin: 0 5px 0 110px;
	}

	.button {
	width: 20px;
	height: 20px;
	padding: 20px;
	}

	.button i {
	font-size: 20px;
	}

	.lossless-indicator {
	top: -26px;
	right: 20px;
	font-size: 0.8rem;
	padding: 4px 8px;
	}
	}

	@media (max-width: 480px) {
	#music-player-toggle {
	padding: 8px 14px;
	font-size: 0.8rem;
	bottom: 10px;
	left: 10px;
	}

	#player-container {
	width: 260px;
	height: 70px;
	bottom: 10px;
	left: 10px;
	}

	#album-art {
	width: 80px;
	height: 80px;
	top: -25px;
	margin-left: 20px;
	}

	#album-art.active {
	top: -35px;
	}

	#player-track {
	padding: 8px 12px 6px 110px;
	}

	#player-track.active {
	top: -65px;
	}

	#album-name {
	font-size: 13px;
	}

	#track-name {
	font-size: 11px;
	margin: 2px 0 8px 0;
	}

	#player-controls {
	width: 160px;
	margin: 0 5px 0 90px;
	}

	.button {
	width: 18px;
	height: 18px;
	padding: 17px;
	}

	.button i {
	font-size: 18px;
	}

	.lossless-indicator {
	top: -24px;
	right: 15px;
	font-size: 0.7rem;
	padding: 3px 6px;
	}
	}

	.fade-out {
	opacity: 0;
	transition: opacity 1s ease;
	}

	.fade-in {
	opacity: 1;
	transition: opacity 1s ease;
	}
	</style>
	</head>
	<body>
	<!-- Main Content -->
	<img id="background" class="fade-in" src="https://jerrrycans-file.hf.space/rbxg/MzadFckKIzjGWUVxvy1P1vmUnvaBM0Fwak9Qk1aHPWok9Y1R/Leonida_Keys_04.ef02d8b3%20%281%29.jpg" alt="Underwater Background">
	<img id="forest-background" class="fade-out" style="opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(0.7) saturate(1.2);" src="https://jerrrycans-file.hf.space/rbxg/MzruClHMEEzYu4gjlnLIIbvqQ6iitnTPWQUBWWvcN1H8Hu1e/Mount_Kalaga_National_Park_05.b28e1836%20%284%29.jpg" alt="Forest Background">

	<div class="overlay water-overlay"></div>
	<div class="water-effect"></div>

	<div class="bubbles">
	<div class="bubble"></div>
	<div class="bubble"></div>
	<div class="bubble"></div>
	</div>

	<div class="container">
	<div class="nav-buttons">
	<div class="button-wrap">
	<button id="images-btn">
	<span>Images & Videos</span>
	</button>
	<div class="button-shadow"></div>
	</div>
	<div class="button-wrap">
	<button id="delays-btn">
	<span>Delays</span>
	</button>
	<div class="button-shadow"></div>
	</div>
	</div>

	<img class="logo" src="https://jerrrycans-file.hf.space/rbxg/MzatJJFJu0m2DmFyu7wW7s6B0r6tCcCtYCndODFD9Rvm00i3/svgexport-18.svg" alt="GTA 6 Logo">

	<div class="tagline">Leonida Keys scuba diving scene.</div>

	<div class="countdown-container">
	<div class="countdown-box">
	<div id="days" class="countdown-value">00</div>
	<div class="countdown-label">Days</div>
	</div>
	<div class="countdown-box">
	<div id="hours" class="countdown-value">00</div>
	<div class="countdown-label">Hours</div>
	</div>
	<div class="countdown-box">
	<div id="minutes" class="countdown-value">00</div>
	<div class="countdown-label">Minutes</div>
	</div>
	<div class="countdown-box">
	<div id="seconds" class="countdown-value">00</div>
	<div class="countdown-label">Seconds</div>
	</div>
	</div>

	<div class="button-wrap" id="convert-button">
	<button id="convert-btn">
	<span>Convert Time</span>
	</button>
	<div class="button-shadow"></div>
	</div>
	</div>

	<!-- Scene Change Buttons -->
	<div class="scene-button" id="to-forest-btn">
	<span>></span>
	</div>
	<div class="scene-button" id="to-water-btn" style="display: none;">
	<span><</span>
	</div>

	<!-- Time Converter Modal -->
	<div class="modal-overlay" id="time-modal">
	<div class="time-card-container" data-tilt data-tilt-max="10" data-tilt-speed="400" data-tilt-perspective="1800" data-tilt-glare data-tilt-max-glare="0.15" data-tilt-scale="1.03">
	<div class="time-card" style="background-image: url('https://jerrrycans-file.hf.space/rbxg/Mzbc4FG5n89NqoLiBQLiG8I3gKlbbxEa9FEXFeqD8A8bz3xa/Leonida_Keys_01.1af17390%20%281%29.jpg');">
	<div class="card-inner-border" data-tilt-transform-element></div>
	<div class="gradient-card-overlay"></div>
	<div class="card-content" data-tilt-transform-element>
	<div class="card-title" data-tilt-transform-element>GTA VI TIME CONVERTER</div>
	<div class="card-subtitle" data-tilt-transform-element>Find out exactly how long you'll be waiting</div>

	<div class="tabs-container" data-tilt-transform-element>
	<div class="tab active" data-tab="converter">Time Converter</div>
	<div class="tab" data-tab="global">Global Release</div>
	</div>

	<div class="tab-content active" id="converter-tab" data-tilt-transform-element>
	<div class="unit-selector" data-tilt-transform-element>
	<div class="time-unit active" data-unit="seconds">Seconds</div>
	<div class="time-unit" data-unit="minutes">Minutes</div>
	<div class="time-unit" data-unit="hours">Hours</div>
	<div class="time-unit" data-unit="days">Days</div>
	<div class="time-unit" data-unit="weeks">Weeks</div>
	<div class="time-unit" data-unit="months">Months</div>
	<div class="time-unit" data-unit="years">Years</div>
	</div>

	<div class="time-display" data-tilt-transform-element>
	<div id="converted-value" class="time-value">0</div>
	<div id="converted-label" class="time-label">SECONDS REMAINING</div>
	</div>

	<div class="timezone-section" data-tilt-transform-element>
	<div class="timezone-toggle">
	<span class="toggle-label">Use Local Timezone</span>
	<label class="toggle-switch">
	<input type="checkbox" id="timezone-toggle" checked>
	<span class="toggle-slider"></span>
	</label>
	</div>
	<div id="timezone-info" class="timezone-info">
	Using your local timezone: <span id="local-timezone">America/New_York</span>
	</div>
	</div>
	</div>

	<div class="tab-content" id="global-tab" data-tilt-transform-element>
	<div class="release-date-header">GTA VI Global Release - May 26, 2026</div>
	<div class="countries-container">
	<div class="country-item">
	<div class="country-name">United States (EST)</div>
	<div class="country-time">05/26/2026, 12:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">United States (CST)</div>
	<div class="country-time">05/25/2026, 11:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">United States (PST)</div>
	<div class="country-time">05/25/2026, 9:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Canada (Toronto)</div>
	<div class="country-time">05/26/2026, 12:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Mexico (Mexico City)</div>
	<div class="country-time">05/25/2026, 11:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">United Kingdom (London)</div>
	<div class="country-time">05/26/2026, 5:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">France (Paris)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Germany (Berlin)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Spain (Madrid)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Italy (Rome)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Australia (Sydney)</div>
	<div class="country-time">05/26/2026, 2:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Japan (Tokyo)</div>
	<div class="country-time">05/26/2026, 1:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">China (Beijing)</div>
	<div class="country-time">05/26/2026, 12:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">South Korea (Seoul)</div>
	<div class="country-time">05/26/2026, 1:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">India (New Delhi)</div>
	<div class="country-time">05/26/2026, 9:30 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Russia (Moscow)</div>
	<div class="country-time">05/26/2026, 7:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Brazil (Sao Paulo)</div>
	<div class="country-time">05/26/2026, 1:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Argentina (Buenos Aires)</div>
	<div class="country-time">05/26/2026, 1:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">South Africa (Johannesburg)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">United Arab Emirates (Dubai)</div>
	<div class="country-time">05/26/2026, 8:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">New Zealand (Auckland)</div>
	<div class="country-time">05/26/2026, 4:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Sweden (Stockholm)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Norway (Oslo)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Netherlands (Amsterdam)</div>
	<div class="country-time">05/26/2026, 6:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Turkey (Istanbul)</div>
	<div class="country-time">05/26/2026, 7:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Malaysia (Kuala Lumpur)</div>
	<div class="country-time">05/26/2026, 12:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Singapore</div>
	<div class="country-time">05/26/2026, 12:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Indonesia (Jakarta)</div>
	<div class="country-time">05/26/2026, 11:00 AM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Philippines (Manila)</div>
	<div class="country-time">05/26/2026, 12:00 PM</div>
	</div>
	<div class="country-item">
	<div class="country-name">Thailand (Bangkok)</div>
	<div class="country-time">05/26/2026, 11:00 AM</div>
	</div>
	</div>
	</div>

	<div class="action-buttons" data-tilt-transform-element>
	<button class="card-btn" id="update-btn">Update</button>
	<button class="card-btn close-btn" id="close-modal-btn">Close</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Music Player Button -->
	<div id="music-player-toggle">GTA VI Trailer Music</div>

	<!-- Music Player -->
	<div id="player-container">
	<div class="lossless-indicator">LOSSLESS</div>
	<div id="player">
	<div id="player-track">
	<div id="album-name"></div>
	<div id="track-name"></div>
	<div id="track-time">
	<div id="current-time"></div>
	<div id="track-length"></div>
	</div>
	<div id="seek-bar-container">
	<div id="seek-time"></div>
	<div id="s-hover"></div>
	<div id="seek-bar"></div>
	</div>
	</div>
	<div id="player-content">
	<div id="album-art">
	<img src="https://jerrrycans-file.hf.space/rbxg/Mzch0WlJmjSZqtQ8vAwNpFwxvdKSu3HOdqgMGP5dkFtLj6O5/image.png" class="active" id="_1" />
	<img src="https://jerrrycans-file.hf.space/rbxg/MzciEyDawDjrkLpGy878iYVF2jsBZG9xTXCB9gm4BsXNlIyO/image.png" id="_2" />
	<img src="https://jerrrycans-file.hf.space/rbxg/MzclLnHr9OFDN7DmdEm3dCmZ5YdqRQeQGebpNYsJw5ZDuGg1/image.png" id="_3" />
	<img src="https://jerrrycans-file.hf.space/rbxg/MzcpG0L1pZ5n9omJevFN31dJcLsPQXPJIRYokIzI6JAWjmNZ/image.png" id="_4" />
	<img src="https://jerrrycans-file.hf.space/rbxg/MzcqrMAof4GArgbTxcDvmWR9kkxsOUCDCBnaDtnePRNCTK3V/image.png" id="_5" />
	<img src="https://jerrrycans-file.hf.space/rbxg/MzcsTmh1lO2IF0OhJXpR6zEpiVu3YB1hiufl1m0bXzxxqvLy/image.png" id="_6" />
	<div id="buffer-box">Buffering ...</div>
	</div>
	<div id="player-controls">
	<div class="control">
	<div class="button" id="play-previous">
	<i class="fas fa-backward"></i>
	</div>
	</div>
	<div class="control">
	<div class="button" id="play-pause-button">
	<i class="fas fa-play"></i>
	</div>
	</div>
	<div class="control">
	<div class="button" id="play-next">
	<i class="fas fa-forward"></i>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.0/vanilla-tilt.min.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Set the release date: May 26, 2026
	const releaseDate = new Date('May 26, 2026 00:00:00').getTime();

	// Create cached DOM references to avoid repeated DOM queries
	const daysElement = document.getElementById('days');
	const hoursElement = document.getElementById('hours');
	const minutesElement = document.getElementById('minutes');
	const secondsElement = document.getElementById('seconds');
	const taglineElement = document.querySelector('.tagline');

	// Previous values to check if we need to update the DOM
	let prevDays = -1;
	let prevHours = -1;
	let prevMinutes = -1;
	let prevSeconds = -1;

	// Update the countdown every second
	const countdownInterval = setInterval(function() {
	// Get current date and time
	const now = new Date().getTime();

	// Find the distance between now and the release date
	const distance = releaseDate - now;

	// Time calculations for days, hours, minutes and seconds
	const days = Math.floor(distance / (1000 * 60 * 60 * 24));
	const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((distance % (1000 * 60)) / 1000);

	// Only update the DOM if values have changed
	if (days !== prevDays) {
	daysElement.textContent = days.toString().padStart(2, '0');
	prevDays = days;
	}

	if (hours !== prevHours) {
	hoursElement.textContent = hours.toString().padStart(2, '0');
	prevHours = hours;
	}

	if (minutes !== prevMinutes) {
	minutesElement.textContent = minutes.toString().padStart(2, '0');
	prevMinutes = minutes;
	}

	if (seconds !== prevSeconds) {
	secondsElement.textContent = seconds.toString().padStart(2, '0');
	prevSeconds = seconds;
	}

	// If the countdown is finished, display message
	if (distance < 0) {
	clearInterval(countdownInterval);
	daysElement.textContent = '00';
	hoursElement.textContent = '00';
	minutesElement.textContent = '00';
	secondsElement.textContent = '00';
	taglineElement.textContent = 'GTA VI IS HERE! WELCOME TO VICE CITY!';
	}
	}, 1000);

	// Only create bubbles on non-mobile devices
	function createBubbles() {
	if (window.innerWidth > 768) {
	// Create random bubble occasionally
	setInterval(function() {
	const bubblesContainer = document.querySelector('.bubbles');
	if (bubblesContainer && !bubblesContainer.classList.contains('hidden')) {
	const bubble = document.createElement('div');
	bubble.classList.add('bubble');

	// Random size between 15px and 35px
	const size = Math.random() * 20 + 15;
	bubble.style.width = `${size}px`;
	bubble.style.height = `${size}px`;

	// Random horizontal position
	bubble.style.left = `${Math.random() * 100}%`;

	// Random animation duration between 12s and 20s
	const duration = Math.random() * 8 + 12;
	bubble.style.animationDuration = `${duration}s`;

	bubblesContainer.appendChild(bubble);

	// Remove bubble after animation ends
	setTimeout(function() {
	bubble.remove();
	}, duration * 1000);
	}
	}, 3000);
	}
	}

	// Initialize bubbles
	createBubbles();

	// Scene switching variables and elements
	let currentScene = 'water'; // 'water' or 'forest'
	const waterBackground = document.getElementById('background');
	const forestBackground = document.getElementById('forest-background');
	const bubblesElement = document.querySelector('.bubbles');
	const waterEffect = document.querySelector('.water-effect');
	const overlay = document.querySelector('.overlay');
	const toForestBtn = document.getElementById('to-forest-btn');
	const toWaterBtn = document.getElementById('to-water-btn');

	// Scene switching functions
	function switchToForest() {
	// Start transition
	currentScene = 'forest';

	// Fade out water elements
	waterBackground.classList.add('fade-out');
	waterBackground.classList.remove('fade-in');
	bubblesElement.classList.add('fade-out');
	waterEffect.classList.add('fade-out');

	// Wait for fade out to complete before fading in forest elements
	setTimeout(() => {
	// Update overlay color
	overlay.style.background = 'linear-gradient(to bottom, rgba(0, 90, 5, 0.2), rgba(0, 90, 5, 0.6))';

	// Fade in forest elements
	forestBackground.classList.add('fade-in');
	forestBackground.classList.remove('fade-out');

	// Update content styles
	taglineElement.textContent = 'Mount Kalaga National Park scene.';
	taglineElement.classList.add('forest-tagline');

	// Update countdown boxes
	document.querySelectorAll('.countdown-box').forEach(box => {
	box.classList.add('forest-countdown-box');
	});

	// Update countdown values
	document.querySelectorAll('.countdown-value').forEach(value => {
	value.classList.add('forest-countdown-value');
	});

	// Update countdown labels
	document.querySelectorAll('.countdown-label').forEach(label => {
	label.classList.add('forest-countdown-label');
	});

	// Update button styles
	document.querySelectorAll('button').forEach(button => {
	button.classList.add('forest-button');
	});

	// Update modal styles
	document.getElementById('time-modal').classList.add('forest-modal');

	// Card elements
	document.querySelector('.time-card').classList.add('forest-time-card');
	document.querySelector('.card-inner-border').classList.add('forest-card-inner-border');
	document.querySelector('.card-content').classList.add('forest-card-content');
	document.querySelector('.gradient-card-overlay').classList.add('forest-gradient-card-overlay');
	document.querySelector('.card-title').classList.add('forest-card-title');
	document.querySelector('.card-subtitle').classList.add('forest-card-subtitle');

	// Tabs
	document.querySelectorAll('.tab').forEach(tab => {
	tab.classList.add('forest-tab');
	});

	// Time units
	document.querySelectorAll('.time-unit').forEach(unit => {
	unit.classList.add('forest-time-unit');
	});

	// Time display
	document.querySelector('.time-display').classList.add('forest-time-display');
	document.querySelector('.time-value').classList.add('forest-time-value');
	document.querySelector('.time-label').classList.add('forest-time-label');

	// Toggle elements
	document.querySelector('.toggle-label').classList.add('forest-toggle-label');
	document.querySelector('.toggle-slider').classList.add('forest-toggle-slider');
	document.querySelector('.timezone-info').classList.add('forest-timezone-info');

	// Countries container
	document.querySelector('.countries-container').classList.add('forest-countries-container');
	document.querySelectorAll('.country-item').forEach(item => {
	item.classList.add('forest-country-item');
	});
	document.querySelectorAll('.country-time').forEach(time => {
	time.classList.add('forest-country-time');
	});
	document.querySelector('.release-date-header').classList.add('forest-release-date-header');

	// Card buttons
	document.querySelectorAll('.card-btn').forEach(btn => {
	btn.classList.add('forest-card-btn');
	});
	document.querySelector('.close-btn').classList.add('forest-close-btn');

	// Music player elements
	document.getElementById('music-player-toggle').classList.add('forest-music-player-toggle');
	document.getElementById('player-track').classList.add('forest-player-track');
	document.getElementById('album-name').classList.add('forest-album-name');
	document.getElementById('current-time').classList.add('forest-current-time');
	document.getElementById('track-length').classList.add('forest-track-length');
	document.getElementById('seek-bar-container').classList.add('forest-seek-bar-container');
	document.getElementById('seek-time').classList.add('forest-seek-time');
	document.getElementById('s-hover').classList.add('forest-s-hover');
	document.getElementById('seek-bar').classList.add('forest-seek-bar');
	document.getElementById('player-content').classList.add('forest-player-content');
	document.getElementById('album-art').classList.add('forest-album-art');
	document.getElementById('buffer-box').classList.add('forest-buffer-box');
	document.querySelectorAll('.button').forEach(btn => {
	btn.classList.add('forest-player-button');
	});
	document.querySelector('.lossless-indicator').classList.add('forest-lossless-indicator');

	// Change scene buttons
	toForestBtn.style.display = 'none';
	toWaterBtn.style.display = 'flex';
	toWaterBtn.classList.add('forest-arrow');

	}, 1000);
	}

	function switchToWater() {
	// Start transition
	currentScene = 'water';

	// Fade out forest elements
	forestBackground.classList.add('fade-out');
	forestBackground.classList.remove('fade-in');

	// Wait for fade out to complete
	setTimeout(() => {
	// Update overlay color
	overlay.style.background = 'linear-gradient(to bottom, rgba(0, 50, 80, 0.2), rgba(0, 20, 40, 0.6))';

	// Fade in water elements
	waterBackground.classList.add('fade-in');
	waterBackground.classList.remove('fade-out');
	bubblesElement.classList.remove('fade-out');
	waterEffect.classList.remove('fade-out');

	// Update content styles
	taglineElement.textContent = 'Leonida Keys scuba diving scene.';
	taglineElement.classList.remove('forest-tagline');

	// Update countdown boxes
	document.querySelectorAll('.countdown-box').forEach(box => {
	box.classList.remove('forest-countdown-box');
	});

	// Update countdown values
	document.querySelectorAll('.countdown-value').forEach(value => {
	value.classList.remove('forest-countdown-value');
	});

	// Update countdown labels
	document.querySelectorAll('.countdown-label').forEach(label => {
	label.classList.remove('forest-countdown-label');
	});

	// Update button styles
	document.querySelectorAll('button').forEach(button => {
	button.classList.remove('forest-button');
	});

	// Update modal styles
	document.getElementById('time-modal').classList.remove('forest-modal');

	// Card elements
	document.querySelector('.time-card').classList.remove('forest-time-card');
	document.querySelector('.card-inner-border').classList.remove('forest-card-inner-border');
	document.querySelector('.card-content').classList.remove('forest-card-content');
	document.querySelector('.gradient-card-overlay').classList.remove('forest-gradient-card-overlay');
	document.querySelector('.card-title').classList.remove('forest-card-title');
	document.querySelector('.card-subtitle').classList.remove('forest-card-subtitle');

	// Tabs
	document.querySelectorAll('.tab').forEach(tab => {
	tab.classList.remove('forest-tab');
	});

	// Time units
	document.querySelectorAll('.time-unit').forEach(unit => {
	unit.classList.remove('forest-time-unit');
	});

	// Time display
	document.querySelector('.time-display').classList.remove('forest-time-display');
	document.querySelector('.time-value').classList.remove('forest-time-value');
	document.querySelector('.time-label').classList.remove('forest-time-label');

	// Toggle elements
	document.querySelector('.toggle-label').classList.remove('forest-toggle-label');
	document.querySelector('.toggle-slider').classList.remove('forest-toggle-slider');
	document.querySelector('.timezone-info').classList.remove('forest-timezone-info');

	// Countries container
	document.querySelector('.countries-container').classList.remove('forest-countries-container');
	document.querySelectorAll('.country-item').forEach(item => {
	item.classList.remove('forest-country-item');
	});
	document.querySelectorAll('.country-time').forEach(time => {
	time.classList.remove('forest-country-time');
	});
	document.querySelector('.release-date-header').classList.remove('forest-release-date-header');

	// Card buttons
	document.querySelectorAll('.card-btn').forEach(btn => {
	btn.classList.remove('forest-card-btn');
	});
	document.querySelector('.close-btn').classList.remove('forest-close-btn');

	// Music player elements
	document.getElementById('music-player-toggle').classList.remove('forest-music-player-toggle');
	document.getElementById('player-track').classList.remove('forest-player-track');
	document.getElementById('album-name').classList.remove('forest-album-name');
	document.getElementById('current-time').classList.remove('forest-current-time');
	document.getElementById('track-length').classList.remove('forest-track-length');
	document.getElementById('seek-bar-container').classList.remove('forest-seek-bar-container');
	document.getElementById('seek-time').classList.remove('forest-seek-time');
	document.getElementById('s-hover').classList.remove('forest-s-hover');
	document.getElementById('seek-bar').classList.remove('forest-seek-bar');
	document.getElementById('player-content').classList.remove('forest-player-content');
	document.getElementById('album-art').classList.remove('forest-album-art');
	document.getElementById('buffer-box').classList.remove('forest-buffer-box');
	document.querySelectorAll('.button').forEach(btn => {
	btn.classList.remove('forest-player-button');
	});
	document.querySelector('.lossless-indicator').classList.remove('forest-lossless-indicator');

	// Change scene buttons
	toWaterBtn.style.display = 'none';
	toForestBtn.style.display = 'flex';

	}, 1000);
	}

	// Scene button event listeners
	toForestBtn.addEventListener('click', switchToForest);
	toWaterBtn.addEventListener('click', switchToWater);

	// Button functionality
	document.getElementById('images-btn').addEventListener('click', function() {
	alert('Image and video gallery coming soon!');
	});

	document.getElementById('delays-btn').addEventListener('click', function() {
	alert('GTA 6 development timeline and delay history coming soon!');
	});

	// Initialize Time Converter Modal
	const modal = document.getElementById('time-modal');
	const convertBtn = document.getElementById('convert-btn');
	const closeModalBtn = document.getElementById('close-modal-btn');
	const updateBtn = document.getElementById('update-btn');
	const timeUnits = document.querySelectorAll('.time-unit');
	const convertedValue = document.getElementById('converted-value');
	const convertedLabel = document.getElementById('converted-label');
	const timezoneToggle = document.getElementById('timezone-toggle');
	const timezoneInfo = document.getElementById('timezone-info');
	const localTimezoneElement = document.getElementById('local-timezone');
	const tabs = document.querySelectorAll('.tab');
	const tabContents = document.querySelectorAll('.tab-content');

	// Detect user's timezone
	const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	localTimezoneElement.textContent = userTimezone;

	// Active time unit
	let activeUnit = 'seconds';

	// Tab switching functionality
	tabs.forEach(tab => {
	tab.addEventListener('click', function() {
	tabs.forEach(t => t.classList.remove('active'));
	this.classList.add('active');

	const tabId = this.dataset.tab;
	tabContents.forEach(content => {
	content.classList.remove('active');
	});
	document.getElementById(`${tabId}-tab`).classList.add('active');
	});
	});

	// Update converted time based on selected unit
	function updateConvertedTime() {
	const now = new Date().getTime();
	let targetDate = new Date('May 26, 2026 00:00:00');

	// If using local timezone is enabled, adjust the target date
	if (timezoneToggle.checked) {
	// No need to adjust, already using local timezone
	} else {
	// Use New York timezone (EDT/EST)
	const nyOptions = { timeZone: 'America/New_York' };
	const nyDateStr = targetDate.toLocaleString('en-US', nyOptions);
	targetDate = new Date(nyDateStr);
	}

	const distance = targetDate.getTime() - now;

	if (distance < 0) {
	convertedValue.textContent = '0';
	return;
	}

	let value;
	switch (activeUnit) {
	case 'seconds':
	value = Math.floor(distance / 1000);
	convertedLabel.textContent = 'SECONDS REMAINING';
	break;
	case 'minutes':
	value = Math.floor(distance / (1000 * 60));
	convertedLabel.textContent = 'MINUTES REMAINING';
	break;
	case 'hours':
	value = Math.floor(distance / (1000 * 60 * 60));
	convertedLabel.textContent = 'HOURS REMAINING';
	break;
	case 'days':
	value = Math.floor(distance / (1000 * 60 * 60 * 24));
	convertedLabel.textContent = 'DAYS REMAINING';
	break;
	case 'weeks':
	value = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
	convertedLabel.textContent = 'WEEKS REMAINING';
	break;
	case 'months':
	value = Math.floor(distance / (1000 * 60 * 60 * 24 * 30.44));
	convertedLabel.textContent = 'MONTHS REMAINING';
	break;
	case 'years':
	value = Math.floor(distance / (1000 * 60 * 60 * 24 * 365.25));
	convertedLabel.textContent = 'YEARS REMAINING';
	break;
	}

	// Format large numbers with commas
	convertedValue.textContent = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}

	// Update timezone info display
	function updateTimezoneInfo() {
	if (timezoneToggle.checked) {
	timezoneInfo.innerHTML = 'Using your local timezone: <span id="local-timezone">' + userTimezone + '</span>';
	} else {
	timezoneInfo.innerHTML = 'Using NYC timezone: <span id="local-timezone">America/New_York</span>';
	}
	}

	// Time unit click handler
	timeUnits.forEach(unit => {
	unit.addEventListener('click', function() {
	timeUnits.forEach(u => u.classList.remove('active'));
	this.classList.add('active');
	activeUnit = this.dataset.unit;
	updateConvertedTime();
	});
	});

	// Timezone toggle handler
	timezoneToggle.addEventListener('change', function() {
	updateTimezoneInfo();
	updateConvertedTime();
	});

	// Open modal
	convertBtn.addEventListener('click', function() {
	modal.classList.add('active');
	updateConvertedTime();

	// Initialize VanillaTilt after modal is visible
	setTimeout(() => {
	VanillaTilt.init(document.querySelectorAll("[data-tilt]"), {
	gyroscope: true,
	scale: 1.03,
	perspective: 1800
	});
	}, 100);
	});

	// Close modal
	closeModalBtn.addEventListener('click', function() {
	modal.classList.remove('active');
	});

	// Update button
	updateBtn.addEventListener('click', function() {
	updateConvertedTime();
	});

	// Close modal on overlay click
	modal.addEventListener('click', function(e) {
	if (e.target === modal) {
	modal.classList.remove('active');
	}
	});

	// Music Player Toggle
	const musicPlayerToggle = document.getElementById('music-player-toggle');
	const playerContainer = document.getElementById('player-container');

	musicPlayerToggle.addEventListener('click', function() {
	playerContainer.classList.add('active');
	musicPlayerToggle.style.display = 'none';
	});

	// Check for mobile devices to disable bubbles
	function checkMobile() {
	if (window.innerWidth <= 768) {
	bubblesElement.classList.add('hidden');
	bubblesElement.style.display = 'none';
	} else {
	bubblesElement.classList.remove('hidden');
	bubblesElement.style.display = 'block';
	}
	}

	// Initial check for mobile
	checkMobile();

	// Listen for window resize events
	window.addEventListener('resize', checkMobile);
	});

	// Music Player Script
	$(function () {
	const playerTrack = $("#player-track");
	const bgArtwork = $("#player-bg-artwork");
	const albumName = $("#album-name");
	const trackName = $("#track-name");
	const albumArt = $("#album-art");
	const sArea = $("#seek-bar-container");
	const seekBar = $("#seek-bar");
	const trackTime = $("#track-time");
	const seekTime = $("#seek-time");
	const sHover = $("#s-hover");
	const playPauseButton = $("#play-pause-button");
	const tProgress = $("#current-time");
	const tTime = $("#track-length");
	const playPreviousTrackButton = $("#play-previous");
	const playNextTrackButton = $("#play-next");

	const albums = [
	"Love Is A Long Road",
	"Thunder Island",
	"Everybody Have Fun Tonight",
	"Child Support",
	"Talkin' To Myself Again",
	"Hot Together"
	];

	const trackNames = [
	"Tom Petty",
	"Jay Ferguson",
	"Wang Chung",
	"Zenglen",
	"Tammy Wynette",
	"The Pointer Sisters"
	];

	const albumArtworks = ["_1", "_2", "_3", "_4", "_5", "_6"];

	const trackUrl = [
	"https://jerrrycans-file.hf.space/rbxg/MzcmFe8HB1YVQzoqR35VTySs5SUG2XDH7rFb2b912Rg8h4V6/0.flac",
	"https://jerrrycans-file.hf.space/rbxg/MzcmdS3ThqbVRiqHizjOU3j4aT5NfU8ElgogOLna0W1Xnoxk/0%20%281%29.flac",
	"https://jerrrycans-file.hf.space/rbxg/MzcnFEQLYxEJJ7Qw4R7KSPRiLkkskAb3jf4sFGuzYuSJg5n5/0%20%282%29.flac",
	"https://jerrrycans-file.hf.space/rbxg/Mzcokf4LReUp3nVHkbwn43WL7itZJB9ARRgzTDKj1Nxgh0t4/0.flac",
	"https://jerrrycans-file.hf.space/rbxg/MzcqVJeevJUmmHmeUbNU3Svdes26L07EqqatMAM3MBGy1Tig/0%20%281%29.flac",
	"https://jerrrycans-file.hf.space/rbxg/Mzcrsx2htVCj0DSeqIO1qeQClnMkqX6aHWbys0fVHz9Si2JH/0%20%282%29.flac"
	];

	let bgArtworkUrl,
	i = playPauseButton.find("i"),
	seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds,
	curMinutes, curSeconds, durMinutes, durSeconds,
	playProgress, bTime, nTime = 0,
	buffInterval = null, tFlag = false, currIndex = -1;

	function playPause() {
	setTimeout(function () {
	if (audio.paused) {
	playerTrack.addClass("active");
	albumArt.addClass("active");
	checkBuffering();
	i.attr("class", "fas fa-pause");
	audio.play();
	} else {
	playerTrack.removeClass("active");
	albumArt.removeClass("active");
	clearInterval(buffInterval);
	albumArt.removeClass("buffering");
	i.attr("class", "fas fa-play");
	audio.pause();
	}
	}, 300);
	}

	function showHover(event) {
	seekBarPos = sArea.offset();
	seekT = event.clientX - seekBarPos.left;
	seekLoc = audio.duration * (seekT / sArea.outerWidth());

	sHover.width(seekT);

	cM = seekLoc / 60;

	ctMinutes = Math.floor(cM);
	ctSeconds = Math.floor(seekLoc - ctMinutes * 60);

	if (ctMinutes < 0 \|\| ctSeconds < 0) return;

	if (ctMinutes < 10) ctMinutes = "0" + ctMinutes;
	if (ctSeconds < 10) ctSeconds = "0" + ctSeconds;

	if (isNaN(ctMinutes) \|\| isNaN(ctSeconds)) seekTime.text("--:--");
	else seekTime.text(ctMinutes + ":" + ctSeconds);

	seekTime.css({ left: seekT, "margin-left": "-21px" }).fadeIn(0);
	}

	function hideHover() {
	sHover.width(0);
	seekTime
	.text("00:00")
	.css({ left: "0px", "margin-left": "0px" })
	.fadeOut(0);
	}

	function playFromClickedPos() {
	audio.currentTime = seekLoc;
	seekBar.width(seekT);
	hideHover();
	}

	function updateCurrTime() {
	nTime = new Date();
	nTime = nTime.getTime();

	if (!tFlag) {
	tFlag = true;
	trackTime.addClass("active");
	}

	curMinutes = Math.floor(audio.currentTime / 60);
	curSeconds = Math.floor(audio.currentTime - curMinutes * 60);

	durMinutes = Math.floor(audio.duration / 60);
	durSeconds = Math.floor(audio.duration - durMinutes * 60);

	playProgress = (audio.currentTime / audio.duration) * 100;

	if (curMinutes < 10) curMinutes = "0" + curMinutes;
	if (curSeconds < 10) curSeconds = "0" + curSeconds;

	if (durMinutes < 10) durMinutes = "0" + durMinutes;
	if (durSeconds < 10) durSeconds = "0" + durSeconds;

	if (isNaN(curMinutes) \|\| isNaN(curSeconds)) tProgress.text("00:00");
	else tProgress.text(curMinutes + ":" + curSeconds);

	if (isNaN(durMinutes) \|\| isNaN(durSeconds)) tTime.text("00:00");
	else tTime.text(durMinutes + ":" + durSeconds);

	if (
	isNaN(curMinutes) \|\|
	isNaN(curSeconds) \|\|
	isNaN(durMinutes) \|\|
	isNaN(durSeconds)
	)
	trackTime.removeClass("active");
	else trackTime.addClass("active");

	seekBar.width(playProgress + "%");

	if (playProgress == 100) {
	i.attr("class", "fas fa-play");
	seekBar.width(0);
	tProgress.text("00:00");
	albumArt.removeClass("buffering").removeClass("active");
	clearInterval(buffInterval);
	selectTrack(1); // Auto advance to next track
	}
	}

	function checkBuffering() {
	clearInterval(buffInterval);
	buffInterval = setInterval(function () {
	if (nTime == 0 \|\| bTime - nTime > 1000) albumArt.addClass("buffering");
	else albumArt.removeClass("buffering");

	bTime = new Date();
	bTime = bTime.getTime();
	}, 100);
	}

	function selectTrack(flag) {
	if (flag == 0 \|\| flag == 1) ++currIndex;
	else --currIndex;

	if (currIndex > -1 && currIndex < albumArtworks.length) {
	if (flag == 0) i.attr("class", "fas fa-play");
	else {
	albumArt.removeClass("buffering");
	i.attr("class", "fas fa-pause");
	}

	seekBar.width(0);
	trackTime.removeClass("active");
	tProgress.text("00:00");
	tTime.text("00:00");

	currAlbum = albums[currIndex];
	currTrackName = trackNames[currIndex];
	currArtwork = albumArtworks[currIndex];

	audio.src = trackUrl[currIndex];

	nTime = 0;
	bTime = new Date();
	bTime = bTime.getTime();

	if (flag != 0) {
	audio.play();
	playerTrack.addClass("active");
	albumArt.addClass("active");

	clearInterval(buffInterval);
	checkBuffering();
	}

	albumName.text(currAlbum);
	trackName.text(currTrackName);
	albumArt.find("img.active").removeClass("active");
	$("#" + currArtwork).addClass("active");

	bgArtworkUrl = $("#" + currArtwork).attr("src");
	} else {
	if (flag == 0 \|\| flag == 1) --currIndex;
	else ++currIndex;
	}
	}

	function initPlayer() {
	audio = new Audio();

	selectTrack(0);

	audio.loop = false;

	playPauseButton.on("click", playPause);

	sArea.mousemove(function (event) {
	showHover(event);
	});

	sArea.mouseout(hideHover);

	sArea.on("click", playFromClickedPos);

	$(audio).on("timeupdate", updateCurrTime);

	playPreviousTrackButton.on("click", function () {
	selectTrack(-1);
	});

	playNextTrackButton.on("click", function () {
	selectTrack(1);
	});

	// When the player is done playing and hidden
	$('#player-container').on('transitionend', function() {
	if (!$(this).hasClass('active')) {
	$('#music-player-toggle').css('display', 'block');
	}
	});
	}

	initPlayer();
	});
	</script>
	</body>
	</html>