
:root{
  --blush:#e78ba8; --rose:#c95f83; --blue:#86abc8; --sage:#9eaf98;
  --silver:#b9bec5; --cream:#fffaf7; --ink:#4b4549;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(160deg,#fff8f6,#eef4f7 45%,#f3f4ee);color:var(--ink);font-family:Montserrat,Arial,sans-serif;overflow-x:hidden}
body.locked{overflow:hidden}
.hidden{display:none!important}
.section{position:relative;min-height:100vh;padding:78px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
h1,h2{font-family:"Cormorant Garamond",serif;margin:0}
h1{font-size:clamp(3rem,10vw,6rem);line-height:.9}
h2{font-size:clamp(2.5rem,8vw,5rem);line-height:1}
.script{font-family:"Great Vibes",cursive;font-size:clamp(2.5rem,9vw,5.5rem);color:var(--rose);margin:14px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:700}
.soft{font-family:"Cormorant Garamond",serif;font-size:1.45rem;font-style:italic}
.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.85);box-shadow:0 20px 50px rgba(70,58,65,.16)}
.top-actions{position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;z-index:50;display:flex;gap:10px}
.round-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(204,99,133,.88);color:#fff;font-weight:800;font-size:16px;box-shadow:0 8px 20px rgba(0,0,0,.15);cursor:pointer}
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow:hidden;background:#f7e9ec}
.intro-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
transform:scale(.88);
background:#f8f4f5;
filter:saturate(.92)
}
.intro-shade{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.12),rgba(255,245,248,.25))}
.intro-card{position:relative;text-align:center;width:min(90%,620px);padding:24px;color:#554b50;text-shadow:0 2px 18px rgba(255,255,255,.8)}
.intro-date{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.35rem}
.enter-btn{border:0;border-radius:999px;padding:15px 28px;background:linear-gradient(135deg,var(--rose),var(--blue));color:white;font-weight:700;letter-spacing:.08em;box-shadow:0 12px 30px rgba(168,76,111,.28);animation:pulse 2.4s infinite;cursor:pointer}
.silver-crown{width:150px;margin:0 auto 14px;animation:crownFloat 3s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(100,105,112,.35))}
.silver-crown svg{width:100%;display:block}
.silver-crown circle{animation:gem 1.8s ease-in-out infinite;transform-origin:center}
.hero{padding-top:100px;overflow:hidden}
.hero-photo-wrap{width:min(70vw,500px);height:min(44vh,400px);border-radius:38px;overflow:hidden;box-shadow:0 30px 70px rgba(25,20,22,.26);margin:0 auto}
.hero-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 28%;animation:faceSafeZoom 14s ease-in-out infinite alternate}
.hero-content{width:min(90%,620px);padding:28px 22px;text-align:center;border-radius:30px;margin-top:-20px;z-index:2}
.mini-crown{font-size:42px;color:#a7adb4;text-shadow:0 0 10px #fff;animation:crownFloat 3s ease-in-out infinite}
.date-line{font-family:"Cormorant Garamond",serif;font-size:1.7rem;font-weight:700}
.countdown-section{background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.9),transparent 42%)}
.section-heading{text-align:center;margin-bottom:36px}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(72px,150px));gap:14px;width:min(94%,700px)}
.time-card{padding:25px 10px;border-radius:24px;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(232,223,228,.72));border:1px solid white;box-shadow:0 15px 32px rgba(87,67,78,.12)}
.time-card strong{display:block;font-family:"Cormorant Garamond",serif;font-size:clamp(2.5rem,9vw,5rem);color:var(--rose);line-height:.9}
.time-card span{text-transform:uppercase;letter-spacing:.15em;font-size:.65rem;font-weight:700}
.gallery-section{background:linear-gradient(180deg,#f5f1ee,#edf3f0)}
.gallery{width:min(92vw,780px);height:min(70vh,780px);position:relative;border-radius:34px;overflow:hidden;box-shadow:0 28px 70px rgba(31,27,29,.26)}
.slide{position:absolute;inset:0;padding:0;border:0;background:none;opacity:0;transition:opacity 1s ease;cursor:zoom-in}
.slide.active{opacity:1;z-index:2}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center 22%;animation:faceSafeZoom 12s ease-in-out infinite alternate}
.slide:nth-child(1) img{object-position:center 30%}
.slide:nth-child(2) img{object-position:center 18%}
.slide:nth-child(3) img{object-position:center 24%}
.slide:nth-child(4) img{object-position:center 20%}
.slide:nth-child(5) img{object-position:center 18%}
.slide:nth-child(6) img{object-position:center 20%}
.slide:nth-child(7) img{object-position:center 18%}
.gallery-controls{display:flex;align-items:center;gap:16px;margin-top:24px}
.gallery-controls button{border:0;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--rose);font-size:30px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:#c9c9c9;padding:0}
.dot.active{background:var(--rose);transform:scale(1.3)}
.celebration{min-height:70vh;background:linear-gradient(145deg,#f5e4e9,#e8f0f4,#edf2e8)}
.celebration-card{text-align:center;border-radius:34px;padding:48px 28px;width:min(92%,720px)}
.floral-mark{font-size:35px;color:var(--rose);letter-spacing:.3em}
.calendar-section{min-height:70vh}
.calendar-buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.calendar-buttons a{padding:15px 22px;border-radius:999px;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--rose),var(--blue));font-weight:700;box-shadow:0 10px 24px rgba(96,82,89,.18)}
.closing{padding:70px 20px;min-height:100vh;overflow:hidden;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center}
.closing>img{position:relative;width:min(82vw,620px);height:min(52vh,500px);object-fit:cover;object-position:center 14%;border-radius:32px;box-shadow:0 30px 70px rgba(25,20,22,.28);z-index:1}
.closing-overlay{position:absolute;inset:0;background:linear-gradient(rgba(28,23,25,.18),rgba(28,23,25,.55));pointer-events:none}
.closing-copy{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);padding:30px 24px;max-width:700px;width:min(90%,700px);z-index:2;background:rgba(20,20,20,.28);backdrop-filter:blur(8px);border-radius:24px}
.closing-copy p{font-family:"Cormorant Garamond",serif;font-size:1.5rem}
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(10,8,9,.94);display:none;place-items:center;padding:20px}
.lightbox.open{display:grid}
.lightbox img{max-width:95vw;max-height:88vh;object-fit:contain}
.lightbox button{position:absolute;top:18px;right:20px;border:0;background:transparent;color:#fff;font-size:44px}
#petals,#sparkles{position:fixed;inset:0;pointer-events:none;z-index:35;overflow:hidden}
.petal{position:absolute;top:-12vh;width:18px;height:14px;border-radius:70% 30% 70% 30%;background:linear-gradient(135deg,#ffd6e0,#e889a8);opacity:.78;animation:fall linear infinite}
.spark{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 8px 3px rgba(255,255,255,.75);animation:twinkle ease-in-out infinite}
@keyframes fall{to{transform:translate3d(var(--drift),115vh,0) rotate(680deg)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.4)}}
@keyframes pulse{50%{transform:scale(1.045);box-shadow:0 0 0 8px rgba(255,255,255,.18),0 12px 30px rgba(168,76,111,.35)}}
@keyframes crownFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes gem{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.25);opacity:1}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-1.2%,1%,0)}}
@media(max-width:650px){
  .section{padding:72px 14px}
  .countdown{grid-template-columns:repeat(2,1fr);max-width:360px}
  .hero-photo-wrap{height:64vh;border-radius:28px}
  .hero-content{margin-top:-55px}
  .gallery{height:68vh}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


.frog-friend{
  position:fixed;
  right:16px;
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:55;
  width:112px;
  height:122px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transform-origin:center bottom;
  filter:drop-shadow(0 10px 12px rgba(55,75,57,.22));
}
.frog-svg{width:100%;height:100%;display:block;overflow:visible}
.frog-message{
  position:absolute;
  right:82px;
  top:5px;
  min-width:82px;
  padding:8px 11px;
  border-radius:16px 16px 4px 16px;
  background:rgba(255,255,255,.94);
  color:#5f6f60;
  font:700 .72rem/1.1 Montserrat,Arial,sans-serif;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(8px) scale(.9);
  transition:.25s ease;
  pointer-events:none;
}
.frog-friend:hover .frog-message,
.frog-friend:focus-visible .frog-message,
.frog-friend.show-message .frog-message{
  opacity:1;
  transform:translateY(0) scale(1);
}
.frog-eyes{
  transform-origin:90px 79px;
  animation:frogBlink 5s infinite;
}
.frog-crown{
  transform-origin:90px 50px;
  animation:frogCrownShine 2.6s ease-in-out infinite;
}
.frog-friend.hop{animation:frogHop .7s cubic-bezier(.22,.75,.35,1)}
.frog-friend.hop .frog-smile{animation:frogSmile .7s ease}
.frog-tap-sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.frog-friend.hop .frog-tap-sparkles::before,
.frog-friend.hop .frog-tap-sparkles::after{
  content:"✦";
  position:absolute;
  color:#fff;
  text-shadow:0 0 8px #fff,0 0 12px #d6a8b8;
  animation:frogSpark .7s ease-out forwards;
}
.frog-friend.hop .frog-tap-sparkles::before{left:4px;top:28px}
.frog-friend.hop .frog-tap-sparkles::after{right:4px;top:16px;animation-delay:.08s}
@keyframes frogBlink{
  0%,45%,49%,100%{transform:scaleY(1)}
  47%{transform:scaleY(.08)}
}
@keyframes frogCrownShine{
  0%,100%{transform:rotate(-2deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-3px)}
}
@keyframes frogHop{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-58px) rotate(-7deg)}
  60%{transform:translateY(-20px) rotate(5deg)}
  82%{transform:translateY(-7px) rotate(-2deg)}
}
@keyframes frogSmile{
  50%{transform:scaleX(1.15);transform-origin:center}
}
@keyframes frogSpark{
  from{opacity:1;transform:translateY(0) scale(.8) rotate(0)}
  to{opacity:0;transform:translateY(-40px) scale(1.8) rotate(80deg)}
}
@media(max-width:650px){
  .frog-friend{width:88px;height:98px;right:8px;bottom:max(8px,env(safe-area-inset-bottom))}
  .frog-message{right:64px;top:0;min-width:72px;font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){
  .frog-eyes,.frog-crown{animation:none}
}

@keyframes faceSafeZoom{
  from{transform:scale(1.01)}
  to{transform:scale(1.055)}
}

@media(max-width:650px){
  .hero-photo-wrap img{object-position:center 24%}
  .gallery{height:62vh}
  .slide img{object-position:center 18%}
  .slide:nth-child(1) img{object-position:center 28%}
  .slide:nth-child(3) img{object-position:center 20%}
  .closing>img{object-position:center 12%}
}

.music-section{min-height:78vh;background:linear-gradient(145deg,#f9edf1,#edf3f6,#eef3ea)}
.music-card{width:min(92%,720px);padding:42px 24px;border-radius:34px;text-align:center}
.music-card h2{font-size:clamp(2.7rem,8vw,4.8rem)}
.music-title{font-family:"Cormorant Garamond",serif;font-size:1.35rem;margin:12px 0 24px}
.music-cover{width:min(100%,560px);min-height:290px;margin:auto;border:1px solid rgba(255,255,255,.9);border-radius:28px;background:linear-gradient(145deg,rgba(231,139,168,.88),rgba(134,171,200,.82),rgba(158,175,152,.85));box-shadow:0 18px 40px rgba(75,69,73,.2);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;position:relative;overflow:hidden}
.music-cover::before,.music-cover::after{content:"✦";position:absolute;font-size:42px;color:rgba(255,255,255,.55)}
.music-cover::before{top:24px;left:30px}.music-cover::after{right:32px;bottom:22px}
.music-icon{font-size:64px;line-height:1;text-shadow:0 6px 18px rgba(0,0,0,.15)}
.play-circle{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;padding-left:5px;background:rgba(255,255,255,.92);color:var(--rose);font-size:28px;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.music-cover strong{font-size:1rem;letter-spacing:.18em;text-transform:uppercase}
.music-cover:hover .play-circle,.music-cover:focus-visible .play-circle{transform:scale(1.08)}
.play-circle{transition:transform .2s ease}
.music-player{width:min(100%,560px);aspect-ratio:16/9;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px rgba(75,69,73,.2)}
.music-player iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:650px){.music-cover{min-height:240px}.music-card{padding:34px 16px}}
