:root {
  --ink: #f8fbff;
  --muted: #cbd8e7;
  --red: #ff1616;
  --red-deep: #8e0509;
  --cyan: #39ddff;
  --leaf: #28d34e;
  --leaf-deep: #0a6f2a;
  --night: #080b10;
  --violet: #2a0635;
  --shadow: rgba(0, 0, 0, .52);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100%;
  background: var(--night);
  overflow: hidden;
  scrollbar-width: none;
}

body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--night);
  overflow: hidden;
  scrollbar-width: none;
  overscroll-behavior: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body::before {
  position: fixed;
  inset: -20%;
  z-index: -3;
  content: "";
  background:
    linear-gradient(115deg, rgba(8, 11, 16, .98) 0%, rgba(8, 11, 16, .8) 38%, rgba(42, 6, 53, .78) 100%),
    url("assets/zetcraft.png") center / cover no-repeat;
  filter: blur(92px) saturate(.95) brightness(.58);
  transform: scale(1.24);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(57, 221, 255, .2), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(40, 211, 78, .22), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(255, 22, 22, .2), transparent 34%),
    linear-gradient(180deg, rgba(3, 5, 8, .12), rgba(3, 5, 8, .86));
}

.shutdown-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 6vw, 80px) clamp(18px, 5vw, 72px);
  isolation: isolate;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  filter: blur(2px);
}

.scene::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
}

.scene::after {
  position: absolute;
  right: -16vw;
  bottom: -22vw;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(57, 221, 255, .16), 0 40px 140px rgba(0, 0, 0, .42);
  transform: rotate(16deg);
}

.signal-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .2;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, transparent 0 7%, rgba(203, 216, 231, .035) 12%, transparent 18% 100%);
  mix-blend-mode: screen;
}

.signal-overlay::before,
.signal-overlay::after {
  position: absolute;
  inset: 0;
  content: "";
}

.signal-overlay::before {
  opacity: .34;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(203, 216, 231, .16) 46%, transparent 51% 100%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: translateY(-42%);
}

.signal-overlay::after {
  opacity: .16;
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 255, 255, .06) 29px, transparent 31px),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(255, 255, 255, .08) 43%, transparent 45%);
}

.signal-message {
  position: absolute;
  top: 46%;
  left: 50%;
  color: rgba(248, 251, 255, .46);
  font-size: clamp(.82rem, 1.35vw, 1.2rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    1px 0 rgba(57, 221, 255, .16),
    -1px 0 rgba(255, 22, 22, .12),
    0 0 24px rgba(248, 251, 255, .2);
  opacity: 0;
  filter: blur(.5px);
  transform: translate3d(-50%, -50%, 0) skewX(-4deg);
  white-space: nowrap;
}

.beam {
  position: absolute;
  width: 46vw;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(57, 221, 255, .65), transparent);
  filter: blur(1px);
  opacity: .45;
}

.beam-one {
  top: 18%;
  left: -16vw;
  transform: rotate(-24deg);
}

.beam-two {
  right: -12vw;
  bottom: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 22, 22, .58), transparent);
  transform: rotate(-24deg);
}

.vine {
  position: absolute;
  width: clamp(160px, 22vw, 330px);
  height: clamp(440px, 58vw, 760px);
  border: solid rgba(40, 211, 78, .7);
  border-width: 0 18px 0 0;
  border-radius: 50%;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .34));
  opacity: .72;
}

.vine::before,
.vine::after {
  position: absolute;
  width: clamp(38px, 5.6vw, 76px);
  height: clamp(82px, 9vw, 136px);
  content: "";
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, var(--leaf), var(--leaf-deep));
  box-shadow: inset -6px -10px 0 rgba(0, 0, 0, .18), 0 12px 22px rgba(0, 0, 0, .28);
}

.vine-left {
  top: -96px;
  left: -92px;
  transform: rotate(11deg);
}

.vine-left::before {
  top: 90px;
  right: 16px;
  transform: rotate(-40deg);
}

.vine-left::after {
  top: 250px;
  right: -14px;
  transform: rotate(22deg);
}

.vine-right {
  right: -118px;
  bottom: -122px;
  transform: rotate(191deg);
}

.vine-right::before {
  top: 98px;
  right: 10px;
  transform: rotate(-48deg);
}

.vine-right::after {
  top: 276px;
  right: -18px;
  transform: rotate(24deg);
}

.pixel {
  position: absolute;
  width: clamp(26px, 3vw, 44px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
  transform: rotate(18deg);
}

.pixel-one {
  top: 14%;
  right: 16%;
}

.pixel-two {
  bottom: 22%;
  left: 13%;
}

.pixel-three {
  top: 62%;
  right: 8%;
  width: clamp(18px, 2vw, 28px);
}

.spark {
  position: absolute;
  width: clamp(5px, .65vw, 9px);
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(203, 216, 231, .78);
  box-shadow:
    0 0 10px rgba(203, 216, 231, .4),
    0 0 22px rgba(57, 221, 255, .16);
  opacity: 0;
  transform: rotate(12deg);
}

.spark-one {
  top: 25%;
  left: 26%;
}

.spark-two {
  top: 38%;
  right: 24%;
  width: clamp(4px, .5vw, 7px);
}

.spark-three {
  right: 33%;
  bottom: 32%;
}

.spark-four {
  bottom: 20%;
  left: 36%;
  width: clamp(3px, .45vw, 6px);
}

.spark-five {
  top: 66%;
  left: 20%;
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 980px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.brand-shell {
  position: relative;
  display: grid;
  width: clamp(182px, 28vw, 360px);
  aspect-ratio: 1;
  place-items: center;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}

.brand-shell::before {
  position: absolute;
  inset: -28%;
  content: "";
  border-radius: 32px;
  background:
    radial-gradient(circle, rgba(248, 251, 255, .4), transparent 44%),
    radial-gradient(circle, rgba(57, 221, 255, .24), transparent 60%);
  filter: blur(20px);
  opacity: .7;
  transform: rotate(-2deg) scale(.92);
}

.brand-shell::after {
  position: absolute;
  inset: -9%;
  content: "";
  border: 1px solid rgba(248, 251, 255, .26);
  border-radius: 32px;
  opacity: .42;
  transform: rotate(-2deg) scale(.98);
}

.brand-mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 28%;
  pointer-events: none;
  user-select: none;
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  border: 4px solid rgba(202, 208, 216, .92);
  border-radius: 26px;
  filter: grayscale(1) saturate(.12) contrast(.92) brightness(.9);
  box-shadow:
    0 28px 80px var(--shadow),
    0 0 0 10px rgba(0, 0, 0, .28),
    0 0 44px rgba(190, 198, 208, .28),
    0 0 90px rgba(57, 221, 255, .12);
  transform: rotate(-2deg);
}

.brand-mark-color {
  position: absolute;
  inset: 0;
  filter: none;
  opacity: 0;
}

.signal-overlay,
.signal-overlay::before,
.signal-overlay::after,
.brand-shell::before,
.brand-shell::after,
.brand-mark-color,
.spark {
  will-change: opacity, transform;
}

h1 {
  width: 100%;
  max-width: 930px;
  margin: clamp(30px, 5vw, 56px) 0 0;
  font-size: clamp(2.35rem, 6.2vw, 5.9rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: normal;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, .62),
    0 18px 48px rgba(0, 0, 0, .72);
}

.hero p {
  width: 100%;
  max-width: 820px;
  margin: clamp(22px, 3.4vw, 34px) 0 0;
  font-size: clamp(1.12rem, 2.15vw, 1.8rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .74);
}

.thanks-line {
  display: inline;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: rgba(202, 208, 216, .72);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

.mobile-break {
  display: none;
}

.site-footer {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 980px;
  margin-top: clamp(34px, 7vh, 86px);
  color: rgba(203, 216, 231, .82);
  font-size: clamp(.72rem, 1.1vw, .92rem);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 10px 30px rgba(0, 0, 0, .68);
}

.site-footer::before {
  width: min(100%, 520px);
  height: 1px;
  margin: 0 auto clamp(10px, 2.2vh, 18px);
  content: "";
  background: linear-gradient(90deg, transparent, rgba(202, 208, 216, .42), transparent);
}

.site-footer p {
  max-width: none;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(202, 208, 216, .48);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 6px;
}

.social-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 0 12px rgba(202, 208, 216, .18));
}

@media (max-width: 720px) {
  .shutdown-page {
    justify-content: start;
    padding-top: clamp(34px, 9vh, 72px);
  }

  .brand-mark {
    width: 100%;
    border-radius: 20px;
  }

  h1 {
    max-width: min(100%, 560px);
    font-size: clamp(1.9rem, 8.2vw, 2.72rem);
    line-height: 1.06;
  }

  .hero p {
    max-width: min(100%, 460px);
    font-size: clamp(.96rem, 3.8vw, 1.12rem);
  }

  .site-footer {
    margin-top: clamp(32px, 8vh, 64px);
  }

  .vine {
    opacity: .52;
  }

  .pixel-one,
  .pixel-three {
    display: none;
  }
}

@media (max-width: 430px) {
  .shutdown-page {
    padding-inline: 16px;
  }

  .brand-mark {
    width: 100%;
  }

  .brand-shell {
    width: min(62vw, 218px);
  }

  h1 {
    font-size: clamp(1.56rem, 7.25vw, 1.92rem);
    line-height: 1.09;
  }

  .hero p {
    font-size: clamp(.9rem, 3.7vw, 1rem);
    line-height: 1.5;
  }

  .social-links {
    gap: 8px 14px;
  }

  .mobile-break {
    display: block;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body::after {
    animation: ambientPulse 12s ease-in-out infinite;
  }

  .scene::before {
    animation: gridDrift 18s linear infinite;
  }

  .scene::after {
    animation: panelFloat 15s ease-in-out infinite;
  }

  .signal-overlay {
    animation: signalFlicker 7s steps(1, end) infinite;
  }

  .signal-overlay::before {
    animation: signalSweep 9s cubic-bezier(.3, 0, .2, 1) infinite;
  }

  .signal-overlay::after {
    animation: signalTear 11s steps(1, end) infinite;
  }

  .signal-message {
    animation: hiddenSignal 19s steps(1, end) 6s infinite;
  }

  .brand-shell::before {
    animation: logoBreath 6.5s ease-in-out infinite;
  }

  .brand-shell::after {
    animation: logoRingBreath 6.5s ease-in-out infinite;
  }

  .brand-mark-gray {
    animation:
      settle 900ms cubic-bezier(.2, .8, .2, 1) both;
  }

  .brand-mark-color {
    animation:
      settle 900ms cubic-bezier(.2, .8, .2, 1) both,
      colorIntroDrain 5200ms cubic-bezier(.22, 1, .36, 1) 460ms both,
      logoColorMemoryOpacity 26s cubic-bezier(.45, 0, .2, 1) 7600ms infinite;
  }

  h1,
  .hero p,
  .site-footer {
    animation: rise 760ms cubic-bezier(.2, .8, .2, 1) both;
  }

  .hero p {
    animation-delay: 110ms;
  }

  .site-footer {
    animation-delay: 180ms;
  }

  .beam {
    animation: pulse 5s ease-in-out infinite;
  }

  .beam-one {
    animation: beamOne 13s ease-in-out infinite;
  }

  .beam-two {
    animation: beamTwo 15s ease-in-out infinite;
  }

  .vine-left {
    animation: vineLeftDrift 17s ease-in-out infinite;
  }

  .vine-right {
    animation: vineRightDrift 19s ease-in-out infinite;
  }

  .pixel-one {
    animation: pixelFloatOne 9s ease-in-out infinite;
  }

  .pixel-two {
    animation: pixelFloatTwo 11s ease-in-out infinite;
  }

  .pixel-three {
    animation: pixelFloatThree 10s ease-in-out infinite;
  }

  .spark-one {
    animation: sparkFade 4.8s ease-in-out infinite;
  }

  .spark-two {
    animation: sparkFade 5.7s ease-in-out 1.1s infinite;
  }

  .spark-three {
    animation: sparkFade 6.1s ease-in-out 2.2s infinite;
  }

  .spark-four {
    animation: sparkFade 4.4s ease-in-out 3s infinite;
  }

  .spark-five {
    animation: sparkFade 5.3s ease-in-out 1.8s infinite;
  }

}

@media (prefers-reduced-motion: reduce), (update: slow) {
  .signal-overlay {
    opacity: .1;
  }

  .signal-message,
  .spark {
    display: none;
  }

  .brand-mark-color {
    opacity: 0;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-5deg) scale(.96);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes pulse {
  50% {
    opacity: .78;
  }
}

@keyframes signalFlicker {
  0%,
  100% {
    opacity: .18;
  }

  8% {
    opacity: .28;
  }

  9% {
    opacity: .12;
  }

  36% {
    opacity: .22;
  }

  37% {
    opacity: .15;
  }

  74% {
    opacity: .26;
  }

  75% {
    opacity: .17;
  }
}

@keyframes signalSweep {
  0% {
    opacity: 0;
    transform: translateY(-52%);
  }

  12% {
    opacity: .42;
  }

  24% {
    opacity: 0;
    transform: translateY(64%);
  }

  100% {
    opacity: 0;
    transform: translateY(64%);
  }
}

@keyframes signalTear {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  18% {
    transform: translate3d(8px, 0, 0);
  }

  19% {
    transform: translate3d(-5px, 0, 0);
  }

  58% {
    transform: translate3d(11px, 0, 0);
  }

  59% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hiddenSignal {
  0%,
  63%,
  70%,
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) skewX(-4deg);
  }

  64% {
    opacity: .16;
    transform: translate3d(calc(-50% - 10px), -50%, 0) skewX(-10deg);
  }

  65% {
    opacity: .38;
    transform: translate3d(calc(-50% + 8px), -50%, 0) skewX(6deg);
  }

  66% {
    opacity: .12;
    transform: translate3d(calc(-50% - 4px), -50%, 0) skewX(-2deg);
  }

  67% {
    opacity: .3;
    transform: translate3d(-50%, -50%, 0) skewX(-6deg);
  }
}

@keyframes logoBreath {
  0%,
  100% {
    opacity: .32;
    transform: rotate(-2deg) scale(.82);
  }

  50% {
    opacity: .95;
    transform: rotate(-2deg) scale(1.12);
  }
}

@keyframes logoRingBreath {
  0%,
  100% {
    opacity: .18;
    transform: rotate(-2deg) scale(.94);
  }

  50% {
    opacity: .56;
    transform: rotate(-2deg) scale(1.08);
  }
}

@keyframes colorIntroDrain {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes logoColorMemoryOpacity {
  0%,
  35%,
  72%,
  100% {
    opacity: 0;
  }

  42%,
  65% {
    opacity: .28;
  }

  49%,
  58% {
    opacity: .72;
  }

  53% {
    opacity: .96;
  }
}

@keyframes sparkFade {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) rotate(12deg) scale(.8);
  }

  14% {
    opacity: .78;
  }

  42% {
    opacity: .26;
  }

  70% {
    opacity: 0;
    transform: translate3d(10px, -22px, 0) rotate(34deg) scale(1.12);
  }
}

@keyframes ambientPulse {
  50% {
    opacity: .84;
  }
}

@keyframes gridDrift {
  to {
    background-position: 42px 42px, 42px 42px;
  }
}

@keyframes panelFloat {
  0%,
  100% {
    transform: rotate(16deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(14deg) translate3d(-18px, -12px, 0);
  }
}

@keyframes beamOne {
  0%,
  100% {
    opacity: .34;
    transform: rotate(-24deg) translate3d(-2vw, 0, 0);
  }

  50% {
    opacity: .72;
    transform: rotate(-24deg) translate3d(10vw, 2vh, 0);
  }
}

@keyframes beamTwo {
  0%,
  100% {
    opacity: .26;
    transform: rotate(-24deg) translate3d(2vw, 0, 0);
  }

  50% {
    opacity: .62;
    transform: rotate(-24deg) translate3d(-9vw, -2vh, 0);
  }
}

@keyframes vineLeftDrift {
  0%,
  100% {
    transform: rotate(11deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(8deg) translate3d(14px, -8px, 0);
  }
}

@keyframes vineRightDrift {
  0%,
  100% {
    transform: rotate(191deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(194deg) translate3d(-16px, 10px, 0);
  }
}

@keyframes pixelFloatOne {
  0%,
  100% {
    transform: rotate(18deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(32deg) translate3d(-10px, 14px, 0);
  }
}

@keyframes pixelFloatTwo {
  0%,
  100% {
    transform: rotate(18deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(5deg) translate3d(12px, -18px, 0);
  }
}

@keyframes pixelFloatThree {
  0%,
  100% {
    transform: rotate(18deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(28deg) translate3d(-8px, -10px, 0);
  }
}

/* No-animations edition: keep only the one-time text reveal. */
*,
*::before,
*::after {
  animation: none !important;
  transition-duration: 0ms !important;
  scroll-behavior: auto !important;
}

.signal-overlay {
  opacity: .08;
}

.signal-overlay::before,
.signal-overlay::after,
.signal-message,
.spark,
.brand-mark-color {
  display: none !important;
}

.brand-shell::before {
  opacity: .42;
  transform: rotate(-2deg) scale(.96);
}

.brand-shell::after {
  opacity: .24;
  transform: rotate(-2deg) scale(.98);
}

h1,
.hero p,
.site-footer {
  opacity: 0;
  animation: noMotionTextAppear 900ms ease-out forwards !important;
}

.hero p {
  animation-delay: 120ms !important;
}

.site-footer {
  animation-delay: 220ms !important;
}

@keyframes noMotionTextAppear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}