:root {
  color-scheme: dark;
  --ink: #0a0809;
  --paper: #e3d4c5;
  --acid: #c8ff2c;
  --pink: #ff3eaa;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body::selection {
  color: var(--ink);
  background: var(--acid);
}

.landing {
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.landing-art,
.landing-overlay,
.noise,
.frame {
  position: absolute;
  inset: 0;
}

.landing-art {
  z-index: -4;
  inset: -18px;
  background-image: url("./assets/brokestonkers-hero.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(0.9) contrast(1.08) brightness(0.78);
  animation: settle 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.landing-overlay {
  z-index: -3;
  background:
    radial-gradient(circle at 51% 45%, rgba(10, 8, 9, 0.05) 0 14%, rgba(10, 8, 9, 0.28) 58%, rgba(10, 8, 9, 0.52) 100%),
    linear-gradient(180deg, rgba(10, 8, 9, 0.18), transparent 35%, transparent 68%, rgba(10, 8, 9, 0.44));
}

.noise {
  z-index: 3;
  pointer-events: none;
  opacity: 0.075;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0, #fff 0.5px, transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.18) 3px, transparent 4px);
  background-size: 7px 7px, 100% 4px;
  mix-blend-mode: soft-light;
}

.frame {
  z-index: 2;
  inset: 20px;
  pointer-events: none;
  border: 1px solid rgba(227, 212, 197, 0.24);
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 5px;
  background: var(--acid);
}

.frame::before {
  top: -3px;
  left: 28px;
}

.frame::after {
  right: 28px;
  bottom: -3px;
  background: var(--pink);
}

.identity {
  position: relative;
  z-index: 1;
  width: min(58vw, 840px);
  padding-top: 2vh;
  transform: rotate(-1.2deg);
  text-align: center;
  animation: reveal 900ms 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

h1,
p {
  margin: 0;
}

h1 {
  display: inline-flex;
  flex-direction: column;
  color: var(--paper);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(6rem, 12vw, 13rem);
  font-weight: 900;
  line-height: 0.67;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.58));
}

h1 span {
  position: relative;
  display: block;
}

h1 span:first-child {
  align-self: flex-start;
}

h1 span:last-child {
  align-self: flex-end;
  color: var(--acid);
  font-size: 0.67em;
  letter-spacing: -0.055em;
  -webkit-text-stroke: 1px rgba(10, 8, 9, 0.9);
}

h1 span:first-child::after,
h1 span:last-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 12%;
  opacity: 0.8;
  background: var(--pink);
}

h1 span:first-child::after {
  top: 28%;
  right: -2%;
  left: -2%;
  transform: translateX(-4px);
  background: #7958ff;
}

h1 span:last-child::before {
  right: -1%;
  bottom: 19%;
  left: -1%;
  transform: translateX(5px);
}

h1 em {
  color: var(--paper);
  font-size: 0.31em;
  font-style: normal;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0;
}

.identity p {
  margin-top: clamp(19px, 2.6vh, 30px);
  color: var(--pink);
  font: 800 clamp(0.64rem, 1vw, 0.86rem)/1 "Courier New", monospace;
  letter-spacing: 0.24em;
  text-shadow: 2px 2px 0 var(--ink);
}

@keyframes settle {
  from {
    transform: scale(1.07);
    filter: saturate(0.6) contrast(1.18) brightness(0.52);
  }

  to {
    transform: scale(1);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-1.2deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(-1.2deg);
  }
}

@media (max-width: 760px) {
  .landing {
    place-items: end center;
    padding-bottom: max(9svh, 58px);
  }

  .landing-art {
    inset: 0;
    bottom: auto;
    height: 61svh;
    background-position: 15% center;
    filter: saturate(0.88) contrast(1.08) brightness(0.75);
  }

  .landing-overlay {
    background:
      linear-gradient(180deg, rgba(10, 8, 9, 0.06) 0 32%, rgba(10, 8, 9, 0.38) 52%, var(--ink) 68%),
      linear-gradient(90deg, transparent, rgba(10, 8, 9, 0.25));
  }

  .identity {
    width: calc(100% - 38px);
    padding: 0;
  }

  h1 {
    font-size: clamp(5.4rem, 26vw, 7.2rem);
  }

  .identity p {
    margin-top: 22px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  .frame {
    inset: 12px;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .identity {
    transform: scale(0.82) rotate(-1.2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-art,
  .identity {
    animation: none;
  }
}