@layer reset, theme, components, elements;

@font-face {
	font-family: 'Serial A Input';
	src: url('fonts/SerialA-Input.woff2') format('woff2');
	font-display: swap;
}

/* TODO: remove? */
@font-face {
	font-family: 'Serial B Analogue';
	font-weight: 500;
	src: url('fonts/SerialBAnalogue-Medium.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Serial B Analogue';
	font-weight: 800;
	src: url('fonts/SerialBAnalogue-Black.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Serial B Analogue';
	font-weight: 700;
	src: url('fonts/SerialBAnalogue-Bold.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Serial Typewriter Rounded';
	src: url('fonts/SerialTypewriter-Rounded.woff2') format('woff2');
	font-display: swap;
}

@layer reset {
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, tt, sup, sub, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-weight: inherit;
		font-family: inherit;
		font-style: inherit;
		vertical-align: baseline;
	}
	sup, sub { font-size: smaller; }
	sup { vertical-align: super; }
	sub { vertical-align: sub; }

	ol, ul {
		list-style: none;
	}

	*, *:before, *:after { box-sizing: border-box; }

	a {
		color: inherit;
		text-decoration: none;
		cursor: pointer;
	
		* { cursor: pointer; }
	}

	button {
		background: none;
		color: inherit;
		border: none;
		outline: none;
		margin: 0;
		padding: 0;
		font-size: inherit;
		font-family: inherit;
	}

	hr {
		margin: 0;
		padding: 0;
		border: none;
		border-bottom: 1px solid;
	}

	/* landscape iOS */
	html {
		-webkit-text-size-adjust: 100%;
	}

	img, svg, video {
		display: block;
	}
}

@layer theme {
	:root {
		--black: #000000;
		--beige: #F6D3B5;
		--yellow: #FDC913;
		--blue: #5E86F5;
		--red: #FA4647;

		--font-sans: 'Serial B Analogue', 'Helvetica', sans-serif;
		--font-mono: 'Serial Typewriter Rounded', monospace;
		--font-display: 'Serial A Input', 'Lucida Grande', sans-serif;

		font-size: 16px;
		--font-size-1: clamp(1rem, 0.8916rem + 0.4624vw, 1.25rem); /* 16-20 */
		--font-size-2: clamp(1.25rem, 1.1416rem + 0.4624vw, 1.5rem); /* 20-24 */
		--font-size-3: clamp(1.5rem, 1.2832rem + 0.9249vw, 2rem); /* 24-32 */
		--font-size-4: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem); /* 24-40 */
		--font-size-5: clamp(1.875rem, 1.7196rem + 0.663vw, 2.25rem);
		--font-size-6: 2.5rem; /* 40 */
		--font-size-7: clamp(2.5rem, 1.6304rem + 4.3478vw, 5rem); /* 40-80 */

		--container-max-width: 1240px;

		--fluid-20-30: clamp(1.25rem, 0.991rem + 1.105vw, 1.875rem);
		--fluid-32-40: clamp(2rem, 1.7928rem + 0.884vw, 2.5rem);
		--fluid-30-50: clamp(1.875rem, 1.357rem + 2.2099vw, 3.125rem);
		--fluid-50-100: clamp(3.125rem, 1.8301rem + 5.5249vw, 6.25rem);
		--fluid-60-120: clamp(3.75rem, 2.1961rem + 6.6298vw, 7.5rem);
	}

	button {
		cursor: pointer;
	}

	body, html {
		background-color: var(--black);
		color: var(--beige);
		font-family: var(--font-sans);
		font-weight: 700;
		scroll-behavior: smooth;
		overflow-x: hidden;
	}

	body > * {
		max-width: var(--container-max-width);
		margin-inline: auto;
		position: relative;
	}
	body > section {
		margin-bottom: var(--fluid-60-120);
	}

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

	body > header {
		pointer-events: none;
	}
	body > header > * {
		pointer-events: all;
	}
	/* header nav height */
	body *[id] {
		scroll-margin-top: 94px;
	}

	.wrap-pretty {
		text-wrap: balance;
		text-wrap: pretty;
	}
}

@layer components {
	.blaze-slider{
		--slides-to-show: 1;
		--slide-gap: 20px;
		direction: ltr;
	}
	.blaze-container {
		position: relative;
	}
	.blaze-track-container {
		overflow: hidden;
		position: relative;
	}
	.blaze-track {
		will-change: transform;
		touch-action: pan-y;
		display: flex;
		gap: var(--slide-gap); --slide-width: calc(
		(100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
		var(--slides-to-show));
		box-sizing: border-box;
	}
	.blaze-track > * {
		box-sizing: border-box;
		width: var(--slide-width);
		flex-shrink: 0;
	}


	.blaze-pagination {
		display: flex;
		flex-direction: row;
		gap: 10px; /* TODO */
		justify-content: center;
	}
	.blaze-pagination button {
		font-size: 0;
		color: rgba(0,0,0,0);
		width: 15px;
		height: 15px;
		border-radius: 15px;
		border: 1px dashed var(--black);
		background-color: var(--yellow);
		transition: background-color 0.2s;
	}
	.blaze-pagination button.active {
		background-color: var(--black);
	}

	.label {
		display: inline-block;
		text-transform: uppercase;
		padding: 5px;
		line-height: 0.7;
		font-family: var(--font-display);
		font-weight: 400;
		letter-spacing: -0.01em;
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		white-space: nowrap;
	}
	.label.mono {
		font-family: var(--font-mono);
		font-weight: 400;
		text-transform: none;
	}

	.button {
		border: 1px dashed var(--black);
		display: inline-block;
		--shadow-color: var(--black);
		min-width: 150px;
		padding: 16px 20px;
		font-family: var(--font-sans);
		font-size: clamp(1.125rem, 0.9696rem + 0.663vw, 1.5rem);
		line-height: 1;
		text-transform: uppercase;
		font-weight: 800;
		text-align: center;
		box-shadow: 5px 5px 0 var(--shadow-color);
		transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s, opacity 0.2s;
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}
	.button:not(:disabled):hover {
		transform: translate(-2px, -2px);
		box-shadow: 7px 7px 0 var(--shadow-color);
	}
	.button:not(:disabled):active {
		transform: translate(5px, 5px);
		box-shadow: 0 0 0 var(--shadow-color);
	}

	.button.beige { background-color: var(--beige); }
	.button.black { --shadow-color: var(--yellow); opacity: 1; background-color: var(--black); color: var(--yellow); border-color: var(--yellow); }

	.button-small {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		font-size: 20px;
		font-family: var(--font-mono);
		border-radius: 20px;
		padding: 10px 16px;
		text-transform: uppercase;
		display: inline-block;
		font-weight: 400;
		
	}
	
	.link-underline {
		text-decoration: underline;
	}
	.link-underline:hover {
		text-decoration: none;
	}


	pm-dropdown {
		display: inline-flex;
		flex-direction: column;
		position: relative;
	}
	pm-dropdown > .button {
		z-index: 5;
		font-size: var(--font-size-4);
		padding: 20px;
	}
	pm-dropdown > ul {
		--shadow-color: var(--yellow);
		color: var(--yellow);
		background: var(--black);
		border: 1px dashed var(--yellow);
		border-top: none;
		border-bottom: none;
		text-transform: uppercase;
		font-weight: 800;
		font-size: var(--font-size-4);
		text-align: center;
		display: flex;
		flex-direction: column;
		font-family: var(--font-sans);
		font-size: clamp(1.125rem, 0.9696rem + 0.663vw, 1.5rem);
		box-shadow: 5px 0 0 var(--shadow-color);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 6;
		overflow: hidden;
		height: 0px;
		transition: height 0.3s, padding 0.3s, box-shadow 0.3s, max-height 0.3s; 
	}
	pm-dropdown[open] > ul {
		height: auto;
		height: calc-size(auto, size);
		box-shadow: 5px 5px 0 var(--shadow-color);
		padding: 10px 0;
		border-bottom: 1px dashed var(--yellow);
		background: var(--black);
	}
	@supports not (height: calc-size(auto, size)) {
		pm-dropdown > ul {
			height: auto;
			max-height: 0px;
		}
		pm-dropdown[open] > ul {
			height: auto;
			max-height: 300px;
		}
	}
	pm-dropdown > ul li a {
		padding: 16px 20px;
		display: block;
		font-size: var(--font-size-4);
	}
	pm-dropdown > ul li:hover {
		background-color: var(--yellow);
		color: var(--black);
	}
	/* disable effects while open */
	pm-dropdown[open] .button:hover, pm-dropdown[open] .button:active {
		transform: none !important;
		box-shadow: 5px 5px 0 var(--shadow-color) !important;
	}
	@media (min-width: 1024px) {
		pm-dropdown > .button, pm-dropdown > ul li a {
			font-size: var(--font-size-3);
		}
	}
}

@layer elements {
	body > header a span {
		display: none;
	}
	body > header a {
		min-width: unset;
		padding: 11px 9px;
	}
	@media (min-width: 768px) {
		body > header a {
			padding: 16px 20px;
		}
		body > header a span {
			display: inline;
		}
	}
	#hero {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		align-items: center;
		justify-items: center;
	}
	#hero > * {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}
	#hero h1 {
		font-family: var(--font-display);
		font-weight: 400;
		font-size: clamp(3.25rem, -1.25rem + 9.375vw, 8.125rem);
		text-transform: uppercase;
		line-height: 0.7;
		letter-spacing: -0.02em;
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		position: relative;
		z-index: 5;
	}
	#hero h1 .hero-spacer {
		width: clamp(245px, 29vw, 360px);
	}
	#hero h1 > div {
		display: flex;
		flex-direction: column;
		gap: min(4vw, 50px);
		justify-content: center;
		align-items: center;
	}
	#hero h1 > div > div {
		display: inline-block;
		width: fit-content;
	}
	#hero > video {
		width: clamp(225px, 26vw, 340px);
		height: auto;
		transform: rotate(-7.1deg) translateX(clamp(20px, 5vw, 72px));
		position: relative;
		z-index: 1;
	}

	#hero .mouth {
		display: none;
	}

	@media (max-width: 768px) {
		#hero {
			padding-top: var(--fluid-60-120);
		}
		#hero h1 {
			display: none;
		}
		#hero > img {
			transform: rotate(-7.1deg);
		}
		#hero .mouth {
			display: block;
			width: clamp(120px, 81.8321px + 10.1781vw, 160px);
			height: clamp(120px, 81.8321px + 10.1781vw, 160px);
		}
	}

	.lifestyle-carousel-desktop {
		display: none;
	}
	.lifestyle-carousel-desktop img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.lifestyle-carousel-mobile img {
		aspect-ratio: 2 / 3;
		object-fit: cover;
	}

	@media (min-width: 768px) {
		.lifestyle-carousel-desktop {
			display: block;
		}
		.lifestyle-carousel-mobile {
			display: none;
		}
		
	}

	#about .about-grid {
		display: flex;
		flex-direction: column;
		gap: var(--fluid-60-120);
	}
	#about .about-grid .blaze-track > * {
		aspect-ratio: 1 / 1;
	}
	#about .about-grid .blaze-track > * img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	#about .about-grid .button {
		width: 100%;
	}
	#about .about-grid h2.label {
		margin-inline: auto;
	}
	@media (min-width: 1024px) {
		#about .about-grid {
			display: grid;
			grid-template-columns: 5fr 4fr;
			gap: 3.5vw;
			align-items: center;
		}
		#about .about-grid > *:nth-child(1) {
			aspect-ratio: 1 / 1;
		}
		#about .about-grid .button {
			width: auto;
		}
		#about .about-grid h2.label {
			margin-left: 0;
			margin-right: auto;
		}
	}


	#about .about-list {
		padding-left: 20px; /* TODO: */
		list-style: square;
	}
	#about .about-list * + * {
		margin-top: 0.3em;
	}
	#about pm-dropdown {
		width: 100%;
	}
	@media (min-width: 1024px) {
		#about pm-dropdown {
			width: auto;
		}
	}

	#giveaway h2 {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding-bottom: 70px;
		align-items: center;
	}
	#giveaway h2 .label {
		line-height: 0.8;
	}
	#giveaway h2 .label:not(.mono) {
		font-size: clamp(69px, 16vw, 112px);
	}
	#giveaway h2 .label.mono {
		font-size: clamp(16px, 3vw, 24px);
	}
	
	#giveaway h2 > .label:nth-of-type(1) {
		transform: translate(-43%, -39%) rotate(-9.5deg);
		z-index: 2;
		position: relative;
	}
	#giveaway h2 > .label:nth-of-type(2) {
		transform: rotate(1.9deg);	
	}
	#giveaway h2 > .label:nth-of-type(3) {
		transform: translate(-1%, 9%) rotate(-11.3deg);
	}
	#giveaway h2 > .label:nth-of-type(4) {
		transform: translateY(25%) rotate(0.5deg);
	}
	#giveaway h2 > .label:nth-of-type(5) {
		transform: translate(19%, 112%) rotate(-8deg);
	}
	
	@media (min-width: 768px) {
		#giveaway h2 {
			padding-bottom: 100px;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			margin-inline: calc(var(--fluid-30-50) * -1);
		}
		#giveaway h2 .label:not(.mono) {
			white-space: nowrap;
			font-size: clamp(78px, 11vw, 101px);
		}
		#giveaway h2 .label.mono {
			font-size: clamp(16px, 3vw, 22px);
		}
		#giveaway h2 > div.break-lg {
			flex-basis: 100%;
			height: 0;
		}

		#giveaway h2 > .label:nth-of-type(1) {
			transform: translate(-60%, -19%) rotate(-4deg);
		}
		#giveaway h2 > .label:nth-of-type(2) {
			transform: translate(-1%, 5%) rotate(4.2deg);
		}
		#giveaway h2 > .label:nth-of-type(3) {
			transform: translate(-2%, 22%) rotate(-6.6deg);
		}
		#giveaway h2 > .label:nth-of-type(4) {
			transform: translate(-4%, 25%) rotate(0.38deg);
		}
		#giveaway h2 > .label:nth-of-type(5) {
			transform: translate(27%, 85%) rotate(-8deg);
		}
	}

	#giveaway .samples {
		display: flex;
		flex-direction: column;
		gap: 15px;
		align-items: center;
		justify-content: center;
		font-size: clamp(2.5rem, 2.1633rem + 1.4365vw, 3.3125rem);
	}

	@media (min-width: 768px) {
		#giveaway .samples {
			flex-direction: row;
			gap: 10px;
		}
		#giveaway .samples > *:nth-child(2) {
			transform: rotate(-1.3deg);
		}
		#giveaway .samples > *:nth-child(3) {
			transform: rotate(5.3deg);
		}
	}

	#giveaway .instructions {
		padding-left: 20px;
		counter-reset: instructions;
		max-width: 680px;
		font-size: var(--font-size-5);
		font-family: var(--font-display);
		font-weight: 400;
		text-transform: uppercase;
		margin-inline: auto;
	}
	#giveaway .instructions li {
		counter-increment: instructions;
		position: relative;
		margin-block: 15px; /* TODO */
		display: flex;
		gap: 10px; /* TODO */
		align-items: center;
		line-height: 1;

	}
	#giveaway .instructions li::before {
		content: counter(instructions);
		color: var(--black);
		background: var(--yellow);
		font-size: 30px;
		font-family: var(--font-mono);
		font-weight: 400;
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		border: 2px dashed var(--black);
		transform: rotate(15deg);
		border-radius: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		line-height: 1.1;
	}
	#giveaway .instructions li:nth-child(even)::before {
		transform: rotate(-15deg);
	}


	pm-obscenity-tornado {
		display: flex;
		/* gap: clamp(20px, 11.7127px + 2.2099vw, 40px); */
		padding-block: clamp(20px, 11.7127px + 2.2099vw, 40px);
		flex-direction: column;
		border: 1px dashed var(--black);
		background-color: var(--yellow);
		box-shadow: 4px 4px 0 var(--black);
		overflow: hidden;
		user-select: none;
		-webkit-user-select: none;
	}
	pm-obscenity-tornado [pm-target=words] {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
	pm-obscenity-tornado [pm-target=words] .label {
		pointer-events: all;
		user-select: none;
		font-size: clamp(2rem, 0.7569rem + 5.3039vw, 5rem);
		padding: clamp(2px, 0.7569px + 0.3315vw, 5px);
		background: var(--black);
		position: absolute;
		transform: translate(-50%, -50%) rotate(var(--rotate, 0deg));
		transition: translate 0.1s ease, box-shadow 0.1s ease;
		box-shadow: 0 0 0 0 var(--black);
	}
	pm-obscenity-tornado [pm-target=words] .label:hover {
		translate: -2px -4px;
		box-shadow: 2px 4px 6px 0 rgba(0,0,0,0.5);
	}

	pm-obscenity-tornado [pm-target=words] > *:nth-child(4n + 1) {
		color: var(--red);
	}
	pm-obscenity-tornado [pm-target=words] > *:nth-child(4n + 2) {
		color: var(--blue);
	}
	pm-obscenity-tornado [pm-target=words] > *:nth-child(4n + 3) {
		color: var(--yellow);
	}
	pm-obscenity-tornado [pm-target=words] > *:nth-child(4n + 4) {
		color: var(--beige);
	}
	pm-obscenity-tornado button {
		background: var(--black);
		color: var(--beige);
		border: 1px solid var(--black);
		transition: background 0.2s, color 0.2s, border 0.2s;
		border-radius: 50px;
	}

	pm-obscenity-tornado button:hover {
		background: var(--beige);
		color: var(--black);
		border: 1px solid var(--black);
	}


	pm-question {
		display: block;
	}
	pm-question:not(:last-child) {
		margin-bottom: var(--fluid-32-40);
	}
	pm-question h3 {
		font-size: clamp(1.125rem, 1.0214rem + 0.442vw, 1.375rem);
		margin-bottom: 10px;
	}
	pm-question:nth-child(3n + 1) h3 {
		color: var(--red);
	}
	pm-question:nth-child(3n + 2) h3 {
		color: var(--yellow);
	}
	pm-question:nth-child(3n + 3) h3 {
		color: var(--blue);
	}
	pm-question p {
		font-family: var(--font-mono);
		font-weight: 400;
		font-size: 14px;
		line-height: 1.5;
	}

	@media (min-width: 768px) {
		pm-question h3 {
			font-size: var(--font-size-3);
			margin-bottom: 15px;
		}
		pm-question p {
			font-size: var(--font-size-1);
		}
	}

	#faq h2 {
		font-size: 16.5vw;
		text-align: center;
		line-height: 0.4;
		margin-bottom: var(--fluid-50-100);
		padding-bottom: clamp(0px, 4.5vw, 58px);
		white-space: nowrap;
		transform: translateX(-2%);
	}
	@media (min-width: 768px) {
		#faq h2 {
			font-size: clamp(3.125rem, 0.7942rem + 9.9448vw, 8.75rem);
			transform: none;
		}
	}

	.mouth {
		--mouth-image: url('img/mouth1.webp');
		--bg-color: var(--color, var(--yellow));
		position: absolute;
		background-color: var(--bg-color);
		background-image: var(--mouth-image);
		background-blend-mode: multiply;
		background-size: contain;
		background-repeat: no-repeat;
		mask-image: var(--mouth-image);
		mask-mode: alpha;
		mask-size: contain;
		mask-repeat: no-repeat;
		width: 100px;
		height: 100px;
		pointer-events: none;
	}
	.alt {
		--mouth-image: url('img/mouth2.webp');
	}
}