/* ===== GLOBAL RESET & PAGE FRAMEWORK =====
   Shared by every page. Individual page look-and-feel lives in
   css/<page>.css — edit those freely, this file just handles the
   reset and the show/hide mechanics that make navigation reload-free. */

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
html,body{width:100%;height:100%;overflow:hidden;background:#0d0508;}

#app{position:relative;width:100vw;height:100vh;height:var(--app-height, 100vh);overflow:hidden;background:#000;}

.page{
  position:absolute;inset:0;width:100%;height:100%;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;opacity:0;
}
.page.active{display:flex;}
.page.block.active{display:block;}

/* ===== shared effects (mute button, sparkle trail, ambient particles, ripple) ===== */
.mute-btn{position:fixed;top:16px;right:16px;z-index:9999;width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(255,255,255,.35);backdrop-filter:blur(10px);font-size:20px;cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.15);transition:transform .25s;}
.mute-btn:hover{transform:scale(1.1);}

.cursor-sparkle{position:fixed;left:0;top:0;pointer-events:none;z-index:9998;font-size:14px;
  transform:translate(-50%,-50%);animation:sparkle-fade .7s ease-out forwards;}
@keyframes sparkle-fade{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(0);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.3) translateY(-30px);}
}

.ambient-particles{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;}
.ambient-particles span{position:absolute;bottom:-40px;opacity:0;animation-name:ambient-float;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes ambient-float{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0;}
  10%{opacity:.6;}
  50%{transform:translateY(-55vh) translateX(15px) rotate(180deg);}
  90%{opacity:.4;}
  100%{transform:translateY(-110vh) translateX(-10px) rotate(360deg);opacity:0;}
}

.ripple-fx{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.7);
  transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:ripple-grow .6s ease-out forwards;}
@keyframes ripple-grow{to{transform:translate(-50%,-50%) scale(18);opacity:0;}}

/* elements that spawn a .ripple-fx child need clipping + relative anchor */
#page-pin .keypad button, #page-cake button, #page-index button, #page-flower button,
#page-letter button, #page-gallery button, #page-final button, #page-box button,
#page-reasons button, #page-timeline button{position:relative;overflow:hidden;}

/* subtle global page-transition polish (navigation.js toggles opacity; this adds scale) */
.page{transform:scale(1);transition:transform .4s ease;}
.page:not(.active){transform:scale(.97);}

/* ===== achievement toast ===== */
.achievement-toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-120%);z-index:10001;
  background:rgba(20,20,30,.9);color:white;padding:12px 20px;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.3);
  font-size:13px;text-align:center;max-width:80vw;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.achievement-toast strong{display:block;font-size:13px;color:#ffd447;margin-bottom:2px;}
.achievement-toast.show{transform:translate(-50%,0);}

/* ===== loading curtain between pages (anticipation beat) ===== */
.loading-curtain{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0);pointer-events:none;opacity:0;transition:opacity .25s;}
.loading-curtain.show{opacity:1;}
.loading-curtain .pulse-heart{font-size:32px;animation:loading-pulse .6s ease-in-out infinite;opacity:.85;}
@keyframes loading-pulse{0%,100%{transform:scale(.8);opacity:.5;}50%{transform:scale(1.15);opacity:1;}}

/* ===== responsive ===== */
@media (max-width: 480px){
  .card, .container{padding:20px !important;width:92% !important;}
  h1{font-size:24px !important;}
  h2{font-size:20px !important;}
  .mute-btn{width:40px;height:40px;font-size:17px;top:10px;right:10px;}
}
@media (max-height: 640px){
  .card, .container{padding:14px !important;}
}
@media (max-width: 340px){
  #page-letter .envelope{width:220px;height:145px;}
  #page-reasons #reasonHeartBtn{font-size:40px;}
}

/* Premium responsive */
*{box-sizing:border-box}img,video{max-width:100%;height:auto}body{overflow-x:hidden}
.container{width:min(92%,1100px);margin:auto}
h1{font-size:clamp(2rem,5vw,4rem)}h2{font-size:clamp(1.5rem,4vw,3rem)}p{font-size:clamp(1rem,2vw,1.1rem)}
button,.btn{min-height:48px;padding:.8rem 1.4rem;border-radius:14px}
@media(max-width:768px){section{padding:60px 16px}}