/* Small foil decorations and slow, staggered twinkles evoke a decorated personal diary. */
body{overflow-x:clip}
.paper{
  border:7px solid transparent;
  border-radius:22px;
  background:linear-gradient(115deg,#fffcf5f7,#fff5edf5) padding-box,
    linear-gradient(125deg,#d6bbdc,#fff9dc 18%,#efb9c5 38%,#fff 50%,#d3bfdc 68%,#f2c7b4 86%,#fff7db) border-box;
  background-size:100% 100%,300% 300%;
  box-shadow:0 0 0 1px #b895ad,0 0 0 4px #fff8f0d9,0 0 0 5px #dab7c786,0 15px 35px #936f8424;
  animation:foil-shift 14s ease-in-out infinite;
}
.paper:before{inset:10px;border:1px solid #d8b7c38c;border-radius:12px;box-shadow:inset 0 0 0 3px #fff9ef, inset 0 0 0 4px #e3c7ce70}
.paper:after{content:'';position:absolute;top:14px;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,#fff,#dfc4d8,#fff,transparent);pointer-events:none}
.corner{width:49px;height:49px;font-size:0;background:url('assets/foil-star.svg') center/contain no-repeat;filter:drop-shadow(0 2px 2px #b487a044)}
.corner.tl{top:-25px;left:-23px;transform:rotate(-15deg)}
.corner.tr{top:-25px;right:-23px;transform:rotate(12deg)}
.corner.bl{bottom:-22px;left:-23px;transform:rotate(-12deg)}
.corner.br{bottom:-22px;right:-23px;transform:rotate(15deg)}
.frame-trinkets{position:absolute;inset:0;pointer-events:none;z-index:3}
.frame-bow{position:absolute;width:80px;height:58px;top:-32px;left:calc(50% - 40px);background:url('assets/satin-bow.svg') center/contain no-repeat;filter:drop-shadow(0 3px 2px #bf96a53a)}
.pearl-chain{position:absolute;top:5px;left:35px;right:35px;height:7px;background:radial-gradient(circle at center,#fffef9 0 2px,#d9baca 2.4px,transparent 3px) left center/15px 7px repeat-x;opacity:.85}
.binding-rings{position:absolute;left:-20px;top:160px;display:grid;gap:39px}
.binding-rings i{display:block;width:25px;height:13px;border:1px solid #a999b0;border-radius:7px;background:linear-gradient(#fffefa,#dccedc 40%,#fff 55%,#c7b4c9);box-shadow:0 2px 2px #9c76973b,inset 0 0 0 1px #fff8}
.glint{display:block;position:absolute;width:var(--size,35px);height:var(--size,35px);left:var(--x);top:var(--y);background:url('assets/light-sparkle.svg') center/contain no-repeat;opacity:.35;transform:scale(.72);filter:drop-shadow(0 0 3px #fff0c5aa);animation:gentle-twinkle var(--speed,4.2s) ease-in-out var(--delay,0s) infinite}
.frame-trinkets .glint:nth-of-type(2){--x:-17px;--y:24%;--size:40px;--delay:-1.4s}
.frame-trinkets .glint:nth-of-type(3){--x:calc(100% - 17px);--y:42%;--size:33px;--delay:-2.6s}
.frame-trinkets .glint:nth-of-type(4){--x:29%;--y:-22px;--size:29px;--delay:-.8s}
.frame-trinkets .glint:nth-of-type(5){--x:72%;--y:calc(100% - 16px);--size:35px;--delay:-3.2s}
.sparkle-field{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.shine-bubble{position:absolute;left:var(--x);top:var(--y);width:var(--size,58px);aspect-ratio:1;border:1px solid #fffaf2bb;border-radius:50%;background:radial-gradient(circle at 28% 24%,#fffdfaa1 0 2%,#fffcf933 8%,transparent 37%),linear-gradient(140deg,#fff4f116,transparent 45%,#ead6f33a);box-shadow:inset 0 0 0 2px #fff8,0 0 12px #e9c5ce33;animation:bubble-sway 8s ease-in-out var(--delay,0s) infinite}
.shine-bubble:after{content:'';position:absolute;left:17%;top:15%;width:22%;height:11%;border-radius:50%;background:#fff9;transform:rotate(-35deg)}
nav a{box-shadow:inset 0 0 0 2px #f9ded7,inset 0 1px 0 4px #fff8,3px 5px #3d506630}
nav a:after{content:'✧';position:absolute;right:5px;top:-13px;font-size:22px;color:#fffbe3;text-shadow:0 0 5px #d19fbc;pointer-events:none;opacity:0;transition:opacity .3s}
nav a:hover:after,nav a.selected:after{opacity:1;animation:gentle-twinkle 4.6s ease-in-out infinite}
.music .album{border-color:#b197ad;background:linear-gradient(135deg,#fff7e3,#f4deeb);box-shadow:0 0 0 2px #fff8}
@keyframes gentle-twinkle{0%,100%{opacity:.18;transform:scale(.66) rotate(-5deg)}35%{opacity:.75;transform:scale(.95) rotate(0)}55%{opacity:1;transform:scale(1.13) rotate(6deg)}78%{opacity:.4;transform:scale(.82) rotate(2deg)}}
@keyframes foil-shift{0%,100%{background-position:0 0,0 20%}50%{background-position:0 0,100% 80%}}
@keyframes bubble-sway{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-12px);opacity:.8}}
@media(max-width:720px){
  .paper{border-width:5px;border-radius:18px}
  .corner{width:36px;height:36px}
  .corner.tl,.corner.bl{left:-16px}.corner.tr,.corner.br{right:-16px}
  .corner.tl,.corner.tr{top:-18px}.corner.bl,.corner.br{bottom:-17px}
  .frame-bow{width:62px;height:45px;left:calc(50% - 31px);top:-25px}
  .binding-rings{left:-13px;gap:42px}.binding-rings i{width:18px;height:11px}
  .sparkle-field .glint:nth-child(n+5),.sparkle-field .shine-bubble{display:none}
  .frame-trinkets .glint{--size:25px}
}
@media(prefers-reduced-motion:reduce){.glint{opacity:.6;transform:none}.shine-bubble{opacity:.5}}