:root {
  --font-weight-increment: 0.4s; 
}

#blur {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100vw;
	height: 100vh;
	pointer-events: none; 
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#blur.active {
    cursor: pointer;
    pointer-events: auto; /* Also add this so clicks work */
}
.no-gpu #blur {
	backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(6, 0, 0, 0.65); /* opaque fallback */
}

#title {
	position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 11rem; 
  margin-left: 6vw; 
  margin-top: 15vh;
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: 'wdth' 150, 'wght' 900;
  user-select: none;
  will-change: transform;
}

#title span {
	line-height: 1;
  animation: wave 10s ease-in-out infinite;
  will-change: transform;
}

#title span:nth-child(1) {
  /*padding-left: 0;*/
  animation-delay: 0s;
}

#title span:nth-child(2) {
  /*padding-left: 1rem;*/
  padding-left: 1rem;
  animation-delay: var(--font-weight-increment);
}

#title span:nth-child(3) {
  /*padding-left: 2rem;*/
  animation-delay: calc(var(--font-weight-increment) * 2);
  padding-left: 2rem;
  padding-top: 1rem;
  font-size: 14rem;
}

/*#title span:nth-child(4) {
  animation-delay: calc(var(--font-weight-increment) * 3);
}

#title span:nth-child(5) {
  animation-delay: calc(var(--font-weight-increment) * 4);
}*/

#title a {
	text-decoration: none;
	color: maroon;
	animation: linkWave 10s ease-in-out infinite;
}

#title a:hover {
  /*padding-left: 4rem;*/
  color: red;
}

@keyframes wave {
  0%, 100% {
    transform: translateX(0);
    /*font-weight: 900;*/
    font-variation-settings: 'wdth' 150, 'wght' 900;
  }
  50% {
    transform: translateX(10vw);
    /*font-weight: 300;*/
    font-variation-settings: 'wdth' 50, 'wght' 300;
  }
}

@keyframes linkWave {
  0%, 100% {
    transform: translateX(0);
    /*font-weight: 900;*/
    font-variation-settings: 'wdth' 150, 'wght' 300;
  }
  50% {
    transform: translateX(10vw);
    /*font-weight: 300;*/
    font-variation-settings: 'wdth' 50, 'wght' 900;
  }
}


#socials {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	margin-left: auto;
	margin-right: 12vw;
	gap: 1.5rem;
	height: 80vh;
	width: auto;
	max-width: 40vw;
	padding-top: 10vh;
	padding-bottom: 10vh;
}

.socialMedia {
	position: relative;
	z-index: 50;
	display: flex;
	flex-direction: column;
	/*aspect-ratio: 1/1;*/
	min-width: 0; /* Add minimum size */
	min-height: 0; /* Add minimum size */
	overflow: hidden;
	text-align: center;
	text-decoration: none; /* Removes underline */
	align-items: center;
	justify-content:center;

	color: inherit; 
	background-color: white;

	border-style: solid;
	border-radius: 2rem;
	border-width: 0rem;
	box-shadow: 0.3rem 0.3rem 0.9rem -0.4rem;
	will-change: transform;
	transition: transform 0.3s ease-out 0s;
}

.socialMediaHover:hover {
  transform: scale(1.05);
  transform: rotate(5deg);
  position: relative;
  z-index: 10;
  box-shadow: 0.3rem 0.3rem 2rem -0.4rem;
}

.socialMedia img {
	aspect-ratio: 1/1;
	max-width: 60%;
	max-height: 60%;
}

.socialMedia h1 {
	margin: 0;
}

.socialMedia.elevated {
	z-index: 100;
}

#email {
	grid-column: 1/-1;
	grid-row: 1/1;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease-out;
	/*align-self: flex-start;*/
}

.email.elevated {
	z-index: 100;
}

#email::before {
	content: '';
	display: none;
}

#email.expanded {
	position: absolute;
	cursor: default;
	box-sizing: border-box;
	overflow: hidden;
	width: 40vw;
	height: 70vh;
	display: flex;
	flex-direction: row;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

#email.expanded::before {
	display: block;
	padding-bottom: 100%; /* Maintains space in grid */
}



#email .email-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}

#email.expanded .email-header{
	padding: 0;
	margin-left: 2rem;
	width: 20%;
}

#email .email-header img {
	aspect-ratio: 1/1;
	max-width: 60%;
	max-height: 60%;
	user-select: none;
}

#email .email-header h1 {
	margin: 0;
	user-select: none;
}

#email .email-form-container {
	transition: max-height 0.4s ease-out;
	padding: 0 2rem;
	width: 100%;
	height: 100%;

	display: flex;
	overflow-y: visible;
	overflow-x: hidden;
}

#email.expanded .email-form-container {
	overflow: scroll;
}

form {
	padding: 0;
	text-align: left;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: auto;
	justify-content: center;
}

form label {
	display: flex;
	flex-direction: column;
	text-align: left;
	font-size: 0.9rem;
	font-weight: 600;
}

form input,
form textarea {
	margin-top: 0.5rem;
	padding: 0.75rem;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 1rem;
	font-family: inherit;
	transition: border-color 0.3s ease;
}

form input:focus,
form textarea:focus {
	outline: none;
	border-color: maroon;
}

form textarea {
	min-height: 100px;
	resize: vertical;
}

form button[type="submit"] {
	padding: 0.75rem 2rem;
	background: maroon;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
	align-self: flex-start;
}

form button[type="submit"]:hover {
	background: red;
}

/*@media (max-width: 900px), (orientation: portrait) {
	#socials {
		position: absolute;
		margin: 0;
		right: 5vw;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    width: 35%; 
    height: 100%;
    padding-bottom: 70vh;
  }

  .socialMedia {
		min-width: 0;
		min-height: 30vh; 
	}

  #title {
  	margin-top: 50vh;
  	margin-left: 2vw; 
  	transform: translateY(-50%);
  	font-size: 8rem;
  }
	#title span:nth-child(3) {
		font-size: 10rem;
	}

	#email.expanded {
		position: fixed;
		left: 10vw;
		width: 80vw;
	}

}*/

/*——————————————————
  MOBILE HEADER  (≤ 768px)
  ~70% width, centered, larger buttons, horizontal row
——————————————————*/
@media (max-width: 768px) {
	#socials {
			position: absolute;
			margin: 0;
			right: 5vw;
	    grid-template-columns: 1fr;
	    grid-template-rows: auto auto auto auto;
	    width: 35%; /* Adjust as needed */
	    height: 100%;
	    padding-bottom: 70vh;
	  }

	  .socialMedia {
			min-width: 0;
			min-height: 30vh; 
		}

	  #title {
	  	margin-top: 50vh;
	  	margin-left: 2vw; 
	  	transform: translateY(-50%);
	  	font-size: 8rem;
	  }
		#title span:nth-child(3) {
			font-size: 10rem;
		}

		#email.expanded {
			position: fixed;
			left: 10vw;
			width: 80vw;
		}
}