/* R7 结婚纪念展示页 · 13浪漫色板 + 5场景 */

*, *::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.7;
  transition: background 0.35s ease, color 0.35s ease;
  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='rose-blush'] { --primary:#F43F5E; --primary-light:#FFE4E6; --accent:#FB7185; --bg:#FFF1F2; --bg-card:#FFF; --text:#881337; --text-light:#BE123C; --border:#FECDD3; }
body[data-theme='cherry-bloom'] { --primary:#EC4899; --primary-light:#FCE7F3; --accent:#F472B6; --bg:#FDF2F8; --bg-card:#FFF; --text:#831843; --text-light:#9D174D; --border:#FBCFE8; }
body[data-theme='sunset-glow'] { --primary:#EA580C; --primary-light:#FFEDD5; --accent:#F59E0B; --bg:#FFF7ED; --bg-card:#FFF; --text:#7C2D12; --text-light:#C2410C; --border:#FED7AA; }
body[data-theme='lavender-kiss'] { --primary:#A855F7; --primary-light:#F3E8FF; --accent:#C084FC; --bg:#FAF5FF; --bg-card:#FFF; --text:#581C87; --text-light:#7E22CE; --border:#E9D5FF; }
body[data-theme='peach-dream'] { --primary:#FB923C; --primary-light:#FFEDD5; --accent:#FDBA74; --bg:#FFF7ED; --bg-card:#FFF; --text:#9A3412; --text-light:#EA580C; --border:#FED7AA; }
body[data-theme='wine-red'] { --primary:#BE123C; --primary-light:#FFE4E6; --accent:#E11D48; --bg:#FFF1F2; --bg-card:#FFF; --text:#4C0519; --text-light:#9F1239; --border:#FECDD3; }
body[data-theme='ocean-mist'] { --primary:#0EA5E9; --primary-light:#E0F2FE; --accent:#38BDF8; --bg:#F0F9FF; --bg-card:#FFF; --text:#0C4A6E; --text-light:#0369A1; --border:#BAE6FD; }
body[data-theme='moon-silver'] { --primary:#64748B; --primary-light:#F1F5F9; --accent:#94A3B8; --bg:#F8FAFC; --bg-card:#FFF; --text:#1E293B; --text-light:#475569; --border:#E2E8F0; }
body[data-theme='forest-love'] { --primary:#059669; --primary-light:#D1FAE5; --accent:#34D399; --bg:#ECFDF5; --bg-card:#FFF; --text:#064E3B; --text-light:#047857; --border:#A7F3D0; }
body[data-theme='golden-hour'] { --primary:#D97706; --primary-light:#FEF3C7; --accent:#FBBF24; --bg:#FFFBEB; --bg-card:#FFF; --text:#78350F; --text-light:#B45309; --border:#FDE68A; }
body[data-theme='pure-ivory'] { --primary:#78716C; --primary-light:#FAFAF9; --accent:#A8A29E; --bg:#FAFAF9; --bg-card:#FFF; --text:#44403C; --text-light:#78716C; --border:#E7E5E4; }
body[data-theme='starry-night'] { --primary:#818CF8; --primary-light:#EEF2FF; --accent:#6366F1; --bg:#0F172A; --bg-card:#1E293B; --text:#F8FAFC; --text-light:#94A3B8; --border:#334155; }
body[data-theme='oriental-red'] { --primary:#DC2626; --primary-light:#FEE2E2; --accent:#D4A843; --bg:#FEF2F2; --bg-card:#FFFDF7; --text:#7F1D1D; --text-light:#B91C1C; --border:#FECACA; }

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
}

.section { position: relative; max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section__title {
  font-size: 1.45rem; text-align: center; margin-bottom: 1.5rem;
  color: var(--primary); letter-spacing: 0.08em;
  font-family: Georgia, 'Songti SC', 'STSong', serif;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  text-decoration: none; transition: transform 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }

.petal-canvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 85vh;
  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; transform: scale(1.04); }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.hero__content { position: relative; z-index: 3; text-align: center; padding: 2rem 1.5rem; animation: fadeUp .9s ease; }
.hero__avatars { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1rem; }
.hero__avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.hero__heart { font-size: 1.25rem; animation: heartBeat 1.4s ease-in-out infinite; }
@keyframes heartBeat { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.15); } }
.hero__eyebrow { font-size: .78rem; letter-spacing: .12em; opacity: .85; margin-bottom: .5rem; text-transform: uppercase; }
.hero__names { font-size: clamp(1.75rem, 7vw, 2.6rem); font-weight: 800; font-family: Georgia, 'Songti SC', serif; margin-bottom: .35rem; }
.hero__anniversary { font-size: 1.15rem; margin-bottom: 1rem; opacity: .95; }
.hero__year { font-size: 1.5em; font-weight: 800; color: #fff; }
.hero__counter { display: inline-block; padding: .85rem 1.25rem; margin-bottom: .85rem; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.hero__counter-value { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.hero__counter-label { font-size: .78rem; opacity: .88; }
.hero__tagline { font-style: italic; opacity: .9; margin-bottom: 1.25rem; font-family: Georgia, 'Songti SC', serif; }
.hero__scroll { color: #fff; text-decoration: none; font-size: .82rem; opacity: .8; animation: bounce 2s ease infinite; }
@keyframes bounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

body[data-scene='oriental-elegance'] .hero__names { letter-spacing: .15em; }
body[data-scene='star-ocean'] .hero__overlay { background: linear-gradient(180deg, rgba(15,23,42,.3), rgba(15,23,42,.78)); }

/* 爱情故事 */
.story-card { padding: 1.5rem; }
.story-card__p { color: var(--text-light); margin-bottom: 1rem; text-indent: 2em; }
.story-card__p:last-child { margin-bottom: 0; }

/* 爱情时光轴 */
.love-timeline { position: relative; padding: 1rem 0; }
.love-timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--primary-light); transform: translateX(-50%);
}
.love-timeline__item {
  position: relative; width: 50%; padding: 0 1.25rem 2rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.love-timeline__item.visible { opacity: 1; transform: translateY(0); }
.love-timeline__item--left { left: 0; text-align: right; }
.love-timeline__item--right { left: 50%; text-align: left; }
.love-timeline__node {
  position: absolute; top: 1rem; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; z-index: 1;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--primary-light);
}
.love-timeline__item.visible .love-timeline__node { animation: nodePulse 2s ease-in-out infinite; }
@keyframes nodePulse {
  0%,100% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--primary-light); }
  50% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 10px rgba(244,63,94,.25); }
}
.love-timeline__item--left .love-timeline__node { right: -1.125rem; transform: translateX(50%); }
.love-timeline__item--right .love-timeline__node { left: -1.125rem; transform: translateX(-50%); }
.love-timeline__card { padding: 1.15rem; text-align: inherit; display: inline-block; max-width: 100%; }
.love-timeline__date { font-size: .78rem; color: var(--primary); font-weight: 700; }
.love-timeline__title { font-size: 1rem; font-weight: 800; margin: .25rem 0 .4rem; }
.love-timeline__desc { font-size: .85rem; color: var(--text-light); margin-bottom: .65rem; }
.love-timeline__img { border-radius: .65rem; width: 100%; max-height: 180px; object-fit: cover; }

@media (max-width: 640px) {
  .love-timeline::before { left: 1.1rem; transform: none; }
  .love-timeline__item, .love-timeline__item--left, .love-timeline__item--right {
    width: 100%; left: 0; text-align: left; padding-left: 3rem; padding-right: 0;
  }
  .love-timeline__item--left .love-timeline__node,
  .love-timeline__item--right .love-timeline__node {
    left: 0; right: auto; transform: translateX(0);
  }
}

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

/* 情书打字机 */
.letter-card { padding: 1.5rem; min-height: 12rem; font-family: Georgia, 'Songti SC', 'KaiTi', serif; }
.letter-para { min-height: 1.5em; margin-bottom: .85rem; color: var(--text-light); font-size: .95rem; }
.letter-para.typing::after { content: '|'; animation: blink .8s step-end infinite; color: var(--primary); }
@keyframes blink { 50% { opacity: 0; } }
.letter-signature { text-align: right; font-weight: 600; color: var(--primary); opacity: 0; transition: opacity .6s; }
.letter-signature.visible { opacity: 1; }

/* 纪念数据 + 爱心气泡 */
.section--stats { overflow: hidden; }
.hearts-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hearts-bg::before, .hearts-bg::after {
  content: '♥'; position: absolute; color: var(--primary-light); opacity: .35;
  animation: floatHeart 8s ease-in-out infinite;
}
.hearts-bg::before { left: 10%; bottom: -2rem; font-size: 2rem; animation-delay: 0s; }
.hearts-bg::after { right: 15%; top: 20%; font-size: 1.5rem; animation-delay: 2s; }
@keyframes floatHeart {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: .4; }
  100% { transform: translateY(-120px) scale(1.2); opacity: 0; }
}
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; position: relative; z-index: 1; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { text-align: center; padding: 1.15rem .5rem; }
.stat-card__value { font-size: 1.75rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.stat-card__suffix { font-size: .82rem; color: var(--primary); font-weight: 600; }
.stat-card__label { font-size: .75rem; color: var(--text-light); margin-top: .25rem; }

/* 余生 */
.future-list { list-style: none; display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.25rem; }
.future-list__item { padding: 1rem 1.15rem; font-size: .92rem; color: var(--text-light); position: relative; padding-left: 2.5rem; }
.future-list__item::before { content: '💕'; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
.future-closing { text-align: center; font-family: Georgia, 'Songti SC', serif; font-style: italic; color: var(--text-light); margin-bottom: 1.5rem; }
.footer-cta { text-align: center; }
.cta-box { padding: 1.5rem; max-width: 360px; margin: 0 auto; }
.cta-box__qr { width: 8rem; height: 8rem; object-fit: cover; border-radius: .75rem; margin: 0 auto .75rem; }
.cta-box__hint { font-size: .82rem; color: var(--text-light); margin-bottom: 1rem; }

/* 灯箱 */
.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; animation: zoomIn .3s ease; }
@keyframes zoomIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.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: 10rem; 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='starry-night'] .contact-footer { background: rgba(30,41,59,.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; }