/* ForeverWish — the page the RECIPIENT sees. Every design is just a set of variables (see .theme-* below). */
:root{
  --bg:#f9e8df; --ink:#341d22; --accent:#a63e54;
  --font-body:Georgia,serif; --font-head:Georgia,serif; --h-ls:-.06em; --h-weight:400; --h-style:normal;
  --lock-bg:radial-gradient(circle at 20% 20%,#f3b5ab,transparent 32%),radial-gradient(circle at 80% 75%,#8e3550,transparent 30%),linear-gradient(150deg,#df9a9c,#b05064 55%,#6f2b42);
  --lock-ink:#fff; --lock-btn-bg:#fff; --lock-btn-ink:#a63e54; --in-bg:rgba(255,255,255,.15); --in-line:rgba(255,255,255,.45); --stars-op:.25;
  --welcome-bg:radial-gradient(circle at 50% 40%,#fff5e9,#efc0b6 65%,#a74457);
  --memory-bg:#fff8f2; --card-bg:#fff; --card-cap:#8b7072;
  --letter-bg:#ead2c6; --env:#bd6371; --env-paper:#fffaf2; --env-ink:#341d22; --seal-bg:#8c2f43; --seal-ink:#ffe9de;
  --final-bg:#3a2227; --final-ink:#fff2e8; --btn-line:rgba(52,29,34,.3); --petal:rgba(166,62,84,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font:inherit}
.hidden{display:none!important}

/* ---------- lock screen ---------- */
.lock-screen{min-height:100vh;display:grid;place-items:center;overflow:hidden;position:relative;background:var(--lock-bg);color:var(--lock-ink)}
.lock-stars{position:absolute;inset:0;opacity:var(--stars-op);pointer-events:none;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#fff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 230px 170px,#fff,transparent),radial-gradient(1.5px 1.5px at 300px 90px,#fff,transparent);
  background-size:340px 220px;animation:twinkle 4s ease-in-out infinite}
.lock-content{text-align:center;position:relative;z-index:2;padding:30px;animation:rise 1.2s ease;max-width:100%}
.tiny-heart{font-size:45px;margin-bottom:25px}
.lock-eyebrow,.eyebrow{text-transform:uppercase;letter-spacing:.22em;font:700 11px/1.4 system-ui,sans-serif}
.lock-content h1{font-family:var(--font-head);font-weight:var(--h-weight);font-style:var(--h-style);font-size:clamp(48px,12vw,100px);line-height:.95;margin:12px 0 20px;letter-spacing:var(--h-ls);overflow-wrap:anywhere}
.lock-sub{font:15px/1.6 system-ui,sans-serif;opacity:.85}
.code-inputs{display:flex;justify-content:center;gap:10px;margin:30px 0}
.code-inputs input{width:54px;height:64px;border:1px solid var(--in-line);background:var(--in-bg);border-radius:15px;color:var(--lock-ink);text-align:center;font-size:28px;outline:none;font-family:system-ui,sans-serif}
.code-inputs input:focus{border-color:var(--lock-ink);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.unlock-btn{border:0;background:var(--lock-btn-bg);color:var(--lock-btn-ink);border-radius:999px;padding:15px 25px;font:800 12px system-ui,sans-serif;cursor:pointer}
.wrong{min-height:20px;margin-top:12px;font:12px system-ui,sans-serif;opacity:0;transition:opacity .2s}
.wrong.show{opacity:1}
.preview-hint{display:inline-block;margin-top:18px;font:12px system-ui,sans-serif;background:rgba(0,0,0,.28);color:#fff;padding:8px 14px;border-radius:999px}

/* ---------- unlocked world ---------- */
.world{overflow:hidden}
.welcome,.memory-section,.letter-section,.final-section{min-height:100vh;padding:100px 8vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.world h1,.world h2{font-family:var(--font-head);font-weight:var(--h-weight);font-style:var(--h-style)}
.welcome{background:var(--welcome-bg);color:var(--welcome-ink,var(--ink))}
.welcome h1{max-width:900px;font-size:clamp(46px,9vw,105px);line-height:.95;letter-spacing:var(--h-ls);margin:15px 0 40px;overflow-wrap:anywhere}
.scroll-btn{background:transparent;border:1px solid var(--btn-line);border-radius:999px;padding:13px 18px;color:inherit;cursor:pointer}
.floating-petal{position:absolute;font-size:28px;color:var(--petal);animation:floaty 7s ease-in-out infinite;pointer-events:none;user-select:none}
.floating-petal.p1{top:12%;left:9%}
.floating-petal.p2{top:20%;right:12%;animation-delay:-2s;font-size:38px}
.floating-petal.p3{bottom:18%;left:14%;animation-delay:-4s}
.floating-petal.p4{bottom:12%;right:10%;animation-delay:-1s;font-size:22px}
.floating-petal.p5{top:46%;left:4%;animation-delay:-3s;font-size:20px}
.floating-petal.p6{top:38%;right:5%;animation-delay:-5s;font-size:24px}

.memory-section{background:var(--memory-bg);color:var(--memory-ink,var(--ink))}
.memory-section h2,.letter-section h2,.final-section h2{font-size:clamp(38px,7vw,75px);line-height:1;letter-spacing:var(--h-ls);margin:10px 0 50px}
.photo-wall{width:min(1100px,100%);display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.photo-wall.few{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}
.photo-wall.few .photo-card{width:min(320px,90%)}
.photo-card{background:var(--card-bg);padding:12px 12px 30px;box-shadow:0 20px 40px rgba(0,0,0,.14);margin:0;transition:transform .4s}
.photo-card:hover{transform:translateY(-10px) rotate(0)}
.photo-card img{width:100%;height:260px;object-fit:cover;display:block}
.photo-card figcaption{font:13px system-ui,sans-serif;margin-top:12px;color:var(--card-cap)}
.c0{grid-column:span 5;transform:rotate(-4deg)}
.c1{grid-column:span 4;transform:translateY(50px) rotate(3deg)}
.c2{grid-column:span 3;transform:rotate(-2deg)}
.c3,.c4{grid-column:span 4}
.photo-wall.few .c0,.photo-wall.few .c1,.photo-wall.few .c2{transform:none}
.photo-wall.few .photo-card:nth-child(odd){transform:rotate(-2.5deg)}
.photo-wall.few .photo-card:nth-child(even){transform:rotate(2.5deg)}

.letter-section{background:var(--letter-bg);color:var(--letter-ink,var(--ink))}
.envelope{width:min(650px,90vw);min-height:350px;background:var(--env);border-radius:12px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.25);display:grid;place-items:center;overflow:hidden}
.envelope:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49%,rgba(255,255,255,.14) 50%,transparent 51%),linear-gradient(225deg,transparent 49%,rgba(0,0,0,.08) 50%,transparent 51%)}
.envelope-paper{background:var(--env-paper);color:var(--env-ink);width:80%;min-height:270px;padding:35px;text-align:left;transform:translateY(50px);opacity:.25;transition:all 1s;border-radius:4px;box-shadow:0 10px 25px rgba(0,0,0,.14);font-size:17px;line-height:1.7;font-family:var(--font-body)}
.envelope.open .envelope-paper{transform:translateY(-30px);opacity:1}
.seal{position:absolute;width:76px;height:76px;border-radius:50%;border:0;background:var(--seal-bg);color:var(--seal-ink);font-size:30px;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25);transition:all .5s;z-index:3}
.envelope.open .seal{transform:translateY(180px) scale(.7);opacity:.2}
.signature{margin-top:25px}
.tap-hint{font:12px system-ui,sans-serif;opacity:.65}

.final-section{background:var(--final-bg);color:var(--final-ink);min-height:90vh}
.final-orbit{width:130px;height:130px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:45px;margin-bottom:35px;animation:pulse 2.5s infinite;opacity:.9}
.final-section h2{max-width:850px}
.final-section p{max-width:600px;font:16px/1.8 system-ui,sans-serif;opacity:.82}
.from{margin-top:35px;font-size:18px}

.reveal{opacity:0;transform:translateY(35px);transition:1s}
.reveal.visible{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes twinkle{50%{opacity:calc(var(--stars-op) * .35)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(12deg)}}

/* ---------- demo bar (demo.php only) ---------- */
.demo-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:rgba(20,12,16,.85);color:#fff;font:13px system-ui,sans-serif;backdrop-filter:blur(8px)}
.demo-back{opacity:.85}
.demo-use{background:#fff;color:#a63e54;font-weight:800;padding:8px 14px;border-radius:999px;white-space:nowrap}
.demo-bar a{color:inherit;text-decoration:none}
.demo-bar .demo-use{color:#a63e54}

/* demo page for full-page designs: bar on top, the design in a frame below */
.demo-shell{height:100vh;overflow:hidden}
.demo-frame{position:fixed;top:46px;left:0;right:0;bottom:0;width:100%;height:calc(100% - 46px);border:0;background:#fff}

/* =====================================================================
   DESIGNS (templates). Add a new one = add a .theme-yourname block + an entry in data/templates.json
   ===================================================================== */

/* Rosewood = the defaults above */

.theme-aurora{
  --bg:#0b1a33; --ink:#eaf4ff; --accent:#68c7a6; --stars-op:.55;
  --lock-bg:radial-gradient(circle at 20% 15%,rgba(104,199,166,.55),transparent 35%),radial-gradient(circle at 85% 80%,rgba(225,178,194,.5),transparent 35%),linear-gradient(#07152f,#133e61);
  --lock-btn-ink:#0d3b52;
  --welcome-bg:radial-gradient(ellipse at 30% 20%,rgba(104,199,166,.38),transparent 50%),linear-gradient(#07152f,#133e61 60%,#5b7fa0); --welcome-ink:#fff;
  --memory-bg:#0f2744; --memory-ink:#eaf4ff; --card-bg:#f4f8ff; --card-cap:#58708a;
  --letter-bg:linear-gradient(#133e61,#26567b); --letter-ink:#fff; --env:#2f6f8f; --env-paper:#f4fbff; --env-ink:#0b2a3f; --seal-bg:#68c7a6; --seal-ink:#06323a;
  --final-bg:#06101f; --final-ink:#eaf4ff; --btn-line:rgba(255,255,255,.4); --petal:rgba(104,199,166,.65);
}

.theme-sunset{
  --bg:#fff1e0; --ink:#4a1f2a; --accent:#c64d68; --h-style:italic; --h-ls:-.045em; --stars-op:.15;
  --lock-bg:radial-gradient(circle at 80% 15%,#ffe6a8,transparent 30%),linear-gradient(160deg,#ffd29a,#f58b6b 45%,#c64d68);
  --lock-btn-ink:#c64d68;
  --welcome-bg:radial-gradient(circle at 50% 25%,#fff0c9,#ffc08a 55%,#f1796f); --welcome-ink:#4a1f2a;
  --memory-bg:#fff6ea; --card-cap:#a07a6e;
  --letter-bg:#ffd9b8; --env:#e0685d; --env-paper:#fffaf0; --seal-bg:#b53a4f; --seal-ink:#fff0d6;
  --final-bg:#5a2336; --final-ink:#fff0dc; --btn-line:rgba(74,31,42,.35); --petal:rgba(198,77,104,.5);
}

.theme-midnight{
  --bg:#070b1c; --ink:#f3e9c9; --accent:#e6c46d; --font-head:'Playfair Display',Georgia,serif; --font-body:'Playfair Display',Georgia,serif; --h-ls:-.03em; --h-weight:500; --stars-op:.7;
  --lock-bg:radial-gradient(circle at 15% 20%,rgba(230,196,109,.18),transparent 30%),radial-gradient(circle at 85% 80%,rgba(120,100,220,.35),transparent 35%),linear-gradient(160deg,#0b1026,#1d2a5b 65%,#2e2563);
  --lock-ink:#f5e6b8; --lock-btn-bg:#e6c46d; --lock-btn-ink:#1b1f45; --in-bg:rgba(245,230,184,.08); --in-line:rgba(245,230,184,.4);
  --welcome-bg:radial-gradient(circle at 50% 30%,#2d3a7a,#121a40 60%,#070b1c); --welcome-ink:#f5e6b8;
  --memory-bg:#0d1230; --memory-ink:#f3e9c9; --card-bg:#f6efdc; --card-cap:#6b6240;
  --letter-bg:#161c45; --letter-ink:#f3e9c9; --env:#2b3578; --env-paper:#fbf4df; --env-ink:#2b2a22; --seal-bg:#e6c46d; --seal-ink:#1b1f45;
  --final-bg:#05081a; --final-ink:#f5e6b8; --btn-line:rgba(245,230,184,.4); --petal:rgba(230,196,109,.7);
}

.theme-garden{
  --bg:#f1f6ec; --ink:#24402e; --accent:#5f8f6e; --font-head:'Cormorant Garamond',Georgia,serif; --font-body:'Cormorant Garamond',Georgia,serif; --h-ls:-.02em; --h-weight:600; --stars-op:0;
  --lock-bg:radial-gradient(circle at 20% 20%,#fff6e0,transparent 35%),radial-gradient(circle at 80% 80%,#7da58a,transparent 40%),linear-gradient(150deg,#f3f8ec,#9cc3a6);
  --lock-ink:#24402e; --lock-btn-bg:#24402e; --lock-btn-ink:#f3f8ec; --in-bg:rgba(255,255,255,.55); --in-line:rgba(36,64,46,.35);
  --welcome-bg:radial-gradient(circle at 50% 35%,#fffdf3,#d6e8cb 60%,#8fb99a); --welcome-ink:#24402e;
  --memory-bg:#fbfdf7; --card-cap:#6f8a76;
  --letter-bg:#dce9d2; --env:#8fb99a; --env-paper:#fffef8; --env-ink:#2c3d30; --seal-bg:#4c7a5a; --seal-ink:#eef7e8;
  --final-bg:#233d2c; --final-ink:#eef7e8; --btn-line:rgba(36,64,46,.35); --petal:rgba(95,143,110,.5);
}
.theme-garden .eyebrow,.theme-garden .lock-eyebrow{letter-spacing:.3em}
.theme-garden .envelope-paper,.theme-midnight .envelope-paper{font-size:19px}

.theme-confetti{
  --bg:#fff7e6; --ink:#2d1b4e; --accent:#ff4f81; --font-head:'Fredoka',system-ui,sans-serif; --font-body:'Fredoka',system-ui,sans-serif; --h-ls:-.02em; --h-weight:700; --stars-op:.2;
  --lock-bg:radial-gradient(circle at 15% 20%,#ffd166,transparent 30%),radial-gradient(circle at 85% 80%,#7a6cff,transparent 35%),linear-gradient(135deg,#ff7aa2,#ff9f68);
  --lock-btn-ink:#ff4f81;
  --welcome-bg:radial-gradient(circle at 20% 20%,#ffe28a,transparent 40%),radial-gradient(circle at 80% 70%,#a99bff,transparent 45%),linear-gradient(135deg,#ff9ebd,#ffcf8a); --welcome-ink:#2d1b4e;
  --memory-bg:#fff7e6; --card-cap:#8a6f9e;
  --letter-bg:#ffe0ec; --env:#7a6cff; --env-paper:#fffdf7; --env-ink:#2d1b4e; --seal-bg:#ff4f81; --seal-ink:#fff;
  --final-bg:#2d1b4e; --final-ink:#fff7e6; --btn-line:rgba(45,27,78,.35); --petal:rgba(255,79,129,.6);
}
.theme-confetti .floating-petal{font-size:34px}
.theme-confetti .photo-card{border:3px solid #fff}
.theme-confetti .photo-card:nth-child(3n+1){background:#ffd166}
.theme-confetti .photo-card:nth-child(3n+2){background:#ff9ebd}
.theme-confetti .photo-card:nth-child(3n){background:#b8b0ff}
.theme-confetti .photo-card figcaption{color:#2d1b4e}

@media(max-width:700px){
  .welcome,.memory-section,.letter-section,.final-section{padding:75px 20px}
  .photo-wall{display:block}
  .photo-card{margin:20px auto;max-width:390px}
  .c0,.c1,.c2,.c3,.c4{transform:none}
  .photo-card img{height:300px}
  .envelope{min-height:440px}
  .envelope-paper{width:88%;font-size:15px}
  .code-inputs input{width:48px;height:58px}
  .demo-bar span{display:none}
  .photo-wall.few{display:block}
  .photo-wall.few .photo-card{width:auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}