/* ============ TOKENS ============ */
:root{
  --cream: #f6efe2;
  --ivory: #fbf7ef;
  --lavender: #cabfe0;
  --gold: #b9945a;
  --navy: #1e2233;
  --warmgray: #8c8172;
  --ink: #2b2a28;
  --paper-shadow: rgba(43,42,40,0.08);
  --serif: 'Fraunces', serif;
  --sans: 'Karla', sans-serif;
  --hand: 'Caveat', cursive;
  --ease: cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --cream: #171a26;
  --ivory: #1e2233;
  --ink: #ece6d8;
  --paper-shadow: rgba(0,0,0,0.35);
  --warmgray: #a89f8e;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
}
::selection{background:var(--lavender); color:var(--navy);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
h1,h2,h3{font-family:var(--serif); font-weight:450; margin:0;}
p{line-height:1.7; margin:0;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
img,svg{display:block; max-width:100%;}

.paper-texture{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
[data-theme="dark"] .paper-texture{mix-blend-mode:screen; opacity:.15;}

section{position:relative; z-index:1; padding:8vh 6vw; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center;}

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; z-index:100; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.2rem;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
#loader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-glyph{width:52px; height:52px; position:relative;}
.loader-glyph svg{width:100%; height:100%;}
.loader-glyph circle{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:150; stroke-dashoffset:150;
  animation:draw 1.8s var(--ease) infinite;
}
@keyframes draw{
  0%{stroke-dashoffset:150; transform:rotate(0deg);}
  50%{stroke-dashoffset:20;}
  100%{stroke-dashoffset:150; transform:rotate(360deg);}
}
.loader-text{font-family:var(--serif); font-style:italic; font-size:0.95rem; color:var(--warmgray); letter-spacing:.02em;}
.loader-particle{
  position:absolute; border-radius:50%; background:var(--gold); opacity:0; pointer-events:none;
  animation:float-up 4s ease-in infinite;
}
@keyframes float-up{
  0%{opacity:0; transform:translateY(0);}
  15%{opacity:.5;}
  85%{opacity:.3;}
  100%{opacity:0; transform:translateY(-120px);}
}

/* ============ NAV DOTS ============ */
#chapter-nav{
  position:fixed; right:clamp(14px,3vw,32px); top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:14px;
}
#chapter-nav button{
  width:9px; height:9px; border-radius:50%; background:transparent; border:1.4px solid var(--warmgray);
  opacity:.6; transition:all .4s var(--ease); position:relative;
}
#chapter-nav button.active{background:var(--gold); border-color:var(--gold); opacity:1; transform:scale(1.3);}
#chapter-nav button::after{
  content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--warmgray);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
#chapter-nav button:hover::after,#chapter-nav button:focus-visible::after{opacity:1;}
@media (max-width:720px){ #chapter-nav{display:none;} }

/* theme + sound toggle */
.util-controls{position:fixed; top:20px; right:20px; z-index:60; display:flex; gap:10px;}
.util-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.35); backdrop-filter:blur(8px); border:1px solid rgba(140,129,114,.25);
  transition:transform .3s var(--ease), background .3s;
}
[data-theme="dark"] .util-btn{background:rgba(30,34,51,.5);}
.util-btn:hover{transform:scale(1.08);}
.util-btn svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.6;}

/* ============ CHAPTER 1 : HERO ============ */
#chapter-1{text-align:center; gap:1.6rem;}
.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
  color:var(--warmgray); opacity:0;
}
.hero-title{
  font-size:clamp(2.4rem,7vw,4.6rem); font-weight:450; color:var(--ink); opacity:0;
  letter-spacing:-0.01em;
}
.hero-title em{font-style:italic; color:var(--gold); font-weight:450;}
.hero-sub{
  max-width:560px; font-size:clamp(1rem,2vw,1.2rem); color:var(--warmgray); font-style:italic;
  font-family:var(--serif); opacity:0; line-height:1.9;
}
.scroll-cue{
  margin-top:2.4rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:0;
}
.scroll-cue span{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--warmgray);}
.scroll-line{width:1px; height:38px; background:linear-gradient(var(--gold), transparent); animation:pulse-line 2.2s ease-in-out infinite;}
@keyframes pulse-line{0%,100%{opacity:.3;}50%{opacity:1;}}

.continue-btn{
  margin-top:1rem; padding:.85rem 2.1rem; border:1px solid var(--ink); border-radius:100px;
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; opacity:0;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.continue-btn:hover{background:var(--ink); color:var(--ivory);}

.glow-particle{position:absolute; border-radius:50%; background:radial-gradient(circle, var(--gold), transparent 70%); opacity:.35; pointer-events:none; filter:blur(1px);}

/* ============ CHAPTER 2 : TIMELINE ============ */
.chapter-heading{text-align:center; margin-bottom:4.5rem;}
.chapter-heading .eyebrow{opacity:1; display:block; margin-bottom:.8rem;}
.chapter-heading h2{font-size:clamp(1.8rem,4.5vw,2.6rem);}

.timeline{width:100%; max-width:680px; position:relative; padding-left:2rem; list-style:none;}
.timeline::before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--lavender), var(--gold), var(--lavender)); opacity:.5;
}
.timeline-item{position:relative; padding-bottom:3.6rem; opacity:0; transform:translateX(-16px);}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; left:-2rem; top:.3rem; width:11px; height:11px; border-radius:50%;
  background:var(--cream); border:1.6px solid var(--gold);
}
.timeline-when{
  font-family:var(--serif); font-style:italic; color:var(--gold); font-size:.95rem; margin-bottom:.4rem; display:block;
}
.timeline-item h3{font-size:1.25rem; margin-bottom:.5rem; font-weight:600;}
.timeline-item p{color:var(--warmgray); font-size:.98rem; max-width:520px;}

/* ============ CHAPTER : OUR STORY, DRAWN ============ */
#chapter-story-drawn{padding-top:10vh; padding-bottom:10vh;}
.chapter-subtitle{
  margin-top:.9rem; font-family:var(--serif); font-style:italic; color:var(--warmgray);
  font-size:clamp(.95rem,1.6vw,1.15rem); max-width:480px; margin-left:auto; margin-right:auto;
}
.subtitle-underline{display:block; margin:.9rem auto 0; width:120px; height:10px;}
.subtitle-underline path{
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:140; stroke-dashoffset:140;
}
.scrapbook{
  position:relative; width:100%; max-width:1040px; margin-top:4rem;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
@media (max-width:840px){ .scrapbook{grid-template-columns:1fr; gap:2.6rem;} }

.scrapbook-frame{
  position:relative; padding:14px 14px 34px; background:var(--ivory);
  box-shadow:0 2px 4px var(--paper-shadow), 0 24px 46px -12px var(--paper-shadow), 0 1px 0 rgba(255,255,255,.4) inset;
  transform:rotate(-1.1deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  clip-path:polygon(0% 1.2%,2% 0%,98% 0.4%,100% 1.8%,99.6% 98%,97% 100%,3% 99.5%,0.3% 97.8%);
  will-change:transform;
}
.scrapbook-frame:hover{
  transform:rotate(-0.4deg) translateY(-6px);
  box-shadow:0 4px 8px var(--paper-shadow), 0 34px 60px -14px var(--paper-shadow);
}
.frame-inner{
  position:relative; overflow:hidden; border-radius:2px; background:#e9e0cd;
  aspect-ratio:1402/1122; width:100%;
}
.frame-inner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(1.02);
  transition:filter .6s ease, transform .3s var(--ease);
}
.frame-inner img.tiny{ filter:blur(14px) saturate(1.1); transform:scale(1.08); }
.frame-inner img.full{ opacity:0; }
.frame-inner img.full.loaded{ opacity:1; }

.paper-fold{
  position:absolute; left:0; right:0; height:52%; background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--cream); z-index:3;
}
.paper-fold::after{
  content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
.paper-fold-top{top:0; transform-origin:top;}
.paper-fold-bottom{bottom:0; transform-origin:bottom;}

.tape{
  position:absolute; width:64px; height:24px; background:rgba(233,222,196,.55);
  box-shadow:0 2px 5px rgba(0,0,0,.12); z-index:4; border:1px solid rgba(255,255,255,.25);
}
.tape-left{top:-10px; left:20px; transform:rotate(-8deg);}
.tape-right{top:-10px; right:24px; transform:rotate(6deg);}

.pressed-flower{position:absolute; width:34px; height:34px; opacity:.55; z-index:4; pointer-events:none;}
.pressed-flower svg{width:100%; height:100%; stroke:var(--gold); fill:none; stroke-width:1;}
.pressed-flower.pf-1{bottom:-14px; left:-12px; transform:rotate(-12deg);}

.scribble{
  position:absolute; font-family:var(--hand); font-size:1.15rem; color:var(--warmgray); opacity:0;
  pointer-events:none; z-index:5; white-space:nowrap;
}
.scribble-1{top:-2.6rem; right:8%; transform:rotate(-4deg);}
.scribble-2{bottom:-2.4rem; left:2%; transform:rotate(2deg);}
@media (max-width:840px){ .scribble{position:static; display:inline-block; margin:.6rem .8rem 0 0; opacity:.7 !important;} }

.dust-particle{position:absolute; border-radius:50%; background:var(--gold); opacity:0; pointer-events:none; z-index:2;}

.scrapbook-copy p{
  font-family:var(--serif); font-size:1.05rem; line-height:1.95; color:var(--ink); margin-bottom:1.1rem;
}
.scrapbook-copy p:first-child{font-style:italic; color:var(--warmgray);}
.scrapbook-copy p:last-child{margin-bottom:0; color:var(--gold);}

/* ============ CHAPTER 3 : PERSONALITY CARDS ============ */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; width:100%; max-width:920px;
}
.trait-card{
  perspective:1200px; height:210px; cursor:pointer;
}
.trait-card-inner{
  position:relative; width:100%; height:100%; transition:transform .7s var(--ease); transform-style:preserve-3d;
}
.trait-card.flipped .trait-card-inner{transform:rotateY(180deg);}
.trait-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:14px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.4rem;
  border:1px solid rgba(140,129,114,.22);
  background:rgba(255,255,255,.4); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px var(--paper-shadow);
}
[data-theme="dark"] .trait-face{background:rgba(255,255,255,.04);}
.trait-face.back{transform:rotateY(180deg); justify-content:flex-start; text-align:left;}
.trait-face h3{font-size:1.3rem; margin-bottom:.3rem;}
.trait-face .trait-sub{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--warmgray);}
.trait-face p{font-size:.92rem; color:var(--warmgray); margin-top:.3rem;}
.trait-icon{margin-bottom:.7rem; opacity:.8;}
.trait-icon svg{width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1.4;}
.tap-hint{font-size:.68rem; color:var(--warmgray); margin-top:.6rem; opacity:.6; letter-spacing:.04em;}

/* ============ CHAPTER 4 : POETRY ============ */
#chapter-4{background:var(--ivory);}
.poem-room{width:100%; max-width:640px;}
.poem-instruction{font-family:var(--serif); font-style:italic; color:var(--warmgray); margin-top:.6rem; font-size:.95rem;}
.poem-tabs{display:flex; gap:.6rem; justify-content:center; margin-bottom:2.4rem; flex-wrap:wrap;}
.poem-tab{
  padding:.5rem 1.2rem; border:1px solid rgba(140,129,114,.3); border-radius:100px; font-size:.82rem;
  letter-spacing:.03em; color:var(--warmgray); transition:all .35s var(--ease); cursor:pointer;
}
.poem-tab.active{background:var(--ink); color:var(--ivory); border-color:var(--ink);}

@keyframes tab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 180, 99, 0.4); border-color: rgba(232,180,99,0.8); }
  70% { box-shadow: 0 0 0 6px rgba(232, 180, 99, 0); border-color: rgba(140,129,114,.3); }
  100% { box-shadow: 0 0 0 0 rgba(232, 180, 99, 0); border-color: rgba(140,129,114,.3); }
}
.poem-tab.unread {
  animation: tab-pulse 2s infinite;
  color: var(--gold);
  border-color: rgba(232,180,99,0.5);
}
.poem-page{
  background:var(--cream); border-radius:4px; padding:3rem 2.4rem; position:relative;
  box-shadow:0 20px 50px var(--paper-shadow);
}
[data-theme="dark"] .poem-page{background:#232742;}
.poem-page::before{
  content:''; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.poem-title{font-style:italic; text-align:center; margin-bottom:1.8rem; color:var(--gold); font-size:1.3rem;}
.poem-body{white-space:pre-line; text-align:center; font-family:var(--serif); font-size:1.08rem; line-height:2.1; color:var(--ink);}
.poem-body .line{opacity:0; display:block; transform:translateY(6px);}

/* ============ CHAPTER 5 : STARS ============ */
#chapter-5{
  background:radial-gradient(ellipse at 50% 20%, #2a2f4a, var(--navy) 70%); color:#f1ede0; min-height:100vh;
}
#chapter-5 .eyebrow, #chapter-5 .chapter-heading p{color:#b9b4d6;}
.star-subtitle{margin-top:.8rem; max-width:440px; font-family:var(--serif); font-style:italic; color:#b9b4d6;}
.star-field{position:relative; width:100%; max-width:760px; height:420px; margin-top:2rem;}
.star-btn{
  position:absolute; width:20px; height:20px; background:none;
  animation:twinkle 3.4s ease-in-out infinite;
}
.star-btn svg{width:100%; height:100%; fill:#f4e4b8; filter:drop-shadow(0 0 6px rgba(244,228,184,.7));}
.star-btn.revealed svg{fill:var(--gold);}
@keyframes twinkle{0%,100%{opacity:.55; transform:scale(1);}50%{opacity:1; transform:scale(1.18);}}
.star-modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,22,.6); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  padding:1.5rem;
}
.star-modal.open{opacity:1; pointer-events:auto;}
.star-modal-card{
  background:var(--ivory); color:var(--ink); border-radius:14px; padding:2.4rem; max-width:440px; text-align:center;
  transform:translateY(14px) scale(.96); transition:transform .4s var(--ease);
}
.star-modal.open .star-modal-card{transform:translateY(0) scale(1);}
.star-modal-kicker{font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); margin-bottom:.8rem; display:block;}
.star-modal-card p{font-family:var(--serif); font-size:1.15rem; font-style:italic; line-height:1.75;}
.star-modal-close{margin-top:1.6rem; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--warmgray); border-bottom:1px solid var(--warmgray); padding-bottom:2px;}
.star-progress{margin-top:1.6rem; font-size:.75rem; letter-spacing:.1em; color:#8a86ab; text-transform:uppercase;}
@media (max-width:480px){ .star-field{height:300px;} .star-btn{width:28px; height:28px;} }

/* ============ CHAPTER 6 : LETTER ============ */
#chapter-6{background:var(--ivory);}
.letter-wrap{max-width:600px; width:100%;}
.envelope{
  width:220px; height:150px; margin:0 auto 3rem; position:relative; cursor:pointer;
}
.envelope-body{
  position:absolute; inset:0; background:var(--cream); border:1px solid rgba(140,129,114,.35); border-radius:4px;
  box-shadow:0 14px 34px var(--paper-shadow);
}
.envelope-flap{
  position:absolute; top:0; left:0; right:0; height:75px; background:var(--ivory);
  clip-path:polygon(0 0,100% 0,50% 70%); border-bottom:1px solid rgba(140,129,114,.25);
  transform-origin:top; transition:transform .8s var(--ease); transform-style:preserve-3d;
}
.envelope.open .envelope-flap{transform:rotateX(180deg);}
.envelope-seal{
  position:absolute; left:50%; top:38%; width:34px; height:34px; border-radius:50%; background:var(--gold);
  transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center;
  font-family:var(--hand); color:var(--ivory); font-size:1.2rem; box-shadow:0 3px 8px rgba(0,0,0,.2);
  transition:opacity .4s var(--ease);
}
.envelope.open .envelope-seal{opacity:0;}
.envelope-hint{text-align:center; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warmgray); margin-top:.9rem;}

.letter-paper{
  background:var(--cream); border-radius:4px; padding:3rem 2.6rem; box-shadow:0 20px 50px var(--paper-shadow);
  max-height:0; overflow:hidden; opacity:0; transition:max-height 1.1s var(--ease), opacity 1s var(--ease), padding 1s var(--ease);
}
.letter-paper.shown{max-height:2400px; opacity:1;}
.letter-body p{margin-bottom:1.15rem; font-family:var(--serif); font-size:1.02rem; line-height:1.95; color:var(--ink);}
.letter-sign{font-family:var(--hand); font-size:1.9rem; color:var(--gold); margin-top:1rem;}

/* ============ FINAL CHAPTER ============ */
#chapter-final{
  background:linear-gradient(to bottom, #12162a, #05070f); color:#efe9da; min-height:100vh; overflow:hidden;
}
#stars-canvas{position:absolute; inset:0; z-index:0;}
.lantern{
  position:relative; z-index:2; width:64px; height:82px; margin-top:1rem;
}
.lantern-body{
  width:100%; height:64px; background:linear-gradient(180deg,#f4d99a,#e8b463); border-radius:10px 10px 16px 16px;
  box-shadow:0 0 40px 14px rgba(232,180,99,.45);
  animation:flicker 2.6s ease-in-out infinite;
}
.lantern-top{width:16px; height:8px; background:#c99a52; margin:0 auto; border-radius:2px 2px 0 0;}
@keyframes flicker{0%,100%{box-shadow:0 0 40px 14px rgba(232,180,99,.45);}50%{box-shadow:0 0 52px 20px rgba(232,180,99,.6);}}
.final-text{position:relative; z-index:2; text-align:center; margin-top:2.6rem;}
.final-text h2{font-size:clamp(1.8rem,4.5vw,2.6rem); opacity:0;}
.final-text p{margin-top:1rem; font-family:var(--serif); font-style:italic; color:#b9b4d6; opacity:0;}
.final-fade{margin-top:3.2rem; font-family:var(--hand); font-size:1.6rem; color:var(--gold); opacity:0;}

footer{position:relative; z-index:1; text-align:center; padding:3rem 1rem; font-size:.75rem; color:var(--warmgray); letter-spacing:.04em;}

/* ============ INTERACTIVE ENHANCEMENTS ============ */
.cursor-sparkle{
  position:fixed; pointer-events:none; z-index:99; border-radius:50%;
  background:radial-gradient(circle, var(--gold), transparent 70%);
  animation:sparkle-fade .7s ease-out forwards;
}
@keyframes sparkle-fade{
  0%{opacity:.7; transform:scale(1) translateY(0);}
  100%{opacity:0; transform:scale(0) translateY(-18px);}
}
.confetti-piece{
  position:fixed; z-index:101; pointer-events:none;
}
.float-heart{
  position:fixed; pointer-events:none; z-index:100;
  font-size:2.8rem; opacity:0;
  animation:heart-float 2s ease-out forwards;
}
@keyframes heart-float{
  0%{opacity:0; transform:translateY(0) scale(0.6);}
  12%{opacity:1; transform:translateY(-20px) scale(1.2);}
  100%{opacity:0; transform:translateY(-150px) scale(0.8);}
}
.shooting-star{
  position:absolute; pointer-events:none; z-index:1;
  width:160px; height:3px;
  background:linear-gradient(to right, transparent, rgba(244,228,184,.85), transparent);
  border-radius:2px;
  animation:shoot 1.2s ease-in forwards;
}
@keyframes shoot{
  0%{opacity:0; transform:translate(0,0) scaleX(.3);}
  15%{opacity:1; transform:translate(80px,40px) scaleX(1);}
  100%{opacity:0; transform:translate(400px,200px) scaleX(.4);}
}
.wish-btn{
  position:relative; z-index:2; margin-top:2rem; padding:1rem 2.4rem;
  border:1px solid rgba(239,233,218,.3); border-radius:100px;
  font-family:var(--hand); font-size:1.3rem; color:#efe9da; letter-spacing:.03em;
  background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
  transition:all .4s var(--ease); cursor:pointer; opacity:0;
}
.wish-btn:hover{background:rgba(255,255,255,.12); transform:scale(1.05); box-shadow:0 0 30px rgba(232,180,99,.3);}
.wish-message{
  position:relative; z-index:2; margin-top:1.6rem;
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold);
  opacity:0;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}