@charset "UTF-8";
:root {
  --c1: hsl(48, 100%, 93%);
  --c2: hsl(30, 26%, 45%);
  --points: 0;
  --total: 3;
  --progress: calc(var(--points) / var(--total));
  --blur: 50px;
  --blur-amt: calc((1 - var(--progress)) * var(--blur));
  /* Calculate the adjusted opacity by subtracting from 0.9 */
  --adjusted-opacity: calc(0.9 - var(--progress));
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--c1);
  color: var(--c2);
  letter-spacing: 0.1em;
  word-spacing: 0.1em;
}

.sans-serif {
  font-size: 0.95em;
}

body:has(.is-open) div#logo {
  display: none;
}
body:has(.is-open) div#nav-items > button {
  display: none;
}

nav > div#nav-items {
  max-width: 40em;
  margin: 0 auto;
}

div#logo {
  color: hsl(181, 10%, 48%);
  mix-blend-mode: difference;
}

.__about-pop {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -160%);
}

canvas {
  position: absolute;
  mix-blend-mode: difference;
  pointer-events: none;
  width: 80vh;
  height: 80vh;
  top: 53%;
  left: 50%;
  clip-path: circle(50%);
  transform: translate(-50%, -50%);
  animation: circle 6s infinite;
}

@media (max-width: 600px) {
  canvas {
    width: 95vw;
    height: 95vw;
    top: 60%;
  }
}
@keyframes circle {
  0% {
    clip-path: circle(50%);
  }
  50% {
    clip-path: circle(49%);
  }
  100% {
    clip-path: circle(50%);
  }
}
.c1 {
  color: var(--c1);
}

.bg-c1 {
  background-color: var(--c1);
}

.c2 {
  color: var(--c2);
}

.bg-c2 {
  background-color: var(--c2);
}

.mt-auto {
  margin-top: auto;
}

.vw-100 {
  width: 100vw;
}

.min-vh-90 {
  min-height: 90vh;
}

.click-through {
  pointer-events: none;
}

.outline {
  color: var(--c1);
  text-shadow: -1px -1px 0 var(--c2), 1px -1px 0 var(--c2), -1px 1px 0 var(--c2), 1px 1px 0 var(--c2);
}

.z-back {
  z-index: -1;
}

.btn-more {
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.btn-more:hover::after {
  content: "...";
}

.pointer {
  cursor: pointer;
}

.hover {
  transition: all 1s ease-in-out;
  cursor: pointer;
}

.hover:hover,
.hover:focus {
  color: var(--c1);
  background-color: var(--c2);
}

.link {
  color: currentColor;
}

.info-btn {
  transform: translateY(-1px);
  font-size: 1.2rem;
  margin-left: 0.9rem;
  display: inline-block;
  color: var(--c2);
}

.info-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  transform: translateX(-8.2px) translateY(-1px);
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  border-radius: 9999px;
  border-style: solid;
  border-width: 2px;
  background-color: var(--c1);
}

.ls-void {
  letter-spacing: -10px;
}

/* Add a transition for opacity when .is-open is added or removed */
#pop {
  transition: opacity 0.5s ease, background-color 3s ease;
}

.tz {
  padding-left: 0.25em;
  font-size: 0.7em;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

/*
█████████████████████████████████

   ICONS
   pulled from font awesome

█████████████████████████████████
*/
.icons {
  width: 0.75em;
  font-size: 1em;
}

/*
█████████████████████████████████

   POP

█████████████████████████████████
*/
.__subpop.is-open {
  overscroll-behavior-y: contain;
}

body:has(.__subpop.is-open) main {
  margin-bottom: 0 !important;
  height: 100vh;
  overflow: hidden;
}
body:has(.__subpop.is-open) button#pop-close,
body:has(.__subpop.is-open) [data-🌀-container] {
  display: none;
}

.__subpop figure {
  padding: 0;
  margin: 0;
}
.__subpop figure img {
  display: block;
  margin: 0 auto;
}

/*
█████████████████████████████████

   SCHEDULE PAGE POP-UP
   Z-INDEX

█████████████████████████████████
*/
main.__schedule li:has(.is-open) ~ li {
  z-index: -1;
}

main#schedule div.__subpop {
  max-height: 80vh;
}

@media (max-width: 500px) {
  main#schedule div.__subpop,
  div.__subpop {
    margin-top: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }
}
/*
█████████████████████████████████

   For fade in animation

█████████████████████████████████
*/
[data-fade] {
  opacity: 0;
}

.fade-up {
  animation: fadeUpAnimation 1s ease forwards;
}

.fade-in {
  animation: fadeInAnimation 1s ease forwards;
}

.fade-out {
  animation: fadeOutAnimation 0.5s ease forwards;
}

@keyframes fadeUpAnimation {
  from {
    opacity: 0;
    transform: translateY(10px); /* You can customize the animation here */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOutAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*
█████████████████████████████████

   FROSTED BG

█████████████████████████████████
*/
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .bg-frosted {
    background: rgba(166, 136, 137, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(1000px);
  }
  .bg-frosted-2 {
    background: rgba(237, 194, 157, 0.2);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
  }
  .bg-frosted-c1 {
    background: hsla(48, 100%, 93%, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(1000px);
  }
  .bg-frosted-c2 {
    background: hsla(30, 26%, 45%, 0.65);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(1000px);
  }
}
/*
█████████████████████████████████

  EGO DEATH POST WIN

█████████████████████████████████
*/
button#ego.achieved {
  pointer-events: none;
  cursor: not-allowed;
  background: hsla(30, 26%, 45%, 0.65);
  color: var(--c1);
  line-height: 1;
  /* Hue shift and breathing; 3 seconds duration, linear timing, 5 iterations */
  animation: hue-rotate 1s linear 5, breathe 1s linear 4 alternate;
}
button#ego.achieved span.achieved {
  display: block;
  font-size: 0.5em;
  text-transform: uppercase;
}

/*
█████████████████████████████████

   RESET

█████████████████████████████████
*/
/* Reset default button styles */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/*
█████████████████████████████████

   DRAG

█████████████████████████████████
*/
[data-drag] {
  user-select: none;
  cursor: move;
  position: absolute;
  transition: z-index 0.2s ease-in-out;
}

video[data-drag] {
  mix-blend-mode: difference;
}

div[data-🌀-container] video {
  border-radius: 0.25rem;
}

.lh-0 {
  line-height: 0;
}

.grow {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: -webkit-transform 0.75s ease-out;
  transition: transform 0.75s ease-out;
}

.hide {
  visibility: hidden !important;
}

.z-max-1 {
  z-index: 2000000000;
}

.sticky {
  position: sticky;
}

/*
█████████████████████████████████

  ANIMATIONS

█████████████████████████████████
*/
@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}