/* Home: a twilight sky, the moon, 暖宝 and the mushroom friends. */

html, body { height: 100%; }
body.home {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow-x: hidden;
  background: #FBE3DC;
  color: var(--ink);
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #BBA8E2 0%, #D9B5DE 34%, #F3C6D6 62%, #FFE2D6 100%);
  overflow: hidden;
}
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
  animation: twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
}
.star.big { width: 5px; height: 5px; }
.star.spark {
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 0;
  box-shadow: none;
  background: none;
  animation: spark 1.4s ease-out forwards;
}
.star.spark::before, .star.spark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px -7px;
  border-radius: 1px;
  background: #FFF6D8;
  box-shadow: 0 0 8px #FFF6D8;
}
.star.spark::after { transform: rotate(90deg); }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes spark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 25% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(120deg) translateY(-10px); } }
.shooting {
  position: absolute;
  width: 90px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  transform: rotate(-24deg);
  animation: shoot 1.2s ease-out forwards;
}
@keyframes shoot { from { opacity: 0; translate: 0 0; } 20% { opacity: 1; } to { opacity: 0; translate: 220px 100px; } }

/* ---------- moon ---------- */
.moon {
  position: absolute;
  z-index: 3;
  top: calc(28px + env(safe-area-inset-top));
  right: 6px;
  width: clamp(140px, 40vw, 230px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: moon-float 6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.moon .moon-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.moon .moon-halo { animation: halo 4s ease-in-out infinite; transform-origin: 100px 100px; }
.moon:active { transform: scale(.96); }
.moon.is-hidden { visibility: hidden; }
@keyframes moon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes halo { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* ---------- hello ---------- */
.hello {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(clamp(100px, 22svh, 210px) + env(safe-area-inset-top)) 20px 0;
}
.hi {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(36px, 10.5vw, 54px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #4B3A42;
}
.entry {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 6svh, 52px);
  padding: 14px 14px 14px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(186, 104, 140, .22), 0 1px 0 rgba(255, 255, 255, .9) inset;
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.entry:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(186, 104, 140, .3); }
.entry:active { transform: scale(.97); }
.entry-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--blush);
}
.entry-icon svg { width: 44px; animation: car-bob 1.2s ease-in-out infinite; }
@keyframes car-bob { 50% { transform: translateY(-2px) rotate(-1.5deg); } }
.entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entry-title { font-family: var(--font); font-size: 20px; font-weight: 600; line-height: 1.3; }
.entry-sub { color: var(--ink-soft); font-size: 13.5px; }
.entry-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
}
.entry-go svg { width: 18px; height: 18px; }
.cheer { margin: 12px 4px 0; color: #7A6170; font-size: 14px; }

/* ---------- ground ---------- */
.ground {
  position: relative;
  z-index: 1;
  flex: none;
  height: clamp(250px, 41svh, 400px);
  margin-top: 8px;
}
.hills { position: absolute; inset: 0; width: 100%; height: 100%; }
.flowers { position: absolute; inset: 0; pointer-events: none; }
.flower { position: absolute; width: 10px; height: 10px; }
.flower::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE59A 0 28%, var(--c, #F9C9D6) 30%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
}

.nuanbao {
  position: absolute;
  left: max(4%, calc(50% - 300px));
  bottom: 9%;
  z-index: 3;
  width: clamp(136px, 39vw, 210px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nuanbao:active .nb { transform: scale(.96, 1.03); }
.nb { transition: transform .2s; }
.nb-say {
  position: absolute;
  left: calc(max(4%, calc(50% - 300px)) + clamp(96px, 26vw, 150px));
  bottom: calc(9% + clamp(150px, 42vw, 230px));
  z-index: 4;
  margin: 0;
  pointer-events: none;
}
.nb-say span {
  display: block;
  max-width: 200px;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  color: var(--rose-deep);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--shadow);
  animation: say-pop .4s var(--ease-spring);
}
@keyframes say-pop { from { opacity: 0; transform: translateY(6px) scale(.85); } }
.heart {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  color: #F27A98;
  font-size: 18px;
  animation: heart-up 1.3s ease-out forwards;
}
@keyframes heart-up { from { opacity: 1; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), -90px) scale(1.2); } }

.hamster {
  position: absolute;
  left: calc(max(4%, calc(50% - 300px)) + clamp(118px, 34vw, 184px));
  bottom: 7%;
  z-index: 3;
  width: clamp(50px, 14vw, 72px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ham { display: block; width: 100%; height: auto; overflow: visible; }
.ham-body { transform-origin: 50px 86px; animation: ham-breathe 2.4s ease-in-out infinite; }
.ham-ear-l, .ham-ear-r { transform-box: fill-box; transform-origin: 50% 90%; }
.ham-ear-l { animation: ham-ear 3.6s ease-in-out infinite; }
.ham-ear-r { animation: ham-ear 3.6s ease-in-out infinite .4s; }
.ham-eyes { transform-box: fill-box; transform-origin: center; animation: nb-blink 4.2s infinite 1s; }
.hamster.is-hop .ham-body { animation: mush-hop .55s var(--ease-spring); }
@keyframes ham-breathe { 50% { transform: scale(1.03, .97); } }
@keyframes ham-ear { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-14deg); } }

.mushrooms { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.m {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.m .mush { width: 100%; }

.couple {
  position: absolute;
  bottom: 4%;
  left: 0;
  z-index: 3;
  display: flex;
  gap: 0;
  width: 108px;
  cursor: pointer;
  animation: stroll 26s linear infinite;
}
.couple .pair { display: flex; width: 100%; animation: face 26s steps(1) infinite; }
.couple .mush-wrap { width: 54px; }
.couple .mush-wrap + .mush-wrap { margin-left: -8px; }
@keyframes stroll {
  0% { transform: translateX(46vw); }
  48% { transform: translateX(calc(100vw - 120px)); }
  50% { transform: translateX(calc(100vw - 120px)); }
  98% { transform: translateX(46vw); }
  100% { transform: translateX(46vw); }
}
@keyframes face { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.couple.is-hug .mush-wrap:first-child { animation: hug-l .9s ease-in-out; }
.couple.is-hug .mush-wrap:last-child { animation: hug-r .9s ease-in-out; }
@keyframes hug-l { 50% { transform: translateX(6px) rotate(8deg); } }
@keyframes hug-r { 50% { transform: translateX(-6px) rotate(-8deg); } }

.sign {
  margin: 4px 4px 0;
  text-align: right;
  color: rgba(75, 58, 66, .6);
  font-family: var(--font);
  font-size: 14px;
}

/* ---------- entrance after the intro ---------- */
.home .hello > *, .home .ground { transition: opacity .8s ease, transform .9s var(--ease-spring); }
.home.is-intro .hello > *, .home.is-intro .ground { opacity: 0; transform: translateY(14px); }
.home .hello > :nth-child(2) { transition-delay: .1s; }
.home .hello > :nth-child(3) { transition-delay: .2s; }
.home .hello > :nth-child(4) { transition-delay: .3s; }
.home .ground { transition-delay: .15s; }

/* ---------- intro: 王 + 月 = 玥 → the moon ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(120% 80% at 50% 40%, #574A8C 0%, #3A3168 55%, #2A2450 100%);
  transition: opacity 1s ease;
}
.intro.is-fading { opacity: 0; pointer-events: none; }
.intro[hidden] { display: none; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  margin: 0;
  text-align: center;
  color: #FFF4E2;
  font-family: var(--font);
  font-size: 20px;
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(255, 220, 180, .55);
  opacity: 0;
  transition: opacity .6s ease;
}
.intro-cap.on { opacity: 1; }
.intro-skip {
  position: absolute;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 244, 226, .8);
  font-size: 13px;
  cursor: pointer;
}
.replay-canvas { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.hello { transition: opacity .5s ease; }
.home.is-replay .hello { opacity: .08; }

@media (min-width: 760px) {
  .hello { padding-top: clamp(120px, 22svh, 220px); }
  .moon { right: max(20px, calc(50% - 420px)); }
}

@media (prefers-reduced-motion: reduce) {
  .moon, .moon .moon-halo, .star, .entry-icon svg, .couple, .couple .pair, .ham-body, .ham-ear-l, .ham-ear-r { animation: none; }
  .couple { transform: translateX(60vw); }
}