/* AI Disclosure: After writing this CSS file, I used Cursor to clean the code and identify opportunities to use variables and nesting */

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

:root {
	font-size: 100%;
	--padding: 1rem;
	--dropshadow: 0.1rem 0.15rem 0.2rem #2929293d;
	--dropshadow3: 0.25rem 0.25rem 0.6rem #2929296a;
	--dropshadow2: 0.55rem 0.55rem 1.2rem #29292981;
	--white: #F5F2ED;
	--transition: 300ms ease-in-out;
	--blur-soft: 0.08rem;
	--blur-strong: 0.25rem;
	--headerheight: 5rem;
	--headerheight2: 9rem;
	--navwidth: 16rem;
}

body {
	overflow-x: hidden;

	&::before {
		content: "";
		position: fixed;
		inset: 0;
		background-image: url("canvas.jpg");
		background-size: cover;
		background-position: center;
		z-index: -1;
		opacity: 80%;
	}

	&::after {
		content: "";
		position: fixed;
		inset: 0;
		backdrop-filter: blur(var(--blur-soft));
		pointer-events: none;
		z-index: 5;
		opacity: 0;
		transition: opacity var(--transition);
	}

	&.modal-open {
		overflow: hidden;
		block-size: 100vh;
		touch-action: none;
	}
}

.blur {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	background: rgba(255, 255, 255, 0);
	z-index: 9;
	backdrop-filter: blur(var(--blur-strong));
	display: none;
	transition: var(--transition);
}

.bluractive {
	display: block;
	transition: var(--transition);
}

span {
	font-size: 1.2em;
	letter-spacing: -0.03em;
}

.linework {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.8;

	svg {
		position: absolute;
		inline-size: 300%;
		display: block;
		inset-inline-end: 0;
	}
}

#content {
	inline-size: 100%;
	min-block-size: 100%;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--padding);
	row-gap: var(--padding);
	padding-inline: var(--padding);
	padding-block-start: calc(6 * var(--padding));
	padding-block-end: calc(10 * var(--padding));
}

.polaroid, .blank, .document, .placeholder {
	inline-size: 100%;
	aspect-ratio: 2.8 / 4;
	block-size: auto;
}

.blank {
	display: none;
}

.placeholder {
	display: none;
}

.placeholder-active {
	display: block;
}

/* Creating custom transitions to "fly in" captions from the right */
.placeholder-active.container,
.caption-active.container {
	animation: flyInFromRight var(--transition);
}

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

.caption-active.container {
	animation-name: flyInFromRightCaption;
}

@keyframes flyInFromRightCaption {
	from {
		transform: translateX(100%) rotate(0deg);
	}
	to {
		transform: translateX(0) rotate(2deg);
	}
}

/* Fly out to the right when modal is closed (view transition captures old state) */
::view-transition-old(open-card-placeholder) {
	animation: flyOutToRight var(--transition) forwards;
}
::view-transition-old(open-card-caption) {
	animation: flyOutToRightCaption var(--transition) forwards;
}

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

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


/* Chat GPT pointed me towards CSS container queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries */
/* I use this technique throughout the project to control the size and position of the text and caption based on the container size, as well as polaroids */
/* Here I am establishing the container as the audio component */
.audio {
	container-type: inline-size;
	container-name: audio;
	inline-size: auto;
	block-size: auto;
	aspect-ratio: 1;
	position: relative;
	z-index: 1;
	margin-block-start: 3rem;
	border-radius: 100%;
	transition: var(--transition);
	/* background-color: pink; */

	p {
		z-index: 2;
		position: absolute;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		text-align: center;
		mix-blend-mode: multiply;
		inline-size: 45%;
		color: rgb(201, 199, 199);
		/* background-color: red; */

		/* Here I am using the container query to set the font size and top position of the text based on the container size */
		/* CQI unit makes the text scale proportionally to the container size */
		font-size: 3.5cqi;
		inset-block-start: 12%;
		line-height: 1.25em;
		font-family: "Lexend Deca", sans-serif;
	}

	img {
		inline-size: 95%;
		object-fit: contain;
		position: absolute;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		filter: drop-shadow(var(--dropshadow));
		transition: var(--transition);
	}
}

.polaroid {
	position: relative;
	box-shadow: var(--dropshadow);
	background-color: rgb(234, 234, 231);
	transition: var(--transition);
	overflow: hidden;

	.polaroidimg {
		overflow: hidden;
	}

	.polaroidimg, .polaroidcover {
		position: absolute;
		inset-block-start: calc(var(--padding) / 2);
		inset-inline-start: calc(var(--padding) / 2);
		inline-size: calc(100% - var(--padding));
		block-size: 80%;
	}

	.polaroidcover {
		z-index: 1;
		mix-blend-mode: lighten;
		opacity: 40%;
	}

	img, picture {
		position: absolute;
	}

	&.withvideo img {
		scale: 134%;
	}
}

.template {
	position: absolute;
	inset: 0;
	inset-block-end: 3rem;
	margin: auto;
	inline-size: 28%;
	block-size: auto;
	z-index: 4;
	pointer-events: none;
	color: var(--white);
	transition: var(--transition);
}

/* Per Michael's instruction, I am using a symbol within an SVG to reference the SVG in Javascript. This CSS hides the original copy of the SVG that is in my HTML */
/* I use this technique again throughout the project */
svg:has(symbol) {
	display: none;
}

img, picture {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: auto;
	display: block;
	object-position: top center;
}

img {
	object-fit: cover;
}

.text, .caption {
	color: black;
	inline-size: calc(100% - (2 * var(--padding)));
	padding: var(--padding);
	align-self: start;
	margin-block-start: calc(2 * var(--padding));
	box-shadow: var(--dropshadow);
	transition: var(--transition);
	margin-inline: var(--padding);
}

.text, .caption, .polaroid, .document-shadow, .audio {
	transform: translateY(calc(-2 * var(--translate))) rotate(var(--rotation)) translateX(var(--translate));
}

.text {
	position: relative;
	background: #fff5d9;
	background: linear-gradient(0deg, rgb(252, 239, 204) 0%, rgba(255, 244, 176, 1) 100%);
	aspect-ratio: 1;
	container-type: inline-size;
	container-name: audio;
}

.text p {
	font-size: 4.5cqi;
	line-height: 1.35em;
}

.caption {
	background: #fff5d9;
	background: linear-gradient(0deg, rgb(203, 250, 255) 0%, rgb(181, 245, 255) 100%);
	position: fixed;
	display: none;
	z-index: 14;
	inset-inline-end: 0;
	block-size: auto;
	inline-size: calc(100% - (2 * var(--padding)));
	box-shadow: var(--dropshadow3);
	padding-block-end: calc(var(--padding) * 5);
	inset-block-end: calc(2 * var(--padding));
	transform: rotate(2deg);

	& p {
	hyphens: auto;
	}
}

.caption-active {
	display: block;
	transition: var(--transition);
}

.text::after, .document::after, .caption::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("paper-grain.jpg");
	background-size: cover;
	background-repeat: repeat;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.6;
	filter: contrast(140%) brightness(105%);
}

h1, p, h2, .buttonstyle {
	font-family: "Rock Salt", cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.2rem;
}

p, h2, h1 {
	mix-blend-mode: multiply;
	opacity: 0.9;
}

.buttonstyle {
	text-align: center;
	background-color: rgba(255, 244, 176, 1);
	padding-inline: var(--padding);
	padding-block: calc(var(--padding) / 2);
	inset-block-end: calc(1 * var(--padding));
	position: absolute;
	transition: var(--transition);
	mix-blend-mode: normal;
}

.navigation .buttonstyle {
	position: static;
	block-size: calc(var(--headerheight2) / 4);
}

#dialog {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	transition: var(--transition);
	background: rgba(255, 255, 255, 0);
	backdrop-filter: blur(var(--blur-strong));

	p {
		font-size: 0.9rem;
		line-height: 1.2rem;
		padding-block-start: var(--padding);
	}

	.text {
		max-inline-size: calc(100vh - (8 * var(--padding)));
		margin-block: 0;
		margin-inline: 0;
		inset-inline-start: 50%;
		inset-block-start: 50%;
		transform: translate(-50%, -50%);
		aspect-ratio: 1;
		position: fixed;
		display: flex;
		flex-direction: column;
		padding: var(--padding);
		transition: var(--transition);
		background: #fff5d9;
		background: linear-gradient(0deg, rgb(203, 250, 255) 0%, rgb(181, 245, 255) 100%);
	}
}

body:has(dialog[open]) {
	overflow: hidden;
}

body:has(dialog[open]) #modal {
	display: none;
}

#content h2 {
	font-size: 1.5rem;
	margin-block-end: var(--padding);
	line-height: 2.1rem;
	
	& p {
	padding-inline-start: 0.08em;
	overflow: visible;
	}
}

#modal,
#closebutton,
#homebutton {
	position: fixed;
	inset-block-start: -0.1rem;
	inset-inline-start: -0.1rem;
	scale: 40%;
	z-index: 500;
	display: block;
	transition: var(--transition);
	color: black;
	mix-blend-mode: multiply;
	opacity: 0.9;
}

#closebutton {
	inset-block-start: calc(var(--padding) /2);
	inset-inline-start: calc(var(--padding) /2);
	scale: 50%;
}

#homebutton {
	inset-inline-start: auto;
	scale: 45%;
	inset-block-start: -0.1rem;
	inset-inline-end: -0.1rem;
}

body:has(figure.item.open) #modal,
body:has(figure.item.open) #closebutton {
	z-index: 0;
}

.test {
	inline-size: 100%;
	block-size: auto;
	display: flex;
	justify-content: start;
	column-gap: var(--padding);
	row-gap: var(--padding);
	padding-block-start: var(--padding);
	padding-inline: 0;
	padding-block-end: 0;
	flex-wrap: wrap;
	margin-block-start: auto;
}

.test .buttonstyle {
	inset-block-end: 0;
	position: static;
}

h1 {
	font-size: 1.9rem;
	line-height: 1.9rem;
	padding-block: var(--padding);
}

/* I wanted to use an svg file as a mask to make my PDF files look torn */
/* I used a LLM to learn about the webkit mask-image property, and read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-image */
/* This works because the image is set to cover the entire svg, regardless of size, making it a responsive mask setup */

.document-shadow {
	filter: drop-shadow(var(--dropshadow));
	display: block;
	transition: var(--transition);

	.document {
		-webkit-mask-image: url("torn-mask.svg");
		-webkit-mask-size: cover;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-image: url("torn-mask.svg");
		mask-size: cover;
		mask-repeat: no-repeat;
		mask-position: center;
		position: relative;
		background: white;
		overflow: hidden;

		img, picture {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			object-position: top center;
			transform: scale(0.93);
			transform-origin: bottom center;
		}
	}
}

header {
	inline-size: 100%;
	position: fixed;
	inset-block-end: 0;
	inset-inline-start: 0;
	z-index: 8;
	/* mix-blend-mode: multiply; */
	transition: var(--transition);
	block-size: var(--headerheight2);
	background-image: url("paper2.jpg");
	background-size: cover;
	background-position: center;
	box-shadow: var(--dropshadow2);
	display: flex;
	flex-direction: column;
	align-items: start;
	padding-block-start: var(--padding);
}

.opening {
	padding-block-start: 0;
}

.flexcolors {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: calc(var(--padding) / 2);
	inline-size: 100%;
	padding-inline: var(--padding);
	/* mix-blend-mode: multiply; */
	block-size: 100%;
}

.navigation {
	display: flex;
	align-items: center;
	block-size: calc(var(--headerheight2) / 4);
	mix-blend-mode: normal;
	inline-size: 80%;
	justify-content: center;
	column-gap: calc(var(--padding) / 2);
	margin-inline-start: 10%;
	mix-blend-mode: multiply;
	opacity: 0.9;
	/* background-color: red; */

	& p {
		inline-size: 6rem;
		text-align: center;
	}
}

.opening .navigation {
	block-size: 100%;
	inset-block-start: 0;

	& p {
		inline-size: auto;
	}
}

.arrow {
	scale: 38%;
	transform: rotate(180deg);
}

.forward {
	transform: rotate(0deg) translateY(0.2rem);
}

.swatch, .swatch2, .swatch3 {
	-webkit-mask-image: url("swatch1.svg");
	-webkit-mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: url("swatch1.svg");
	mask-size: cover;
	mask-repeat: no-repeat;
	mask-position: center;
	block-size: 70%;
	aspect-ratio: 0.92;
	background-color: rgb(200, 124, 124);
	mix-blend-mode: multiply;
	opacity: 0.8;
}

.swatch2 {
	-webkit-mask-image: url("swatch2.svg");
	mask-image: url("swatch2.svg");
}

.swatch3 {
	-webkit-mask-image: url("swatch3.svg");
	mask-image: url("swatch3.svg");
}

.navigation p {
	margin: 0;
}

figure.item {
	container-type: inline-size;
	container-name: card;
}

/* Here I am using the container query to set the padding, margin, and inline-size of the text and caption based on the container size */
/* I set the max-width to 17rem, which is the width of the card when the grid is not expanded */
/* Using cqw units instead of cqi units, because I want to scale by width, not height */
@container card (max-inline-size: 17cqw) {
	figure.item:not(.open) .text,
	figure.item:not(.open) .caption {
		margin-inline: 5.88cqw;
		margin-block-start: 11.76cqw;
		padding: 5.88cqw;
		inline-size: calc(100% - 11.76cqw);
	}
	figure.item:not(.open) .polaroid .polaroidimg,
	figure.item:not(.open) .polaroid .polaroidcover {
		inset-block-start: 2.94cqw;
		inset-inline-start: 2.94cqw;
		inline-size: calc(100% - 5.88cqw);
	}

	figure.item:not(.open) .template {
		inset-block-end: 10cqw;
	}
}

/* I had to remind myself about the child combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Child_combinator */
/* I use this technique again throughout the project */
figure.item.open > :is(.polaroid, .document-shadow, .text, .audio) {
	position: fixed;
	inset-inline-start: 50%;
	inset-block-start: calc(2 * var(--padding));
	transform: translateX(-50%);
	aspect-ratio: 2.8 / 4;
	z-index: 13;
	box-shadow: var(--dropshadow3);
	max-block-size: calc(100vh - (4 * var(--padding)));
	block-size: auto;

/* I wanted to make sure the image would responsively resize for any viewport width or height while still maintaining the same aspect aspect-ratio */
/* I found the min () CSS function on MDN, which allows me to compute the largest width that fits within the available viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/min */
/* First min() arg limits by viewport width (100%); second by viewport height (100vh) so aspect ratio 2.8/4 is kept at all sizes */
	inline-size: min(calc(100% - (4 * var(--padding))),
	calc((100vh - (4 * var(--padding))) * (2.8 / 4)));
}


/* Controlling animations associated with viewtransition JS */
/* Refreshed on animation properties on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-duration */
::view-transition-group(open-card) {
	animation-duration: 300ms;
	animation-timing-function: ease-in-out;
}
::view-transition-old(open-card),
::view-transition-new(open-card) {
	animation-duration: 300ms;
	animation-timing-function: ease-in-out;
	mix-blend-mode: normal;
}

figure.item.open > .document-shadow {
	box-shadow: none;
	filter: drop-shadow(var(--dropshadow3));
	inline-size: min(calc(100% - (-2 * var(--padding))),
	calc((100vh - (-2 * var(--padding))) * (2.8 / 4)));
	inset-block-start: calc(-0.8 * var(--padding));
	aspect-ratio: 1;
}

figure.item.open > .audio {
	box-shadow: none;
	aspect-ratio: 1;
	filter: drop-shadow(var(--dropshadow3));
}

figure.item.open > .text {
	position: fixed;
	aspect-ratio: 1;
	margin: 0;
	inline-size: calc(100% - (2 * var(--padding)));
}

figure.item.open > .text p {
	transition: var(--transition);
}

svg.palette1 { color: var(--color1); }
svg.palette2 { color: var(--color2); }
svg.palette3 { color: var(--color3); }
svg.palette4 { color: var(--color4); }
svg.palette5 { color: var(--color5); }

header .palette1 { background: var(--color1); }
header .palette2 { background: var(--color2); }
header .palette3 { background: var(--color3); }
header .palette4 { background: var(--color4); }
header .palette5 { background: var(--color5); }

@media (width > 1200px) {
	#dialog .text {
		max-inline-size: calc(100vh - (2 * var(--padding)));
	}
}

@media (width > 1000px) {
	.caption {
		inline-size: 27vw;
		aspect-ratio: 1;
	}

	figure.item.open > .text {
		inset-block-start: 50%;
		transform: translate(-50%, -50%);
		max-inline-size: 30rem;
		transition: var(--transition);
		font-size: 4.5cqi;
	}

	.linework svg {
		inset-block-end: 85vh;
		inline-size: 110%;
	}
}

@media (width > 860px) {
	.blank {
		display: block;
	}

	:root {
		font-size: 125%;
	}

	.arrow {
		scale: 55%;
	}
}

@media (width > 650px) {
	figure.item.open > .audio {
		inset-block-start: 10%;
	}

	#modal, #closebutton, #homebutton {
		z-index: 0;
	}

	#content {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}

	h1 {
		font-size: 3rem;
		line-height: 3rem;
	}

	header {
		block-size: var(--headerheight);
		flex-direction: row;
		padding-block-start: 0;
		justify-content: space-between;
		align-items: center;
	}

	.flexcolors {
		justify-content: right;
		column-gap: var(--padding);
		inline-size: auto;
		padding-inline-start: 0;
	}

	.navigation {
		inline-size: auto;
		margin-inline-start: 0;
		padding-inline-start: var(--padding);
		transition: var(--transition);
	}

	.opening .navigation {
		padding-inline-start: 0;
		margin-inline-start: var(--padding);
		block-size: calc(var(--headerheight2) / 4);
	}

	#dialog p {
		line-height: 1.5rem;
	}

	figure.item.open > .polaroid:hover,
	figure.item.open > .text:hover,
	figure.item.open > .document-shadow:hover,
	figure.item.open > .audio:hover {
		z-index: 15;
}

	#modal:hover, .arrow:hover {
		transition: var(--transition);
		color: rgba(0, 0, 0, 0.4);
	}

	#closebutton:hover, #homebutton:hover {
		transition: var(--transition);
		color: rgba(0, 0, 0, 0.4);
	}

	.buttonstyle:hover {
		transition: var(--transition);
		background-color: rgba(255, 255, 255, 0);
		background: none;
		box-shadow: inset 0 0 0.3rem #0808089c;
	}

	/* I wanted to blur everything except the hovered card (polaroid / text / document-shadow) */
	/* I tried using the not selector, but after troubleshooting wtih chatGPT I realized the has selector would be an easier setup */
	/* Here we activate the blur pseudo element each time one of the elements is hovered over */
	body:has(.polaroid:hover)::after,
	body:has(.text:hover)::after,
	body:has(.document-shadow:hover)::after,
	body:has(.audio:hover)::after {
		opacity: 1;
	}

	.polaroid.withvideo:hover .template {
		scale: 1.2;
		transform: rotate(-4deg);
		transition: var(--transition);
	}

	.block1:hover {
		box-shadow: var(--dropshadow2);
	}

	.block2:hover {
		filter: drop-shadow(var(--dropshadow2));
	}

	.block1,
	.block2 {
		position: relative;
	}

	.block1:hover,
	.block2:hover {
		z-index: 7;
		transition: var(--transition);
	}
}

/* CSS for scroll-triggered “hover” when card passes through viewport */
/* Using not selectors per Michael's suggestion to avoid targeting specific components */
@media (width < 650px) {
	figure.item:not(.open) .block1hover {
		box-shadow: var(--dropshadow2);
		transition: var(--transition);
	}

	figure.item:not(.open) .block2hover {
		filter: drop-shadow(var(--dropshadow2));
		transition: var(--transition);
	}

	figure.item:not(.open):has(.block1hover),
	figure.item:not(.open):has(.block2hover) {
		position: relative;
		z-index: 7;
	}

	/* Adding same blur from earlier to the mobile version of the interaction */
	body:has(figure.item:not(.open) .block1hover)::after,
	body:has(figure.item:not(.open) .block2hover)::after {
		opacity: 1;
	}
}

@media (width < 500px) {
	#dialog p {
		line-height: 1rem;
		font-size: 0.8rem;
	}

	#dialog h1 {
		font-size: 1.8rem;
	}
}

/* Had an issue with mobile viewport appearing zoomed in on page load */
/* I used ChatGPT to help me troubleshoot this issue, and found this override to fix the issue by clipping the overflow of the body to the horizontal axis: */
html, body {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	html, body { overflow-x: hidden; }
}