:root {
  --primary: #5c641e;
  --on-primary: #ffffff;
  --surface: #fcfaed;
  --on-surface-variant: #47483b;
  --outline: #78786a;
  --secondary-container: #e3e5c1;
  --on-secondary-container: #46492f;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--surface);
  font-family: Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.hero {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}

.logo { width: 90px; height: 90px; display: block; }

.title {
  font-weight: 300;
  font-size: 32px;
  line-height: 16px;
  letter-spacing: 4px;
  color: var(--on-surface-variant);
  padding: 8px 0;
}

.tagline {
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
  letter-spacing: 4px;
  color: var(--outline);
  margin-bottom: 20px;
}

.actions {
  width: 115px;
  display: flex;
  flex-direction: column;
}

.btn-tonal {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  height: 48px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: var(--on-secondary-container);
  text-decoration: none;
  white-space: nowrap;
}

/* pill sits inside the 48px touch target */
.btn-tonal::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  border-radius: 100px;
  background: var(--secondary-container);
  z-index: -1;
}

/* M3 state layer */
.btn-tonal::after {
  content: "";
  position: absolute;
  inset: 4px 0;
  border-radius: 100px;
  background: var(--on-secondary-container);
  opacity: 0;
  transition: opacity 0.15s;
}
.btn-tonal:hover::after { opacity: 0.08; }
.btn-tonal:focus-visible::after,
.btn-tonal:active::after { opacity: 0.1; }
.btn-tonal:focus-visible { outline: none; }
.btn-tonal:focus-visible::before { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 进场动画 ── */
@keyframes logo-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes title-in {
  from { opacity: 0; letter-spacing: 16px; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: 4px;  filter: blur(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 4px 10px rgb(92 100 30 / 0.20)); }
  50%      { filter: drop-shadow(0 8px 22px rgb(92 100 30 / 0.38)); }
}

.logo {
  animation:
    logo-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    logo-glow 3.6s ease-in-out 1s infinite;
}
.title   { animation: title-in 0.9s cubic-bezier(0.2, 0, 0, 1) 0.25s both; }
.tagline { animation: rise-in 0.6s cubic-bezier(0.2, 0, 0, 1) 0.6s both; }
.btn-tonal { animation: rise-in 0.5s cubic-bezier(0.2, 0, 0, 1) both; }
.btn-tonal:nth-child(1) { animation-delay: 0.8s; }
.btn-tonal:nth-child(2) { animation-delay: 0.9s; }
.btn-tonal:nth-child(3) { animation-delay: 1.0s; }
.btn-tonal:nth-child(4) { animation-delay: 1.1s; }

/* 按下回弹 */
.btn-tonal { transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1); }
.btn-tonal:active { transform: scale(0.95); }

@media (prefers-reduced-motion: reduce) {
  .logo, .title, .tagline, .btn-tonal { animation: none; }
}