/* 05 · Chuyện Hai Ta — sách tranh cắt giấy, năm chương chạy theo cuộn trang.
   chuyen-hai-ta.js đặt --s (0 → 1) cho từng chương; mọi chuyển động trong chương tính từ --s. */
body[data-theme="story"] {
  --bg: #fbf1e6;
  --paper: #fffaf3;
  --ink: #3a1013;
  --muted: #80605a;
  --accent: #b81d2a;
  --gold: #d9a248;
  --line: rgba(58, 16, 19, 0.12);
  --on-accent: #fff6ec;
  --f-display: "Playfair Display", Georgia, serif;
  --ornament: "✦";
  --radius: 16px;
  --btn-radius: 999px;
  --ph-1: #f3d2c2;
  --ph-2: #d9907e;
  --ph-ink: rgba(80, 20, 20, 0.55);
  --backdrop:
    radial-gradient(circle at 80% 10%, rgba(242, 196, 107, 0.25), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(184, 29, 42, 0.18), transparent 45%),
    #f1ded0;
}
/* Sticky cần tổ tiên không phải vùng cuộn: dùng clip thay cho hidden. */
body[data-theme="story"] .invite { overflow: clip; }
body[data-theme="story"] .kicker { color: var(--accent); }

/* Bìa */
.st-cover {
  position: relative;
  min-height: min(100svh, 880px);
  padding: 120px 28px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fdf3e8 0%, #fbe1d0 70%);
  text-align: center;
}
.st-eyebrow { margin: 0; color: var(--accent); font: 600 11px/1 var(--f-body); letter-spacing: 0.3em; text-transform: uppercase; }
.st-cover h1 { margin: 22px 0 14px; font: 400 76px/0.95 var(--f-display); letter-spacing: -0.02em; }
.st-cover h1 em { color: var(--accent); }
.st-byline { margin: 0; color: var(--muted); font: italic 400 18px/1.4 var(--f-display); }
.st-cover-art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
.st-couple { transform-box: fill-box; }
.st-cover-heart { transform-box: fill-box; transform-origin: center; animation: st-heart 1.4s ease-in-out infinite alternate; }
.st-float { animation: st-sway 7s ease-in-out infinite alternate; }
.st-f2 { animation-duration: 9s; animation-delay: -2s; }
.st-f3 { animation-duration: 6s; animation-delay: -4s; }
.st-f4 { animation-duration: 8s; }
@keyframes st-sway { from { translate: -6px 0; } to { translate: 6px 3px; } }
.st-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 30px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #fff3e6;
  font: 600 11px/1 var(--f-body);
  letter-spacing: 0.24em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}
.st-hint::after { content: ""; width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; background: radial-gradient(circle at 50% 30%, currentColor 2px, transparent 2.5px) 0 0 / 100% 100% no-repeat; animation: st-scroll 1.6s ease-in-out infinite; }
@keyframes st-scroll { 50% { background-position: 0 8px; } }

/* Sân khấu truyện */
.st-story { position: relative; height: 600vh; height: 600svh; }
.st-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #fbe9da; }
/* Trình duyệt cũ không có overflow: clip thì bỏ cắt để sticky vẫn chạy. */
@supports not (overflow: clip) {
  body[data-theme="story"] .invite { overflow: visible; }
}
.st-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.sc { --s: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.sc-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.lyr { transform: translateY(calc((0.5 - var(--s)) * var(--d) * 1.2px)); }
.sc-caption {
  position: absolute;
  z-index: 2;
  top: 84px;
  left: 30px;
  right: 30px;
  text-align: center;
  transform: translateY(calc((0.25 - var(--s)) * 28px));
}
.sc-caption h2 { margin: 10px 0 10px; font: 400 32px/1.15 var(--f-display); }
.sc-caption p:not(.kicker) { margin: 0 auto; max-width: 320px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sc.is-dark .sc-caption { color: #fbe9d6; }
.sc.is-dark .sc-caption .kicker { color: #f2c46b; }
.sc.is-dark .sc-caption p:not(.kicker) { color: rgba(251, 233, 214, 0.75); }

.st-dots { position: absolute; z-index: 6; top: 50%; right: 12px; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); }
.st-dots li { width: 6px; height: 6px; border-radius: 3px; background: rgba(58, 16, 19, 0.25); transition: height 0.3s ease, background 0.3s ease; }
.st-dots li.is-active { height: 20px; background: var(--accent); }
.st-dots.is-dark li { background: rgba(251, 233, 214, 0.3); }
.st-dots.is-dark li.is-active { background: #f2c46b; }

.st-bob { animation: st-bob 0.45s ease-in-out infinite alternate; }
.st-bob-late { animation-delay: -0.22s; }
@keyframes st-bob { to { translate: 0 -2.5px; } }

/* Chương 1 */
.sc1 { background: linear-gradient(180deg, #fdf0e3 0%, #f8d3bf 62%, #efb39f 100%); }
.sc1 .st-sun { transform: translateY(calc((1 - var(--s)) * 110px)); }
.st-walk-a { transform: translateX(calc(-30px + var(--s) * 150px)); }
.st-walk-b { transform: translateX(calc(30px - var(--s) * 150px)); }

/* Chương 2 */
.sc2 { --k: clamp(0, var(--s) / 0.55, 1); --h: clamp(0, (var(--s) - 0.55) / 0.2, 1); background: linear-gradient(180deg, #fde6d6 0%, #f7bfa4 60%, #ee9a7f 100%); }
.st-meet-a { transform: translateX(calc(var(--k) * 64px)); }
.st-meet-b { transform: translateX(calc(var(--k) * -64px)); }
.st-pop { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--h)); animation: st-heart 1.4s ease-in-out infinite alternate; }
@keyframes st-heart { to { translate: 0 -8px; } }
.st-glow { animation: st-glow 2.4s ease-in-out infinite alternate; }
@keyframes st-glow { from { opacity: 0.55; } to { opacity: 1; } }
.st-leaves use, .st-confetti use { animation: st-fall 7s linear infinite; animation-delay: var(--t); }
@keyframes st-fall {
  from { transform: translate(calc(var(--x) * 1px), 520px) rotate(0deg); }
  to { transform: translate(calc(var(--x) * 1px + 80px), 870px) rotate(320deg); }
}

/* Chương 3: bốn mùa nối nhau */
.sc3 {
  --a2: clamp(0, (var(--s) - 0.22) * 16, 1);
  --a3: clamp(0, (var(--s) - 0.47) * 16, 1);
  --a4: clamp(0, (var(--s) - 0.72) * 16, 1);
}
.st-sky { position: absolute; inset: 0; }
.st-s1 { background: linear-gradient(180deg, #fff0f0 0%, #f9c8cf 100%); }
.st-s2 { background: linear-gradient(180deg, #fff4d6 0%, #f8c672 100%); opacity: var(--a2); }
.st-s3 { background: linear-gradient(180deg, #fde3cc 0%, #e9905f 100%); opacity: var(--a3); }
.st-s4 { background: linear-gradient(180deg, #efe6e9 0%, #b9a2aa 100%); opacity: var(--a4); }
.st-words text { fill: #9e1f25; font: italic 400 72px/1 "Playfair Display", Georgia, serif; }
.sc3 .c1 { opacity: calc(1 - var(--a2)); }
.sc3 .c2 { opacity: calc(var(--a2) - var(--a3)); }
.sc3 .c3 { opacity: calc(var(--a3) - var(--a4)); }
/* Chữ tên mùa: chữ cũ mờ hẳn rồi chữ mới mới hiện, không chồng lên nhau. */
.st-words .w1 { opacity: calc(1 - clamp(0, (var(--s) - 0.16) * 16, 1)); }
.st-words .w2 { opacity: calc(var(--a2) - clamp(0, (var(--s) - 0.41) * 16, 1)); }
.st-words .w3 { opacity: calc(var(--a3) - clamp(0, (var(--s) - 0.66) * 16, 1)); }
.st-words .w4 { opacity: var(--a4); }
.sc3 .c4 { opacity: calc(var(--a4) * 0.7); }
.st-stroll { transform: translateX(calc(var(--s) * 60px)); }

/* Chương 4: trăng lên, cầu hôn */
.sc4 {
  --k: clamp(0, var(--s) / 0.5, 1);
  --n: clamp(0, (var(--s) - 0.4) * 10, 1);
  --r: clamp(0, (var(--s) - 0.55) / 0.2, 1);
  background: linear-gradient(180deg, #1e070b 0%, #46101a 55%, #7a1f24 100%);
}
.st-stars circle { animation: st-twinkle 2.6s ease-in-out infinite alternate; }
@keyframes st-twinkle { from { opacity: 0.25; } to { opacity: 1; } }
.st-moon { transform: translateY(calc(560px - var(--k) * 230px)); }
.st-moon-ref { opacity: calc(var(--k) * 0.7); }
.st-stand { opacity: calc(1 - var(--n)); }
.st-kneel { opacity: var(--n); }
.st-ring { transform-box: fill-box; transform-origin: center; transform: scale(var(--r)); opacity: var(--r); }
.st-rays { transform-box: fill-box; transform-origin: center; animation: st-spin 6s linear infinite; }
@keyframes st-spin { to { rotate: 360deg; } }

/* Chương 5: nhà mọc lên, đèn sáng, ngày cưới hiện ra */
.sc5 {
  --b: clamp(0, var(--s) / 0.35, 1);
  --m: clamp(0, (var(--s) - 0.3) / 0.4, 1);
  --w: clamp(0, (var(--s) - 0.5) / 0.2, 1);
  --f: calc(1 - clamp(0, (var(--s) - 0.82) / 0.12, 1));
  --e: clamp(0, (var(--s) - 0.76) * 10, 1);
  --q: clamp(0, (var(--s) - 0.64) * 10, 1);
  background: linear-gradient(180deg, #fff2da 0%, #f8cf93 55%, #f0a06c 100%);
}
.st-glow-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 72%, rgba(255, 246, 220, 0.85), transparent 70%);
  opacity: var(--b);
}
.st-house { transform: translateY(calc((1 - var(--b)) * 380px)); }
.st-windows { opacity: var(--w); }
.st-lantern { transform-box: fill-box; transform-origin: 50% 0; animation: st-swing 2.2s ease-in-out infinite alternate; }
.st-lantern-late { animation-delay: -1.1s; }
@keyframes st-swing { from { rotate: -7deg; } to { rotate: 7deg; } }
.st-home-a { transform: translateX(calc(var(--m) * 140px)); opacity: var(--f); }
.st-home-b { transform: translateX(calc(var(--m) * -140px)); opacity: var(--f); }
.st-cap-a { opacity: calc(1 - var(--q)); }
.st-cap-b { opacity: var(--e); }
.st-final-date { margin: 6px 0 8px !important; color: var(--accent) !important; font: 400 48px/1 var(--f-display) !important; max-width: none !important; }
.st-confetti { opacity: var(--e); }
.st-confetti use { animation-name: st-confetti; animation-duration: 5s; }
@keyframes st-confetti {
  from { transform: translate(calc(var(--x) * 1px), 300px) rotate(0deg); }
  to { transform: translate(calc(var(--x) * 1px + 60px), 860px) rotate(400deg); }
}

/* Trang mời sau câu chuyện */
.st-invite { padding: 90px 26px 70px; background: var(--bg); }
.st-page {
  padding: 40px 26px 30px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 6px 6px 0 #f1c3b2, 12px 12px 0 #e08a78, 18px 18px 0 #c2413c;
  text-align: center;
}
.st-page h2 { margin: 12px 0 16px; font: 400 30px/1.2 var(--f-display); }
.st-page h2 em { color: var(--accent); }
.st-page > p:not(.kicker) { margin: 0; color: var(--muted); font-size: 15px; }
.st-page dl { margin: 26px 0 0; text-align: left; }
.st-page dl div { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.st-page dt { color: var(--accent); font: 600 10px/1.8 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; }
.st-page dd { margin: 0; font: 400 18px/1.4 var(--f-display); }

/* Phần dùng chung: mỗi mục một tờ giấy, mép lượn như giấy cắt */
body[data-theme="story"] .x-section { border-top: 0; }
/* Năm chương phía trên đã kể chuyện tình, không lặp lại phần dòng thời gian. */
body[data-theme="story"] .x-story { display: none; }
body[data-theme="story"] .x-section:nth-child(even) {
  background: #f8e4d6;
  -webkit-mask: radial-gradient(14px 10px at 50% 0, transparent 98%, #000) 0 0 / 28px 100% repeat-x;
  mask: radial-gradient(14px 10px at 50% 0, transparent 98%, #000) 0 0 / 28px 100% repeat-x;
}
body[data-theme="story"] .x-head h2 { color: var(--ink); }
body[data-theme="story"] .x-schedule-list .is-main { background: linear-gradient(160deg, #c8323a, #8e1b22); box-shadow: 6px 6px 0 #f1c3b2; }
body[data-theme="story"] .x-album-grid .ph, body[data-theme="story"] .countdown > span { box-shadow: 4px 4px 0 #f1c3b2; }
body[data-theme="story"] .x-wishes { background: var(--paper); }

body[data-theme="story"] .theme-close { background: linear-gradient(180deg, var(--bg), #f8d3bf); }
body[data-theme="story"] .theme-close p { font: italic 400 20px/1.4 var(--f-display); letter-spacing: 0; text-transform: none; }

/* Màn mở: bìa sách tranh cắt giấy lật sang trái, lộ trang giấy kẻ */
body[data-theme="story"] .invitation-gate { --gate-bg: #fbe1d0; --gate-ink: #3a1013; --gate-gold: #b81d2a; perspective: 1600px; }
body[data-theme="story"] .invitation-door-left {
  z-index: 2;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(58, 16, 19, 0.22), transparent 5%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 300' preserveAspectRatio='none'%3E%3Cpath fill='%23f1c3b2' d='M0 120C60 90 120 100 180 120S300 150 390 110V300H0Z'/%3E%3Cpath fill='%23e08a78' d='M0 170C80 140 150 160 220 176S330 190 390 160V300H0Z'/%3E%3Cpath fill='%23c2413c' d='M0 215C90 196 170 206 250 222S350 236 390 214V300H0Z'/%3E%3Cpath fill='%238e1b22' d='M0 258C110 244 230 250 390 262V300H0Z'/%3E%3C/svg%3E") left bottom / 100% 42% no-repeat,
    linear-gradient(180deg, #fdf3e8, #fbe1d0 70%);
  box-shadow: inset 0 0 0 12px rgba(255, 250, 243, 0.5), inset 0 0 0 13px rgba(184, 29, 42, 0.35);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.6, 0, 0.25, 1);
}
body[data-theme="story"] .invitation-door-right {
  z-index: 1;
  width: 100%;
  background: repeating-linear-gradient(180deg, #fbf1e6 0 27px, #efdccb 27px 28px);
  transition: opacity 0.5s ease 1s;
}
body[data-theme="story"] .invitation-gate.is-opening .invitation-door-left { transform: rotateY(-105deg); }
body[data-theme="story"] .invitation-gate.is-opening .invitation-door-right { transform: none; opacity: 0; }
body[data-theme="story"] .invitation-gate-card { align-self: start; margin-top: 16vh; }
body[data-theme="story"] .invitation-gate-card > p { color: #b81d2a; }
body[data-theme="story"] .invitation-gate-card .gate-mark::before { content: "Một câu chuyện có thật"; display: block; margin-bottom: 14px; color: #80605a; font: italic 400 16px/1 var(--f-display); }
body[data-theme="story"] .invitation-gate-card .gate-title { margin: 14px 0 26px; font: 400 60px/1 var(--f-display); }
body[data-theme="story"] .invitation-gate-card .gate-title i { color: #b81d2a; font-style: italic; }
body[data-theme="story"] .invitation-gate-card button {
  display: inline-block;
  padding: 17px 32px;
  border-radius: 999px;
  background: #b81d2a;
  box-shadow: 4px 4px 0 #f1c3b2, 8px 8px 0 #e08a78;
  color: #fff6ec;
  font: 600 13px/1 var(--f-body);
  letter-spacing: 0.24em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body[data-theme="story"] .invitation-gate-card button:hover,
body[data-theme="story"] .invitation-gate-card button:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #f1c3b2, 11px 11px 0 #e08a78; }
body[data-theme="story"] .invitation-gate-card button span { display: none; }
body[data-theme="story"] .invitation-gate-card > small { color: #80605a; }
body[data-theme="story"] .opening-petals { display: none; }

@media (max-width: 360px) {
  .st-cover h1 { font-size: 64px; }
  .sc-caption h2 { font-size: 28px; }
}