/* ============================================================
   我们的小窝 — 里程碑 1：时段背景系统
   纯代码实现：7 时段天空 + 日月星云 + 过渡动画
   ============================================================ */

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

:root {
  --transition-sky: 1.3s;
  --transition-move: 1.5s;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
          "Segoe UI", system-ui, sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: #0c142b;
}

/* ============================================================
   首次发现序章：磨砂玻璃 + 打字进入 welcome
   ============================================================ */
.home-discovery {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #29435a;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.64), rgba(235, 246, 248, 0.38) 34%, rgba(200, 223, 230, 0.4) 100%),
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(206, 229, 236, 0.42));
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
          backdrop-filter: blur(28px) saturate(1.18);
  opacity: 1;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition:
    opacity 0.95s ease-in-out,
    transform 0.95s ease-in-out,
    filter 0.95s ease-in-out,
    visibility 0.95s ease-in-out;
}

.home-intro-seen .home-discovery,
.home-discovery[hidden] {
  display: none !important;
}

.home-discovery::before,
.home-discovery::after,
.home-discovery__mist {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.home-discovery::before {
  background:
    radial-gradient(circle at 24% 24%, rgba(255,255,255,0.46), transparent 27%),
    radial-gradient(circle at 78% 72%, rgba(174, 207, 219, 0.34), transparent 31%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 7px);
  opacity: 0.5;
}

.home-discovery::after {
  left: 50%;
  top: 50%;
  width: 12vmin;
  height: 12vmin;
  inset: auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.52);
  box-shadow:
    0 0 90px 42px rgba(255,255,255,0.3),
    0 0 180px 110px rgba(178, 213, 225, 0.16);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}

.home-discovery__mist {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,0.18) 30%, transparent 44%),
    linear-gradient(295deg, transparent 0 30%, rgba(255,255,255,0.14) 46%, transparent 64%);
  filter: blur(2px);
}

.home-discovery__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  width: min(88vw, 820px);
  text-align: center;
  text-shadow: 0 12px 34px rgba(70, 100, 122, 0.18);
}

.home-discovery__line {
  min-height: 1.45em;
  color: #29435a;
  font-size: clamp(24px, 4.2vw, 48px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
}

.home-discovery__line + .home-discovery__line {
  color: #4f6a80;
  font-size: clamp(20px, 3.1vw, 34px);
}

.home-discovery__line.is-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.08em;
  margin-left: 7px;
  border-radius: 999px;
  background: currentColor;
  vertical-align: -0.16em;
  animation: discoveryCursor 0.82s steps(2, start) infinite;
}

.home-discovery.is-leaving {
  opacity: 0;
  visibility: hidden;
  filter: blur(13px);
  transform: scale(1.08);
  pointer-events: none;
}

.home-discovery.is-leaving::after {
  animation: discoveryCenterFade 0.95s ease-in-out both;
}

@keyframes discoveryCursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes discoveryCenterFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  40% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(15);
  }
}

/* ============================================================
   首页封面：真实封面图 + 可交互花瓣
   ============================================================ */
.home-cover {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff7f3;
  background: #24354a;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.85s ease, visibility 0.85s ease;
}

.home-cover.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.is-hidden {
  display: none !important;
}

.home-cover[hidden] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.home-cover__bg,
.home-cover__shade,
.home-cover__petals {
  position: absolute;
  inset: 0;
}

.home-cover__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: brightness(1.32) saturate(1.06) contrast(1.0);
}

.home-cover__shade {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 247, 237, 0.22), rgba(22, 28, 42, 0.02) 38%, rgba(13, 18, 31, 0.12) 100%),
    linear-gradient(180deg, rgba(13, 18, 31, 0.08), rgba(13, 18, 31, 0.0) 42%, rgba(13, 18, 31, 0.16));
  pointer-events: none;
}

.home-cover__petals {
  z-index: 1;
  pointer-events: none;
}

.home-cover__content {
  position: relative;
  z-index: 2;
  width: min(92vw, 1100px);
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translateY(-300px);
  text-align: center;
  text-shadow: 0 10px 32px rgba(16, 24, 38, 0.34);
  transform-origin: 50% 18%;
  transition:
    transform 0.76s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.54s ease,
    filter 0.54s ease;
}

.home-cover__eyebrow {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 252, 247, 0.9);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: 0 12px 30px rgba(38, 45, 66, 0.18);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.home-cover__title {
  max-width: 1100px;
  color: #fff8ef;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 92px;
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-cover__button {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 2;
  min-width: 156px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #3f5a72;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: 0 18px 42px rgba(39, 54, 84, 0.24);
  transition:
    transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.home-cover__button-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
    opacity 0.28s ease;
}

.home-cover__button-text--top {
  transform: translateY(0);
  opacity: 1;
}

.home-cover__button-text--bottom {
  transform: translateY(115%);
  opacity: 0;
}

.home-cover__button:hover .home-cover__button-text--top,
.home-cover__button:focus-visible .home-cover__button-text--top {
  transform: translateY(-115%);
  opacity: 0;
}

.home-cover__button:hover .home-cover__button-text--bottom,
.home-cover__button:focus-visible .home-cover__button-text--bottom {
  transform: translateY(0);
  opacity: 1;
}

.home-cover__button:hover {
  transform: translate(-50%, -3px);
  background: #ffffff;
  box-shadow: 0 22px 52px rgba(39, 54, 84, 0.3);
}

.home-cover__button:active {
  transform: translate(-50%, 0) scale(0.97);
}

.home-cover__button:focus-visible {
  outline: 3px solid rgba(255, 234, 185, 0.82);
  outline-offset: 4px;
}

.home-cover.is-leaving .home-cover__content {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-430px) scale(0.72);
}

.home-cover-open .ui-top,
.home-cover-open .time-label,
.home-cover-open .home-photos-link,
.home-cover-open .home-records-link,
.home-cover-open .home-blog-link,
.home-cover-open .home-activity-link {
  pointer-events: none;
}

/* ============================================================
   场景容器
   ============================================================ */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ============================================================
   天空 — 7 层渐变叠放，交叉淡入淡出
   ============================================================ */
.sky-stack {
  position: absolute;
  inset: 0;
  transition: opacity var(--transition-sky) ease;
}

.sky {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-sky) ease;
}
.sky.is-active { opacity: 1; }

.sky--morning {
  background: linear-gradient(to top,
    #ffdcab 0%, #ffcb9d 12%, #f4b7a4 28%,
    #d9bcc6 48%, #bcc8dd 74%, #afc0d9 100%);
}
.sky--forenoon {
  background: linear-gradient(to top,
    #dbeef9 0%, #c2e0f2 30%, #a0caea 64%, #86b6e2 100%);
}
.sky--noon {
  background: linear-gradient(to top,
    #d2ecfa 0%, #abd8f3 34%, #7cbae9 68%, #5ba4e0 100%);
}
.sky--afternoon {
  background: linear-gradient(to top,
    #e3edf2 0%, #c8deec 30%, #a6c8e3 64%, #90b7da 100%);
}
.sky--dusk {
  background: linear-gradient(to top,
    #ffd49c 0%, #ffba90 16%, #f0918f 36%,
    #d97c97 53%, #927ba8 75%, #5f6d97 100%);
}
.sky--evening {
  background: linear-gradient(to top,
    #3c4c74 0%, #2c3b62 36%, #1e2b4f 70%, #15203e 100%);
}
.sky--midnight {
  background: linear-gradient(to top,
    #1d2849 0%, #151e3c 40%, #0d152d 76%, #070d20 100%);
}

/* ============================================================
   星空 — 夜晚 / 半夜可见
   ============================================================ */
.stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-sky) ease;
  pointer-events: none;
}
.scene.period-evening  .stars { opacity: 0.7; }
.scene.period-midnight .stars { opacity: 1; }

.star {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  background: #fffaf0;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(255, 250, 240, 0.7);
  animation: twinkle var(--dur, 3.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ============================================================
   太阳 / 月亮 — 单个天体沿弧线滑动
   ============================================================ */
.celestial {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--transition-sky) ease;
}

/* ---- 太阳 ---- */
.sun {
  position: absolute;
  left: 50%; top: 20%;
  width: 104px; height: 104px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    left var(--transition-move) ease,
    top var(--transition-move) ease,
    width var(--transition-move) ease,
    height var(--transition-move) ease,
    opacity var(--transition-sky) ease;
}
.sun__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sun-core,
    radial-gradient(circle at 38% 34%, #fff7d6, #ffd864 60%, #ffc73c));
  box-shadow: 0 0 70px 26px var(--sun-glow, rgba(255, 222, 120, 0.55));
}
.sun__rays {
  position: absolute;
  inset: -62%;
  background: repeating-conic-gradient(from 0deg,
    var(--ray-color, rgba(255, 223, 130, 0.5)) 0deg 5deg,
    transparent 5deg 30deg);
  -webkit-mask: radial-gradient(closest-side,
    transparent 56%, #000 60%, #000 80%, transparent 92%);
          mask: radial-gradient(closest-side,
    transparent 56%, #000 60%, #000 80%, transparent 92%);
  animation: spin 70s linear infinite;
  opacity: 0.85;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 月亮 ---- */
.moon {
  position: absolute;
  left: 50%; top: 18%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    left var(--transition-move) ease,
    top var(--transition-move) ease,
    width var(--transition-move) ease,
    height var(--transition-move) ease,
    opacity var(--transition-sky) ease;
}
.moon__glow {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 248, 222, 0.55), rgba(255, 248, 222, 0) 66%);
}
/* 月盘：弯月用 mask 挖出月牙，可在任意背景上得到干净缺口 */
.moon__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf4, #f3ead0 72%, #e6d8b4);
  -webkit-mask: var(--moon-cut, none);
          mask: var(--moon-cut, none);
}
.moon__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(206, 192, 156, 0.5);
}
.moon__crater--1 { width: 16%; height: 16%; top: 26%; left: 30%; }
.moon__crater--2 { width: 11%; height: 11%; top: 54%; left: 56%; }
.moon__crater--3 { width: 9%;  height: 9%;  top: 38%; left: 64%; }

/* ============================================================
   云
   ============================================================ */
.clouds {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity var(--transition-sky) ease;
  pointer-events: none;
  color: #ffffff; /* 云体颜色，按时段覆盖 */
}
.cloud {
  position: absolute;
  width: 130px; height: 42px;
  background: currentColor;
  border-radius: 42px;
  filter: drop-shadow(0 8px 14px rgba(120, 140, 170, 0.25));
  animation: drift var(--cloud-dur, 80s) linear infinite;
  animation-delay: var(--cloud-delay, 0s);
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 50%;
}
.cloud::before { width: 58px; height: 58px; top: -26px; left: 22px; }
.cloud::after  { width: 74px; height: 74px; top: -34px; right: 20px; }

.cloud--1 { top: 16%; --cloud-dur: 92s;  --cloud-delay: -8s;  transform: scale(1.1); }
.cloud--2 { top: 28%; --cloud-dur: 120s; --cloud-delay: -48s; transform: scale(0.75); }
.cloud--3 { top: 12%; --cloud-dur: 78s;  --cloud-delay: -30s; transform: scale(0.9); }
.cloud--4 { top: 36%; --cloud-dur: 134s; --cloud-delay: -96s; transform: scale(0.6); }
.cloud--5 { top: 22%; --cloud-dur: 104s; --cloud-delay: -64s; transform: scale(1); }

@keyframes drift {
  from { left: -240px; }
  to   { left: 110vw; }
}

/* ============================================================
   叶子（下午飘动）
   ============================================================ */
.leaves {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.scene.period-afternoon .leaves { opacity: 1; }

.leaf {
  position: absolute;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #9cc96a, #7faf45);
  border-radius: 0 100% 0 100%;
  animation: fall var(--leaf-dur, 9s) linear infinite;
  animation-delay: var(--leaf-delay, 0s);
}
.leaf--1 { left: 24%; --leaf-dur: 10s; --leaf-delay: -1s; }
.leaf--2 { left: 52%; --leaf-dur: 13s; --leaf-delay: -6s; }
.leaf--3 { left: 73%; --leaf-dur: 11s; --leaf-delay: -3s; }

@keyframes fall {
  0%   { top: -6%;  transform: translateX(0) rotate(0deg); }
  50%  { transform: translateX(40px) rotate(180deg); }
  100% { top: 78%;  transform: translateX(-10px) rotate(360deg); }
}

/* ============================================================
   地面（占位）
   ============================================================ */
.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 27vh;
  transition: filter var(--transition-sky) ease,
              opacity var(--transition-sky) ease;
}
.ground__hills { width: 100%; height: 100%; display: block; }
.hill--back  { fill: #a4d172; }
.hill--front { fill: #82bd50; }

.flowers { position: absolute; inset: 0; }
.flower {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--flower, #ffffff);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.flower::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: #ffd34e;
}

/* ============================================================
   各时段：天体位置 / 颜色 / 地面着色
   ============================================================ */

/* ---- 早晨 ---- */
.period-morning .sun {
  left: 15%; top: 60%; width: 118px; height: 118px; opacity: 1;
  --sun-core: radial-gradient(circle at 38% 34%, #fff1cf, #ffb863 58%, #ff9a45);
  --sun-glow: rgba(255, 168, 92, 0.5);
  --ray-color: rgba(255, 190, 120, 0.4);
}
.period-morning .clouds { color: #fff2e4; opacity: 0.9; }
.period-morning .ground { filter: brightness(0.98) saturate(1.02); }

/* ---- 上午 ---- */
.period-forenoon .sun {
  left: 32%; top: 26%; width: 98px; height: 98px; opacity: 1;
}
.period-forenoon .clouds { color: #ffffff; opacity: 1; }
.period-forenoon .ground { filter: none; }

/* ---- 中午 ---- */
.period-noon .sun {
  left: 50%; top: 13%; width: 110px; height: 110px; opacity: 1;
  --ray-color: rgba(255, 226, 140, 0.62);
}
.period-noon .clouds { color: #ffffff; opacity: 1; }
.period-noon .ground { filter: brightness(1.04); }

/* ---- 下午 ---- */
.period-afternoon .sun {
  left: 70%; top: 27%; width: 100px; height: 100px; opacity: 1;
}
.period-afternoon .clouds { color: #fbfcff; opacity: 0.95; }
.period-afternoon .ground { filter: brightness(0.97); }

/* ---- 傍晚 ---- */
.period-dusk .sun {
  left: 84%; top: 63%; width: 142px; height: 142px; opacity: 1;
  --sun-core: radial-gradient(circle at 40% 36%, #ffe7b8, #ff9d5c 56%, #ec6f53);
  --sun-glow: rgba(255, 130, 90, 0.55);
  --ray-color: rgba(255, 160, 110, 0.32);
}
.period-dusk .clouds { color: #f6b9c2; opacity: 0.92; }
.period-dusk .ground { filter: brightness(0.8) saturate(0.95); }

/* ---- 晚上 ---- */
.period-evening .moon {
  left: 70%; top: 22%; width: 78px; height: 78px; opacity: 1;
}
.period-evening .moon__disc {
  --moon-cut: radial-gradient(circle at 70% 45%, transparent 0 50%, #000 52%);
}
.period-evening .clouds { color: #44537a; opacity: 0.42; }
.period-evening .ground { filter: brightness(0.5) saturate(0.78); }

/* ---- 半夜 ---- */
.period-midnight .moon {
  left: 50%; top: 16%; width: 94px; height: 94px; opacity: 1;
}
.period-midnight .moon__glow {
  background: radial-gradient(circle,
    rgba(255, 248, 222, 0.7), rgba(255, 248, 222, 0) 68%);
}
.period-midnight .clouds { color: #2c3a5e; opacity: 0.3; }
.period-midnight .ground { filter: brightness(0.36) saturate(0.68); }

/* ============================================================
   时段实景图 + 小狗（已接入素材的时段）
   ============================================================ */
/* 实景背景：两层叠放，由 JS 交叉淡入淡出 */
.art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  opacity: 0;
  transition: opacity var(--transition-sky) ease;
}

/* 有实景图的时段隐藏代码绘制的天空 */
.scene.has-art .sky-stack,
.scene.has-art .celestial,
.scene.has-art .clouds,
.scene.has-art .ground { opacity: 0; }

.dogs {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.scene.has-art .dogs { opacity: 1; }
.dogs .dog { pointer-events: auto; }

.dog {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 0.22s ease;
}
.dog:hover  { transform: scale(1.07); }
.dog:active { transform: scale(0.95); }
.dog--brown { --breathe: 4.1s; }

.dog__shadow {
  position: absolute;
  left: 16%; right: 16%;
  bottom: 5%;
  height: 15px;
  background: rgba(70, 55, 45, 0.25);
  border-radius: 50%;
  filter: blur(7px);
}
.dog__img {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform-origin: center bottom;
  animation: dog-breathe var(--breathe, 3.6s) ease-in-out infinite;
}
@keyframes dog-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ---- 早晨：白狗打滚、棕狗扑跳 ---- */
.dogs--morning .dog--white {
  left: 21%; bottom: 18%;
  width: max(135px, 12vw);
  aspect-ratio: 251 / 182;
}
.dogs--morning .dog--white .dog__img {
  background-image: url("/assets/早晨-白狗.png");
}
.dogs--morning .dog--brown {
  right: 21%; bottom: 13%;
  width: max(116px, 10.2vw);
  aspect-ratio: 246 / 267;
}
.dogs--morning .dog--brown .dog__img {
  background-image: url("/assets/早晨-棕狗.png");
}

/* ---- 上午：白狗追、棕狗叼球跑 ---- */
.dogs--forenoon .dog--white {
  left: 22%; bottom: 21%;
  width: max(135px, 12.5vw);
  aspect-ratio: 189 / 125;
}
.dogs--forenoon .dog--white .dog__img {
  background-image: url("/assets/上午-白狗.png");
}
.dogs--forenoon .dog--brown {
  right: 23%; bottom: 26%;
  width: max(118px, 11vw);
  aspect-ratio: 160 / 110;
}
.dogs--forenoon .dog--brown .dog__img {
  background-image: url("/assets/上午-棕狗.png");
}

/* ---- 中午：两只狗在野餐垫旁吃三明治 ---- */
.dogs--noon .dog--white {
  left: 30%; bottom: 18%;
  width: max(118px, 11vw);
  aspect-ratio: 169 / 183;
}
.dogs--noon .dog--white .dog__img {
  background-image: url("/assets/中午-白狗.png");
}
.dogs--noon .dog--brown {
  right: 32%; bottom: 17%;
  width: max(108px, 10vw);
  aspect-ratio: 132 / 146;
}
.dogs--noon .dog--brown .dog__img {
  background-image: url("/assets/中午-棕狗.png");
}

/* ---- 下午：两只狗在草地上慵懒躺着 ---- */
.dogs--afternoon .dog--white {
  left: 20%; bottom: 19%;
  width: max(140px, 12.5vw);
  aspect-ratio: 184 / 164;
}
.dogs--afternoon .dog--white .dog__img {
  background-image: url("/assets/下午-白狗.png");
}
.dogs--afternoon .dog--brown {
  right: 21%; bottom: 14%;
  width: max(150px, 13.5vw);
  aspect-ratio: 193 / 146;
}
.dogs--afternoon .dog--brown .dog__img {
  background-image: url("/assets/下午-棕狗.png");
}

/* ---- 傍晚：两只狗背对镜头依偎着看夕阳 ---- */
.dogs--dusk .dog--white {
  left: 41%; bottom: 13.5%;
  width: max(110px, 10vw);
  aspect-ratio: 136 / 144;
}
.dogs--dusk .dog--white .dog__img {
  background-image: url("/assets/傍晚-白狗.png");
}
.dogs--dusk .dog--brown {
  left: 51%; bottom: 12.5%;
  width: max(70px, 6.3vw);
  aspect-ratio: 86 / 102;
}
.dogs--dusk .dog--brown .dog__img {
  background-image: url("/assets/傍晚-棕狗.png");
}

/* ---- 晚上：白狗、棕狗围着背景里的篝火（篝火已画在背景图里）---- */
.dogs--evening .dog--white {
  left: 37%; bottom: 19%;
  width: max(108px, 9.6vw);
  aspect-ratio: 102 / 114;
}
.dogs--evening .dog--white .dog__img {
  background-image: url("/assets/晚上-白狗.png");
}
.dogs--evening .dog--brown {
  left: 49%; bottom: 15.5%;
  width: max(122px, 11vw);
  aspect-ratio: 1 / 1;
}
.dogs--evening .dog--brown .dog__img {
  background-image: url("/assets/晚上-棕狗.png");
}

/* ============================================================
   UI 层 — 时段切换器
   ============================================================ */
.ui-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  padding: 22px 16px;
  z-index: 10;
}
.time-switcher {
  display: flex;
  gap: 8px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(60, 70, 100, 0.18);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.time-switcher::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #5b6478;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip.is-active {
  background: #ffffff;
  color: #e8895b;
  box-shadow: 0 3px 10px rgba(70, 80, 110, 0.2);
}

/* ============================================================
   UI 层 — 当前时段标签
   ============================================================ */
.time-label {
  position: fixed;
  left: 22px; bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}
.time-label__text {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.time-label__reset {
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #5b6478;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.time-label__reset:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

/* 进入生活记录页的入口 */
.home-records-link,
.home-photos-link,
.home-blog-link,
.home-activity-link {
  position: fixed;
  right: 22px;
  z-index: 10;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: #5b6478;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(70, 80, 110, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.2s ease;
}
.home-records-link { bottom: 22px; }
.home-photos-link  { bottom: 62px; }
.home-blog-link    { bottom: 102px; }
.home-activity-link { bottom: 142px; }
.home-records-link:hover,
.home-photos-link:hover,
.home-blog-link:hover,
.home-activity-link:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 560px) {
  .home-cover__content {
    width: min(94vw, 366px);
    gap: 14px;
    transform: translateY(-260px);
  }
  .home-cover.is-leaving .home-cover__content {
    transform: translateY(-350px) scale(0.76);
  }
  .home-cover__eyebrow {
    font-size: 12px;
    padding: 7px 13px;
  }
  .home-cover__title {
    font-size: 25px;
    line-height: 1.04;
  }
  .home-cover__button {
    min-width: 132px;
    height: 46px;
    bottom: 54px;
    font-size: 14px;
  }
  .ui-top { padding: 14px 8px; }
  .time-switcher { gap: 5px; padding: 5px; }
  .chip { padding: 6px 9px; font-size: 12px; }
  .time-label { left: 12px; bottom: 14px; }
  .home-records-link,
  .home-photos-link,
  .home-blog-link,
  .home-activity-link { right: 12px; padding: 8px 12px; font-size: 12px; }
  .home-records-link { bottom: 14px; }
  .home-photos-link  { bottom: 50px; }
  .home-blog-link    { bottom: 86px; }
  .home-activity-link { bottom: 122px; }
}

/* 尊重减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .sun__rays, .cloud, .leaf, .star { animation: none !important; }
  .home-discovery,
  .home-discovery__line::after,
  .home-cover,
  .home-cover__button,
  .home-cover__button-text,
  .home-cover__content {
    transition: none !important;
  }
  .home-profile-page.home-revealed .home-nav,
  .home-profile-page.home-revealed .home-profile {
    animation: none !important;
  }
}

/* ============================================================
   新首页：模糊时段背景 + 极简小窝信息页
   ============================================================ */
.home-profile-root,
.home-profile-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #eaf4f7;
}

.home-profile-page {
  min-height: 100vh;
  color: #31485d;
}

.home-profile-page:not(.home-revealed) .home-nav,
.home-profile-page:not(.home-revealed) .home-profile {
  opacity: 0;
  transform: translateY(-28px);
}

.home-profile-page.home-revealed .home-nav {
  animation: homeDropIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-profile-page.home-revealed .site-nav.home-nav {
  animation: none !important;
}

.home-profile-page.home-revealed .home-profile {
  animation: homeDropIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes homeDropIn {
  from {
    opacity: 0;
    transform: translateY(-32px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.home-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: linear-gradient(172deg,#d3e8f4,#e7f0d6,#eef4e1);
}

.home-bg__layer {
  position: absolute;
  inset: -34px;
  background-image: var(--home-bg-url, url("/assets/下午草地.jpg"));
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.08);
  transform: scale(1.08);
  opacity: 0.95;
  transition: background-image 0.7s ease, opacity 0.5s ease;
}

.home-bg__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 9%, rgba(255,255,255,0.48), rgba(255,255,255,0.08) 30%, transparent 64%),
    linear-gradient(180deg, rgba(246,252,255,0.48), rgba(248,252,246,0.36) 42%, rgba(255,255,255,0.66));
}

.home-nav {
  position: sticky;
  top: 0;
  z-index: 6;
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 18px;
}

.home-nav::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(238, 248, 250, 0.82), rgba(238, 248, 250, 0));
  pointer-events: none;
}

.home-nav__brand,
.home-nav__links a {
  color: #263d51;
  text-decoration: none;
}

.home-nav__brand {
  font-size: 23px;
  font-weight: 600;
}

.home-nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 650;
}

.home-nav__links a {
  position: relative;
  opacity: 0.86;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.home-nav__links a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.home-profile {
  width: min(1040px, calc(100% - 36px));
  margin: 0 auto;
  padding: 74px 0 96px;
}

.home-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 14px 0 74px;
}

.home-avatar {
  position: relative;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 8px solid rgba(255,255,255,0.72);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,248,251,0.54));
  box-shadow: 0 22px 60px rgba(71, 94, 118, 0.16);
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.home-avatar__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 18px 28px rgba(62, 82, 100, 0.16));
}

.home-kicker {
  margin-top: 30px;
  color: #7aa6d4;
  font-size: 13px;
  font-weight: 600;
}

.home-hero h1 {
  margin-top: 14px;
  color: #284158;
  font-size: 54px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}

.home-duo-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(920px, 100%);
  margin-top: 34px;
}

.home-status {
  display: grid;
  align-items: center;
  gap: 18px;
  min-height: 234px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  background: rgba(255,255,255,0.52);
  box-shadow: 0 18px 42px rgba(68, 88, 112, 0.1);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.home-status--white {
  grid-template-columns: 150px minmax(0, 1fr);
}

.home-status--brown {
  grid-template-columns: minmax(0, 1fr) 150px;
}

.home-status__dog {
  width: 150px;
  height: 150px;
  border: 8px solid rgba(255,255,255,0.64);
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  object-fit: cover;
  box-shadow: 0 14px 30px rgba(68, 88, 112, 0.13);
}

.home-status__info {
  min-width: 0;
  text-align: left;
}

.home-status--brown .home-status__info {
  text-align: right;
}

.home-status h2 {
  color: #284158;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
}

.home-status--white h2 { color: #5f93c4; }
.home-status--brown h2 { color: #b6783c; }

.home-status dl {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.home-status dl div {
  display: grid;
  gap: 3px;
}

.home-status dt {
  color: #7b8ea2;
  font-size: 12px;
  font-weight: 600;
}

.home-status dd {
  color: #435c71;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.home-status__editable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-status--brown .home-status__editable {
  justify-content: flex-end;
}

.home-status__edit {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  color: #7b8ea2;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.home-status:hover .home-status__edit,
.home-status__edit:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-status__edit:hover {
  background: #ffffff;
  color: #4f85b8;
}

.home-status__quote {
  margin-top: 13px;
  padding: 10px 13px;
  border-radius: 8px;
  border-top: none;
  border-bottom: none;
  background: rgba(255,255,255,0.62);
  color: #60758a;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-status--white .home-status__quote {
  border-left: 3px solid rgba(122, 166, 212, 0.72);
}

.home-status--brown .home-status__quote {
  border-right: 3px solid rgba(212, 147, 86, 0.72);
}

.home-status__quote:hover,
.home-status__quote:focus-visible {
  background: rgba(255,255,255,0.82);
  box-shadow: 0 12px 26px rgba(84, 112, 137, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.home-status__quote::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 4px;
  vertical-align: -0.18em;
  border-radius: 999px;
  background: currentColor;
  animation: quoteCursorBlink 0.9s steps(2, start) infinite;
}

.home-status--white .home-status__quote::after {
  color: #6f9ecd;
}

.home-status--brown .home-status__quote::after {
  color: #c98750;
}

@keyframes quoteCursorBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.home-hero__text {
  width: min(660px, 100%);
  margin-top: 22px;
  color: #5e7082;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 600;
}

.home-recent-photos,
.home-about,
.home-places,
.home-posts {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}

.home-recent-photos h2,
.home-about h2,
.home-places h2,
.home-posts h2 {
  color: #263d51;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 600;
}

.home-about__body {
  color: #5e7082;
  font-size: 16px;
  line-height: 1.95;
  font-weight: 650;
}

.home-about__lead {
  margin-bottom: 10px;
  color: #435c71;
  font-size: 18px;
  font-weight: 600;
}

.home-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.home-periods button {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: #5a6f82;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(68, 88, 112, 0.08);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.18s ease, color 0.18s ease;
}

.home-periods button:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.84);
}

.home-periods button.is-active {
  background: #ffffff;
  color: #e8895b;
}

.home-photo-stage {
  min-width: 0;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 38px);
  padding: 22px 8px 30px;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  overflow: visible;
}

.home-photo-card {
  position: relative;
  flex: 0 1 172px;
  width: clamp(118px, 13vw, 174px);
  aspect-ratio: 4 / 5;
  padding: 7px;
  border: 3px solid rgba(255,255,255,0.92);
  border-radius: 5px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 16px 34px rgba(82, 103, 124, 0.12);
  cursor: pointer;
  transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1);
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform 0.52s ease-in-out,
    opacity 0.36s ease,
    filter 0.36s ease,
    box-shadow 0.52s ease-in-out;
}

.home-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  background: #eef4f6;
}

.home-photo-card__meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,0.76);
  color: #50677c;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.home-photo-card__meta small {
  color: #7e90a3;
  font-size: 10px;
  font-weight: 650;
}

.home-photo-stage.is-active .home-photo-card {
  opacity: 0.82;
  filter: saturate(0.9);
  transform:
    translate3d(calc(var(--lean-x, 0) * 1px), 0, calc(var(--depth, -24) * 1px))
    rotateX(var(--pitch, 0deg))
    rotateY(var(--lean, 0deg))
    rotateZ(var(--tilt, 0deg))
    scale(0.94);
}

.home-photo-stage.is-active .home-photo-card.is-focus {
  z-index: 4;
  opacity: 1;
  filter: saturate(1.06);
  box-shadow: 0 28px 58px rgba(66, 84, 105, 0.26);
  transform: translate3d(0, -14px, 70px) rotateY(0deg) rotateZ(0deg) scale(1.18);
}

.home-photo-stage.is-active .home-photo-card.is-focus .home-photo-card__meta {
  opacity: 1;
  transform: translateY(0);
}

.home-photo-card:focus-visible {
  outline: 3px solid rgba(118, 163, 207, 0.72);
  outline-offset: 5px;
}

.home-photo-empty {
  width: 100%;
  padding: 32px 20px;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 8px;
  background: rgba(255,255,255,0.48);
  color: #60758a;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.home-recent-photos,
.home-places {
  margin-top: 86px;
}

.home-places__body {
  min-width: 0;
}

.home-places__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.home-places__kicker {
  color: #435c71;
  font-size: 18px;
  font-weight: 600;
}

.home-places__count {
  margin-top: 6px;
  color: #70849a;
  font-size: 13px;
  font-weight: 650;
}

.home-places__toggle,
.place-form__cancel,
.place-form__save {
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.home-places__toggle {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: rgba(255,255,255,0.7);
  color: #4f6a82;
  box-shadow: 0 10px 22px rgba(68, 88, 112, 0.1);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, color 0.2s ease;
}

.home-places__toggle:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

.home-places__toggle[aria-expanded="true"] {
  color: #b6783c;
  background: #ffffff;
}

.place-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 14px;
  margin-bottom: 28px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.56);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 12px 30px rgba(68, 88, 112, 0.1);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.place-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.place-form label:nth-child(2) {
  grid-row: span 2;
}

.place-form span {
  color: #627084;
  font-size: 13px;
  font-weight: 650;
}

.place-form input,
.place-form textarea,
.place-form select {
  width: 100%;
  border: 2px solid rgba(255,255,255,0.72);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  color: #4a4f5c;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 750;
}

.place-form input,
.place-form select {
  height: 42px;
  padding: 0 12px;
}

.place-form textarea {
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.7;
  resize: vertical;
}

.place-form input:focus,
.place-form textarea:focus,
.place-form select:focus {
  outline: none;
  border-color: #8fc7e8;
  background: #ffffff;
}

.place-form__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.place-form__cancel {
  padding: 9px 16px;
  background: rgba(255,255,255,0.7);
  color: #6b7385;
}

.place-form__save {
  padding: 9px 18px;
  background: linear-gradient(135deg, #8fc7e8, #9fdcc5);
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(80, 130, 150, 0.22);
}

.place-stage {
  --place-card-w: clamp(176px, 23vw, 230px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  align-items: end;
  min-height: 320px;
  padding: 20px 10px 42px;
  perspective: 1000px;
  perspective-origin: 50% 25%;
}

.place-card {
  position: relative;
  z-index: 1;
  width: min(100%, var(--place-card-w));
  min-height: 258px;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 8px;
  color: #ffffff;
  background: #5b6fc0;
  box-shadow: 0 16px 24px rgba(56, 65, 90, 0.22);
  transform: rotateX(66deg) translateY(20px);
  transform-origin: bottom center;
  transform-style: preserve-3d;
  transition:
    transform 0.62s ease-in-out,
    box-shadow 0.62s ease-in-out,
    filter 0.42s ease-in-out;
  will-change: transform;
  cursor: default;
}

.place-card:hover,
.place-card:focus {
  z-index: 8;
  transform: rotateX(0deg) translateY(-10px) scale(1.05);
  box-shadow: 0 30px 54px rgba(45, 56, 84, 0.34);
  outline: none;
}

.place-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,0.92) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 12%, rgba(255,255,255,0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 28%, rgba(255,255,255,0.8) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  opacity: 0.9;
  pointer-events: none;
}

.place-card::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 26px;
  height: 20px;
  border-radius: 50%;
  background: rgba(32, 38, 54, 0.28);
  filter: blur(16px);
  transform: translateZ(-1px);
}

.place-card--night {
  background: linear-gradient(180deg, #5b4a7d 0%, #596bc1 54%, #5369b9 100%);
}

.place-card--desert {
  background: linear-gradient(180deg, #f6a057 0%, #ef8b56 48%, #db7356 100%);
}

.place-card--forest {
  background: linear-gradient(180deg, #79b7a4 0%, #5f9f94 54%, #517f7b 100%);
}

.place-card--sea {
  background: linear-gradient(180deg, #6bbbd3 0%, #5d91c8 54%, #6378bd 100%);
}

.place-card__art {
  position: relative;
  z-index: 1;
  height: 108px;
  overflow: hidden;
}

.place-card__sun,
.place-card__moon {
  position: absolute;
  border-radius: 50%;
}

.place-card__sun {
  top: 36px;
  right: 34px;
  width: 28px;
  height: 28px;
  background: rgba(255, 227, 147, 0.9);
  box-shadow: 0 0 34px rgba(255, 218, 120, 0.46);
}

.place-card__moon {
  left: 50%;
  bottom: 0;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  background: #fff8ed;
  box-shadow: 0 0 34px rgba(255, 248, 237, 0.58);
}

.place-card__land {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 42px;
}

.place-card__land::before,
.place-card__land::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 54%;
  height: 46px;
  background: rgba(60, 54, 98, 0.78);
  clip-path: polygon(0 100%, 54% 0, 100% 100%);
}

.place-card__land::before { left: 0; }
.place-card__land::after { right: 0; transform: scaleX(0.82); opacity: 0.72; }

.place-card--forest .place-card__land::before,
.place-card--forest .place-card__land::after {
  background: rgba(52, 92, 76, 0.78);
}

.place-card--sea .place-card__land::before,
.place-card--sea .place-card__land::after {
  height: 24px;
  background: rgba(230, 245, 247, 0.46);
  clip-path: ellipse(48% 36% at 50% 100%);
}

.place-card--night .place-card__land::before,
.place-card--night .place-card__land::after {
  background: rgba(60, 54, 98, 0.86);
  clip-path: polygon(0 100%, 16% 8%, 28% 100%, 42% 8%, 58% 100%, 72% 8%, 88% 100%, 100% 8%, 100% 100%);
}

.place-card__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 12px 20px 24px;
  text-align: center;
}

.place-card__name {
  font-size: 22px;
  line-height: 1.24;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(36, 42, 58, 0.18);
}

.place-card__note {
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  line-height: 1.75;
  font-weight: 600;
}

.home-post-list {
  display: grid;
  gap: 14px;
}

.home-post-list a {
  border: 1px solid rgba(255,255,255,0.56);
  background: rgba(255,255,255,0.58);
  color: #31485d;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(68, 88, 112, 0.08);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.home-post-list a:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 18px 42px rgba(68, 88, 112, 0.12);
}

.home-post-list a {
  min-height: 58px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  border-radius: 18px;
}

.home-post-list a::after {
  content: "›";
  justify-self: end;
  grid-column: 3;
  color: #8ba0b2;
  font-size: 28px;
  line-height: 1;
}

.home-post-list time {
  color: #6f8092;
  font-size: 13px;
  font-weight: 650;
}

.home-post-list span {
  color: #31485d;
  font-size: 16px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .home-nav {
    width: min(100% - 28px, 420px);
    align-items: flex-start;
    gap: 14px;
    padding-top: 18px;
  }

  .home-nav__brand {
    font-size: 18px;
    white-space: nowrap;
  }

  .home-nav__links {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px 14px;
    font-size: 12px;
  }

  .home-profile {
    width: min(100% - 28px, 420px);
    padding: 44px 0 64px;
  }

  .home-avatar {
    width: 98px;
    height: 98px;
    padding: 6px;
    border-width: 7px;
  }

  .home-kicker {
    margin-top: 24px;
    font-size: 12px;
  }

  .home-hero {
    padding-bottom: 54px;
  }

  .home-hero h1 {
    font-size: 40px;
  }

  .home-duo-status {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }

  .home-status,
  .home-status--white,
  .home-status--brown {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 0;
    padding: 16px;
    gap: 14px;
  }

  .home-status--brown .home-status__info {
    text-align: left;
  }

  .home-status--brown .home-status__editable {
    justify-content: flex-start;
  }

  .home-status__edit {
    opacity: 1;
  }

  .home-status--brown .home-status__dog {
    grid-column: 1;
    grid-row: 1;
  }

  .home-status--brown .home-status__info {
    grid-column: 2;
    grid-row: 1;
  }

  .home-status__dog {
    width: 96px;
    height: 96px;
    border-width: 6px;
  }

  .home-status h2 {
    font-size: 19px;
  }

  .home-status dl {
    gap: 6px;
    margin-top: 9px;
  }

  .home-status dt {
    font-size: 11px;
  }

  .home-status dd {
    font-size: 13px;
  }

  .home-status__quote {
    margin-top: 9px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .home-hero__text {
    font-size: 15px;
    line-height: 1.75;
  }

  .home-recent-photos,
  .home-about,
  .home-places,
  .home-posts {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-recent-photos,
  .home-places {
    margin-top: 58px;
  }

  .home-photo-stage {
    min-height: 0;
    justify-content: flex-start;
    gap: 14px;
    padding: 8px 4px 22px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .home-photo-card {
    flex-basis: 148px;
    width: 148px;
    min-width: 148px;
    scroll-snap-align: center;
  }

  .home-photo-stage.is-active .home-photo-card {
    transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(0.96);
  }

  .home-photo-stage.is-active .home-photo-card.is-focus {
    transform: translate3d(0,-8px,42px) rotateY(0deg) rotateZ(0deg) scale(1.06);
  }

  .home-places__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .place-form {
    grid-template-columns: 1fr;
  }

  .place-form label:nth-child(2) {
    grid-row: auto;
  }

  .place-form__actions {
    flex-direction: column;
  }

  .place-form__cancel,
  .place-form__save {
    width: 100%;
  }

  .place-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 4px 8px 24px;
    perspective: 900px;
  }

  .place-card {
    width: min(100%, 250px);
    min-height: 238px;
  }

  .home-post-list a {
    min-height: 72px;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 12px 16px;
  }

  .home-post-list time,
  .home-post-list span {
    grid-column: 1;
  }

  .home-post-list a::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}