:root{
  --terracotta:#D97757;
  --terracotta-dark:#b85f42;
  --paper:#F4E7D3;
  --paper-dark:#e8d6b8;
  --ink:#2c2119;
  --magenta:#C81D5E;
  --yellow:#F4C13B;
  --denim:#2B4C6F;
  --indigo:#241F5C;
  --green:#4c6b4f;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --vh: 1vh;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  background:var(--terracotta);
  font-family:'Kalam', cursive;
  color:var(--ink);
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

#app-shell{
  position:relative;
  width:100%;
  height:calc(var(--vh, 1vh) * 100);
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,.08), transparent 45%),
    var(--terracotta);
}

#ambient-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:2;
}

#sound-toggle{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:14px;
  z-index:50;
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  background:rgba(0,0,0,.15);
  color:#fff;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(4px);
}
#sound-toggle.muted{opacity:.5;}

#book{
  position:relative;
  width:100%;
  height:100%;
  perspective:1800px;
  z-index:3;
}

.page{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  padding-top:max(20px, env(safe-area-inset-top));
  padding-bottom:max(90px, calc(env(safe-area-inset-bottom) + 80px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:rotateY(-90deg);
  transform-origin:left center;
  transition:transform .7s cubic-bezier(.6,0,.3,1), opacity .5s ease;
  backface-visibility:hidden;
}
.page.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:rotateY(0deg);
  z-index:5;
}
.page.prev{
  transform:rotateY(90deg);
  transform-origin:right center;
}

.paper-sheet{
  position:relative;
  width:min(86vw, 380px);
  height:min(70vh, 560px);
  background:var(--paper);
  border-radius:3px;
  box-shadow:var(--shadow);
  padding:26px 20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 2px, transparent 2px 4px);
}
.paper-sheet::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 90%, rgba(0,0,0,.05), transparent 40%),
    radial-gradient(circle at 95% 10%, rgba(0,0,0,.05), transparent 35%);
  pointer-events:none;
}
.torn-sheet{
  clip-path: polygon(0% 2%,3% 0%,8% 1.5%,15% 0%,22% 1%,30% 0%,40% 1.2%,50% 0%,60% 1%,70% 0%,80% 1.5%,90% 0%,97% 1%,100% 3%,100% 97%,96% 100%,88% 98.5%,78% 100%,68% 99%,58% 100%,48% 98.8%,38% 100%,28% 99%,18% 100%,10% 98.5%,3% 100%,0% 97%);
}

.desk-scene{
  position:relative;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:22px;
}

.deco{
  position:absolute;
  font-size:34px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation:float-slow 6s ease-in-out infinite;
}
.deco-camera{ top:6%; left:8%; width:70px; }
.deco-camera .icon-camera{ width:100%; height:auto; }
.deco-flower{ top:10%; right:10%; animation-delay:.5s; }
.deco-ticket{ bottom:16%; left:6%; animation-delay:1s; }
.deco-butterfly{ bottom:10%; right:8%; animation-delay:1.5s; font-size:30px; }
.deco-envelope{ top:38%; left:4%; font-size:26px; animation-delay:2s; }
.deco-clip{ top:34%; right:5%; font-size:26px; animation-delay:2.5s; }
.deco-tape{
  position:absolute;
  width:70px; height:24px;
  background:rgba(244,193,59,.55);
  border:1px solid rgba(244,193,59,.7);
}
.deco-tape-1{ top:20%; left:38%; transform:rotate(-8deg); }
.deco-tape-2{ bottom:22%; right:34%; transform:rotate(10deg); }

.mini-ticket{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:11px;
  background:var(--paper);
  color:var(--magenta);
  border:2px dashed var(--magenta);
  padding:4px 8px;
  border-radius:4px;
  transform:rotate(-6deg);
}

@keyframes float-slow{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-8px) rotate(3deg); }
}

.closed-book{
  width:min(78vw, 280px);
  cursor:pointer;
}
.closed-book-cover{
  width:100%;
  padding:20px 14px;
  background:var(--paper);
  border-radius:6px;
  box-shadow:var(--shadow), 5px 5px 0 rgba(0,0,0,.1);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  transform:rotate(-1.5deg);
  transition:transform .25s ease;
}
.closed-book:hover .closed-book-cover,
.closed-book:active .closed-book-cover{
  transform:rotate(0deg) scale(1.03);
}
.cover-collage{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.cover-line{
  display:flex; justify-content:center; flex-wrap:nowrap; gap:2px;
}
.cover-letter{
  font-size:clamp(18px, 7.5vw, 34px);
  line-height:1;
  padding:5px 3px 1px;
  display:inline-block;
  flex-shrink:0;
  box-shadow:1px 2px 4px rgba(0,0,0,.2);
}

.cover-text{
  font-family:'Caveat', cursive;
  font-size:clamp(20px,5vw,28px);
  color:var(--paper);
  text-align:center;
  min-height:1.4em;
  text-shadow:1px 1px 2px rgba(0,0,0,.2);
}

.btn-open{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:15px;
  padding:12px 30px;
  border:none;
  border-radius:30px;
  background:var(--magenta);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease, background .2s ease;
}
.btn-open.show{ opacity:1; transform:translateY(0); }
.btn-open:active{ background:var(--terracotta-dark); }

.blank-sheet{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.opening-caption{
  font-family:'Caveat',cursive;
  font-size:22px;
  color:#8a7a63;
  opacity:0;
  animation:fade-in 1.5s ease 1.2s forwards;
}
.opening-tape-1{
  position:absolute; top:10%; left:50%;
  transform:translateX(-50%) rotate(-3deg) scale(0);
  width:90px; height:26px;
  background:rgba(244,193,59,.6);
  border:1px solid rgba(0,0,0,.05);
  animation:tape-land .5s ease .3s forwards;
}
.opening-flower{
  position:absolute; top:22%; right:20%;
  font-size:34px;
  opacity:0; transform:translateY(-40px) rotate(-30deg);
  animation:petal-drop 1s ease .6s forwards;
}
.opening-sticker{
  position:absolute; bottom:26%; left:18%;
  font-size:30px;
  opacity:0; transform:scale(0);
  animation:pop-in .5s ease .9s forwards;
}
.opening-scrap{
  position:absolute; bottom:14%; right:16%;
  width:80px; height:50px;
  background:var(--denim);
  opacity:0; transform:rotate(0deg) scale(0);
  clip-path:polygon(0% 10%,20% 0%,100% 5%,95% 90%,60% 100%,5% 95%);
  animation:pop-in .5s ease 1s forwards;
}
@keyframes tape-land{ from{transform:translateX(-50%) rotate(-3deg) scale(0);} to{transform:translateX(-50%) rotate(-3deg) scale(1);} }
@keyframes petal-drop{ to{ opacity:1; transform:translateY(0) rotate(-10deg);} }
@keyframes pop-in{ to{ opacity:1; transform:scale(1) rotate(-6deg);} }
@keyframes fade-in{ to{opacity:1;} }

.title-collage{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  width:100%; height:100%;
}
.title-line{
  display:flex; justify-content:center; flex-wrap:nowrap;
  gap:2px;
  transform-origin:center;
  white-space:nowrap;
}
.title-letter{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(24px, 8vw, 40px);
  line-height:1;
  padding:5px 4px 2px;
  display:inline-block;
  opacity:0;
  transform:translateY(-30px) rotate(0deg) scale(.6);
  animation:letter-drop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:1px 2px 4px rgba(0,0,0,.2);
}
@keyframes letter-drop{
  to{ opacity:1; transform:translateY(0) rotate(var(--r,0deg)) scale(1); }
}

.photo-deco{
  position:absolute;
  font-size:28px;
  opacity:.9;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.15));
  animation:float-slow 6s ease-in-out infinite;
}
.photo-deco-flower{ top:8%; left:8%; }
.photo-deco-star{ top:12%; right:10%; font-size:22px; animation-delay:1s; }
.photo-deco-heart{ bottom:10%; right:9%; font-size:24px; animation-delay:2s; }
.photo-deco-washi{
  top:6%; right:22%;
  width:60px; height:22px;
  background:rgba(43,76,111,.5);
  transform:rotate(8deg);
  animation:none;
}
.photo-deco-final-1{ top:6%; right:10%; }
.photo-deco-final-2{ bottom:16%; left:8%; font-size:22px; animation-delay:1.2s; }

.polaroid{
  background:#fff;
  padding:12px 12px 16px;
  box-shadow:var(--shadow);
  width:min(58vw, 230px);
  position:relative;
  opacity:0;
  transform:translateY(-120px) rotate(-8deg);
  transition:transform .3s ease;
}
.polaroid.landed{
  animation:polaroid-fall .8s cubic-bezier(.2,.8,.3,1.1) forwards;
}
@keyframes polaroid-fall{
  0%{ opacity:0; transform:translateY(-140px) rotate(-14deg); }
  70%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) rotate(-3deg); }
}
.polaroid:active, .polaroid.touched{
  transform:translateY(0) rotate(-3deg) scale(1.05);
}
.polaroid-img{
  width:100%; aspect-ratio:1/1;
  background:
    linear-gradient(135deg, #cdbba0, #e8d6b8) ;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  color:#9c8a6f; font-family:'Poppins',sans-serif; font-size:12px;
}
.polaroid-tape{
  position:absolute; top:-14px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:80px; height:26px;
  background:rgba(244,193,59,.6);
}
.polaroid-caption{
  text-align:center;
  font-family:'Caveat',cursive;
  font-size:18px;
  color:#5c4a35;
  margin:10px 4px 0;
  line-height:1.3;
}

.doodle{
  position:absolute; font-size:26px; opacity:.85;
}
.doodle-flower{ top:8%; right:10%; }
.doodle-heart{ bottom:14%; left:10%; }
.doodle-star{ top:14%; left:8%; }
.story-text{
  font-family:'Kalam',cursive;
  font-size:clamp(15px,4vw,18px);
  line-height:1.75;
  color:var(--ink);
  max-width:85%;
  margin:0 auto;
  text-align:center;
}
.typing-cursor{
  font-family:'Kalam',cursive;
  font-size:18px;
  text-align:center;
  display:block;
  margin-top:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{opacity:0;} }

.gallery{
  position:relative;
  width:100%; height:100%;
}
.gallery-caption{
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  width:88%;
  text-align:center;
  font-family:'Kalam',cursive;
  font-size:clamp(14px,4vw,17px);
  line-height:1.6;
  color:var(--ink);
}
.gallery-item{
  position:absolute;
  width:38%;
  background:#fff;
  padding:8px 8px 22px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-item .polaroid-img{ aspect-ratio:1/1; }
.gallery-item.lifted{
  transform:translateY(-10px) scale(1.06) rotate(0deg) !important;
  box-shadow:0 20px 30px rgba(0,0,0,.3);
  z-index:10;
}
.gallery-deco-1{ top:0%; left:42%; font-size:26px; }
.gallery-deco-2{ top:40%; right:1%; font-size:24px; animation-delay:1s; }
.gallery-deco-3{ bottom:0%; left:40%; font-size:22px; animation-delay:2s; }
.gallery-deco-4{ top:38%; left:0%; font-size:24px; animation-delay:1.5s; }

.wish-flower{
  position:absolute; top:6%; right:8%;
  font-size:44px;
}
.wish-text{
  font-family:'Kalam',cursive;
  font-size:clamp(15px,4vw,19px);
  line-height:1.75;
  max-width:85%;
  margin:0 auto;
  text-align:center;
}
.wish-date{
  position:absolute; bottom:20px; right:22px;
  font-family:'Caveat',cursive;
  font-size:19px;
  color:#8a7a63;
}

.hopes-title{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(22px,5.5vw,28px);
  color:var(--magenta);
  margin:0 0 18px;
  text-align:center;
  transform:rotate(-2deg);
}
.hopes-list{
  list-style:none;
  margin:0 auto; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.hopes-list li{
  font-family:'Kalam',cursive;
  font-size:clamp(15px,4.2vw,18px);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
  text-align:center;
  max-width:90%;
}
.hopes-list li.show{ opacity:1; transform:translateY(0); }
.hopes-deco-1{ top:5%; right:8%; font-size:26px; }
.hopes-deco-2{ bottom:8%; left:6%; font-size:24px; animation-delay:1.2s; }
.hopes-deco-3{ top:48%; left:5%; font-size:22px; animation-delay:2s; }
.hopes-deco-washi{
  top:2%; left:12%;
  width:60px; height:20px;
  background:rgba(200,29,94,.25);
  transform:rotate(-6deg);
  animation:none;
}

.surprise-sheet{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px;
}
.gift-box{
  width:150px; height:130px;
  position:relative;
  cursor:pointer;
  transform-origin:bottom center;
}
.gift-box.opened{ animation:gift-shake .4s ease; }
@keyframes gift-shake{
  0%,100%{transform:rotate(0);} 25%{transform:rotate(-4deg);} 75%{transform:rotate(4deg);}
}
.gift-body{
  position:absolute; bottom:0; left:0; right:0; height:90px;
  background:var(--magenta);
  border-radius:4px;
}
.gift-lid{
  position:absolute; top:0; left:-8px; right:-8px; height:34px;
  background:var(--denim);
  border-radius:6px;
  transition:transform .5s ease, opacity .5s ease;
  transform-origin:left center;
}
.gift-box.opened .gift-lid{
  transform:translateY(-60px) rotate(-40deg);
  opacity:0;
}
.gift-ribbon-v{
  position:absolute; top:0; bottom:0; left:50%;
  width:14px; margin-left:-7px;
  background:var(--yellow);
}
.gift-ribbon-h{
  position:absolute; top:34px; left:0; right:0; height:14px;
  background:var(--yellow);
}
.surprise-hint{
  font-family:'Caveat',cursive;
  font-size:20px;
  color:#8a7a63;
  transition:opacity .4s ease;
}
.surprise-hint.hide{ opacity:0; }
.surprise-collage-wrap{
  opacity:0;
  transform:scale(.5);
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  display:flex;
  justify-content:center;
  width:100%;
  overflow:visible;
}
.surprise-collage-wrap.show{ opacity:1; transform:scale(1); }
.surprise-collage{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .2s ease;
}
.collage-line{
  display:inline-flex; flex-wrap:nowrap; justify-content:center; gap:6px 4px;
}
.collage-word{
  display:inline-flex; flex-wrap:nowrap;
}
.surprise-letter{
  font-size:clamp(18px, 6.5vw, 28px);
  line-height:1;
  padding:5px 3px 1px;
  display:inline-block;
  white-space:pre;
  box-shadow:1px 2px 4px rgba(0,0,0,.2);
}

.polaroid-final{ width:min(62vw, 250px); margin:0 auto 16px; }
.closing-text{
  font-family:'Kalam',cursive;
  font-size:clamp(15px,4vw,19px);
  line-height:1.7;
  text-align:center;
  max-width:92%;
  margin:0 auto;
}
.closing-salam{
  font-family:'Kalam',cursive;
  font-size:clamp(14px,3.6vw,17px);
  text-align:center;
  margin:14px auto 0;
}
.closing-signature{
  font-family:'Caveat',cursive;
  font-size:26px;
  text-align:center;
  color:var(--indigo);
  margin-top:4px;
}

#confetti-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:40;
}

#nav-controls{
  position:absolute;
  bottom:max(16px, env(safe-area-inset-bottom));
  left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  gap:16px;
  z-index:60;
}
#nav-prev, #nav-next{
  width:42px; height:42px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
  transition:opacity .2s ease, transform .15s ease;
}
#nav-prev:active, #nav-next:active{ transform:scale(.92); }
#nav-prev[disabled], #nav-next[disabled]{ opacity:.25; pointer-events:none; }

#nav-dots{
  display:flex; gap:6px;
  padding:6px 10px;
  background:rgba(0,0,0,.2);
  border-radius:20px;
  backdrop-filter:blur(4px);
}
.nav-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:background .2s ease, transform .2s ease;
}
.nav-dot.active{
  background:#fff;
  transform:scale(1.3);
}

@media (min-width:700px){
  .paper-sheet{ padding:40px 50px; }
  .deco{ font-size:40px; }
}

@media (max-height:600px){
  .paper-sheet{ height:92vh; padding:16px 16px; }
  .polaroid{ width:min(55vw,220px); }
}

@media (max-width:360px){
  .title-letter{ font-size:clamp(22px,8vw,34px); padding:4px 3px 1px; }
}