:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #d86f36;
}

body {
  overflow-x: hidden;
}

.splash {
  position: relative;
  width: 100%;
  min-height: 160svh;
  background: #d86f36;
}

.splash__art {
  display: block;
  width: 100%;
  height: max(160svh, 106.87vw);
  object-fit: cover;
  --art-position-x: 50%;
  object-position: var(--art-position-x) 43%;
}

.glitch-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.eye-trigger {
  position: absolute;
  top: 43%;
  left: 36%;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 8;
  display: block;
  min-width: 56px;
  min-height: 56px;
  width: 14%;
  aspect-ratio: 1.3;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

.eye-trigger:focus-visible {
  opacity: .45;
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.glitch-fragment {
  position: absolute;
  left: var(--glitch-left);
  top: var(--glitch-top);
  width: var(--glitch-width);
  height: var(--glitch-height);
  background-image: url("assets/splash.jpg");
  background-repeat: no-repeat;
  background-position: calc(50% + var(--glitch-shift)) calc(-1 * var(--glitch-source-y));
  background-size: var(--glitch-image-width) auto;
  opacity: 0;
  filter: saturate(1.35) contrast(1.12);
  animation: glitch-flash var(--glitch-cycle) steps(2, jump-none) var(--glitch-delay) infinite;
}

.total-glitch .splash__art {
  animation: total-image-break .16s steps(2, jump-none) infinite;
}

.total-glitch .glitch-layer {
  z-index: 9;
  animation: total-color-break .11s steps(2, jump-none) infinite;
}

.total-glitch .glitch-fragment {
  opacity: .9;
  filter: saturate(2.8) contrast(1.65) hue-rotate(var(--glitch-hue));
  animation: total-fragment-break var(--glitch-cycle) steps(2, jump-none) infinite;
}

.total-glitch .signature,
.total-glitch .artist-name,
.total-glitch .coming-soon {
  animation: total-text-break .14s steps(2, jump-none) infinite;
}

@keyframes glitch-flash {
  0%,
  89%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  90%,
  93% {
    opacity: .72;
    transform: translateX(var(--glitch-shift));
  }

  94%,
  96% {
    opacity: .38;
    transform: translateX(calc(var(--glitch-shift) * -.45));
  }

  97% {
    opacity: 0;
  }
}

@keyframes total-image-break {
  0% { transform: translate(-1.2%, .4%) scale(1.025); filter: contrast(1.8) saturate(2.2) hue-rotate(18deg); }
  33% { transform: translate(1.8%, -.7%) scale(1.045); filter: contrast(2.2) saturate(3) hue-rotate(-38deg) invert(.08); }
  66% { transform: translate(-.6%, 1.1%) scale(1.02); filter: contrast(1.6) saturate(2.7) hue-rotate(82deg); }
  100% { transform: translate(1%, -.3%) scale(1.035); filter: contrast(2.4) saturate(3.3) hue-rotate(-75deg); }
}

@keyframes total-color-break {
  0% { filter: drop-shadow(-16px 0 0 rgb(255 0 64 / 55%)); }
  50% { filter: drop-shadow(18px 0 0 rgb(0 255 230 / 55%)); }
  100% { filter: drop-shadow(-8px 0 0 rgb(255 225 0 / 65%)); }
}

@keyframes total-fragment-break {
  0% { opacity: .92; transform: translateX(var(--glitch-shift)) scaleX(1.08); }
  35% { opacity: .35; transform: translateX(calc(var(--glitch-shift) * -1.8)) scaleX(.86); }
  70% { opacity: 1; transform: translateX(calc(var(--glitch-shift) * 2.4)) scaleX(1.18); }
  100% { opacity: .65; transform: translateX(calc(var(--glitch-shift) * -.7)); }
}

@keyframes total-text-break {
  0% { filter: drop-shadow(-7px 0 #ff124f) drop-shadow(7px 0 #00f0ff); }
  50% { filter: drop-shadow(9px 0 #ff124f) drop-shadow(-9px 0 #00f0ff); }
  100% { filter: none; }
}

.artist-name {
  position: fixed;
  top: max(.9rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 6;
  margin: 0;
  color: #fff;
  font-size: clamp(.85rem, 1.15vw, 1rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
  text-transform: uppercase;
  opacity: var(--name-opacity, 1);
  transform: translate(-50%, var(--name-y, 0));
  white-space: nowrap;
  will-change: transform, opacity;
}

.signature {
  position: fixed;
  top: 3rem;
  left: 50%;
  z-index: 5;
  width: min(60vw, 20rem);
  height: auto;
  opacity: .9;
  pointer-events: none;
  transform: translateX(-50%);
}

.coming-soon {
  position: fixed;
  bottom: max(1.9rem, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 10;
  margin: 0;
  padding: .65rem .9rem;
  color: #fff;
  font-size: clamp(.9rem, 1.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
  opacity: var(--coming-opacity, 0);
  transform: translate(-50%, var(--coming-y, 180%));
  white-space: nowrap;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .glitch-layer {
    display: none;
  }

  .artist-name {
    opacity: 1;
    transform: translateX(-50%);
  }

  .coming-soon {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@media (min-width: 761px) {
  .splash, .splash__art { min-height: 145svh; }
  .splash__art { height: max(145svh, 106.87vw); --art-position-x: 42%; }
  .signature { width: min(36vw, 29rem); }
}
@media (prefers-reduced-motion: reduce) {
  .splash__art, .signature, .artist-name, .coming-soon { animation: none !important; }
}