:root {
  --beige-bgr: rgb(185, 182, 167);
}

* {
  box-sizing: border-box;
}

html,
body {
  overscroll-behavior: none;
  background-color: #000;
}

body {
  margin: 0;
  display: grid;
  min-height: 100dvh;
  font-family: "IM Fell English";
  color: #000;
}

img {
  width: 100%;
  -webkit-user-drag: none;
}

#logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  margin-bottom: 2em;
  position: relative;
  z-index: 2;
}

#logo {
  max-width: 640px;
  margin-bottom: 16px;
}

#back-button {
  color: #111;
  text-decoration: none;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 20px);
}

#global-wrap {
  display: grid;
  opacity: 0;

  &.visible {
    opacity: 1;
  }
}

#subpage-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 8vw 70px 8vw;
  background-color: var(--beige-bgr);
  background-image: url("../assets/images/grid-background.webp");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.blend {
  mix-blend-mode: luminosity;
  opacity: 0.65;
}

#attribution {
  position: fixed;
  z-index: 2;
  inset: auto auto 8px 8px;
  font-size: 14px;
  color: #000;
}

@media (max-width: 767px) {
  #subpage-wrap {
    padding-inline: 20px;
  }
}

/* Eye blink transition */

@property --blink-pos {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

#blink-overlay {
  --offset-percentage: max(20vw, 20vw);
  contain: strict;
  will-change: transform;
  position: fixed;
  transform: translate3d(0, 0, 0);
  z-index: 1000000;
  left: calc(var(--offset-percentage) * -1);
  top: calc(var(--offset-percentage) * -1);
  width: calc(100% + (var(--offset-percentage) * 2));
  height: calc(100% + (var(--offset-percentage) * 2));
  transition: --blink-pos 0.75s ease;
  filter: blur(20px);
  pointer-events: none;

  &.open {
    --blink-pos: 55%;
  }

  &.skip {
    transition: none;
    --blink-pos: 55%;
  }

  #blink-gradient {
    width: 100%;
    height: 100%;
    background-color: black;
    mask-image: radial-gradient(
      ellipse 100% var(--blink-pos) at center,
      transparent 99%,
      black 100%
    );
    pointer-events: none;
  }
}