/* ZombzMJ website foundation */

:root {
  --purple: #26002e;
  --black: #09000d;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--purple);
  color: var(--white);
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

.site {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--purple);
  background-image: url("assets/purple-texture.jpg");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 500% auto;
  isolation: isolate;
}

/* Existing vines. They never slide. They only stretch while scrolling. */
.vine-left,
.vine-right {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(20vw, 345px);
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
  transition: transform 110ms linear;
}

.vine-left {
  left: 0;
  background-image: url("assets/left-vines.png");
  background-position: left center;
  transform-origin: left center;
}

.vine-right {
  right: 0;
  background-image: url("assets/right-vines.png");
  background-position: right center;
  transform-origin: right center;
}

.site.scrolling .vine-left,
.site.scrolling .vine-right {
  transform: scaleX(1.20);
}

.edge-shadow {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 14vw;
  max-width: 220px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 110ms linear;
}

.edge-shadow-left {
  left: 0;
  background: linear-gradient(90deg, rgba(5,0,9,.52), rgba(5,0,9,.12) 60%, transparent);
}

.edge-shadow-right {
  right: 0;
  background: linear-gradient(270deg, rgba(5,0,9,.52), rgba(5,0,9,.12) 60%, transparent);
}

.site.scrolling .edge-shadow { opacity: 1; }

/* The title stays at the top. It is NOT pushed down by the social buttons. */
.content {
  position: relative;
  z-index: 10;
  width: min(1100px, 82vw);
  min-height: 100vh;
  margin: 0 auto;
  padding-top: 18px;
}

.name-trigger {
  position: relative;
  display: block;
  top: 0;
  left: 50%;
  width: min(670px, 56vw);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  transform-origin: center top;
  transition: transform 160ms ease, filter 160ms ease;
  z-index: 20;
}

.title-logo {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .name-trigger:hover {
    transform: translateX(-50%) scale(1.07);
    filter: drop-shadow(0 0 13px rgba(200,60,255,.65));
  }
}

.name-trigger:active {
  transform: translateX(-50%) scale(1.035);
}

.name-trigger:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 5px;
}

/* Social buttons are normal-flow content, so they scroll away naturally. */
.social-links {
  width: min(720px, 82vw);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "instagram spotify"
    "discord discord";
  column-gap: 22px;
  row-gap: 12px;
  align-items: center;
  justify-items: center;
}

.social-button {
  position: relative;
  display: block;
  width: min(320px, 100%);
  line-height: 0;
  text-decoration: none;
  transform-origin: center;
  transition: transform 160ms ease, filter 180ms ease;
}

.social-button img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  /* Tiny black silhouette outline hides the cut edge without adding a box around the button. */
  filter:
    drop-shadow(1px 0 0 #000)
    drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000)
    drop-shadow(0 -1px 0 #000)
    drop-shadow(1px 1px 0 #000)
    drop-shadow(-1px 1px 0 #000)
    drop-shadow(1px -1px 0 #000)
    drop-shadow(-1px -1px 0 #000);
}

.instagram-button { grid-area: instagram; }
.spotify-button { grid-area: spotify; }
.discord-button { grid-area: discord; width: min(320px, 46%); }


/* Bottom construction area. It stays in normal page flow and appears at the very bottom when scrolled down. */
.construction-site {
  position: relative;
  width: min(1100px, 92vw);
  height: 220px;
  margin: 300px auto 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.construction-ground {
  position: absolute;
  left: -4vw;
  right: -4vw;
  bottom: 0;
  height: 34px;
  background:
    repeating-linear-gradient(135deg, #151015 0 12px, #2a202b 12px 24px);
  border-top: 2px solid #050505;
  box-shadow: 0 -5px 12px rgba(0,0,0,.35);
}

.construction-fence {
  position: absolute;
  bottom: 30px;
  width: 250px;
  height: 82px;
  border: 3px solid #111;
  background: #c06a18;
  box-shadow: 0 4px 0 rgba(0,0,0,.55);
  overflow: hidden;
}

.construction-fence::before,
.construction-fence::after {
  content: "";
  position: absolute;
  inset: -45px -25px;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 24px,
    #171117 24px 43px,
    transparent 43px 67px
  );
}

.construction-fence::after {
  opacity: .22;
  transform: translateX(18px);
}

.construction-fence span {
  position: absolute;
  bottom: -10px;
  width: 13px;
  height: 105px;
  background: #171117;
  border: 2px solid #050505;
  z-index: 2;
}

.construction-fence span:nth-child(1) { left: 15px; }
.construction-fence span:nth-child(2) { left: 78px; }
.construction-fence span:nth-child(3) { right: 78px; }
.construction-fence span:nth-child(4) { right: 15px; }

.fence-left { left: 2%; transform: perspective(300px) rotateY(5deg); }
.fence-right { right: 2%; transform: perspective(300px) rotateY(-5deg); }

.construction-sign {
  position: absolute;
  bottom: 30px;
  width: 90px;
  height: 150px;
  z-index: 4;
}

.sign-left { left: 29%; transform: rotate(-3deg); }
.sign-right { right: 29%; transform: rotate(3deg); }

.sign-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 70px;
  border: 3px solid #111;
  background: repeating-linear-gradient(135deg, #d87919 0 12px, #171117 12px 24px);
  box-shadow: 3px 4px 0 rgba(0,0,0,.5);
  display: grid;
  place-items: center;
}

.warning-symbol {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #171117;
  border: 2px solid #fff;
  border-radius: 50%;
  font: 900 22px/1 Arial, sans-serif;
}

.sign-post {
  position: absolute;
  left: 40px;
  top: 70px;
  width: 10px;
  height: 80px;
  background: #4b321f;
  border: 2px solid #111;
}

.more-soon {
  position: relative;
  z-index: 5;
  margin-bottom: 63px;
  color: #fff;
  font: 900 clamp(24px, 4vw, 48px)/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 3px 3px 0 #000, 0 0 12px rgba(255,255,255,.18);
}

@media (hover: hover) and (pointer: fine) {
  .social-button:hover {
    transform: scale(1.07);
    filter:
      drop-shadow(0 0 7px rgba(205,92,255,.75))
      drop-shadow(0 0 16px rgba(150,45,255,.38));
  }

  .social-button:hover .glint {
    animation: socialGlint 900ms ease-in-out infinite;
  }
}

.glint {
  position: absolute;
  left: 19%;
  top: 47%;
  width: 62%;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 50%, transparent);
  filter: blur(.4px);
  transform: translateX(-35%) scaleX(.2);
}

@keyframes socialGlint {
  0% { opacity: 0; transform: translateX(-35%) scaleX(.2); }
  12% { opacity: .95; }
  55% { opacity: 1; transform: translateX(35%) scaleX(1); }
  100% { opacity: 0; transform: translateX(85%) scaleX(.25); }
}

/* Glitch */
.glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    rgba(5,0,9,.76);
}

.glitch-overlay.active { animation: glitchFlash 4s steps(1,end) forwards; }

.glitch-noise {
  position: absolute;
  inset: -10%;
  opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(197,48,255,.14) 5px 7px, transparent 7px 13px);
  mix-blend-mode: screen;
  animation: noiseMove 90ms steps(2,end) infinite;
}

.glitch-bars {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.11) 12% 14%, transparent 14% 34%, rgba(190,35,255,.15) 34% 39%, transparent 39% 70%, rgba(255,255,255,.09) 70% 72%, transparent 72%);
  animation: barShift 160ms steps(2,end) infinite;
}

.glitch-label {
  position: relative;
  z-index: 2;
  padding: 9px 14px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.5);
  font: 700 11px/1 monospace;
  letter-spacing: .28em;
  text-transform: lowercase;
  animation: labelJitter 100ms steps(2,end) infinite;
}

@keyframes glitchFlash {
  0%{opacity:0} 4%{opacity:1} 10%{opacity:.25} 18%{opacity:.92} 29%{opacity:.35}
  41%{opacity:.85} 54%{opacity:.18} 67%{opacity:.7} 82%{opacity:.3} 100%{opacity:0}
}
@keyframes noiseMove { 0%{transform:translate(0,0)} 50%{transform:translate(3%,-2%)} 100%{transform:translate(-2%,3%)} }
@keyframes barShift { 0%{transform:translateX(0)} 50%{transform:translateX(-4%)} 100%{transform:translateX(3%)} }
@keyframes labelJitter { 0%{transform:translate(0)} 50%{transform:translate(3px,-1px)} 100%{transform:translate(-2px,1px)} }

@media (max-width: 700px) {
  .vine-left, .vine-right { width: 31vw; }
  .site.scrolling .vine-left, .site.scrolling .vine-right { transform: scaleX(1.16); }
  .content { width: 88vw; }
  .name-trigger { width: min(670px, 82vw); }
  .social-links { width: 88vw; margin-top: 30px; column-gap: 8px; row-gap: 6px; }
  .social-button { width: 100%; }
  .discord-button { width: 54%; }
  .edge-shadow { width: 22vw; }
}

@media (max-width: 700px) {
  .construction-site {
    width: 96vw;
    height: 190px;
    margin-top: 210px;
  }
  .construction-fence { width: 150px; height: 62px; }
  .construction-fence span { height: 82px; width: 10px; }
  .construction-fence span:nth-child(2) { left: 48px; }
  .construction-fence span:nth-child(3) { right: 48px; }
  .construction-fence span:nth-child(4) { right: 10px; }
  .fence-left { left: -4%; }
  .fence-right { right: -4%; }
  .construction-sign { transform: scale(.72); }
  .sign-left { left: 22%; }
  .sign-right { right: 22%; }
  .more-soon { margin-bottom: 56px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vine-left,.vine-right,.edge-shadow,.name-trigger,.social-button { transition:none; }
  .glitch-overlay.active,.glitch-noise,.glitch-bars,.glitch-label { animation:none; }
}
/* Social transition */
.social-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(8, 0, 14, .18);
}

.social-transition.active {
  opacity: 1;
  visibility: visible;
  animation: socialTransitionFade 2s linear forwards;
}

.zombie-transition {
  position: absolute;
  left: 50%;
  bottom: -100vh;
  width: min(760px, 92vw);
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-50%);
  animation: none;
}

.social-transition.active .zombie-transition {
  animation: zombieHandRise 1.35s cubic-bezier(.18,.72,.18,1) forwards;
}

.zombie-transition-image {
  display: block;
  width: auto;
  height: 100vh;
  max-width: 92vw;
  object-fit: contain;
  object-position: bottom center;
  user-select: none;
  pointer-events: none;
  image-rendering: pixelated;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

.zombie-groan-label {
  display: none;
}

@keyframes zombieHandRise {
  0% {
    bottom: -100vh;
    transform: translateX(-50%) scale(.88);
  }
  75% {
    bottom: -3vh;
    transform: translateX(-50%) scale(1);
  }
  100% {
    bottom: 0;
    transform: translateX(-50%) scale(1.02);
  }
}

@keyframes socialTransitionFade {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 700px) {
  .zombie-transition {
    width: 100vw;
  }

  .zombie-transition-image {
    max-width: 100vw;
  }
}