:root {
  --bg: #f6f8f7;
  --bg-soft: #eef3f1;
  --ink: #1d2727;
  --line: rgba(29, 39, 39, 0.11);
  --glow: rgba(130, 168, 162, 0.28);
  --mint: #39a98d;
  --sky: #5d8fd8;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96) 0 18%, transparent 48%),
    linear-gradient(120deg, #f8faf9 0%, var(--bg-soft) 44%, #fff7ed 100%),
    linear-gradient(35deg, rgba(57, 169, 141, 0.12), transparent 36%),
    linear-gradient(145deg, transparent 54%, rgba(93, 143, 216, 0.1) 78%, transparent 100%);
  background-position: 50% 42%, 0 0, 0 0, 0 0;
  background-size: 120% 120%, 100% 100%, 140% 140%, 140% 140%;
  animation: ambient-shift 10500ms ease-in-out infinite alternate;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px));
  transform: scale(0.88);
  animation: quiet-grid 2200ms cubic-bezier(0.2, 0.75, 0.18, 1) 180ms forwards;
}

body::after {
  display: none;
}

.opening-screen {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
}

.ambient-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-field::before,
.ambient-field::after {
  position: absolute;
  inset: -12%;
  opacity: 0;
  content: "";
  animation: veil-arrive 2000ms cubic-bezier(0.2, 0.75, 0.18, 1) 700ms forwards,
    veil-drift 12000ms ease-in-out 2800ms infinite alternate;
}

.ambient-field::before {
  background: conic-gradient(
    from 220deg at 50% 50%,
    transparent 0deg,
    rgba(57, 169, 141, 0.18) 42deg,
    rgba(93, 143, 216, 0.12) 74deg,
    transparent 136deg,
    transparent 360deg
  );
}

.ambient-field::after {
  background: conic-gradient(
    from 24deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.52) 34deg,
    rgba(223, 122, 98, 0.13) 72deg,
    transparent 128deg,
    transparent 360deg
  );
  animation-delay: 900ms, 3400ms;
}

.axis {
  position: absolute;
  display: block;
  background: var(--line);
  opacity: 0;
  animation: axis-arrive 1800ms cubic-bezier(0.2, 0.75, 0.18, 1) 420ms forwards,
    axis-pulse 4600ms ease-in-out 2600ms infinite;
}

.axis.horizontal {
  top: 50%;
  left: 8%;
  width: 84%;
  height: 1px;
}

.axis.vertical {
  top: 9%;
  left: 50%;
  width: 1px;
  height: 82%;
}

.site-title {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(110deg, var(--ink) 0%, var(--ink) 34%, var(--mint) 48%, var(--sky) 58%, var(--ink) 72%);
  background-position: 0 50%;
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 8.8rem;
  font-weight: 520;
  letter-spacing: 0;
  line-height: 0.92;
  opacity: 0;
  text-rendering: geometricPrecision;
  transform: translate3d(var(--title-x, 0px), var(--title-y, 0px), 0);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 18px 44px rgba(29, 39, 39, 0.08);
  animation: title-arrive 1500ms cubic-bezier(0.19, 0.9, 0.24, 1) 520ms forwards,
    title-shimmer 6400ms ease-in-out 2600ms infinite;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

@keyframes ambient-shift {
  0% {
    background-position: 50% 42%, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 53% 38%, 0 0, 24% 18%, 82% 64%;
  }
}

@keyframes quiet-grid {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes veil-arrive {
  0% {
    opacity: 0;
    transform: scale(0.94) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes veil-drift {
  0% {
    transform: scale(1) rotate(-3deg);
  }
  100% {
    transform: scale(1.08) rotate(7deg);
  }
}

@keyframes axis-arrive {
  0% {
    opacity: 0;
    transform: scale(0.84);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes axis-pulse {
  0%,
  100% {
    opacity: 1;
    filter: none;
  }
  50% {
    opacity: 0.58;
    filter: saturate(1.5);
  }
}

@keyframes title-arrive {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes title-shimmer {
  0%,
  100% {
    background-position: 0 50%;
  }
  46%,
  58% {
    background-position: 100% 50%;
  }
}

@media (max-width: 640px) {
  .site-title {
    font-size: 4.8rem;
  }
}

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