/* team.css */
@import url('./fonts.css');
/* =========================
            LAYOUT
   ========================= */

   #team {
    max-width: 100%;
    width: 70em;
    margin: 0 auto;
    text-align: center;
    height: auto;
    font-size: 1.125em;
  }
  
  #team .container {
    max-width: 80em;
  }
  
  #team.cast,
  #team.creative {
    height: auto;
    transition-delay: 0s;
  }
  
  #team .team {
    margin: 0 auto;
    opacity: 0;
    pointer-events: none;
    height: 0;
    z-index: 1;
    transition: opacity 0.4s;
  }
  
  #team.cast .team.cast,
  #team.creative .team.creative {
    position: relative;
    opacity: 1;
    pointer-events: all;
    height: auto;
    z-index: 2;
    margin: 0 auto;
    padding-bottom: 5em;
    transition-delay: 0.4s;
  }
  
  #team.creative .team.creative {
    display: block;
    max-width: 64em;
    margin: 0 auto;
  }
  
  #team .team.cast {
    position: relative;
  }
  
  /* =========================
            TYPOGRAPHY
     ========================= */
  
  #team.cast h2 {
    color: #fff;
  }
  
  #team p {
    flex: 0 0 100%;
    margin: 0 auto;
  }
  
  #team p.divider {
    height: 0;
  }
  
  #team .creative p {
    margin-bottom: 0.875em;
  }
  
  #team .creative p:last-child {
    margin-bottom: 0;
  }
  
  .member .name {
    font-size: 1.5em;
    line-height: 1.09375;
    margin: 0.3125em 0 0;
    color: #fff;
    text-align: right;
    font-family: 'Bootzy Condensed TM';
  }
  
  .creative .member .name {
    text-align: center;
    margin: 0.125em auto 0.25em;
    color: #ff0300;
    font-size: 2.25em;
    line-height: .8;
    padding-top: .25em;
    font-family: 'Bootzy TM';
    text-transform: none;
    letter-spacing: .025em;
  }
  
  .overlay .member .name {
    font-size: 2.625em;
    line-height: 1.09375;
  }

  .creative .overlay .member .name {
    padding-top: 0;
  }
  
  .star .name {
    margin: 0.3125em 0 0;
    text-align: right;
  }
  
  .member .bio p {
    line-height: 1.475;
    -webkit-font-smoothing: antialiased;
  }
  
  .overlay .bio p {
    margin: 2em auto 0;
    text-transform: none;
  }
  
  
  /* =========================
              MEMBERS
     ========================= */
  
  #team .team .member {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    max-width: 14em;
    margin: 1.5em 1em;
  }
  
  #team .team .member:not(.star) {
    width: 11.5em;
    margin: 1.25em 1em;
  }
  
  #team .team .member.understudy {
    width: 11em;
    margin: 1.25em 1em;
  }
  
  #team .team.creative .member {
    width: 12.9125em;
  }
  
  .overlay-inner .member {
    max-width: 25em;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
  }
  
  
  /* =========================
     HEADSHOT / IMAGE
     ========================= */
  
  .headshot {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    background-color: #181c18;
    border: 2px solid #111;
    border-radius: 0.125em;
  }
  
  .overlay .headshot {
    width: auto;
    max-width: 15em;
  }
  
  .headshot img {
    position: relative;
    max-width: 334px;
    width: 100%;
    height: auto;
    z-index: 0;
    object-fit: cover;
    transition: opacity 0.35s ease-in-out;
  }
  
  .headshot picture {
    position: absolute;
    inset: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .headshot picture:first-child {
    position: relative;
  }
  
  /* =========================
              ROLES
     ========================= */
  
  .cast .member .role {
    font-family: 'Bootzy TM';
    font-weight: 500;
    font-size: 1.75em;
    line-height: 1;
    padding-top: 0.3125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    position: absolute;
    bottom: -1.1875em;
    left: calc(100% + .1625em);
    white-space: nowrap;
  }
  
  .creative .member .role {
    font-weight: 500;
    font-size: 1.125em;
    line-height: 1;
    color: #fff;
    margin-top: 0.75em;
    margin-bottom: -0.3125em;
    font-family: 'Bootzy TM';
    text-transform: none;
    letter-spacing: .025em;
  }
  
  .overlay .member .role {
    bottom: -0.125em;
    left: calc(100% + .125em);
  }
  
  /* =========================
              COLORS
     ========================= */
  
  .headshot .pink { color: #ff00a8; }
  .headshot .orange { color: #ffa101; }
  .headshot .red { color: #ff0300; }
  .headshot .green { color: #01fe91; }
  .headshot .blue { color: #00c1ff; }
  
  .creatures {
    display: none;
    font-family: 'Bootzy TM';
    font-size: 2.5em;
    line-height: .8;
    @media (max-width: 532px) {
      max-width: 6em;
    }
  }
  
  /* =========================
            INTERACTIONS
     ========================= */
  
  #team .team .member:hover {
    cursor: pointer;
    color: #fff;
  }
  
  #team .member:hover > .name,
  #team .member:hover > .role {
    color: #ccff00;
    transition: color 0.3s ease-out, filter 0.3s ease-out;
  }
  
  #team .member:hover .headshot:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 140%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9;
  }
  
  /* =========================
        HOVER IMAGE SWAP
     ========================= */
  
  .hover-swap-overlay {
    opacity: 0;
  }
  
  .member:hover .hover-swap-overlay,
  .member:focus-within .hover-swap-overlay {
    opacity: 1;
  }
  
  .member:hover .hover-swap,
  .member:focus-within .hover-swap {
    opacity: 0;
  }
  
  /* =========================
            NAVIGATION
     ========================= */
  
  #content nav {
    font-size: 1rem;
    margin-bottom: 1.5em;
  }
  
  #content nav li {
    display: inline-block;
  }
  
  #content nav li .btn {
    font-size: 2.125em;
    margin: 0;
    border: none;
  }
  
  #content nav li .btn.active {
    pointer-events: none;
  }
  
  /* =========================
              MISC
     ========================= */
  
  #team .bio {
    display: none;
  }
  
  #team .bio a {
    color: #111;
  }
  
  #team .bio a:hover {
    color: #111;
  }
  
  .overlay-inner {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .overlay-inner::-webkit-scrollbar {
    display: none;
  }
  

/* =========================
    CREATURES OF THE NIGHT
   ========================= */
  .page-loaded #team .team.cast::before {
    font-family: 'Bootzy TM';
    content: "CREATURES OF THE\00a0NIGHT";
    position: absolute;
    top: .625em;
    right: calc(50% + 9em);
    writing-mode: vertical-lr;
    transform: translateX(calc(-100% - 0em));
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    font-size: 2.25em;
    animation: fadeInDown .75s ease-in-out both;
  }

/* =========================
   NEON HOVER SECTION
   ========================= */
.neon-text {
  font-family: "NeonBuglerSquared";
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
	position: relative;
	display: inline-block;
	color: #00d817;
	text-shadow:
		0 0 2px #0a2a0a,
		0 0 4px #0a2a0a;
	transition: color 0.25s ease, text-shadow 0.25s ease;
}

.neon-text::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: #39ff14;
	filter: blur(6px);
	opacity: 0.6;
	z-index: -1;
	transition: opacity 0.3s ease;
}

.btn:hover .neon-text {
  color: #39ff14;
  text-shadow:
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #00ff88;
  transform: scale(1.05);
}
#content #team .btn:hover{
  background-color: transparent !important;
}
.btn.active .neon-text {
	color: #39ff14;
	text-shadow:
		0 0 5px #39ff14,
		0 0 10px #39ff14,
		0 0 20px #39ff14,
		0 0 40px #00ff88,
		0 0 80px #00ff88;
}

.btn.active .neon-text::before {
	opacity: 0.7;
}

.noise {
	position: relative;
	background: black;
}

.noise::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* =========================
   MEDIA QUERIES
   ========================= */

/* SMALL DEVICES (≤532px) */
@media (max-width: 532px) {
	#team .headshot img {
		max-width: 280px;
	}
}

/* MOBILE (≤768px) */
@media (max-width: 768px) {
	#team {
		width: 100%;
	}

	/* .overlay-open .member .role {
		bottom: -74px;
		left: 64px;
	}

	.cast .member .role {
		writing-mode: unset;
		transform: rotate(0deg);
		bottom: 0;
		left: 0;
	} */
}

/* TABLET DOWN (≤1023px) */
@media (max-width: 1023px) {
	#team {
		font-size: 1.25em;
	}

	#team .team.creative .member {
		width: 100%;
		max-width: 100vw;
		min-width: 100%;
		margin: 1.25em auto;
	}
}

/* LARGE TABLET DOWN (≤1225px) */
@media (max-width: 1225px) {
	.creatures {
		display: block;
	}

	#team .team.cast::before {
		display: none;
	}
}

/* TABLET UP (≥768px) */
@media (min-width: 768px) {
	#team.creative .team.creative.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		margin-inline: auto;
		max-width: 42em;
	}

	.three-items-wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
		grid-column: 1 / -1;
	}

	#team .team.creative .member {
		margin-inline: auto;
	}

	#team .team.creative .member .pr-4 {
		padding-right: 1.1em;
	}
}

/* DESKTOP (≥1024px) */
@media (min-width: 1024px) {
	#team .team.creative .member {
		margin-inline: auto;
	}

	#team .team .member.full-width {
		width: auto !important;
		max-width: 100% !important;
	}
}

/* LARGE DESKTOP (≥1120px) */
@media (min-width: 1120px) {
	#team.creative .team.creative.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.centered-left {
		grid-column: 1;
	}

	.three-items-wrapper {
		grid-template-columns: repeat(3, 1fr);
		width: 75%;
		margin: 0 auto;
	}
}