@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

/* ── Preloader ────────────────────────────────── */
#preloader{
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #D8D8D8;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease;
}
#preloader.fade-out{
	opacity: 0;
	pointer-events: none;
}
.preloader-row{
	display: flex;
	align-items: center;
	gap: 4px;
	transform: scale(0.7);
}
.preloader-heart{
	position: relative;
	width: 48px;
	height: 42px;
	flex-shrink: 0;
}
.preloader-heart svg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.preloader-heart .heart-filled.hidden{
	opacity: 0;
}
.preloader-heart.blink .heart-filled{
	animation: heartBlink 0.3s ease 2;
}
@keyframes heartBlink{
	0%,100%{ opacity: 1; }
	50%{ opacity: 0; }
}
.preloader-percent{
	font-size: 1.75rem;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-left: 1rem;
	width: 4rem;
	text-align: right;
}

*{
	font-family: "Geist", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
p{
	font-weight: 200;
}
html{
	font-size: 18px;
	background: #D8D8D8;
}
body{
	margin: 0;
}
.page{
	background-color: grey;
	background: url(assets/bg.png) no-repeat;
	background-size: cover;
	background-position: center right;
	height: auto;
	min-height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
}
main{
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #FFCC00;
	border-radius: 1.5rem;
	width: 25rem;
	padding: 2rem;
	min-height: calc(100vh - 8rem);
	margin: 2rem 0 2rem 2rem;
	transform: translateX(-100%);
	animation: slideIn 1s 1s ease forwards;
	overflow: hidden;
}

main p{
	max-width: 14rem;
	margin: 0;
}
.description{
	flex-grow: 1;
	margin-bottom: 2rem;
}

h1{
	text-transform: uppercase;
	font-size: 3.5rem;
	-webkit-text-stroke-color: black;
	text-stroke-color: black;
	-webkit-text-stroke-width: 2px;
	text-stroke-width: 2px;
	color: #FFCC00;
	font-weight: 500;
	margin: 2rem 0;
	line-height: 100%;
	paint-order: stroke fill;
}
h1 span,
h1 a{
	color: black;
	text-transform: unset;
	text-decoration: none;
}
.badge{
	width: 10rem;
	height: 2.5rem;
	background: url(assets/AppStore.svg) no-repeat;
	background: url(assets/MacApp.svg) no-repeat;
	background-size: contain;
	background-position: left center;
}
.inline-battery{
	display: inline-block;
	background: url(assets/battery-big.svg) no-repeat;
	background-size: contain;
	height: .7em;
	width: 1.4em;
}
.card-footer{
	display: flex;
	flex-direction: row;
	align-items: end;
	width: 100%;
	justify-content: space-between;
	gap: 1rem;
}
.app{
	display: flex;
	flex-direction: row;
	position: absolute;
	/*background-color: #D8D8D8;*/
	background-color: #D8D8D8BB;
	border-radius: 1.5rem;
	width: auto;
	padding: 1rem;
	height: auto;
	bottom: 2rem;
	right: 2rem;
	gap: 1rem;
	align-items: center;
	text-decoration: none;
	color: initial;
	backdrop-filter: blur(20px);
	overflow: hidden;
}
.app p{
	margin: 0;
}

footer{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding: 3rem;
	background: #D8D8D8;
}
footer h5{
	font-weight: 300;
	margin: 0;
}
footer h2{
	font-weight: 400;
	margin-top: 0;
}
footer p{
	font-weight: 200;
	font-size: .8rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}
footer a{
	text-decoration: none;
	color: initial;
}



#macbook-canvas{
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 0;
	pointer-events: none;

	position: absolute;
	right: -275px;
	left: auto;
	object-fit: contain;
	opacity: 0;
	background: radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.45) 0%, transparent 70%);
	animation: slideUp 2s 1s ease-out forwards;

}

.page.model-loaded{
	background-image: none;
}
.page.model-loaded{
	background-image: radial-gradient(ellipse closest-side at 60% 90%, #BBB 0, transparent 100%);
}


@media(max-width: 700px){
	.app {
		bottom: auto;
		top: 2rem;
		max-width: calc(100vw - 2rem);
		left: 1rem;
		right: unset;
	}
	main {
		/*height: calc(100vh - 8rem);*/
		min-height: fit-content;
		bottom: unset;
		max-width: calc(100% - 6rem);
		margin: 1rem;
		margin-top: calc(100vh - 12rem);
	}
	main p{
		font-size: .9rem;
	}
	.description{
		margin-bottom: 4rem;
	}
	#macbook-canvas{
		right: 0% !important;
	}
	.card-footer p{
		font-size: .8em;
		padding-bottom: .25em;
	}
	h1{
		font-size: 2.5rem;
		font-size: min(3.5rem, 11vw);
	}
	footer{
		display: block;
		columns: 2;
	}
	footer > div{
		break-inside: avoid;
	}
	footer h5,
	footer p{
		font-size: .6em;
	}
	.preloader-row{
		transform: scale(0.5);
	}
	.preloader-percent{
		display: none;
	}
}

@keyframes slideIn{
	from{
		transform: translateX(-100%);
	}
	to{
		transform: translateX(0%);
	}
}

/* ── Tip Modal ────────────────────────────────── */
#tip-modal{
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
#tip-modal.visible{
	opacity: 1;
	pointer-events: auto;
}
.tip-modal-card{
	background: #D8D8D8;
	border-radius: 1.5rem;
	padding: 2.5rem;
	max-width: 22rem;
	width: calc(100% - 2rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.tip-modal-title{
	font-weight: 400;
	font-size: 1.2rem;
	margin: 0;
}
.tip-modal-text{
	font-weight: 200;
	font-size: 0.85rem;
	margin: 0 0 0.5rem;
	max-width: 100%;
}
.tip-modal-button{
	display: inline-block;
	background: #FFCC00;
	color: black;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.75rem 1.5rem;
	border-radius: 1rem;
	transition: background 0.2s ease;
}
.tip-modal-button:hover{
	background: #e6b800;
}
.tip-modal-dismiss{
	background: none;
	border: none;
	font-family: "Geist", sans-serif;
	font-weight: 200;
	font-size: 0.8rem;
	color: #666;
	cursor: pointer;
	padding: 0.5rem;
}
.tip-modal-dismiss:hover{
	color: #333;
}

@keyframes slideUp{
	from{
		opacity: 0;
		transform: translateY(20%);
	}
	to{
		opacity: 1;
		transform: translateY(0%);
	}
}