/* R23 纪念日倒计时 · 13色板 + 翻页倒计时 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}
body.showcase-back-active { padding-top: calc(44px + env(safe-area-inset-top, 0)); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }

body[data-theme='dawn'] { --primary:#FF6B6B; --primary-light:#FFF5F5; --accent:#FF8E8E; --bg:#FFF5F5; --bg-card:#FFF; --text:#4A2530; --text-light:#9D5973; --border:#FFD6D6; }
body[data-theme='ocean'] { --primary:#4A90D9; --primary-light:#F0F7FF; --accent:#6BA3E0; --bg:#F0F7FF; --bg-card:#FFF; --text:#1A365D; --text-light:#4A6FA5; --border:#C5DFF8; }
body[data-theme='forest'] { --primary:#2ECC71; --primary-light:#F0FFF4; --accent:#58D68D; --bg:#F0FFF4; --bg-card:#FFF; --text:#1E4D32; --text-light:#3D8B5E; --border:#B7E4C7; }
body[data-theme='dusk'] { --primary:#E67E22; --primary-light:#FFF9F4; --accent:#F39C12; --bg:#FFF9F4; --bg-card:#FFF; --text:#7C3A0A; --text-light:#C2650E; --border:#FAD9B8; }
body[data-theme='purple'] { --primary:#9B59B6; --primary-light:#F9F5FF; --accent:#BB8FCE; --bg:#F9F5FF; --bg-card:#FFF; --text:#4A235A; --text-light:#7D3C98; --border:#E8DAEF; }
body[data-theme='midnight'] { --primary:#5DADE2; --primary-light:#1A252F; --accent:#85929E; --bg:#2C3E50; --bg-card:#34495E; --text:#F5F7FA; --text-light:#BDC3C7; --border:#4A6278; }
body[data-theme='peach'] { --primary:#FF8DA1; --primary-light:#FFF5F7; --accent:#FFB7C5; --bg:#FFF5F7; --bg-card:#FFF; --text:#6B3040; --text-light:#C0607A; --border:#FFD6E0; }
body[data-theme='mint'] { --primary:#1ABC9C; --primary-light:#F0FFFB; --accent:#48C9B0; --bg:#F0FFFB; --bg-card:#FFF; --text:#0E6655; --text-light:#1E8449; --border:#A3E4D7; }
body[data-theme='warm-sun'] { --primary:#F39C12; --primary-light:#FFFDF5; --accent:#FF9500; --bg:#FFFDF5; --bg-card:#FFF; --text:#7D6608; --text-light:#B7950B; --border:#F9E79F; }
body[data-theme='sakura'] { --primary:#FFB7C5; --primary-light:#FFF5F8; --accent:#FF8DA1; --bg:#FFF5F8; --bg-card:#FFF; --text:#6B3A4A; --text-light:#C0607A; --border:#FFD6E0; }
body[data-theme='deep-sea'] { --primary:#2980B9; --primary-light:#F5FAFF; --accent:#3498DB; --bg:#EBF5FB; --bg-card:#FFF; --text:#1A5276; --text-light:#2874A6; --border:#AED6F1; }
body[data-theme='autumn-leaf'] { --primary:#D35400; --primary-light:#FFF9F4; --accent:#E67E22; --bg:#FFF9F4; --bg-card:#FFF; --text:#6E2C00; --text-light:#A04000; --border:#F5CBA7; }
body[data-theme='ink'] { --primary:#7F8C8D; --primary-light:#F8F9FA; --accent:#95A5A6; --bg:#F8F9FA; --bg-card:#FFF; --text:#2C3E50; --text-light:#566573; --border:#D5DBDB; }

.glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.section { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section__title { font-size: 1.4rem; text-align: center; margin-bottom: 1.25rem; color: var(--primary); letter-spacing: 0.06em; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; text-decoration: none; margin: 0.35rem; transition: transform .15s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; }
.btn-pulse { animation: breathe 2.5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.04); } }

.particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 95vh; pointer-events: none; z-index: 2; }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; z-index: 1; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.72)); }
.hero__content { position: relative; z-index: 3; text-align: center; padding: 2rem 1rem; width: 100%; max-width: 720px; }
.hero__title { font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 800; margin-bottom: .35rem; }
.hero__subtitle { font-size: 1rem; opacity: .9; margin-bottom: .5rem; }
.hero__label { font-size: .82rem; opacity: .8; margin-bottom: 1rem; letter-spacing: .08em; }
.hero__scroll { color: #fff; text-decoration: none; font-size: .8rem; opacity: .75; display: inline-block; margin-top: 1.25rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }

.hero__progress { position: relative; width: 7rem; height: 7rem; margin: 1rem auto 0; }
.ring-progress { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-progress__bg { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 8; }
.ring-progress__fg { fill: none; stroke: var(--primary, #FF8DA1); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; filter: drop-shadow(0 0 6px var(--primary)); }
.ring-progress__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; }
.ring-progress__text small { font-size: .65rem; font-weight: 500; opacity: .85; }

/* 翻页倒计时 */
.flip-row { display: flex; align-items: flex-end; justify-content: center; gap: .25rem; flex-wrap: wrap; }
.flip-unit { text-align: center; }
.flip-unit__label { display: block; font-size: .65rem; opacity: .75; margin-bottom: .25rem; }
.flip-card { position: relative; width: 3.2rem; height: 3.6rem; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; perspective: 200px; }
@media (min-width: 768px) { .flip-card { width: 4rem; height: 4.5rem; font-size: 2.6rem; } }
@media (min-width: 1024px) { .flip-card { width: 5rem; height: 5.5rem; font-size: 3.2rem; } }
.flip-card__top, .flip-card__bottom, .flip-card__flip-top, .flip-card__flip-bottom {
  position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.flip-card__top, .flip-card__flip-top { top: 0; border-radius: .5rem .5rem 0 0; border-bottom: 1px solid rgba(0,0,0,.3); }
.flip-card__bottom, .flip-card__flip-bottom { bottom: 0; border-radius: 0 0 .5rem .5rem; align-items: flex-end; padding-bottom: .15rem; }
.flip-card__flip-top { transform-origin: bottom; backface-visibility: hidden; z-index: 3; }
.flip-card__flip-bottom { transform-origin: top; transform: rotateX(90deg); backface-visibility: hidden; z-index: 2; }
.flip-card.is-flipping .flip-card__flip-top { animation: flipTop .48s ease-in forwards; }
.flip-card.is-flipping .flip-card__flip-bottom { animation: flipBottom .48s ease-out .12s forwards; }
@keyframes flipTop { 0%{ transform: rotateX(0); } 100%{ transform: rotateX(-90deg); } }
@keyframes flipBottom { 0%{ transform: rotateX(90deg); } 100%{ transform: rotateX(0); } }
.flip-card.fade-change { animation: fadeDigit .4s ease; }
@keyframes fadeDigit { 0%,100%{ opacity: 1; } 50%{ opacity: 0.3; } }
.flip-sep { font-size: 1.75rem; font-weight: 800; opacity: .85; padding-bottom: 1.5rem; animation: sepPulse 1s ease-in-out infinite; }
@keyframes sepPulse { 0%,100%{ opacity: .85; } 50%{ opacity: .35; } }

/* 叙事 */
.story-card { padding: 1.5rem; }
.story-para { min-height: 1.5em; color: var(--text-light); margin-bottom: 1rem; text-indent: 2em; }
.story-para.typing::after { content: '|'; animation: blink .8s step-end infinite; color: var(--primary); }
@keyframes blink { 50%{ opacity: 0; } }

/* 照片墙 */
.gallery-masonry { columns: 2; column-gap: .65rem; }
@media (min-width: 768px) { .gallery-masonry { columns: 3; } }
@media (min-width: 1024px) { .gallery-masonry { columns: 4; } }
.gallery-item { position: relative; break-inside: avoid; margin-bottom: .65rem; border-radius: .75rem; overflow: hidden; width: 100%; }
.gallery-item img { width: 100%; height: auto; transition: transform .3s; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .6rem; font-size: .72rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }

/* 里程碑 */
.milestone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .milestone-grid { grid-template-columns: repeat(4, 1fr); } }
.milestone-card { text-align: center; padding: 1.15rem .5rem; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.milestone-card.visible { opacity: 1; transform: translateY(0); }
.milestone-card__value { font-size: 1.75rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.milestone-card__suffix { font-size: .82rem; color: var(--primary); font-weight: 600; }
.milestone-card__label { font-size: .75rem; color: var(--text-light); margin-top: .25rem; }

/* 留言墙 */
.message-grid { display: grid; gap: .65rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .message-grid { grid-template-columns: repeat(3, 1fr); } }
.message-card { padding: 1.15rem; }
.message-card__text { font-size: .88rem; color: var(--text-light); margin-bottom: .5rem; line-height: 1.6; }
.message-card__author { font-size: .78rem; color: var(--primary); font-weight: 600; }
.wish-hint { text-align: center; font-size: .82rem; color: var(--text-light); margin-top: .75rem; padding: .65rem; background: var(--primary-light); border-radius: .65rem; }
.section--cta { text-align: center; }

/* Footer */
.page-footer { text-align: center; padding: 2rem 1.25rem 1rem; color: var(--text-light); font-size: .78rem; }
.page-footer__copy { margin: .35rem 0 .75rem; opacity: .75; }
.page-footer__link { color: var(--primary); font-weight: 600; text-decoration: none; }

/* 灯箱 */
.lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lightbox[hidden] { display: none !important; }
.lightbox__body { max-width: 520px; width: 100%; color: #fff; text-align: center; }
.lightbox__img { max-height: 70vh; width: auto; margin: 0 auto .75rem; border-radius: .5rem; }
.lightbox__caption { font-size: .85rem; opacity: .85; }
.lightbox__close, .lightbox__nav { position: absolute; color: #fff; font-size: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.15); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: .75rem; top: 50%; transform: translateY(-50%); }

.theme-panel { position: fixed; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; z-index: 800; }
.scene-panel { position: fixed; top: calc(.75rem + env(safe-area-inset-top)); left: .75rem; z-index: 800; }
.theme-panel__toggle, .scene-panel__toggle { width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.1rem; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.theme-panel__list, .scene-panel__list { position: absolute; top: calc(100% + .35rem); min-width: 9.5rem; max-height: 50vh; overflow-y: auto; padding: .35rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 8px 32px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: .2rem; }
.theme-panel__list { right: 0; }
.scene-panel__list { left: 0; }
.theme-panel__list[hidden], .scene-panel__list[hidden] { display: none !important; }
.theme-panel__list button, .scene-panel__list button { text-align: left; padding: .45rem .65rem; border-radius: .5rem; font-size: .78rem; color: var(--text); }
.theme-panel__list button.active, .scene-panel__list button.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }

.back-top { position: fixed; z-index: 700; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.back-top[hidden] { display: none !important; }

.contact-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(8px); }
body[data-theme='midnight'] .contact-footer { background: rgba(44,62,80,.96); }
.contact-footer__btns { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.contact-footer__cta, .contact-footer__btn { padding: .45rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.contact-footer__cta { background: var(--primary); color: #fff; }
.contact-footer__btn { border: 1px solid var(--border); color: var(--text); background: var(--bg-card); }
.contact-footer__brand { text-align: center; font-size: .62rem; color: var(--text-light); margin-top: .35rem; }

@media (min-width: 1024px) {
  .hero__content { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 1fr; gap: 0 2rem; text-align: left; max-width: 960px; align-items: center; }
  .hero__title, .hero__subtitle, .hero__label, .flip-row { grid-column: 1; }
  .hero__progress { grid-column: 2; grid-row: 1 / span 4; margin: 0; width: 8.5rem; height: 8.5rem; }
  .hero__scroll { grid-column: 1 / -1; text-align: center; }
}