:root {
  color-scheme: light;
  --sky: #e8fbff;
  --sky-deep: #bfeefa;
  --cream: #fff9da;
  --peach: #ffc7b8;
  --pink: #ff8fc7;
  --mint: #8ce7c8;
  --blue: #63b7ff;
  --ink: #31465d;
  --soft-ink: #637489;
  --pixel-shadow: #23364f;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 249, 218, 0.68)),
    radial-gradient(circle at 18% 22%, rgba(255, 143, 199, 0.42), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(99, 183, 255, 0.36), transparent 30%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%);
  color: var(--ink);
  font-family:
    "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(49, 70, 93, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(49, 70, 93, 0.08) 2px, transparent 2px);
  background-position: center;
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 50%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.22) 50%, transparent 50%);
  background-size: 4px 4px;
  opacity: 0.28;
  mix-blend-mode: soft-light;
}

#pixel-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
}

.hero {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px) clamp(18px, 5vw, 72px) 78px;
  place-items: center;
  isolation: isolate;
}

.pixel-cloud,
.pixel-sun,
.pixel-stars span {
  image-rendering: pixelated;
}

.pixel-cloud {
  position: fixed;
  z-index: 2;
  width: 160px;
  height: 64px;
  background: #ffffff;
  border: 4px solid rgba(49, 70, 93, 0.18);
  border-radius: 0;
  box-shadow:
    24px -24px 0 #ffffff,
    56px -32px 0 #ffffff,
    88px -20px 0 #ffffff,
    16px 16px 0 rgba(99, 183, 255, 0.16),
    4px 4px 0 rgba(49, 70, 93, 0.14);
  opacity: 0.88;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  animation: cloud-bob 5s steps(6, end) infinite;
}

.cloud-a {
  top: 16%;
  left: 8%;
}

.cloud-b {
  right: 11%;
  bottom: 20%;
  width: 132px;
  height: 52px;
  opacity: 0.78;
  animation-duration: 6.5s;
  animation-delay: 700ms;
}

.pixel-sun {
  position: fixed;
  top: clamp(34px, 8vw, 86px);
  right: clamp(30px, 8vw, 110px);
  z-index: 2;
  width: 96px;
  height: 96px;
  background: var(--cream);
  border: 5px solid #ffb95d;
  box-shadow:
    0 0 0 8px rgba(255, 185, 93, 0.18),
    14px 14px 0 rgba(255, 143, 199, 0.2),
    -12px 16px 0 rgba(140, 231, 200, 0.22);
  animation: sun-hop 4.8s steps(5, end) infinite;
}

.hero-content {
  position: relative;
  width: min(100%, 1040px);
  padding: clamp(26px, 5vw, 52px);
  text-align: center;
  background: rgba(255, 255, 255, 0.48);
  border: 4px solid rgba(49, 70, 93, 0.16);
  box-shadow:
    8px 8px 0 rgba(49, 70, 93, 0.14),
    inset 0 0 0 4px rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
  transform: translateY(10px);
  animation: pop-in 900ms steps(8, end) forwards;
}

.hero-content::before,
.hero-content::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  background: var(--pink);
  box-shadow:
    22px 0 0 var(--mint),
    44px 0 0 var(--blue);
}

.hero-content::before {
  top: 14px;
  left: 14px;
}

.hero-content::after {
  right: 14px;
  bottom: 14px;
  background: var(--blue);
  box-shadow:
    -22px 0 0 var(--cream),
    -44px 0 0 var(--peach);
}

.kicker {
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  color: var(--soft-ink);
  font-size: clamp(0.72rem, 1.4vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(4rem, 12.4vw, 10.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow:
    4px 0 0 var(--pixel-shadow),
    0 4px 0 var(--pixel-shadow),
    4px 4px 0 var(--pixel-shadow),
    8px 8px 0 rgba(255, 143, 199, 0.95),
    12px 12px 0 rgba(99, 183, 255, 0.55);
  animation: title-bounce 2.8s steps(5, end) infinite;
}

.tagline {
  max-width: 680px;
  margin: clamp(22px, 4vw, 34px) auto 0;
  color: var(--ink);
  font-size: clamp(1.02rem, 2vw, 1.38rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.pixel-stars {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.pixel-stars span {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffffff;
  box-shadow:
    14px 0 0 #ffffff,
    -14px 0 0 #ffffff,
    0 14px 0 #ffffff,
    0 -14px 0 #ffffff,
    4px 4px 0 rgba(49, 70, 93, 0.14);
  animation: twinkle 1.9s steps(2, end) infinite;
}

.pixel-stars span:nth-child(1) {
  top: 28%;
  right: 22%;
}

.pixel-stars span:nth-child(2) {
  top: 62%;
  left: 17%;
  background: var(--cream);
  animation-delay: 300ms;
}

.pixel-stars span:nth-child(3) {
  top: 18%;
  left: 34%;
  background: var(--mint);
  animation-delay: 600ms;
}

.pixel-stars span:nth-child(4) {
  right: 18%;
  bottom: 30%;
  background: var(--peach);
  animation-delay: 900ms;
}

.site-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  padding: 0 18px 18px;
  color: rgba(49, 70, 93, 0.7);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms steps(2, end);
}

.site-footer a:hover {
  color: var(--pink);
  transform: translateY(-2px);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes title-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-6px);
  }
}

@keyframes cloud-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

@keyframes sun-hop {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(3deg) translateY(-8px);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 24px 16px 76px;
  }

  .pixel-sun {
    width: 62px;
    height: 62px;
    border-width: 4px;
  }

  .pixel-cloud {
    width: 104px;
    height: 42px;
    border-width: 3px;
    box-shadow:
      16px -16px 0 #ffffff,
      36px -22px 0 #ffffff,
      58px -14px 0 #ffffff,
      10px 10px 0 rgba(99, 183, 255, 0.16),
      3px 3px 0 rgba(49, 70, 93, 0.14);
  }

  .cloud-a {
    top: 14%;
    left: -8%;
  }

  .cloud-b {
    right: -12%;
    bottom: 18%;
  }

  .hero-content {
    padding: 28px 18px 32px;
    border-width: 3px;
    box-shadow:
      6px 6px 0 rgba(49, 70, 93, 0.14),
      inset 0 0 0 3px rgba(255, 255, 255, 0.42);
  }

  .hero-content::before,
  .hero-content::after {
    width: 12px;
    height: 12px;
  }

  .kicker {
    letter-spacing: 0.08em;
  }

  h1 {
    font-size: clamp(2.6rem, 13vw, 4.5rem);
    letter-spacing: 0;
    text-shadow:
      3px 0 0 var(--pixel-shadow),
      0 3px 0 var(--pixel-shadow),
      3px 3px 0 var(--pixel-shadow),
      6px 6px 0 rgba(255, 143, 199, 0.95),
      9px 9px 0 rgba(99, 183, 255, 0.48);
  }

  .tagline {
    max-width: 18em;
    font-size: 1rem;
    letter-spacing: 0.02em;
  }

  .pixel-stars span {
    width: 10px;
    height: 10px;
    box-shadow:
      10px 0 0 currentColor,
      -10px 0 0 currentColor,
      0 10px 0 currentColor,
      0 -10px 0 currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}