* {
  box-sizing: border-box;
}

:root {
  --red: #ef2626;
  --red-soft: #8f1010;
  --text: #f0f0f0;
  --muted: #9a9a9a;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #030303;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #000;
}

.hero {
  position: relative;
  width: min(100vw, 1055px);
  aspect-ratio: 1055 / 1491;
  overflow: hidden;
  isolation: isolate;
  background: #020202;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.32)),
    radial-gradient(circle at 50% 44%, rgba(0, 0, 0, 0) 0 24%, rgba(0, 0, 0, 0.3) 78%),
    url("assets/wiral-stage.jpg") center top / 100% 100% no-repeat;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.32)),
    radial-gradient(circle at 50% 44%, rgba(0, 0, 0, 0) 0 24%, rgba(0, 0, 0, 0.3) 78%),
    image-set(
      url("assets/wiral-stage.jpg") 1x,
      url("assets/wiral-stage@2x.jpg") 2x
    );
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 100%, rgba(135, 0, 0, 0.32), transparent 12%),
    radial-gradient(circle at 100% 100%, rgba(135, 0, 0, 0.3), transparent 12%),
    linear-gradient(
      180deg,
      transparent 0 50%,
      rgba(0, 0, 0, 0.58) 55%,
      rgba(0, 0, 0, 0.9) 64%,
      rgba(0, 0, 0, 0.86) 86%,
      rgba(0, 0, 0, 0.42) 100%
    );
}

.hero__logo {
  position: absolute;
  left: 52.5%;
  top: 40.1%;
  width: 60%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.62));
  user-select: none;
}

.pulse {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 126px;
  height: 34px;
  transform: translate(-50%, -50%);
}

.pulse span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  clip-path: polygon(
    0 52%, 18% 52%, 22% 44%, 25% 60%, 29% 30%, 34% 78%, 40% 20%,
    45% 86%, 50% 36%, 55% 66%, 59% 12%, 65% 88%, 70% 46%, 75% 58%,
    80% 48%, 84% 54%, 100% 54%, 100% 59%, 83% 59%, 78% 54%, 73% 64%,
    68% 53%, 63% 96%, 57% 22%, 53% 78%, 48% 47%, 43% 94%, 37% 33%,
    33% 91%, 27% 41%, 24% 70%, 20% 52%, 0 52%
  );
  filter: drop-shadow(0 0 5px rgba(239, 38, 38, 0.48));
}

.hero__title {
  position: absolute;
  left: 50%;
  top: 57.7%;
  margin: 0;
  width: min(610px, 70%);
  transform: translateX(-50%) scaleX(0.72);
  transform-origin: center;
  color: #f4f4f4;
  font-family: "Arial Narrow", "Helvetica Neue Condensed Bold", Impact, sans-serif;
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 800;
  letter-spacing: 0.43em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__title span {
  color: var(--red);
}

.tiles {
  position: absolute;
  left: 50%;
  top: 64.3%;
  width: 64%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
}

.tile {
  position: relative;
  flex: 0 0 33.333333%;
  min-width: 0;
  width: 33.333333%;
  min-height: 192px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  outline-offset: 8px;
}

.tile + .tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 1px;
  height: 78%;
  background: linear-gradient(180deg, transparent, rgba(239, 38, 38, 0.88) 18% 82%, transparent);
}

.tile:focus-visible {
  outline: 2px solid var(--red);
}

.tile__icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border: 2px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  filter: drop-shadow(0 0 8px rgba(239, 38, 38, 0.2));
}

.tile__icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile:first-child .tile__icon svg {
  fill: currentColor;
  stroke: none;
  width: 39px;
  height: 39px;
}

.tile strong,
.tile small {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: "Arial Narrow", "Helvetica Neue Condensed Bold", Impact, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  transform: scaleX(0.74);
  transform-origin: center;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.tile strong {
  font-size: clamp(22px, 2.55vw, 31px);
  letter-spacing: 0.29em;
  line-height: 1;
}

.tile small {
  margin-top: 23px;
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: 0.16em;
  line-height: 1;
}

.tile:nth-child(3) small {
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.08em;
}

.music-links {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}

.music-links img {
  width: 25px;
  height: 25px;
  color: #a9a9a9;
  opacity: 0.84;
  filter: brightness(0) invert(0.68);
}

.socials {
  position: absolute;
  left: 50%;
  top: 83.3%;
  width: 42%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #f5f5f5;
  opacity: 0.98;
  text-decoration: none;
  transition: transform 160ms ease;
}

.socials a:hover,
.socials a:focus-visible {
  transform: translateY(-2px);
}

.socials a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 6px;
}

.socials img {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}

.socials a:hover img,
.socials a:focus-visible img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(2804%) hue-rotate(346deg) brightness(105%) contrast(93%);
}

@media (max-width: 760px) {
  .hero {
    width: 100vw;
  }

  .hero__logo {
    width: 60%;
    top: 40.1%;
  }

  .pulse {
    top: 53%;
    width: 54px;
    height: 16px;
  }

  .hero__title {
    top: 57.7%;
    width: 70%;
    font-size: clamp(10px, 2.8vw, 14px);
    letter-spacing: 0.38em;
  }

  .tiles {
    top: 64.3%;
    width: 64%;
  }

  .tile {
    min-height: 92px;
  }

  .tile__icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border-width: 1.2px;
  }

  .tile__icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 3.4;
  }

  .tile:first-child .tile__icon svg {
    width: 17px;
    height: 17px;
  }

  .tile strong {
    font-size: clamp(10px, 3.1vw, 12px);
    letter-spacing: 0.24em;
  }

  .tile small {
    margin-top: 8px;
    font-size: clamp(5px, 1.65vw, 7px);
    letter-spacing: 0.12em;
  }

  .tile:nth-child(3) small {
    font-size: clamp(4.8px, 1.45vw, 6px);
    letter-spacing: 0.04em;
  }

  .music-links {
    gap: 8px;
    margin-top: 9px;
  }

  .music-links img {
    width: 11px;
    height: 11px;
  }

  .socials {
    top: 83.3%;
    width: 42%;
  }

  .socials a {
    width: 14px;
    height: 14px;
  }
}