@import url('./root.css');

/* -------------------------------------------------- base -------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: auto;
	cursor: var(--cursor-default);
 overflow-x: hidden;
}

body {
	background: var(--punk-paper);
	color: var(--punk-black);
	font-family: var(--body-font);
	font-size: 1.4rem;
	overflow-x: hidden;
 max-width: 100%;
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent 0 60px,
			#00000008 60px 62px
		);
}

::selection {
	background: var(--punk-acid);
	color: var(--punk-black);
}

a {
	color: inherit;
}

img {
	image-rendering: auto;
	max-width: 100%;
}

/* -------------------------------------------------- motion -------------------------------------------------- */

@keyframes wiggle-a {
	0% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(0, -5px) rotate(-6deg); }
	50% { transform: translate(2px, 0) rotate(4deg); }
	75% { transform: translate(-2px, 3px) rotate(-3deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes wiggle-b {
	0% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(-3px, 2px) rotate(7deg); }
	66% { transform: translate(3px, -4px) rotate(-5deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes wiggle-c {
	0% { transform: translate(0, 0) scale(1); }
	40% { transform: translate(0, -6px) scale(1.08) rotate(3deg); }
	80% { transform: translate(2px, 2px) scale(0.95) rotate(-4deg); }
	100% { transform: translate(0, 0) scale(1); }
}

@keyframes blink-hard {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes color-cycle {
	0% { color: var(--punk-accent); }
	33% { color: var(--punk-pink); }
	66% { color: var(--punk-acid); }
	100% { color: var(--punk-accent); }
}

@keyframes bg-cycle {
	0% { background-color: var(--punk-accent); }
	33% { background-color: var(--punk-pink); }
	66% { background-color: var(--punk-acid); }
	100% { background-color: var(--punk-accent); }
}

@keyframes marquee-roll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes stamp-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.w {
	display: inline-block;
	animation-delay: var(--w-delay, 0s);
}
.w-a { animation: wiggle-a 0.9s var(--snap) infinite; }
.w-b { animation: wiggle-b 1.1s var(--snap) infinite; }
.w-c { animation: wiggle-c 1.3s var(--snap) infinite; }

.blink { animation: blink-hard 1s var(--snap) infinite; }
.cycle { animation: color-cycle 1.5s var(--snap) infinite; }

/* -------------------------------------------------- cursors -------------------------------------------------- */

a,
button,
summary,
.punk-btn,
.teaser,
[data-spray] {
	cursor: var(--cursor-aim);
}

a:active,
button:active,
summary:active,
.punk-btn:active,
.teaser:active,
[data-spray]:active {
	cursor: var(--cursor-aim-press);
	user-select: none;
}

.shot {
	cursor: var(--cursor-omg);
	user-select: none;
}

/* -------------------------------------------------- nav -------------------------------------------------- */

.punk-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: var(--punk-black);
	color: var(--punk-white);
	border-bottom: var(--punk-border);
	border-bottom-color: var(--punk-acid);
	flex-wrap: wrap;
	cursor: var(--cursor-rockit);
}

.punk-nav .nav-logo {
	font-family: var(--pixel-font);
	font-size: 1.3rem;
	color: var(--punk-acid);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.punk-nav .nav-logo::before {
	content: '';
	width: 26px;
	height: 26px;
	background-image: url('../media/img/GlitterMadness-t.png');
	background-size: contain;
	background-repeat: no-repeat;
	animation: stamp-spin 4s var(--snap-3) infinite;
}

.punk-nav a:not(.nav-logo) {
	font-family: var(--pixel-font);
	font-size: 0.85rem;
	color: var(--punk-white);
	text-decoration: none;
	padding: 6px 10px;
	border: 2px solid var(--punk-white);
}

.punk-nav a:not(.nav-logo):hover {
	background: var(--punk-pink);
	color: var(--punk-black);
	border-color: var(--punk-black);
	transform: rotate(-2deg);
}

/* -------------------------------------------------- hero -------------------------------------------------- */

.hero {
	padding: 60px 20px 40px;
	text-align: center;
	position: relative;
}

.hero-icon {
	width: 110px;
	height: 110px;
	background-image: url('../media/img/GlitterMadness-t.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto 10px;
	animation: wiggle-c 2s var(--snap) infinite;
}

.hero-title {
	font-family: var(--pixel-font);
	font-size: clamp(3rem, 14vw, 8rem);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-shadow: 6px 6px 0 var(--punk-accent);
}

.hero-sub {
	font-family: var(--pixel-font-big);
	font-size: clamp(1.3rem, 4vw, 2rem);
	margin-top: 18px;
	display: inline-block;
	background: var(--punk-black);
	color: var(--punk-acid);
	padding: 6px 16px;
	transform: rotate(-2deg);
	box-shadow: var(--punk-shadow-pink);
}

.hero-small {
	margin-top: 22px;
	font-size: 1.5rem;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.2;
}

.hero-small b {
	background: var(--punk-acid);
	padding: 0 6px;
}

.hero-stamp {
	position: absolute;
	top: 30px;
	right: 6vw;
	font-family: var(--pixel-font);
	font-size: 0.95rem;
	background: var(--punk-pink);
	color: var(--punk-black);
	border: var(--punk-border-thin);
	box-shadow: var(--punk-shadow-small);
	padding: 10px 14px;
	max-width: 120px;
	text-align: center;
	line-height: 1.4;
	transform: rotate(12deg);
	text-transform: uppercase;
	word-spacing: 100vw;
}

@media (max-width: 700px) {
	.hero-stamp {
		position: static;
		display: inline-block;
		margin-top: 20px;
	}
}

/* -------------------------------------------------- buttons -------------------------------------------------- */

.btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	padding: 30px 20px;
}

.punk-btn {
	font-family: var(--pixel-font);
	font-size: 1rem;
	text-decoration: none;
	color: var(--punk-black);
	background: var(--punk-white);
	border: var(--punk-border);
	box-shadow: var(--punk-shadow);
	padding: 16px 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	position: relative;
}

.punk-btn:hover {
	transform: translate(4px, 4px) rotate(-1deg);
	box-shadow: 2px 2px 0 var(--punk-black);
	animation: bg-cycle 0.4s var(--snap) infinite;
}

.punk-btn.big {
	font-size: 1.25rem;
	background: var(--punk-acid);
}

.punk-btn.accent {
	background: var(--punk-accent);
	color: var(--punk-white);
}

.punk-btn.pink {
	background: var(--punk-pink);
}

.punk-btn.dark {
	background: var(--punk-black);
	color: var(--punk-white);
	box-shadow: var(--punk-shadow-acid);
}

.punk-btn .tag {
	font-size: 0.7rem;
	background: var(--punk-black);
	color: var(--punk-white);
	padding: 3px 6px;
	transform: rotate(3deg);
}

/* -------------------------------------------------- separators -------------------------------------------------- */

.tape {
	background: var(--punk-black);
	color: var(--punk-white);
	border-top: var(--punk-border-thin);
	border-bottom: var(--punk-border-thin);
	overflow: hidden;
	white-space: nowrap;
	padding: 8px 0;
	font-family: var(--pixel-font);
	font-size: 1.1rem;
	transform: rotate(-1deg) scale(1.02);
	margin: 30px 0;
}

.tape.acid {
	background: var(--punk-acid);
	color: var(--punk-black);
	transform: rotate(1deg) scale(1.02);
}

.tape.pink {
	background: var(--punk-pink);
	color: var(--punk-black);
}

.tape .tape-inner {
	display: inline-block;
	animation: marquee-roll 30s linear infinite;
}

.tape.snappy .tape-inner {
	animation-timing-function: steps(40, end);
}

/* -------------------------------------------------- sections -------------------------------------------------- */

.section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 20px;
}

.section-title {
	font-family: var(--pixel-font);
	font-size: clamp(1.8rem, 6vw, 3.2rem);
	text-transform: uppercase;
	margin-bottom: 30px;
	display: inline-block;
	background: var(--punk-black);
	color: var(--punk-white);
	padding: 8px 18px;
	box-shadow: var(--punk-shadow-accent);
	transform: rotate(-1.5deg);
}

.section-title.alt {
	box-shadow: var(--punk-shadow-pink);
	transform: rotate(1deg);
}

/* -------------------------------------------------- screenshots -------------------------------------------------- */

.shots {
	display: flex;
	gap: 26px;
	overflow-x: auto;
	padding: 20px 40px 30px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	justify-content: safe center;
	overflow-y: hidden;
}

.shots::-webkit-scrollbar {
	height: 14px;
}

.shots::-webkit-scrollbar-track {
	background: var(--punk-black);
}

.shots::-webkit-scrollbar-thumb {
	background: var(--punk-acid);
	border: 3px solid var(--punk-black);
}

.shot {
	flex: 0 0 auto;
	width: 220px;
	/* width: 80%;
	height: 20%; */
	border: var(--punk-border);
	box-shadow: var(--punk-shadow);
	background: var(--punk-black);
}

.shot:nth-child(odd) {
	transform: rotate(-2deg);
	box-shadow: var(--punk-shadow-pink);
}

.shot:nth-child(even) {
	transform: rotate(2deg);
	box-shadow: var(--punk-shadow-acid);
}

.shot:hover {
	transform: rotate(0deg) scale(1.04);
	z-index: 2;
}

.shot img {
	display: block;
	height: 100%;
}

.shot .shot-label {
	font-family: var(--pixel-font);
	font-size: 0.8rem;
	color: var(--punk-white);
	background: var(--punk-black);
	padding: 8px;
	text-align: center;
	text-transform: uppercase;
}

/* -------------------------------------------------- features -------------------------------------------------- */

.features-note {
	font-size: 1.3rem;
	margin-bottom: 26px;
	max-width: 700px;
}

.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
}

.feature-card {
	background: var(--app-bg);
	color: var(--punk-white);
	font-family: var(--app-font);
	border-radius: var(--app-radius);
	padding: 22px;
	border: var(--punk-border);
	box-shadow: var(--punk-shadow);
	position: relative;
	background-image: linear-gradient(
		160deg,
		var(--app-accent-transparent-4),
		transparent 55%
	);
}

.feature-card:hover {
	transform: rotate(-1deg) translate(2px, -4px);
	box-shadow: var(--punk-shadow-accent);
}

.feature-card h3 {
	font-family: var(--app-font);
	font-weight: 600;
	font-size: 1.15rem;
	margin-bottom: 8px;
	color: #ffffff;
}

.feature-card p {
	font-size: 0.95rem;
	line-height: 1.45;
	font-weight: 400;
	color: #ffffffcc;
}

.feature-card .feature-chip {
	position: absolute;
	top: -14px;
	right: 12px;
	font-family: var(--pixel-font);
	font-size: 0.7rem;
	background: var(--punk-acid);
	color: var(--punk-black);
	border: var(--punk-border-thin);
	padding: 4px 8px;
	transform: rotate(3deg);
	text-transform: uppercase;
}

.feature-card:nth-child(3n) .feature-chip { background: var(--punk-pink); }
.feature-card:nth-child(3n + 1) .feature-chip { background: var(--punk-cyan); }

/* -------------------------------------------------- license -------------------------------------------------- */

.license-box {
	background: var(--punk-black);
	color: var(--punk-white);
	border: var(--punk-border);
	border-color: var(--punk-acid);
	box-shadow: var(--punk-shadow-pink);
	padding: 30px;
	transform: rotate(-0.5deg);
}

.license-box h3 {
	font-family: var(--pixel-font);
	font-size: clamp(1.4rem, 5vw, 2.4rem);
	color: var(--punk-acid);
	margin-bottom: 16px;
	text-transform: uppercase;
}

.license-box p, .license-box li {
	font-size: 1.35rem;
	line-height: 1.3;
	margin-bottom: 10px;
}

.license-box ul {
	list-style: none;
	margin-bottom: 14px;
}

.license-box li::before {
	content: '★ ';
	color: var(--punk-pink);
}

.license-box .but {
	display: inline-block;
	background: var(--punk-pink);
	color: var(--punk-black);
	font-family: var(--pixel-font);
	padding: 4px 12px;
	transform: rotate(-2deg);
	margin-bottom: 10px;
}

/* -------------------------------------------------- teasers -------------------------------------------------- */

.teaser-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
}

.teaser {
	display: block;
	text-decoration: none;
	border: var(--punk-border);
	box-shadow: var(--punk-shadow);
	padding: 26px;
	background: var(--punk-white);
}

.teaser:hover {
	transform: translate(4px, 4px) rotate(1deg);
	box-shadow: 2px 2px 0 var(--punk-black);
	background: var(--punk-acid);
}

.teaser h3 {
	font-family: var(--pixel-font);
	font-size: 1.4rem;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.teaser p {
	font-size: 1.3rem;
	line-height: 1.25;
}

/* -------------------------------------------------- supporters -------------------------------------------------- */

.supporters {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.supporter {
	border: var(--punk-border-thin);
	background: var(--punk-white);
	box-shadow: var(--punk-shadow-small);
	padding: 14px 18px;
	max-width: 320px;
}

.supporter:nth-child(odd) { transform: rotate(-1.5deg); }
.supporter:nth-child(even) { transform: rotate(1.5deg); }

.supporter:hover {
	animation: wiggle-b 0.5s var(--snap) infinite;
	background: var(--punk-cyan);
}

.supporter .who {
	font-family: var(--pixel-font);
	font-size: 0.95rem;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.supporter .what {
	font-size: 1.2rem;
	line-height: 1.25;
}

.creator-box {
	margin-top: 34px;
	border: var(--punk-border);
	background: var(--punk-accent);
	color: var(--punk-white);
	box-shadow: var(--punk-shadow);
	padding: 26px;
	transform: rotate(0.5deg);
}

.creator-box h3 {
	font-family: var(--pixel-font);
	font-size: 1.5rem;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.creator-box p {
	font-size: 1.35rem;
	line-height: 1.3;
}

.creator-box a {
	color: var(--punk-acid);
}

/* -------------------------------------------------- privacy -------------------------------------------------- */

.privacy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
}

.privacy-col {
	border: var(--punk-border);
	padding: 22px;
	box-shadow: var(--punk-shadow);
}

.privacy-col.yes {
	background: var(--punk-white);
}

.privacy-col.no {
	background: var(--punk-black);
	color: var(--punk-white);
	box-shadow: var(--punk-shadow-pink);
}

.privacy-col h3 {
	font-family: var(--pixel-font);
	font-size: 1.2rem;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.privacy-col.no h3 { color: var(--punk-pink); }
.privacy-col.yes h3 { background: var(--punk-acid); display: inline-block; padding: 2px 8px; }

.privacy-col ul {
	list-style: none;
}

.privacy-col li {
	font-size: 1.25rem;
	line-height: 1.3;
	margin-bottom: 8px;
}

.privacy-col.yes li::before { content: '+ '; font-family: var(--pixel-font); }
.privacy-col.no li::before { content: 'X '; font-family: var(--pixel-font); color: var(--punk-pink); }

.privacy-quote {
	margin-top: 26px;
	font-size: 1.45rem;
	border-left: 8px solid var(--punk-pink);
	padding: 10px 18px;
	background: var(--punk-white);
	border-top: var(--punk-border-thin);
	border-bottom: var(--punk-border-thin);
	border-right: var(--punk-border-thin);
	box-shadow: var(--punk-shadow-small);
}

/* -------------------------------------------------- footer -------------------------------------------------- */

.punk-footer {
	background: var(--punk-black);
	color: var(--punk-white);
	text-align: center;
	padding: 40px 20px;
	border-top: var(--punk-border);
	border-top-color: var(--punk-pink);
	margin-top: 50px;
}

.punk-footer .foot-star {
	font-size: 2rem;
	display: inline-block;
	animation: stamp-spin 3s var(--snap-3) infinite;
	color: var(--punk-acid);
}

.punk-footer p {
	font-size: 1.3rem;
	margin-top: 10px;
}

.punk-footer a {
	color: var(--punk-pink);
}

/* -------------------------------------------------- small screens -------------------------------------------------- */

@media (max-width: 600px) {
	.punk-btn { width: 100%; justify-content: center; }
	.hero-title { text-shadow: 4px 4px 0 var(--punk-accent); }
}

/* -------------------------------------------------- calm mode -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
	}
}