:root{--pink:#f7c6d4;--blush:#fde6ec;--lav:#e3d8f7;--cream:#fff8f0;--blue:#d6ecf8;--peach:#ffdcc8;--deep:#8a3a5c;--ink:#5a3446;
 --hand:'Segoe Print','Bradley Hand','Snell Roundhand','Apple Chancery','Comic Sans MS','Chalkboard SE',cursive;--serif:Georgia,'Times New Roman',serif;
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#fbe3ea;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:var(--serif);color:var(--ink)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%;-webkit-user-drag:none}
:focus-visible{outline:3px solid #ffb703;outline-offset:3px}

/* ---------- floating hearts ---------- */
.hearts{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hearts i{position:absolute;bottom:-40px;font-style:normal;opacity:.5;animation:rise linear infinite;will-change:transform}
@keyframes rise{to{transform:translateY(-115vh) rotate(25deg);opacity:0}}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--sat)) calc(20px + var(--sar)) calc(20px + var(--sab)) calc(20px + var(--sal));
 background:radial-gradient(circle at 25% 15%,#fff3f6,#f8c5d3 55%,#e8a6bf);transition:opacity .9s,visibility .9s;overflow:hidden}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.g-stk{position:absolute;width:clamp(90px,22vw,170px);border-radius:22px;box-shadow:0 10px 24px #8a3a5c33;animation:flt 5s ease-in-out infinite;pointer-events:none}
.g-a{left:max(14px,4vw);top:max(18px,6vh);transform:rotate(-9deg)}
.g-b{right:max(14px,4vw);bottom:max(18px,7vh);transform:rotate(7deg);animation-delay:1.2s}
@keyframes flt{50%{translate:0 -10px}}
.g-card{position:relative;z-index:2;width:min(400px,100%);padding:30px 24px 26px;text-align:center;border-radius:30px;background:rgba(255,250,246,.9);
 box-shadow:0 22px 60px #8a3a5c40,inset 0 0 0 6px #ffffff88;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.g-lock{width:70px;height:70px;margin:0 auto;filter:drop-shadow(0 0 12px #ff7fa6aa);animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 22px #ff5c93)}}
.g-card h1{font-family:var(--hand);font-weight:400;font-size:clamp(1.6rem,6vw,2rem);color:var(--deep);margin:8px 0 4px}
.g-sub{font-size:.92rem;opacity:.8;margin-bottom:16px}
.g-pw{position:relative;margin-bottom:12px}
.g-pw input{width:100%;padding:14px 52px 14px 16px;border-radius:16px;border:2px solid #e59ab3;background:#fff;font-size:1.15rem;letter-spacing:.3em;text-align:center;color:var(--deep);outline:none;font-family:inherit}
.g-pw input:focus{box-shadow:0 0 0 4px #e59ab34d}
.g-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:1.1rem}
.g-go{width:100%;padding:14px;border-radius:16px;background:linear-gradient(135deg,#d9648a,#f08aa6);color:#fff;font-size:1.05rem;box-shadow:0 8px 20px #d9648a55;transition:transform .15s}
.g-go:active{transform:scale(.97)}.g-go:disabled{opacity:.7}
#gateErr{min-height:1.5em;margin-top:10px;font-size:.92rem;color:#b3263f}
.g-card.shake{animation:shake .45s}
@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

/* ---------- main frame ---------- */
#mainFrame{position:fixed;inset:0;width:100%;height:100%;border:0;background:#1b1715;opacity:0;transition:opacity .8s}
#mainFrame.on{opacity:1}
#gifts-frame{position:fixed;inset:0}
.gframe{position:fixed;inset:0;width:100%;height:100%;border:0;background:#fff8f6;z-index:30}

/* ---------- next arrow ---------- */
.nextarrow{position:fixed;z-index:60;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:30px;line-height:1;
 background:linear-gradient(135deg,#e0698f,#f6a2bb);box-shadow:0 0 0 4px #ffffffcc,0 10px 24px #8a3a5c66;animation:pulse 1.8s ease-in-out infinite;touch-action:manipulation}
.nextarrow span{display:block;animation:nudge 1.8s ease-in-out infinite}
.nextarrow.pos-gift{top:calc(14px + var(--sat));left:calc(14px + var(--sal))}
.nextarrow.pos-hub{right:calc(16px + var(--sar));bottom:calc(16px + var(--sab))}
@keyframes pulse{50%{transform:scale(1.1)}}
@keyframes nudge{50%{transform:translateX(5px)}}

/* ---------- explore hub ---------- */
#explore{position:fixed;inset:0;z-index:20;background:linear-gradient(160deg,#fff1f5 0%,#efe6fb 45%,#dff0fb 100%);overflow:hidden;opacity:0;transition:opacity .7s}
#explore.on{opacity:1}
.ex-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(28px + var(--sat)) calc(18px + var(--sar)) calc(110px + var(--sab)) calc(18px + var(--sal));z-index:2}
.deco{position:absolute;z-index:1;pointer-events:none;font-size:26px;opacity:.7;animation:flt 5s ease-in-out infinite}
.d1{left:6%;top:12%;color:#f2b134}.d2{right:8%;top:9%;color:#e0698f;animation-delay:.8s}.d3{left:10%;top:58%;color:#c79bea;animation-delay:1.6s}
.d4{right:6%;top:46%;color:#7fb5d6;animation-delay:2.2s}.d5{left:4%;bottom:12%;animation-delay:1s}.d6{right:5%;bottom:20%;animation-delay:2.6s}
.ex-head{max-width:980px;margin:0 auto 26px;display:flex;align-items:center;gap:22px;justify-content:center;flex-wrap:wrap;text-align:left}
.ex-card{width:clamp(110px,18vw,170px);border-radius:12px;border:7px solid #fff;box-shadow:0 14px 30px #8a3a5c33;transform:rotate(-5deg);animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(-2deg) translateY(-6px)}}
.ex-title{max-width:480px}
.kicker{display:block;font:11px Arial,sans-serif;letter-spacing:.35em;text-transform:uppercase;color:#b77a96;margin-bottom:6px}
.ex-title h2{font-family:var(--hand);font-weight:400;font-size:clamp(2rem,7vw,3.2rem);line-height:1.1;color:var(--deep);
 background:linear-gradient(90deg,#c24f7b,#9a6bd1);-webkit-background-clip:text;background-clip:text;color:transparent}
.ex-title p{margin-top:8px;font-size:1rem;color:#7b5568;font-style:italic}
.ex-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.gc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px 20px;border-radius:30px;transition:transform .3s,box-shadow .3s;
 box-shadow:0 14px 32px #8a3a5c26;opacity:0;transform:translateY(26px);animation:cardin .8s ease forwards}
.gc-6{animation-delay:.15s}.gc-7{animation-delay:.3s}
@keyframes cardin{to{opacity:1;transform:none}}
.gc:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 22px 44px #8a3a5c3a}
.gc:active{transform:scale(.98)}
.gc-num{font:700 11px Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:#ffffffb8;color:var(--deep);margin-bottom:14px}
.gc-name{font-family:var(--hand);font-size:1.45rem;line-height:1.15;color:var(--deep);margin-top:16px}
.gc-note{font-size:.85rem;font-style:italic;color:#7b5568;margin-top:6px}
.gc-open{margin-top:16px;font:700 .85rem Arial,sans-serif;letter-spacing:.06em;padding:9px 18px;border-radius:99px;background:#fff;color:var(--deep);box-shadow:0 4px 0 #e6c0d0}
.gc img{width:100%;height:100%;object-fit:cover}

/* gift 5: envelope / polaroid on pink paper */
.gc-5{background:linear-gradient(160deg,#fff3f0,#fddde3);border:2px dashed #ecb7c6}
.gc-5 .tape{position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:#f2a9bd99;transform:rotate(-4deg);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.gc-pol{width:78%;aspect-ratio:1;background:#fff;padding:10px 10px 26px;border-radius:6px;box-shadow:0 8px 16px #8a3a5c2e;transform:rotate(-3deg);transition:transform .4s}
.gc-pol img{object-fit:contain;background:#fff}
.gc-5:hover .gc-pol{transform:rotate(2deg) scale(1.04)}
/* gift 6: round window, lavender gift box with ribbon */
.gc-6{background:linear-gradient(160deg,#f1e9ff,#ddd0f7);border:2px solid #fff;box-shadow:0 14px 32px #7c5bb033,inset 0 0 0 7px #ffffff70}
.gc-6::before,.gc-6::after{content:"";position:absolute;pointer-events:none;background:#ffffff88}
.gc-6::before{left:50%;top:0;bottom:0;width:16px;margin-left:-8px;border-radius:8px;opacity:.5}
.gc-6::after{top:46%;left:0;right:0;height:16px;border-radius:8px;opacity:.35}
.gc-6>*{position:relative;z-index:1}
.gc-6 .bow{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:44px;z-index:3;animation:flt 3.5s ease-in-out infinite}
.gc-round{width:72%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 8px 18px #7c5bb040;transition:transform .5s}
.gc-6:hover .gc-round{transform:rotate(8deg) scale(1.06)}
/* gift 7: memory book with spine, heart window */
.gc-7{background:linear-gradient(160deg,#e9f5fd,#cfe6f6);border:2px solid #fff;padding-left:34px;box-shadow:0 14px 32px #4f86ab33}
.gc-7 .spine{position:absolute;left:0;top:0;bottom:0;width:22px;border-radius:30px 0 0 30px;background:repeating-linear-gradient(#f5b6c8 0 14px,#fff 14px 20px);opacity:.85}
.gc-heart{width:70%;aspect-ratio:1/.92;background:#fff;padding:6px;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C12 62 2 42 2 28 2 12 14 2 27 2c10 0 18 5 23 13C55 7 63 2 73 2c13 0 25 10 25 26 0 14-10 34-48 62z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C12 62 2 42 2 28 2 12 14 2 27 2c10 0 18 5 23 13C55 7 63 2 73 2c13 0 25 10 25 26 0 14-10 34-48 62z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 filter:drop-shadow(0 6px 8px #0003);animation:beat 2.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.05)}}

/* pens (shown only when photos exist) */
.pens{max-width:1000px;margin:34px auto 0;text-align:center}
.pens h3{font-family:var(--hand);font-weight:400;font-size:1.8rem;color:var(--deep);margin-bottom:14px}
.pens .row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.pen-pol{width:clamp(130px,26vw,210px);background:#fff;padding:9px 9px 30px;border-radius:6px;box-shadow:0 10px 20px #8a3a5c2e;opacity:0;animation:cardin .8s ease forwards;position:relative}
.pen-pol:nth-child(odd){transform:rotate(-3deg)}.pen-pol:nth-child(even){transform:rotate(3deg)}
.pen-pol img{width:100%;height:auto;object-fit:contain}
.pen-pol span{position:absolute;left:0;right:0;bottom:6px;font-family:var(--hand);font-size:.8rem;color:var(--deep)}

/* plot twist polaroid */
.twist{max-width:1000px;margin:40px auto 0;display:flex;justify-content:center}
.tw-pol{width:clamp(140px,34vw,210px);background:#fff;padding:9px 9px 32px;border-radius:6px;box-shadow:0 10px 22px #8a3a5c33;transform:rotate(4deg);position:relative;transition:transform .4s}
.tw-pol:hover{transform:rotate(-2deg) scale(1.04)}
.tw-pol img{width:100%;height:auto}
.tw-pol figcaption{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--hand);font-size:.85rem;color:var(--deep)}

@media(max-width:820px){.ex-grid{grid-template-columns:1fr;max-width:420px}.ex-head{text-align:center}.ex-title{text-align:center}}
@media(max-height:480px) and (orientation:landscape){.ex-grid{grid-template-columns:repeat(3,1fr);max-width:none}.gc{padding:20px 12px 14px}.gc-name{font-size:1.1rem}.ex-card{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.gc{opacity:1;transform:none}}