/* ----- CSS CUSTOM PROPERTIES ----- */
:root {
	--primary-base: 28.97% 0.0301 195.62;
	--secondary-base: 35.92% 0.0573 196.63;
	--tertiary-base: 50.91% 0.1708 25.35;
	--white-base: 100% 0 0;
	--black-base: 0% 0 0;

	--primary: oklch(var(--primary-base));
	--secondary: oklch(var(--secondary-base));
	--tertiary: oklch(var(--tertiary-base));
	--card-color: oklch(var(--primary-base) / 90%);
	--white: oklch(var(--white-base));
	--black: oklch(var(--black-base));

	--gutter: 2rem;
	--page-max-width: 75rem;
	--max-w-text: 50rem;
	--row-spacing: 3rem;
	--header-height: 76px;

	--ff-heading: avenir-lt-pro, sans-serif;
	--ff-body: avenir-lt-pro, sans-serif;

	--fs-xs: clamp(0.54rem, 0.05vi + 0.6rem, 0.6rem);
	--fs-sm: clamp(0.81rem, 0.18vi + 0.7rem, 0.9rem);
	--fs-base: clamp(0.88rem, 0.29vi + 0.8rem, 1.06rem);
	--fs-md: clamp(1rem, 0.45vi + 0.81rem, 1.2rem);
	--fs-lg: clamp(1.12rem, 0.60vi + 0.82rem, 1.56rem);
	--fs-xl: clamp(1.20rem, 0.76vi + 0.96rem, 1.86rem);
	--fs-2xl: clamp(1.36rem, 0.95vi + 1.02rem, 2.2rem);
	--fs-3xl: clamp(1.81rem, 2.32vi + 1.23rem, 3.32rem);

	--in: all 0.2s ease-in;
	--out: all 0.15s ease-out;
}


/* ----- RESET ----- */
*,
*::before,
*::after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	overflow-anchor: none;
}
body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-base);
	background: url('assets/plaid-texture.webp');
	background-size: 16%;
	background-position: top center;
}
html,
body {
	scroll-behavior: smooth;
	overflow-x: clip;
}
[id] {
	scroll-margin-top: calc(var(--admin-bar-height) + var(--header-height) + 2rem);
}
b,
strong {
	font-weight: 800;
}
img {
	height: auto;
	max-width: 100%;
}
@media (width <= 1200px) {
	body {
		background-size: 32%;
	}
}
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.panel .panel-inner { 
		transition-duration: 1ms !important;
	}
	.snow {
		display: none;
	}
}




/* ----- GLOBALS ----- */
::selection {
	background-color: var(--tertiary);
	color: var(--white);
  }
:where(h1, h2, h3, h4) {
	font-family: var(--ff-heading);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
h1 {
	font-size: var(--fs-2xl);
}
h2 {
	font-size: var(--fs-xl);
}
h3 {
	font-size: var(--fs-md);
}
h4 {
	font-size: var(--fs-base);
}
p {
	color: oklch(var(--primary));
	font-size: var(--fs-sm);
	line-height: 1.5;
	margin: 0;
}
hr {
	width: 100%;
	height: 2px;
	border: none;
	margin: 2em 0;
	background-color: oklch(var(--black-base) / 10%);
}
svg {
	fill: currentColor;
}



/* ----- UTILS ----- */
.fs-sm {
	font-size: var(--fs-sm) !important;
}
.fs-base {
	font-size: var(--fs-base) !important;
}
.fs-md {
	font-size: var(--fs-md) !important;
}
.fs-lg {
	font-size: var(--fs-lg) !important;
}
.fs-xl {
	font-size: var(--fs-xl) !important;
}
.fs-2xl {
	font-size: var(--fs-2xl) !important;
}
.fs-3xl {
	font-size: var(--fs-3xl) !important;
}



/* ----- CONTENT ----- */
.content {
	position: relative;
	z-index: 2;
}
.content .row {
	display: grid;
	padding-top: var(--row-spacing);
	padding-bottom: var(--row-spacing);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3rem;
}
.content .row .row-inner {
	width: 100%;
	max-width: var(--page-max-width);
	padding-inline: var(--gutter);
	justify-self: center;
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 2rem;
	position: relative;
}
.content .row .three-col {
	grid-template-columns: 1fr 1fr 1fr;
}
@media (width <= 1200px) {
	.content .row .three-col {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (width <= 1024px) {
	.content .row .three-col {
		grid-template-columns: 1fr 1fr;
	}
}
@media (width <= 782px) {
	.content .row .three-col {
		grid-template-columns: 1fr;
	}
}



/* ----- Snow ----- */
.snow {
	position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
	z-index: 1;
}



/* ----- Header ----- */

/* Normal */
.site-header {
	max-width: calc(var(--page-max-width) - var(--gutter) * 2);
	margin: 6rem auto 0 auto;
	width: 100%;
	padding: 0.75rem 2rem;
	border-radius: 99rem;
	background: var(--tertiary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 999;
	will-change: border-radius;
	filter: drop-shadow(0 0 0 oklch(var(--black-base) / 50%));
	transition: all 1s ease-out;
}
.site-header.fixed {
	position: sticky;
	top: 0;
	border-radius: 0 0 1.5rem 1.5rem;
	filter: drop-shadow(0.25rem 0 0.5rem oklch(var(--black-base) / 50%));
	transition: var(--out);
}
.site-header h1 {
	color: var(--white);
	font-weight: 300;
	text-wrap: balance;
}
.site-header h1 strong {
	font-weight: 800;
}
.site-header .csm-link {
	display: block;
	position: relative;
	text-decoration: none;
}
.site-header .csm-link img {
	display: block;
	transform: scale(1);
	transition: var(--in);
}
.site-header .csm-link:hover img {
	transform: scale(1.1);
	transition: var(--out);
}
.site-header .csm-link span {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	color: var(--white);
	user-select: none;
	-webkit-user-select: none;
	transition: var(--in);
}
.site-header .csm-link:hover span {
	right: calc(100%);
	padding-right: 1rem;
	opacity: 1;
	user-select: auto;
	-webkit-user-select: auto;
	transition: var(--out);
}
@media (width <= 1200px) {
	.site-header {
		max-width: calc(100% - var(--gutter) * 2);
		margin: 6rem auto 0 auto;
		padding: 0.75rem 2rem;
	}
}
@media (width <= 782px) {
	.site-header {
		max-width: 100%;
		margin: 0;
		padding: 0.75rem 2rem;
		border-radius: 0 0 1.5rem 1.5rem;
	}
	.site-header .csm-link span {
		display: none;
	}
}

/* Locked */
.site-header.is-locked {
	border-radius: 0 0 99rem;
	transition: var(--out);
}



/* ----- Cards ----- */
.row {
	height: auto;
	overflow: hidden;
	contain: layout paint style;
	will-change: height;
	transition: var(--in);
}
.row-inner {
	contain: layout;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Normal */
.card {
	padding-bottom: 2rem;
}
.card-wrapper {
	background: var(--card-color);
	border: 1px solid var(--secondary);
	border-radius: 1.5rem;
	padding: 1rem 1rem 1.5rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: relative;
	backdrop-filter: blur(0.25rem);
	transition: var(--in);
}
.card-wrapper:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 2.1rem solid var(--white);
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: -4.1rem;
	opacity: 0;
	transform: translateX(-50%);
	transition:
		transform 0.1s ease-out,
		opacity 0.1s ease-out,
		bottom 0.1s ease-out;
	pointer-events: none;
}
.card .staff-image-wrapper {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	overflow: clip;
	pointer-events: none;
	position: relative;
}
.card .staff-image-wrapper img {
	height: 100%;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
}
.card .staff-image-wrapper img.alt-pic {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.1s ease-out;
}
.card .name-title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}
.card .name-title-wrapper * {
	color: var(--white);
	text-align: center;
}
.card .name-title-wrapper .title {
	font-weight: 300;
	font-size: var(--fs-md);
}

/* Hover */
.card.active .card-wrapper {
	background: var(--white);
	transition: var(--out);
}
.card.active .card-wrapper:after {
	bottom: -2.1rem;
	opacity: 1;
	transition:
		transform 0.1s ease-out,
		opacity 0.1s 0.05s ease-out,
		bottom 0.1s 0.1s ease-out;
}
.card.active .staff-image-wrapper img.alt-pic {
	opacity: 1;
	transition: opacity 0.1s ease-out;
}
.card.active .name-title-wrapper * {
	color: var(--tertiary);
}



/* ----- Card Positioning ----- */

/* 3 Columns - Desktop */
.card:nth-of-type(3n + 1) { 
	grid-column: 1; 
}
.card:nth-of-type(3n + 2) { 
	grid-column: 2; 
}
.card:nth-of-type(3n + 3) { 
	grid-column: 3; 
}

/* 2 Columns - Tablet */
@media (width <= 1024px) {
	.card:nth-of-type(2n + 1) { 
		grid-column: 1; 
	}
	.card:nth-of-type(2n + 2) { 
		grid-column: 2; 
	}
}

/* 1 Column - Mobile */
@media (width <= 782px) {
	.card:nth-of-type(1n + 1) { 
		grid-column: 1; 
	}
}


/* ----- Panel Styling ----- */

/* Normal */
.panel {
	display: block;
	overflow: hidden;
	height: 0;
	opacity: 0;
	background: var(--white);
	grid-column: 1 / -1;
	border-radius: 1.5rem;
	position: relative;
	z-index: 2;
	transition: var(--in);
}
.panel .panel-inner {
	opacity: 0;
	height: 0;
	overflow: hidden;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;
	grid-gap: 2rem;
	align-items: center;
	transform: translateY(-1rem);
	transition:
   		height 0.3s ease,
		padding 0.3s ease,
    	opacity 0.5s 0.2s ease,
    	transform 0.3s ease;
	will-change: height;
	contain: layout style;
	user-select: none;
	-webkit-user-select: none;
}
.panel p {
	text-wrap: pretty;
}
.panel .memory {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.panel .memory * {
	color: var(--primary);
}
.panel .memory h4 {
	text-wrap: balance;
}
@media (width <= 1024px) {
	.panel .panel-inner {
		grid-template-columns: 1fr 2fr;
	}
	.panel .panel-inner .character {
		grid-row: span 2;
		align-self: start;
	}
	.panel .panel-inner .csm {
		align-self: end;
	}
	.panel .panel-inner .holiday {
		align-self: start;
	}
}
@media (width <= 500px) {
	.panel .panel-inner {
		grid-template-columns: 1fr;
	}
	.panel .panel-inner .character {
		max-height: 33.33vh;
		grid-row: span 1;
		margin: 0 auto;
	}
}

/* Open */
.panel.open {
	height: auto;
	opacity: 1;
	margin-bottom: 2rem;
	transition: var(--out);
}
.panel.open .panel-inner {
	height: auto;
	opacity: 1;
	padding: 2rem 4rem;
	user-select: auto;
	-webkit-user-select: auto;
	transform: translateY(0);
	transition:
   		height 0.3s ease,
    	opacity 0.2s ease,
    	transform 0.3s ease;
}
@media (width <= 782px) {
	.panel.open .panel-inner {
		padding: 2rem;
	}
}



/* ----- Panel Positioning ----- */

/* 3 Columns - Desktop */
.panel:nth-of-type(-n + 3) {
  grid-row: 2;
}
.panel:nth-of-type(n + 4):nth-of-type(-n + 6) {
  grid-row: 4;
}
.panel:nth-of-type(n + 7):nth-of-type(-n + 9) {
  grid-row: 6;
}
.panel:nth-of-type(n + 10):nth-of-type(-n + 12) {
  grid-row: 8;
}
.panel:nth-of-type(n + 13):nth-of-type(-n + 15) {
  grid-row: 10;
}
.panel:nth-of-type(n + 16):nth-of-type(-n + 18) {
  grid-row: 12;
}
.panel:nth-of-type(n + 19):nth-of-type(-n + 21) {
  grid-row: 14;
}
.panel:nth-of-type(n + 22):nth-of-type(-n + 24) {
  grid-row: 16;
}
.panel:nth-of-type(n + 25):nth-of-type(-n + 27) {
  grid-row: 18;
}
.panel:nth-of-type(n + 28):nth-of-type(-n + 30) {
  grid-row: 20;
}
.panel:nth-of-type(n + 31):nth-of-type(-n + 33) {
  grid-row: 22;
}
.panel:nth-of-type(n + 34):nth-of-type(-n + 36) {
  grid-row: 24;
}

/* 2 Columns - Tablet */
@media (width <= 1024px) {
	.panel:nth-of-type(-n + 2) { grid-row: 2; }
	.panel:nth-of-type(n + 3):nth-of-type(-n + 4) { 
		grid-row: 4; 
	}
	.panel:nth-of-type(n + 5):nth-of-type(-n + 6) { 
		grid-row: 6; 
	}
	.panel:nth-of-type(n + 7):nth-of-type(-n + 8) { 
		grid-row: 8; 
	}
	.panel:nth-of-type(n + 9):nth-of-type(-n + 10) { 
		grid-row: 10; 
	}
	.panel:nth-of-type(n + 11):nth-of-type(-n + 12) { 
		grid-row: 12; 
	}
	.panel:nth-of-type(n + 13):nth-of-type(-n + 14) { 
		grid-row: 14; 
	}
	.panel:nth-of-type(n + 15):nth-of-type(-n + 16) { 
		grid-row: 16; 
	}
	.panel:nth-of-type(n + 17):nth-of-type(-n + 18) { 
		grid-row: 18; 
	}
	.panel:nth-of-type(n + 19):nth-of-type(-n + 20) { 
		grid-row: 20; 
	}
	.panel:nth-of-type(n + 21):nth-of-type(-n + 22) { 
		grid-row: 22; 
	}
	.panel:nth-of-type(n + 23):nth-of-type(-n + 24) { 
		grid-row: 24; 
	}
	.panel:nth-of-type(n + 25):nth-of-type(-n + 26) { 
		grid-row: 26; 
	}
	.panel:nth-of-type(n + 27):nth-of-type(-n + 28) { 
		grid-row: 28; 
	}
	.panel:nth-of-type(n + 29):nth-of-type(-n + 30) { 
		grid-row: 30; 
	}
	.panel:nth-of-type(n + 31):nth-of-type(-n + 32) { 
		grid-row: 32; 
	}
	.panel:nth-of-type(n + 33):nth-of-type(-n + 34) { 
		grid-row: 34; 
	}
	.panel:nth-of-type(n + 35):nth-of-type(-n + 36) { 
		grid-row: 36; 
	}
}

/* 1 Column - Mobile */
@media (width <= 782px) {
	.panel:nth-of-type(n) {
		grid-row: auto!important;
	}
}



/* ----- Footer ----- */
footer {
	height: 80px;
	overflow: hidden;
}
footer img {
	display: block;
	width: 1670px;
    max-width: 1670px;
	position: relative;
	left: 50%;
    transform: translateX(-50%);
}
@media (width <= 782px) {
	footer {
		height: auto;
	}
	footer img {
		width: 120%;
	}
}