:root { --rose:#f43f5e; --rose-200:#fecdd3; --rose-400:#fb7185; }
body { margin:0; overflow-x:hidden; font-family: 'Poppins', sans-serif; background: linear-gradient(180deg,#fff1f2 0%, #ffe4e6 40%, #fff 100%); color:#1f2937; }
html, body { height:100%; }
.font-display{ font-family: 'Playfair Display', serif; }
.font-cursive{ font-family: 'Great Vibes', cursive; }

/* Floating hearts overlay */
#heartsOverlay{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.heart{ position:absolute; width:20px; height:20px; transform: rotate(45deg); opacity:0; }
.heart::before,.heart::after{ content:""; position:absolute; width:20px; height:20px; background:inherit; border-radius:50%; }
.heart::before{ left:-10px; }
.heart::after{ top:-10px; }
@keyframes floatUp{ 0%{ transform:translateY(0) rotate(45deg) scale(.8); opacity:0;} 10%{opacity:.9} 100%{ transform:translateY(-120vh) rotate(45deg) scale(1.4); opacity:0;}}

/* Simple fade-in */
.fade-in{ opacity:0; transform:translateY(16px); animation:fadeIn 900ms ease-out forwards; }
@keyframes fadeIn{ to{ opacity:1; transform:none; } }

/* Slider */
.slider-track{ display:flex; transition: transform .5s ease; }
.slide{ min-width:100%; flex:0 0 100%; }
.dot{ width:10px; height:10px; border-radius:50%; background:#fecdd3; }
.dot.active{ background:#f43f5e; }

/* Cute modal */
.modal{ position:fixed; inset:0; background:rgba(255, 228, 230, .6); backdrop-filter: blur(6px); z-index:60; }
@keyframes popIn{ from{ transform:scale(.92); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Click burst hearts */
.click-heart{ position:absolute; width:16px; height:16px; transform: rotate(45deg); pointer-events:none; opacity:0; z-index:70; }
.click-heart::before,.click-heart::after{ content:""; position:absolute; width:16px; height:16px; background:inherit; border-radius:50%; }
.click-heart::before{ left:-8px; }
.click-heart::after{ top:-8px; }
@keyframes clickFloat{ from{ transform: translate(0,0) rotate(45deg) scale(.8); opacity:1;} to{ transform: translate(var(--dx,0px), var(--dy,-110px)) rotate(45deg) scale(1.2); opacity:0;} }

/* Emoji particles for button bursts */
.particle{ position:absolute; pointer-events:none; z-index:70; opacity:0; will-change: transform, opacity; }
@keyframes particleFloat{ from{ transform: translate(0,0) scale(.9); opacity:1;} to{ transform: translate(var(--dx,0px), var(--dy,-110px)) scale(1.15); opacity:0;} }

/* Intro modal */
.intro-modal{ position:fixed; inset:0; background:rgba(255,240,245,.78); backdrop-filter: blur(10px); z-index:80; }
.big-heart{ position:relative; width:140px; height:140px; transform: rotate(45deg); background: radial-gradient(circle at 30% 30%, #ff99ac, #f43f5e); border-radius:10px; filter: drop-shadow(0 12px 24px rgba(244,63,94,.35)); animation: heartBeat 1.2s ease-in-out infinite; }
.big-heart::before, .big-heart::after{ content:""; position:absolute; width:140px; height:140px; background:inherit; border-radius:50%; }
.big-heart::before{ left:-70px; }
.big-heart::after{ top:-70px; }
@keyframes heartBeat{ 0%, 40%, 100%{ transform: rotate(45deg) scale(1);} 20%{ transform: rotate(45deg) scale(1.12);} 60%{ transform: rotate(45deg) scale(1.06);} }

/* Mini hearts for assembly */
.mini-heart{ position:absolute; transform: rotate(45deg); pointer-events:none; border-radius:2px; transition: left 900ms cubic-bezier(.2,.8,.2,1), top 900ms cubic-bezier(.2,.8,.2,1), opacity 900ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.mini-heart::before, .mini-heart::after{ content:""; position:absolute; background:inherit; border-radius:50%; width:100%; height:100%; }
.mini-heart::before{ left:-50%; }
.mini-heart::after{ top:-50%; }

/* Hero background images */
.hero-bg-img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:1; transition: opacity 800ms ease, transform 8s ease; transform: scale(1.03);} 
.hero-bg-img.active{ opacity:1; transform: scale(1.08);} 

/* Fullscreen burst */
@keyframes burstOut{ from{ transform: translate(-50%,-50%) scale(.5); opacity:1;} to{ transform: translate(var(--dx), var(--dy)) scale(1); opacity:0;} }

/* Soft white text shadow for readability on busy backgrounds */
.soft-white-shadow{ text-shadow: 0 2px 10px rgba(255,255,255,.70), 0 0 2px rgba(255,255,255,.65); }

/* Cute Polaroid Collage */
.polaroid{ position:relative; background:rgba(255,255,255,.95); border:1px solid rgba(244,63,94,.12); border-bottom-width:3px; border-radius:12px; padding:8px; box-shadow: 0 10px 18px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06); transform: rotate(var(--rot, 0deg)); transition: transform .25s ease, box-shadow .25s ease; }
.polaroid:hover{ transform: rotate(calc(var(--rot, 0deg) * .6)) translateY(-2px); box-shadow: 0 14px 22px rgba(16,24,40,.14), 0 4px 8px rgba(16,24,40,.08); }
.polaroid img{ width:100%; height:160px; object-fit:cover; border-radius:8px; display:block; }
@media(min-width: 640px){ .polaroid img{ height:190px; } }
@media(min-width: 768px){ .polaroid img{ height:210px; } }
.polaroid .tape{ position:absolute; top:-10px; left:22px; width:48px; height:16px; background: rgba(254,205,211,.88); border:1px solid rgba(244,63,94,.18); transform: rotate(var(--trot, -4deg)); border-radius:3px; box-shadow: 0 2px 4px rgba(16,24,40,.1); }
.polaroid .sticker{ position:absolute; right:-8px; bottom:-6px; font-size:18px; transform: rotate(12deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }

@media (prefers-reduced-motion: reduce){
  .fade-in{ animation:none; opacity:1; transform:none; }
}