/* ================= 第三幕 好呀好呀之后（一起的快乐日子） ================= */
.hp-stage { --S: 390px; --u: 3.9px; }
.hp-track { position: absolute; left: 0; top: 0; width: 0; height: 100%; }
/* on wide screens the neighbouring pages peek in from the sides, fading out at the edges */
.hp-view { position: absolute; inset: 0; }
.hp-stage.wide .hp-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.hp-page { --a: 1; position: absolute; top: 0; width: var(--S); height: 100%; }
.hp-head { position: absolute; left: 6%; right: 6%; top: calc(9% + var(--st)); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: calc(var(--a) * var(--a)); }
.hp-cover .hp-head { top: calc(19% + var(--st)); gap: 12px; }
.hp-date { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--ink); background: var(--gold3); border: 2.5px solid var(--ink); border-radius: 99px; padding: 1px 14px; box-shadow: 0 3px 0 rgba(42, 26, 18, .35); transform: rotate(-2deg); }
.hp-title { font-size: clamp(26px, 7.6vw, 40px); color: #fff2c4; line-height: 1.2; }
h2.hp-title { font-size: clamp(36px, 10.5vw, 60px); }
.hp-text { font-size: clamp(15px, 4.3vw, 19px); line-height: 1.7; color: var(--txt); max-width: 21em; }

/* everything on a page is placed by its centre; JS adds the parallax */
.hp-it { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--r)); opacity: calc(.3 + .7 * var(--a)); }
.hp-pol { margin: 0; width: calc(var(--w) * var(--u)); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0; background: #fffdf7; border-radius: 4px; box-shadow: 0 0 0 2.5px var(--ink), 0 14px 30px rgba(20, 8, 50, .45); cursor: zoom-in; }
.hp-pol.nocap { padding-bottom: calc(var(--u) * 7); }
.hp-img { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #ece4f5; border-radius: 2px; }
.hp-img img, .hs-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-pol figcaption { padding: calc(var(--u) * 1.5) 2px calc(var(--u) * 2.1); font-family: var(--f-hand); font-size: max(12px, calc(var(--u) * 3.4)); line-height: 1.3; color: #3a2418; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-pol .tape { position: absolute; top: calc(var(--u) * -2.2); left: 50%; z-index: 1; width: calc(var(--u) * 15); height: calc(var(--u) * 4.6); margin-left: calc(var(--u) * -7.5); background: rgba(255, 211, 107, .8); border: 1.5px solid rgba(42, 26, 18, .2); transform: rotate(-4deg); }
.hp-pol:nth-of-type(2n) .tape { background: rgba(255, 158, 196, .78); transform: rotate(5deg); }
.hp-scr { margin: 0; width: calc(var(--w) * var(--u)); cursor: zoom-in; }
.hs-frame { display: block; width: 100%; aspect-ratio: 2.2 / 1; padding: calc(var(--u) * 1.1); background: #15132a; border-radius: calc(var(--u) * 3.6); box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2px rgba(255, 255, 255, .1), 0 14px 30px rgba(20, 8, 50, .45); }
.hs-frame img { border-radius: calc(var(--u) * 2.4); }
.hp-scr figcaption { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -3.6); padding: 0 calc(var(--u) * 2.6); font-family: var(--f-cute); font-size: max(12px, calc(var(--u) * 3.6)); line-height: 1.6; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 99px; white-space: nowrap; transform: rotate(3deg); box-shadow: 0 2px 0 rgba(42, 26, 18, .3); }

/* stickers */
.hp-stk { display: flex; align-items: center; gap: 6px; font-family: var(--f-cute); white-space: nowrap; z-index: 2; }
.stk-win { padding: calc(var(--u) * 1.3) calc(var(--u) * 3.2); background: linear-gradient(180deg, #ffe7a6, #f0b844); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
.stk-win b { font-weight: normal; font-size: max(15px, calc(var(--u) * 5)); color: #6a3a06; }
.stk-win i { font-style: normal; font-size: max(15px, calc(var(--u) * 5)); color: #fff; text-shadow: 0 0 6px rgba(150, 80, 0, .7); }
.stk-lv { padding: calc(var(--u) * 1.1) calc(var(--u) * 3.4) calc(var(--u) * 1.1) calc(var(--u) * 1.2); background: #ffe1ec; border: 2.5px solid var(--ink); border-radius: 99px; box-shadow: 0 4px 0 rgba(42, 26, 18, .4); }
.stk-lv i { display: flex; align-items: center; justify-content: center; width: max(26px, calc(var(--u) * 7)); height: max(26px, calc(var(--u) * 7)); border-radius: 50%; font-style: normal; font-size: max(13px, calc(var(--u) * 4)); color: #fff; background: linear-gradient(160deg, #ff8fbf, #e2457f); border: 2px solid var(--ink); }
.stk-lv b { font-weight: normal; font-size: max(15px, calc(var(--u) * 4.6)); color: #b51f5c; }
.hp-bub { display: flex; flex-direction: column; align-items: flex-start; padding: calc(var(--u) * 1.5) calc(var(--u) * 4.4) calc(var(--u) * 1.8); font-family: var(--f-cute); font-size: max(17px, calc(var(--u) * 6.2)); line-height: 1.25; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 22px 22px 22px 6px; box-shadow: 0 5px 0 rgba(42, 26, 18, .35); white-space: nowrap; }
.hp-bub em { font-style: normal; font-size: max(12px, calc(var(--u) * 3.1)); color: #4a73c9; }
.hp-bub.b-her { align-items: flex-end; background: #ffd3e3; border-radius: 22px 22px 6px 22px; }
.hp-bub.b-her em { color: #c2185b; }
.hp-heart { width: calc(var(--u) * 13); height: calc(var(--u) * 13); background: url(../assets/art/heart.webp) center / contain no-repeat; animation: hpbeat 1.4s ease-in-out infinite; }
@keyframes hpbeat { 0%, 100% { scale: 1; } 15% { scale: 1.16; } 30% { scale: 1; } 45% { scale: 1.1; } }
.hp-spark { width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: url(../assets/art/star_sparkle.webp) center / contain no-repeat; animation: hptw 2.6s ease-in-out infinite; }
@keyframes hptw { 0%, 100% { scale: .7; opacity: .5; } 50% { scale: 1.05; opacity: 1; } }
.hp-swipe { position: absolute; left: 0; right: 0; bottom: calc(13% + var(--sb)); text-align: center; font-size: 15px; color: var(--gold3); animation: tapb 1.8s ease-in-out infinite; }
.hp-endtx { position: absolute; left: 8%; right: 8%; top: 46%; transform: translateY(-50%); text-align: center; font-size: clamp(18px, 5.4vw, 27px); line-height: 2; color: var(--txt); opacity: var(--a); }

/* the little timeline at the bottom */
.hp-line { position: absolute; left: 16%; right: 16%; bottom: calc(5.5% + var(--sb)); height: 4px; border-radius: 2px; background: rgba(255, 248, 236, .26); opacity: 0; pointer-events: none; }
.hl-fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--pink)); transform-origin: 0 50%; transform: scaleX(0); }
.hp-line b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff2c4; box-shadow: 0 0 0 2px rgba(42, 26, 18, .5); }
.hl-heart { position: absolute; top: 50%; width: 24px; height: 24px; margin: -13px 0 0 -12px; background: url(../assets/art/heart.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }