/* 首页：主视觉、心动交互、计时器与功能入口 */
/* 5. 首页 ---------------------------------------------------------------- */
.home-hero {
    min-height: 790px;
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
}

.home-hero:before,
.home-hero:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.home-hero:before {
    width: 420px;
    height: 420px;
    border: 1px solid rgba(223, 114, 141, .13);
    left: -180px;
    top: 200px;
}

.home-hero:after {
    width: 560px;
    height: 560px;
    border: 1px solid rgba(124, 98, 158, .11);
    right: -280px;
    top: 60px;
}

.hero-content {
    max-width: 1080px;
    margin: auto;
    padding: 160px 20px 96px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font: 700 9px Arial;
    letter-spacing: .25em;
    color: var(--faint);
}

.kicker i { width: 26px; height: 1px; background: var(--line-strong) }

.home-hero h1 {
    font-family: var(--serif);
    font-size: clamp(46px, 5.5vw, 74px);
    letter-spacing: -.05em;
    margin: 18px 0 14px;
    font-weight: 400;
}

.home-hero h1 span { color: var(--pink-dark); font-style: italic; margin-left: 9px }

.subtitle { font-size: 13px; color: var(--muted); margin: 0; letter-spacing: .04em }

.couple {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 78px;
    margin: 64px auto 48px;
}

.person { display: flex; flex: 0 0 280px; align-items: center; gap: 20px; text-align: left; min-width: 280px }
.person-right { flex-direction: row-reverse; text-align: right }

.avatar {
    flex: 0 0 118px;
    width: 118px;
    height: 118px;
    border-radius: 38% 62% 53% 47%/48% 38% 62% 52%;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md), inset 0 0 0 7px rgba(255, 255, 255, .8);
}

.avatar:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .76);
    pointer-events: none;
}

.avatar img { width: 100%; height: 100%; object-fit: cover }
.avatar span { font-family: var(--serif); color: #fff; font-size: 36px }
.avatar-boy { background: linear-gradient(145deg, #7e92a6, #b8cbd2) }
.avatar-girl { background: linear-gradient(145deg, #d98da0, #f0bdaf) }

.person p { font: 700 8px Arial; letter-spacing: .2em; color: var(--pink-dark); margin: 0 }
.person h2 { font-family: var(--serif); font-size: 24px; margin: 7px 0 8px; font-weight: 400 }
.person-line { display: block; font-size: 11px; color: var(--muted) }

.love-mark {
    position: relative;
    display: flex;
    flex: 0 0 96px;
    width: 96px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.heart {
    position: relative;
    width: 70px;
    height: 70px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--pink);
    font-size: 29px;
    box-shadow: var(--shadow-md);
    overflow: visible;
}

.heart > .icon {
    fill: currentColor;
    stroke-width: 1.5;
    animation: pulse 2s ease-in-out infinite;
    transform-origin: center;
}
.love-mark > span { font: 700 7px Arial; letter-spacing: .3em; color: var(--faint) }

/* 可以点的那颗心 */
button.heart { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent }
button.heart:hover { color: var(--pink-dark) }
button.heart:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px }
button.heart:disabled,
button.heart.is-capped {
    cursor: not-allowed;
    color: var(--pink-dark);
    background: var(--pink-softer);
    animation: none;
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm);
    opacity: .68;
}

button.heart.is-capped > .icon { animation: none }

.heart:after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--pink);
    opacity: 0;
    pointer-events: none;
}

.heart.is-beating > .icon { animation: heart-tap var(--beat-duration, .45s) ease-out }

/* 每点一次飘上去的小爱心，位置和角度由 JS 随机给 */
.heart-spark {
    position: absolute;
    top: 20px;
    left: 50%;
    color: var(--pink);
    font-size: 17px;
    pointer-events: none;
    animation: heart-float 1.1s ease-out forwards;
}

.heart-spark .icon { fill: currentColor; stroke: none }

.heart-feedback {
    position: absolute;
    z-index: 4;
    top: -36px;
    left: 50%;
    max-width: min(280px, calc(100vw - 28px));
    padding: 6px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--nav-bg);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 5px) scale(.96);
    transition: opacity .18s ease, transform .18s ease, color .18s ease;
    pointer-events: none;
}

.heart-feedback.is-on { opacity: 1; transform: translate(-50%, 0) scale(1) }
.heart-feedback.is-hint { color: var(--faint); font-size: 9px; box-shadow: none }
.heart-feedback.is-capped { color: var(--pink-dark); background: var(--pink-softer); border-color: var(--line-strong) }
.heart-feedback.is-reminding { animation: feedback-remind .24s ease }

/* 两个人各自的“想你”，以及访客的祝福 */
.miss-count, .love-mark .guest-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--muted);
}

.miss-count { margin-top: 10px }
.love-mark .guest-count {
    width: 96px;
    box-sizing: border-box;
    justify-content: center;
    margin-top: 2px;
    padding: 3px 8px;
    font-size: 10px;
}
.miss-count .icon, .guest-count .icon { font-size: 12px; color: var(--pink); fill: currentColor; stroke-width: 1.4 }
.guest-count .icon { fill: none }
.miss-count strong, .guest-count strong { display: inline-block; font: 400 13px Georgia, serif; color: var(--ink); font-variant-numeric: tabular-nums }
.miss-count.is-mine, .love-mark .guest-count.is-mine { border-color: var(--pink); background: var(--pink-softer) }
.miss-count strong.is-bumped, .guest-count strong.is-bumped,
.board-grid strong.is-bumped { animation: count-bump var(--bump-duration, .38s) ease-out }

/* 当前身份的心动统计，挂在相伴计时器下面 */
.heart-board { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line) }

.heart-board-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -22px auto 12px;
    width: max-content;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--faint);
    font: 700 7px/1.4 Arial, sans-serif;
    letter-spacing: .16em;
    box-shadow: var(--shadow-sm);
}

.heart-board-label i { width: 3px; height: 3px; border-radius: 50%; background: var(--pink) }
.heart-board-label span:last-child { color: var(--pink-dark); letter-spacing: .08em }

.heart-board > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 13px;
    font-size: 11px;
    color: var(--muted);
}

.heart-board > p .icon { color: var(--pink); fill: currentColor; stroke-width: 1.4 }
.heart-board b { font-weight: 400; color: var(--pink-dark) }
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.board-grid div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 5px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: linear-gradient(var(--surface-soft), var(--surface-soft)) padding-box,
                linear-gradient(145deg, rgba(223, 114, 141, .2), transparent 55%, rgba(177, 153, 220, .2)) border-box;
}
.board-grid strong { position: relative; font: 400 23px Georgia, serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.board-grid span { font-size: 9px; color: var(--faint); letter-spacing: .08em }
.board-grid strong.is-milestone {
    color: var(--pink-dark);
    text-shadow: 0 0 10px rgba(223, 114, 141, .22);
}
.board-grid strong.is-milestone:after {
    content: "";
    position: absolute;
    left: -7px;
    right: -7px;
    bottom: -4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    opacity: .72;
    pointer-events: none;
}

.together {
    width: min(690px, 100%);
    margin: auto;
    padding: 22px 30px 20px;
    position: relative;
    isolation: isolate;
    border: 1px solid var(--card-ring);
    border-radius: 25px;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
}

.together:before,
.together:after {
    content: "✦";
    position: absolute;
    top: 16px;
    color: var(--pink);
    font-size: 9px;
    opacity: .55;
}

.together:before { left: 18px }
.together:after { right: 18px }

/* 99 次心动彩蛋：纯 CSS 粒子，不依赖第三方烟花库。 */
.heart-celebration { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none }
.celebration-particle {
    position: absolute;
    color: var(--particle-color, var(--pink));
    font: 700 var(--particle-size, 12px)/1 Georgia, serif;
    text-shadow: 0 2px 8px rgba(36, 20, 40, .18);
    opacity: 0;
    animation: celebration-burst 1.65s cubic-bezier(.18, .72, .25, 1) var(--particle-delay, 0s) forwards;
}

.celebration-banner {
    position: fixed;
    left: 50%;
    top: max(18px, env(safe-area-inset-top));
    min-width: min(360px, calc(100vw - 40px));
    padding: 18px 26px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
    background: rgba(39, 30, 47, .88);
    color: #fff;
    text-align: center;
    font: 400 17px/1.45 var(--serif);
    letter-spacing: .04em;
    box-shadow: 0 24px 70px rgba(29, 18, 34, .35), inset 0 0 28px rgba(239, 145, 168, .18);
    backdrop-filter: blur(14px);
    transform: translate(-50%, calc(-100% - 28px));
    opacity: 0;
    animation: celebration-banner 3.2s ease forwards;
}

.celebration-banner small { display: block; margin-top: 3px; color: #f4afc0; font: 700 8px/1.4 Arial, sans-serif; letter-spacing: .22em }

.together > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    margin: 0 0 14px;
}

.together-letter .icon { color: var(--pink); fill: currentColor; stroke-width: 1.4 }

.timer { display: flex; align-items: center; justify-content: center; gap: 15px }
.timer div { display: flex; align-items: baseline; gap: 5px }
.timer strong { font-family: Georgia, serif; font-size: 38px; font-weight: 400; letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.timer span { font-size: 10px; color: var(--muted) }
.timer b { font: 400 17px Georgia; color: var(--faint) }
.together small { display: block; margin-top: 12px; font-size: 9px; color: var(--faint); letter-spacing: .06em }

.float { position: absolute; color: var(--pink); opacity: .28; z-index: 1 }
.float-one { font-size: 42px; left: 9%; top: 29% }
.float-two { font-size: 28px; right: 12%; top: 40% }
.float-three { font-size: 26px; right: 22%; bottom: 11% }
.float .icon { stroke-width: 1.4 }
.float-one .icon { transform: rotate(-18deg) }
.float-three .icon { transform: rotate(20deg) }

.feature-section { padding: 105px max(24px, calc((100vw - 1120px)/2)) 120px }

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 45px;
}

.section-title p,
.page-heading > p,
.article-page article > header > p {
    font: 700 9px Arial;
    letter-spacing: .25em;
    color: var(--pink-dark);
    margin: 0 0 12px;
}

.section-title h2 { font-family: var(--serif); font-size: 39px; font-weight: 400; margin: 0 }
.section-title > span { font-size: 12px; color: var(--muted); line-height: 1.8 }

.section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 12px;
    color: var(--pink-dark);
}

.section-more .icon { transition: transform .2s }
.section-more:hover .icon { transform: translateX(3px) }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }

.feature-card {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 23px;
    padding: 25px;
    text-align: left;
    min-height: 230px;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}

.feature-card:after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid var(--card-ring);
    border-radius: 50%;
    right: -55px;
    top: -55px;
}

.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md) }
.feature-card.peach { background: var(--card-peach) }
.feature-card.mint { background: var(--card-mint) }
.feature-card.blue { background: var(--card-blue) }
.feature-card.rose { background: var(--card-rose) }
.feature-card.lilac { background: var(--card-lilac) }
.feature-card.gold { background: var(--card-gold) }

.card-top, .card-bottom { display: flex; justify-content: space-between; align-items: center }

.feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--card-chip);
    color: var(--pink-dark);
    font-size: 20px;
}

.card-top small { font: 700 8px Arial; letter-spacing: .16em; color: var(--faint) }
.feature-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 28px 0 9px; color: var(--ink) }
.feature-card > p { font-size: 11px; line-height: 1.7; color: var(--muted); max-width: 230px; margin: 0 }
.card-bottom { position: absolute; left: 25px; right: 25px; bottom: 22px }
.card-bottom span { font-size: 9px; color: var(--muted) }
.card-arrow { font-size: 17px; color: var(--ink); transition: transform .2s }
.feature-card:hover .card-arrow { transform: translateX(4px) }

/* 首页最近的点点滴滴 */
.recent-moments { margin-top: 86px }
.recent-moments .section-title { margin-bottom: 28px }
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }

.recent-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: var(--surface);
    transition: transform .25s, box-shadow .25s;
}

.recent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) }

.recent-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 168px;
    background: var(--surface-muted);
    color: var(--faint);
    overflow: hidden;
}

.recent-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform-origin: center;
}

.recent-card:hover .recent-cover img { transform: scale(1.04) }
.cover-placeholder { font-size: 34px; stroke-width: 1.4 }

.recent-body { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 22px }

.recent-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 9px Arial;
    letter-spacing: .08em;
    color: var(--faint);
}

.recent-meta em {
    font-style: normal;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--pink-softer);
    color: var(--pink-dark);
}

.recent-body strong { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.5 }
.recent-excerpt { font-size: 11px; line-height: 1.75; color: var(--muted) }

.daily-note {
    margin-top: 76px;
    padding: 54px 20px;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.note-quote { font-size: 26px; color: var(--pink); opacity: .55; margin-bottom: 18px; stroke-width: 1.5 }
.daily-note p { font-family: var(--serif); font-size: 21px; line-height: 1.8; margin: 0 }
.daily-note small { display: block; color: var(--faint); font-size: 9px; margin-top: 13px; letter-spacing: .08em }

/* 动画 */
@keyframes pulse { 50% { transform: scale(1.08) } }
@keyframes heart-tap { 0% { transform: scale(1) } 32% { transform: scale(1.24) } 100% { transform: scale(1) } }
@keyframes count-bump {
    0%, 100% { color: var(--ink); text-shadow: none }
    45% { color: var(--pink-dark); text-shadow: 0 0 8px rgba(223, 114, 141, .32) }
}
@keyframes feedback-remind { 50% { opacity: .58 } }
@keyframes celebration-burst {
    0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0deg) }
    12% { opacity: 1 }
    78% { opacity: .95 }
    100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(1.15) rotate(var(--particle-rotate)) }
}

@keyframes celebration-banner {
    0% { opacity: 0; transform: translate(-50%, calc(-100% - 28px)) }
    12%, 78% { opacity: 1; transform: translate(-50%, 0) }
    100% { opacity: 0; transform: translate(-50%, -18px) }
}

@keyframes heart-float {
    0% { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0) }
    18% { opacity: .95 }
    100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -98px) scale(var(--size, 1)) rotate(var(--tilt, 0deg)) }
}

@media (max-width: 1000px) {
    .feature-grid, .recent-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 800px) {
    .hero-content { padding: 130px 20px 80px }
    .home-hero h1 { font-size: 46px }
    .subtitle { line-height: 1.8 }
    .couple { gap: 22px; margin: 50px 0 40px }
    .person { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 16px; text-align: center }
    .avatar { flex-basis: 92px; width: 92px; height: 92px }
    .love-mark { flex: 0 0 96px; width: 96px; margin-top: -72px }
    .heart { width: 54px; height: 54px; font-size: 24px }
    .person h2 { font-size: 18px }
    .person-line { display: none }
    .miss-count { margin-top: 4px; padding: 3px 9px; font-size: 10px }
    .miss-count strong, .guest-count strong { font-size: 12px }
    .together { padding: 21px 12px }
    .heart-board { margin-top: 15px; padding-top: 13px }
    .heart-board > p { margin-bottom: 11px; line-height: 1.7 }
    .board-grid { grid-template-columns: repeat(4, 1fr); gap: 6px }
    .board-grid strong { font-size: 18px }
    .timer { gap: 8px }
    .timer strong { font-size: 27px }
    .timer b { font-size: 12px }
    .timer span { font-size: 8px }
    .float { display: none }
    .feature-grid, .recent-grid, .post-grid { grid-template-columns: 1fr }
    .feature-card { min-height: 215px }
    .feature-section { padding-top: 75px }
    .recent-moments { margin-top: 60px }
    .daily-note p { font-size: 17px }
}

@media (prefers-reduced-motion: reduce) {
    .heart > .icon, .heart.is-beating > .icon { animation: none }
    .heart-spark { display: none }
    .miss-count strong.is-bumped, .guest-count strong.is-bumped, .board-grid strong.is-bumped { animation: none }
}