/* ============================================================ HAPPY BIRTHDAY — ROMANTIC MOBILE EXPERIENCE A note on structure: everything is mobile-first & portrait- only by design. Colors, type and spacing all live in the :root variables below if you want to retune the palette. ============================================================ */
/* ---------- Design tokens ---------- */
 :root{
    /* palette — recolored to match the "Birthday Surprise" site's palette */
     --cream: #FFF6EA;
     --cream-deep: #FFE8CF;
     --blush: #FFD3E0;
     --pink: #FF8FB3;
     --rose: #FFB1CA;
     --rose-deep: #FF8FB3;
     --lavender: #E6D8FF;
     --lavender-deep:#C9A0E8;
     --gold: #F2BF4C;
     --gold-light: #FFF2B0;
     --plum: #6D4C5C;
     --plum-soft: #A9899A;
     --white: #FFFDF9;
     --peach: #FFD9B3;
     --baby-blue: #C9E9FF;
    /* glass */
     --glass-bg: rgba(255, 255, 255, 0.55);
     --glass-border: rgba(255, 255, 255, 0.65);
     --glass-blur: 18px;
    /* shadows */
     --shadow-soft: 0 20px 45px rgba(255, 143, 179, 0.16);
     --shadow-lift: 0 10px 30px rgba(201, 160, 232, 0.22);
     --glow-gold: 0 0 30px rgba(242, 191, 76, 0.55);
     --shadow-tint: rgba(255, 143, 179, 0.28);
    /* type */
     --font-display: 'Cormorant Garamond', serif;
     --font-script: 'Parisienne', cursive;
     --font-body: 'Jost', sans-serif;
    /* radii */
     --r-lg: 30px;
     --r-md: 22px;
     --r-sm: 14px;
    /* layout */
     --page-max: 480px;
     --pad: 24px;
    /* aliases: let components ported from the Birthday Surprise site (opening, mascot bunny, ending wish card, burst/confetti effects) resolve against this same palette/system without a second set of tokens */
     --pink-deep: var(--rose-deep);
     --text: var(--plum);
     --text-soft: var(--plum-soft);
     --glass: var(--glass-bg);
     --glass-brd: var(--glass-border);
     --radius-lg: var(--r-lg);
     --radius-md: var(--r-md);
     --radius-sm: var(--r-sm);
}
/* ---------- Reset ---------- */
 *, *::before, *::after{
     box-sizing: border-box;
}
 html, body{
     margin: 0;
     padding: 0;
     overscroll-behavior-y: none;
}
 body{
     font-family: var(--font-body);
     color: var(--plum);
     background: radial-gradient(circle at 20% 0%, var(--blush) 0%, transparent 55%), radial-gradient(circle at 85% 15%, var(--lavender) 0%, transparent 50%), radial-gradient(circle at 10% 90%, var(--gold-light) 0%, transparent 45%), var(--cream);
     min-height: 100vh;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
}
 h1,h2,h3,p{
     margin: 0;
}
 button{
     font-family: inherit;
     border: none;
     background: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
}
 img{
     max-width: 100%;
     display: block;
}
 a{
     color: inherit;
}
 ::selection{
     background: var(--pink);
     color: var(--white);
}
/* Center the mobile experience on any screen;
 keep it phone-shaped */
 #opening-screen, #main-content{
     max-width: var(--page-max);
     margin: 0 auto;
     position: relative;
}
 @media (min-width: 540px){
     body{
         background: linear-gradient(180deg, #2a1b28, #1c1220);
    }
     #opening-screen, #main-content{
         box-shadow: 0 0 90px rgba(0,0,0,0.35);
         background: var(--cream);
         min-height: 100vh;
    }
}
/* ---------- Portrait-only notice ---------- */
 #rotate-notice{
     display: none;
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: var(--plum);
     color: var(--cream);
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 40px;
     font-family: var(--font-display);
     font-size: 1.3rem;
}
 .rotate-icon{
     font-size: 2.5rem;
     margin-bottom: 14px;
     animation: rotateHint 1.8s ease-in-out infinite;
}
 @keyframes rotateHint{
     0%,100%{
         transform: rotate(0deg);
    }
     50%{
         transform: rotate(-90deg);
    }
}
 @media (orientation: landscape) and (max-height: 500px){
     #rotate-notice{
         display: flex;
    }
}
/* ============================================================ OPENING SCREEN ============================================================ */
 #opening-screen{
     position: fixed;
     inset: 0;
     z-index: 500;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease;
}
 #opening-screen.opening-hide{
     opacity: 0;
     transform: scale(1.08);
     filter: blur(18px);
     pointer-events: none;
}
 .opening-glow{
     position: absolute;
     width: 460px;
     height: 460px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255,255,255,0.9), var(--blush) 45%, transparent 70%);
     filter: blur(6px);
     animation: pulseGlow 4s ease-in-out infinite;
     z-index: 0;
}
 @keyframes pulseGlow{
     0%,100%{
         transform: scale(1);
         opacity: .8;
    }
     50%{
         transform: scale(1.12);
         opacity: 1;
    }
}
 .opening-content{
     position: relative;
     z-index: 2;
     padding: 0 28px;
}
 .opening-eyebrow{
     font-family: var(--font-display);
     color: var(--pink-deep);
     letter-spacing: 2px;
     text-transform: uppercase;
     font-size: 12px;
     margin-bottom: 14px;
     opacity: 0;
     animation: openingFadeIn .8s ease .2s forwards;
}
 .opening-text{
     font-family: var(--font-display);
     font-size: 22px;
     line-height: 1.5;
     color: var(--text);
     max-width: 300px;
     margin: 0 auto 34px;
     opacity: 0;
     animation: openingFadeIn 1s ease .5s forwards;
     text-shadow: 0 0 18px rgba(255,255,255,0.8);
}
 .opening-btn{
     opacity: 0;
     transform: translateY(14px);
     animation: openingBtnAppear .8s ease 2.4s forwards;
}
 @keyframes openingFadeIn{
     to{
         opacity: 1;
    }
}
 @keyframes openingBtnAppear{
     to{
         opacity: 1;
         transform: translateY(0);
    }
}
 .opening-bunny{
     position: absolute;
     bottom: 6%;
     z-index: 1;
     opacity: 0;
     animation: openingFadeIn 1s ease 1s forwards;
}
/* ========================================================= MASCOT BUNNY — signature illustration (pure CSS) ========================================================= */
 .mascot-bunny{
     position: relative;
     width: 92px;
     height: 96px;
     margin: 0 auto;
}
 .mascot-bunny.small{
     width: 66px;
     height: 70px;
     margin-bottom: 6px;
}
 .mascot-bunny .ear{
     position: absolute;
     width: 20px;
     height: 52px;
     background: linear-gradient(180deg, var(--white), var(--blush));
     border: 2px solid rgba(255,255,255,0.9);
     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
     top: -34px;
     box-shadow: inset 0 0 0 6px var(--pink-deep);
}
 .mascot-bunny .ear::after{
     content:"";
     position: absolute;
     inset: 8px 6px;
     background: var(--pink-deep);
     opacity: .55;
     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
 .mascot-bunny .ear.left{
     left: 14px;
     transform: rotate(-12deg);
}
 .mascot-bunny .ear.right{
     right: 14px;
     transform: rotate(12deg);
}
 .mascot-bunny .head{
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 88px;
     height: 76px;
     background: radial-gradient(circle at 35% 30%, #ffffff, var(--cream) 75%);
     border-radius: 50%;
     box-shadow: 0 10px 22px var(--shadow-tint);
}
 .mascot-bunny .cheek{
     position: absolute;
     width: 16px;
     height: 11px;
     background: var(--pink-deep);
     opacity: .55;
     border-radius: 50%;
     bottom: 20px;
}
 .mascot-bunny .cheek.left{
     left: 8px;
}
 .mascot-bunny .cheek.right{
     right: 8px;
}
 .mascot-bunny .eye{
     position: absolute;
     width: 7px;
     height: 9px;
     background: var(--text);
     border-radius: 50%;
     top: 32px;
}
 .mascot-bunny .eye.left{
     left: 26px;
}
 .mascot-bunny .eye.right{
     right: 26px;
}
 .mascot-bunny .nose{
     position: absolute;
     width: 9px;
     height: 7px;
     background: var(--pink-deep);
     border-radius: 50%;
     top: 42px;
     left: 50%;
     transform: translateX(-50%);
}
 .idle-bob{
     animation: bob 3.4s ease-in-out infinite;
}
 @keyframes bob{
     0%,100%{
         transform: translateY(0) rotate(0deg);
    }
     50%{
         transform: translateY(-8px) rotate(-2deg);
    }
}
/* ========================================================= GLOWING PILL BUTTON + RIPPLE (opening button, wish-send button) ========================================================= */
 .glow-btn{
     position: relative;
     overflow: hidden;
     padding: 16px 30px;
     border-radius: 999px;
     background: linear-gradient(135deg, var(--pink-deep), var(--gold));
     color: var(--white);
     font-family: var(--font-display);
     font-size: 17px;
     font-weight: 600;
     letter-spacing: .2px;
     box-shadow: 0 8px 24px var(--shadow-tint), 0 0 0 4px rgba(255,255,255,0.35) inset;
     transition: transform .18s ease, box-shadow .18s ease;
}
 .glow-btn:active{
     transform: scale(0.94);
     box-shadow: 0 4px 14px var(--shadow-tint), 0 0 0 4px rgba(255,255,255,0.35) inset;
}
 .glow-btn span{
     position: relative;
     z-index: 2;
}
 .glow-btn::before{
     content: "";
     position: absolute;
     inset: -40%;
     background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.55), transparent 30%);
     animation: btnShine 3.2s linear infinite;
     opacity: .8;
}
 @keyframes btnShine{
     to{
         transform: rotate(360deg);
    }
}
 .ripple{
     position: absolute;
     border-radius: 50%;
     background: rgba(255,255,255,0.65);
     transform: scale(0);
     pointer-events: none;
     animation: rippleOut .6s ease-out forwards;
}
 @keyframes rippleOut{
     to{
         transform: scale(1);
         opacity: 0;
    }
}
 @keyframes pulseGlowBtn{
     0%,100%{
         box-shadow: 0 10px 35px rgba(255, 143, 179, 0.45);
    }
     50%{
         box-shadow: 0 10px 45px rgba(255, 143, 179, 0.75);
    }
}
/* ============================================================ AMBIENT BACKGROUND DECORATIONS ============================================================ */
 #ambient-particles{
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 5;
     overflow: hidden;
}
 .ambient-item{
     position: absolute;
     bottom: -40px;
     font-size: var(--size, 18px);
     opacity: 0;
     animation: floatUp var(--dur, 12s) linear forwards;
     will-change: transform, opacity;
     filter: drop-shadow(0 2px 6px rgba(255,143,179,0.15));
}
 @keyframes floatUp{
     0%{
         opacity: 0;
         transform: translate(0, 0) rotate(0deg);
    }
     8%{
         opacity: 0.85;
    }
     50%{
         transform: translate(var(--drift, 30px), -55vh) rotate(180deg);
    }
     92%{
         opacity: 0.7;
    }
     100%{
         opacity: 0;
         transform: translate(calc(var(--drift, 30px) * 2), -110vh) rotate(360deg);
    }
}
/* ---------- Tap-anywhere burst layer ---------- */
 #tap-effect-layer{
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 400;
     overflow: hidden;
}
 .tap-heart{
     position: absolute;
     font-size: 20px;
     animation: tapHeartRise 1.1s ease-out forwards;
     will-change: transform, opacity;
}
 @keyframes tapHeartRise{
     0%{
         opacity: 1;
         transform: translate(-50%,-50%) scale(0.4) translateY(0);
    }
     100%{
         opacity: 0;
         transform: translate(-50%,-50%) scale(1.1) translateY(-90px);
    }
}
 .tap-sparkle{
     position: absolute;
     font-size: 13px;
     animation: tapSparkle 0.8s ease-out forwards;
     will-change: transform, opacity;
}
 @keyframes tapSparkle{
     0%{
         opacity: 1;
         transform: translate(-50%,-50%) scale(0.3) rotate(0deg);
    }
     100%{
         opacity: 0;
         transform: translate(calc(-50% + var(--sx,20px)), calc(-50% + var(--sy,-20px))) scale(1) rotate(120deg);
    }
}
 .tap-ripple{
     position: absolute;
     width: 16px;
     height: 16px;
     border: 1.5px solid var(--rose);
     border-radius: 50%;
     transform: translate(-50%,-50%);
     animation: tapRipple 0.7s ease-out forwards;
}
 @keyframes tapRipple{
     0%{
         opacity: 0.6;
         width: 10px;
         height: 10px;
    }
     100%{
         opacity: 0;
         width: 90px;
         height: 90px;
    }
}
/* ============================================================ MUSIC TOGGLE ============================================================ */
 #music-toggle{
     position: fixed;
     top: max(18px, env(safe-area-inset-top));
     right: 18px;
     z-index: 600;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--glass-bg);
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--glass-border);
     box-shadow: var(--shadow-lift);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.6s ease, transform 0.3s ease;
}
 #music-toggle.visible{
     opacity: 1;
     pointer-events: auto;
}
 #music-toggle:active{
     transform: scale(0.9);
}
 .icon-note{
     width: 19px;
     height: 19px;
     fill: none;
     stroke: var(--rose-deep);
     stroke-width: 1.8;
}
 #music-toggle.playing .icon-note{
     animation: noteWiggle 1.6s ease-in-out infinite;
}
 @keyframes noteWiggle{
     0%,100%{
         transform: rotate(0deg);
    }
     50%{
         transform: rotate(8deg);
    }
}
 #music-toggle.muted .icon-note{
     opacity: 0.4;
}
/* ============================================================ SHARED SECTION STYLES ============================================================ */
 #main-content{
     opacity: 0;
     visibility: hidden;
     transition: opacity 1s ease;
}
 #main-content.revealed{
     opacity: 1;
     visibility: visible;
}
 .section{
     position: relative;
     padding: 90px var(--pad) 70px;
     overflow: hidden;
}
 .section-glow{
     position: absolute;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255,143,179,0.35), transparent 70%);
     filter: blur(10px);
     top: -80px;
     right: -100px;
     pointer-events: none;
     z-index: 0;
}
 .eyebrow{
     font-size: 0.72rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--rose-deep);
     font-weight: 500;
     margin-bottom: 10px;
     opacity: 0.8;
     position: relative;
     z-index: 1;
}
 .section-title{
     font-family: var(--font-display);
     font-weight: 600;
     font-size: clamp(2rem, 8vw, 2.5rem);
     line-height: 1.15;
     margin-bottom: 14px;
     position: relative;
     z-index: 1;
}
 .section-subtitle{
     font-size: 0.92rem;
     color: var(--plum-soft);
     margin-bottom: 34px;
     position: relative;
     z-index: 1;
}
 .script-text{
     font-family: var(--font-script);
     font-size: 1.35em;
     color: var(--rose-deep);
     font-weight: 400;
}
 .heart-emoji{
     display: inline-block;
     animation: heartbeatEmoji 1.6s ease-in-out infinite;
}
 @keyframes heartbeatEmoji{
     0%,100%{
         transform: scale(1);
    }
     15%{
         transform: scale(1.2);
    }
     30%{
         transform: scale(1);
    }
     45%{
         transform: scale(1.15);
    }
     60%{
         transform: scale(1);
    }
}
/* generic scroll-reveal utility */
 [data-reveal]{
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.9s cubic-bezier(.2,.7,.3,1), transform 0.9s cubic-bezier(.2,.7,.3,1);
}
 [data-reveal].in-view{
     opacity: 1;
     transform: translateY(0);
}
/* ============================================================ HERO ============================================================ */
 .hero{
     padding-top: 60px;
     text-align: center;
}
 .hero-illustration{
     position: relative;
     height: 150px;
     margin-bottom: 10px;
}
 .hero-heart-svg{
     width: 108px;
     height: 108px;
     margin: 0 auto;
     animation: heroFloat 4.5s ease-in-out infinite, heartbeatEmoji 2.6s ease-in-out infinite;
     filter: drop-shadow(0 12px 22px rgba(255,177,202,0.4));
}
 .hero-heart-svg path{
     fill: var(--rose);
}
 @keyframes heroFloat{
     0%,100%{
         transform: translateY(0);
    }
     50%{
         transform: translateY(-12px);
    }
}
 .hero-sparkle{
     position: absolute;
     font-size: 1.1rem;
     animation: sparkleTwinkle 2.4s ease-in-out infinite;
}
 .hero-sparkle.s1{
     top: 6px;
     left: 26%;
     animation-delay: 0.2s;
}
 .hero-sparkle.s2{
     top: 20px;
     right: 22%;
     animation-delay: 0.8s;
}
 .hero-sparkle.s3{
     bottom: 10px;
     right: 32%;
     animation-delay: 1.3s;
}
 @keyframes sparkleTwinkle{
     0%,100%{
         opacity: 0.3;
         transform: scale(0.8);
    }
     50%{
         opacity: 1;
         transform: scale(1.15);
    }
}
 .hero-title{
     font-family: var(--font-display);
     font-weight: 600;
     font-size: clamp(2.1rem, 9vw, 2.7rem);
     line-height: 1.2;
     margin-bottom: 22px;
     position: relative;
     z-index: 1;
}
 .hero-message{
     font-size: 1rem;
     color: var(--plum-soft);
     max-width: 340px;
     margin: 0 auto;
     min-height: 5.5em;
     position: relative;
     z-index: 1;
}
 .hero-message.typing-done{
     min-height: 0;
}
 .scroll-cue{
     margin-top: 50px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     opacity: 0.55;
}
 .scroll-cue span{
     width: 20px;
     height: 32px;
     border: 1.5px solid var(--rose-deep);
     border-radius: 12px;
     position: relative;
}
 .scroll-cue span::after{
     content: '';
     position: absolute;
     top: 6px;
     left: 50%;
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: var(--rose-deep);
     transform: translateX(-50%);
     animation: scrollDot 1.6s ease-in-out infinite;
}
 @keyframes scrollDot{
     0%{
         opacity: 1;
         top: 6px;
    }
     70%{
         opacity: 0;
         top: 18px;
    }
     100%{
         opacity: 0;
         top: 6px;
    }
}
 .scroll-cue p{
     font-size: 0.65rem;
     letter-spacing: 2px;
     text-transform: uppercase;
}
/* ============================================================ LOVE LETTER / ENVELOPE ============================================================ */
 .letter-section{
     text-align: center;
}
 .envelope-wrap{
     margin: 20px auto 46px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
}
 .envelope{
     position: relative;
     width: 220px;
     height: 145px;
     cursor: pointer;
     perspective: 900px;
}
 .envelope-back{
     position: absolute;
     inset: 0;
     background: linear-gradient(155deg, var(--rose), var(--rose-deep));
     border-radius: 10px;
     box-shadow: var(--shadow-soft);
}
 .envelope-letter-peek{
     position: absolute;
     left: 10px;
     right: 10px;
     top: -6px;
     height: 120px;
     background: linear-gradient(180deg, #fffdfa, var(--cream-deep));
     border-radius: 6px;
     box-shadow: 0 -3px 10px rgba(0,0,0,0.08);
     transition: transform 0.9s cubic-bezier(.2,.7,.2,1);
     transform: translateY(0);
     z-index: 1;
}
 .envelope.is-open .envelope-letter-peek{
     transform: translateY(-64px);
}
 .envelope-flap{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 78px;
     background: linear-gradient(155deg, var(--rose-deep), var(--rose));
     clip-path: polygon(0 0, 100% 0, 50% 90%);
     transform-origin: top center;
     border-radius: 10px 10px 0 0;
     transition: transform 0.7s cubic-bezier(.3,.6,.3,1);
     z-index: 2;
     box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
 .envelope.is-open .envelope-flap{
     transform: rotateX(180deg);
}
 .envelope-seal{
     position: absolute;
     top: 44px;
     left: 50%;
     transform: translateX(-50%);
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--gold);
     color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     box-shadow: 0 3px 8px rgba(0,0,0,0.2);
     z-index: 3;
     transition: opacity 0.4s ease, transform 0.4s ease;
}
 .envelope.is-open .envelope-seal{
     opacity: 0;
     transform: translateX(-50%) scale(0.3);
}
 .envelope:active .envelope-back{
     transform: scale(0.97);
}
 .tap-hint{
     font-size: 0.78rem;
     color: var(--plum-soft);
     letter-spacing: 0.5px;
     animation: hintPulse 2s ease-in-out infinite;
}
 .tap-hint.hidden{
     display: none;
}
 @keyframes hintPulse{
     0%,100%{
         opacity: 0.5;
    }
     50%{
         opacity: 1;
    }
}
 .letter-paper{
     max-width: 360px;
     margin: 0 auto;
     background: var(--glass-bg);
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--glass-border);
     border-radius: var(--r-lg);
     padding: 34px 26px;
     text-align: left;
     box-shadow: var(--shadow-soft);
     opacity: 0;
     max-height: 0;
     overflow: hidden;
     transform: translateY(20px) rotate(-1deg);
     transition: opacity 0.8s ease, transform 0.8s ease, max-height 0.9s ease, padding 0.9s ease;
}
 .letter-paper.is-visible{
     opacity: 1;
     max-height: 900px;
     transform: translateY(0) rotate(0.3deg);
     animation: paperSettle 6s ease-in-out infinite;
}
 @keyframes paperSettle{
     0%,100%{
         transform: rotate(0.3deg);
    }
     50%{
         transform: rotate(-0.3deg);
    }
}
 .letter-greeting{
     font-family: var(--font-display);
     font-style: italic;
     font-size: 1.3rem;
     margin-bottom: 16px;
}
 .letter-paper p{
     margin-bottom: 16px;
     font-size: 0.95rem;
     color: var(--plum-soft);
}
 .letter-signature{
     font-family: var(--font-script);
     font-size: 1.5rem;
     color: var(--rose-deep);
     margin-top: 10px;
}
/* ============================================================ MEMORY GALLERY ============================================================ */
 .gallery-section{
     text-align: center;
}
 .gallery-grid{
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px 16px;
     max-width: 380px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
}
 .polaroid{
     background: var(--white);
     padding: 10px 10px 26px;
     border-radius: 10px;
     box-shadow: var(--shadow-soft);
     cursor: pointer;
     transform: rotate(var(--rot, -3deg));
     transition: transform 0.35s ease, box-shadow 0.35s ease;
     animation: polaroidFloat 5s ease-in-out infinite;
     animation-delay: var(--delay, 0s);
     opacity: 0;
}
 .polaroid.in-view{
     animation: polaroidFloat 5s ease-in-out infinite, polaroidIntro 0.8s ease forwards;
     animation-delay: var(--delay, 0s), var(--delay, 0s);
}
 @keyframes polaroidIntro{
     from{
         opacity: 0;
         transform: translateY(20px) rotate(var(--rot,-3deg)) scale(0.9);
    }
     to{
         opacity: 1;
         transform: translateY(0) rotate(var(--rot,-3deg)) scale(1);
    }
}
 @keyframes polaroidFloat{
     0%,100%{
         transform: rotate(var(--rot,-3deg)) translateY(0);
    }
     50%{
         transform: rotate(var(--rot,-3deg)) translateY(-6px);
    }
}
 .polaroid:active{
     transform: scale(1.06) rotate(0deg);
     box-shadow: var(--shadow-lift);
}
 .polaroid-photo{
     width: 100%;
     aspect-ratio: 1/1;
     border-radius: 4px;
     background: linear-gradient(135deg, var(--blush), var(--lavender));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     overflow: hidden;
}
 .polaroid-photo img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .polaroid-caption{
     font-size: 0.72rem;
     text-align: center;
     margin-top: 10px;
     color: var(--plum-soft);
     font-family: var(--font-display);
     font-style: italic;
}
 .lightbox{
     position: fixed;
     inset: 0;
     z-index: 800;
     background: rgba(20, 10, 18, 0.92);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     padding: 30px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s ease;
}
 .lightbox.open{
     opacity: 1;
     pointer-events: auto;
}
 .lightbox-frame{
     width: 100%;
     max-width: 340px;
     aspect-ratio: 1/1;
     border-radius: var(--r-md);
     background: linear-gradient(135deg, var(--blush), var(--lavender));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3.5rem;
     transform: scale(0.85);
     transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
     overflow: hidden;
     box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
 .lightbox-frame img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .lightbox.open .lightbox-frame{
     transform: scale(1);
}
 .lightbox-caption{
     color: var(--cream);
     font-family: var(--font-display);
     font-style: italic;
     font-size: 1rem;
     text-align: center;
}
 .lightbox-close{
     position: absolute;
     top: max(20px, env(safe-area-inset-top));
     right: 20px;
     color: var(--cream);
     font-size: 2rem;
     line-height: 1;
     width: 40px;
     height: 40px;
}
/* ============================================================ REASONS ============================================================ */
 .reasons-grid{
     display: flex;
     flex-direction: column;
     gap: 14px;
     position: relative;
     z-index: 1;
}
 .reason-card{
     display: flex;
     align-items: center;
     gap: 14px;
     background: var(--glass-bg);
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--glass-border);
     border-radius: var(--r-md);
     padding: 18px 20px;
     box-shadow: var(--shadow-soft);
     opacity: 0;
     transform: translateX(-22px);
     transition: opacity 0.7s ease, transform 0.7s ease;
}
 .reason-card.in-view{
     opacity: 1;
     transform: translateX(0);
}
 .reason-icon{
     font-size: 1.3rem;
     flex-shrink: 0;
}
 .reason-text{
     font-size: 0.95rem;
     color: var(--plum);
}
/* ============================================================ TIMELINE ============================================================ */
 .timeline-list{
     position: relative;
     padding-left: 26px;
     z-index: 1;
}
 .timeline-list::before{
     content: '';
     position: absolute;
     left: 6px;
     top: 6px;
     bottom: 6px;
     width: 2px;
     background: linear-gradient(180deg, var(--rose), var(--lavender-deep), var(--gold));
     opacity: 0.5;
}
 .timeline-item{
     position: relative;
     padding-bottom: 34px;
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 0.8s ease, transform 0.8s ease;
}
 .timeline-item.in-view{
     opacity: 1;
     transform: translateY(0);
}
 .timeline-item::before{
     content: '';
     position: absolute;
     left: -26px;
     top: 4px;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--rose);
     box-shadow: 0 0 0 4px rgba(255,177,202,0.2);
}
 .timeline-date{
     font-size: 0.7rem;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--rose-deep);
     font-weight: 500;
}
 .timeline-title{
     font-family: var(--font-display);
     font-size: 1.25rem;
     font-weight: 600;
     margin: 4px 0 6px;
}
 .timeline-desc{
     font-size: 0.88rem;
     color: var(--plum-soft);
}
/* ============================================================ WISHES ============================================================ */
 .wishes-grid{
     display: flex;
     flex-direction: column;
     gap: 16px;
     position: relative;
     z-index: 1;
}
 .wish-card{
     background: var(--glass-bg);
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--glass-border);
     border-radius: var(--r-md);
     padding: 22px 22px;
     box-shadow: var(--shadow-soft);
     font-family: var(--font-display);
     font-style: italic;
     font-size: 1.05rem;
     color: var(--plum);
     animation: wishFloat 6s ease-in-out infinite;
     animation-delay: var(--delay, 0s);
     opacity: 0;
     transform: translateY(18px);
     transition: opacity 0.8s ease, transform 0.8s ease;
}
 .wish-card.in-view{
     opacity: 1;
     transform: translateY(0);
}
 @keyframes wishFloat{
     0%,100%{
         transform: translateY(0);
    }
     50%{
         transform: translateY(-8px);
    }
}
/* ============================================================ SURPRISE BUTTON ============================================================ */
 .surprise-section{
     text-align: center;
     padding-bottom: 100px;
}
 .btn-surprise{
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 18px;
     padding: 18px 32px;
     border-radius: 50px;
     background: linear-gradient(135deg, var(--lavender-deep), var(--rose-deep));
     color: var(--white);
     font-size: 1rem;
     font-weight: 500;
     box-shadow: 0 14px 34px rgba(201,160,232,0.45);
     animation: pulseGlowBtn 2.6s ease-in-out infinite;
     position: relative;
     z-index: 1;
}
 .btn-surprise:active{
     transform: scale(0.96);
}
 .surprise-overlay{
     position: fixed;
     inset: 0;
     z-index: 900;
     background: rgba(15, 8, 14, 0.94);
     opacity: 0;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.6s ease;
}
 .surprise-overlay.open{
     opacity: 1;
     pointer-events: auto;
}
 #surprise-canvas{
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
}
 .hearts-rain-layer{
     position: absolute;
     inset: 0;
     overflow: hidden;
     pointer-events: none;
}
 .rain-heart{
     position: absolute;
     top: -30px;
     font-size: 18px;
     animation: rainFall linear forwards;
}
 @keyframes rainFall{
     to{
         transform: translateY(115vh) rotate(200deg);
         opacity: 0.2;
    }
}
 .surprise-message{
     position: relative;
     z-index: 2;
     max-width: 320px;
     text-align: center;
     padding: 34px 26px;
     background: var(--glass-bg);
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--glass-border);
     border-radius: var(--r-lg);
     box-shadow: var(--glow-gold);
     opacity: 0;
     transform: scale(0.85);
     transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
 .surprise-overlay.open .surprise-message{
     opacity: 1;
     transform: scale(1);
}
 .surprise-message p{
     font-family: var(--font-display);
     font-style: italic;
     font-size: 1.15rem;
     color: var(--cream);
     margin-bottom: 20px;
}
 .btn-close-surprise{
     font-size: 0.75rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--gold-light);
     border: 1px solid var(--gold-light);
     padding: 10px 22px;
     border-radius: 30px;
}
/* ============================================================ FINAL SECTION ============================================================ */
 .final-section{
     text-align: center;
     padding-top: 70px;
}
 .final-line{
     font-size: 1.05rem;
     color: var(--plum-soft);
     margin-bottom: 18px;
     max-width: 300px;
     margin-left: auto;
     margin-right: auto;
}
 .final-i-love-you{
     font-family: var(--font-script);
     font-size: clamp(2.6rem, 13vw, 3.4rem);
     color: var(--rose-deep);
     margin-top: 24px;
     animation: glowPulse 2.4s ease-in-out infinite;
}
 @keyframes glowPulse{
     0%,100%{
         text-shadow: 0 0 18px rgba(255,143,179,0.35);
    }
     50%{
         text-shadow: 0 0 36px rgba(255,143,179,0.75), 0 0 60px rgba(242,191,76,0.4);
    }
}
/* ============================================================ ENDING ============================================================ */
 .ending-section{
     min-height: 70vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 6px;
     text-align: center;
     padding-bottom: 90px;
}
 .ending-line{
     font-size: 1.05rem;
     color: var(--text);
     max-width: 320px;
     margin: 8px auto;
     line-height: 1.6;
}
 .ending-line-2{
     font-size: 0.9rem;
     color: var(--text-soft);
     max-width: 300px;
     margin: 14px auto 22px;
     line-height: 1.7;
}
 .ending-title{
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 1.7rem;
     margin-bottom: 30px;
}
 .heart-pulse{
     display: inline-block;
     animation: heartbeat 1.1s ease-in-out infinite;
}
 @keyframes heartbeat{
     0%,100%{
         transform: scale(1);
    }
     25%{
         transform: scale(1.25);
    }
     40%{
         transform: scale(1);
    }
     60%{
         transform: scale(1.18);
    }
}
/* ============================================================ WISH CAKE — decorative cake + candle tied to "Send My Wish" (all classes prefixed with wish-cake__ so nothing here can collide with or override any other rule on the page) ============================================================ */
 .wish-cake{
     position: relative;
     width: 250px;
     height: 200px;
     margin: 54px auto 26px;
}
 .wish-cake > *{
     position: absolute;
}
 .wish-cake__plate{
     width: 270px;
     height: 110px;
     bottom: -10px;
     left: -10px;
     background-color: #ccc;
     border-radius: 50%;
     box-shadow: 0 2px 0 #b3b3b3, 0 4px 0 #b3b3b3, 0 5px 34px rgba(0,0,0,0.28);
}
 .wish-cake__layer{
     display: block;
     width: 250px;
     height: 100px;
     border-radius: 50%;
     background-color: #553c13;
     box-shadow: 0 2px 0px #6a4b18, 0 4px 0px #33240b, 0 6px 0px #32230b, 0 8px 0px #31230b, 0 10px 0px #30220b, 0 12px 0px #2f220b, 0 14px 0px #2f210a, 0 16px 0px #2e200a, 0 18px 0px #2d200a, 0 20px 0px #2c1f0a, 0 22px 0px #2b1f0a, 0 24px 0px #2a1e09, 0 26px 0px #2a1d09, 0 28px 0px #291d09, 0 30px 0px #281c09;
}
 .wish-cake__layer--top{
     top: 0px;
}
 .wish-cake__layer--middle{
     top: 33px;
}
 .wish-cake__layer--bottom{
     top: 66px;
}
 .wish-cake__icing{
     top: 2px;
     left: 5px;
     background-color: #f0e4d0;
     width: 240px;
     height: 90px;
     border-radius: 50%;
}
 .wish-cake__icing::before{
     content: "";
     position: absolute;
     top: 4px;
     right: 5px;
     bottom: 6px;
     left: 5px;
     background-color: #f4ebdc;
     box-shadow: 0 0 4px #f6efe3, 0 0 4px #f6efe3, 0 0 4px #f6efe3;
     border-radius: 50%;
     z-index: 1;
}
 .wish-cake__drip{
     display: block;
     width: 50px;
     height: 60px;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
     background-color: #f0e4d0;
}
 .wish-cake__drip--1{
     top: 53px;
     left: 5px;
     transform: skewY(15deg);
     height: 48px;
     width: 40px;
}
 .wish-cake__drip--2{
     top: 69px;
     left: 181px;
     transform: skewY(-15deg);
}
 .wish-cake__drip--3{
     top: 54px;
     left: 90px;
     width: 80px;
     border-bottom-left-radius: 40px;
     border-bottom-right-radius: 40px;
}
 .wish-cake__candle{
     background-color: #7B020B;
     width: 16px;
     height: 50px;
     border-radius: 8px/4px;
     top: -20px;
     left: 50%;
     margin-left: -8px;
     z-index: 10;
}
 .wish-cake__candle::before{
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 16px;
     height: 8px;
     border-radius: 50%;
     background-color: #ad030f;
}
 .wish-cake__flame{
     position: absolute;
     background-color: orange;
     width: 15px;
     height: 35px;
     border-radius: 10px 10px 10px 10px/25px 25px 10px 10px;
     top: -34px;
     left: 50%;
     margin-left: -7.5px;
     z-index: 10;
     box-shadow: 0 0 10px rgba(255,165,0,0.5), 0 0 20px rgba(255,165,0,0.5), 0 0 60px rgba(255,165,0,0.5), 0 0 80px rgba(255,165,0,0.5);
     transform-origin: 50% 90%;
     animation: wishCakeFlicker 1s ease-in-out alternate infinite;
}
 @keyframes wishCakeFlicker{
     0%{
         transform: skewX(5deg);
         box-shadow: 0 0 10px rgba(255,165,0,0.2), 0 0 20px rgba(255,165,0,0.2), 0 0 60px rgba(255,165,0,0.2), 0 0 80px rgba(255,165,0,0.2);
    }
     25%{
         transform: skewX(-5deg);
         box-shadow: 0 0 10px rgba(255,165,0,0.5), 0 0 20px rgba(255,165,0,0.5), 0 0 60px rgba(255,165,0,0.5), 0 0 80px rgba(255,165,0,0.5);
    }
     50%{
         transform: skewX(10deg);
         box-shadow: 0 0 10px rgba(255,165,0,0.3), 0 0 20px rgba(255,165,0,0.3), 0 0 60px rgba(255,165,0,0.3), 0 0 80px rgba(255,165,0,0.3);
    }
     75%{
         transform: skewX(-10deg);
         box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.4), 0 0 60px rgba(255,165,0,0.4), 0 0 80px rgba(255,165,0,0.4);
    }
     100%{
         transform: skewX(5deg);
         box-shadow: 0 0 10px rgba(255,165,0,0.5), 0 0 20px rgba(255,165,0,0.5), 0 0 60px rgba(255,165,0,0.5), 0 0 80px rgba(255,165,0,0.5);
    }
}
 .wish-cake__smoke{
     position: absolute;
     width: 10px;
     height: 10px;
     top: -34px;
     left: 50%;
     margin-left: -5px;
     border-radius: 50%;
     background: rgba(210,210,210,0.5);
     opacity: 0;
     z-index: 9;
     pointer-events: none;
}
/* Blow-out interaction — toggled by script.js when "Send My Wish" is clicked */
 .wish-cake--blown .wish-cake__flame{
     animation: wishCakeBlowOut .5s ease-out forwards;
}
 @keyframes wishCakeBlowOut{
     0%{
         transform: skewX(5deg) scale(1);
         opacity: 1;
    }
     35%{
         transform: skewX(45deg) scale(0.55) translateX(6px);
         opacity: .7;
    }
     100%{
         transform: skewX(70deg) scale(0) translateX(14px);
         opacity: 0;
    }
}
 .wish-cake--blown .wish-cake__smoke{
     animation: wishCakeSmoke 1.6s ease-out .1s forwards;
}
 @keyframes wishCakeSmoke{
     0%{
         opacity: 0;
         transform: translate(0,0) scale(0.6);
    }
     18%{
         opacity: .5;
    }
     100%{
         opacity: 0;
         transform: translate(16px,-48px) scale(2.4);
    }
}
 .wish-send-card{
     max-width: 320px;
     margin: 0 auto;
     background: var(--glass);
     border: 1px solid var(--glass-brd);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: var(--radius-lg);
     padding: 26px 22px 28px;
     box-shadow: 0 16px 36px var(--shadow-tint);
}
 .wish-send-card h3{
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 1.05rem;
     margin-bottom: 16px;
     color: var(--text);
}
 .wish-input{
     width: 100%;
     padding: 13px 16px;
     border-radius: 999px;
     border: 1.5px solid rgba(255,143,179,0.4);
     background: rgba(255,255,255,0.75);
     font-family: var(--font-body);
     font-size: 1rem;
     color: var(--text);
     outline: none;
     transition: box-shadow .2s ease, border-color .2s ease;
}
 .wish-input::placeholder{
     color: var(--text-soft);
}
 .wish-input:focus{
     border-color: var(--pink-deep);
     box-shadow: 0 0 0 4px rgba(255,143,179,0.22);
}
 .wish-input.shake{
     animation: inputShake .45s ease;
     border-color: var(--pink-deep);
}
 @keyframes inputShake{
     0%,100%{
         transform: translateX(0);
    }
     20%{
         transform: translateX(-8px);
    }
     40%{
         transform: translateX(7px);
    }
     60%{
         transform: translateX(-5px);
    }
     80%{
         transform: translateX(4px);
    }
}
 .wish-send-card .glow-btn{
     margin-top: 16px;
     width: 100%;
}
 .wish-response{
     margin-top: 16px;
     font-size: 0.9rem;
     color: var(--pink-deep);
     font-weight: 600;
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .5s ease, transform .5s ease;
}
 .wish-response.show{
     opacity: 1;
     transform: translateY(0);
}
 .ending-footer{
     margin-top: 40px;
     font-size: 0.72rem;
     color: var(--text-soft);
     letter-spacing: 0.5px;
}
 .site-footer{
     text-align: center;
     padding: 30px 20px 60px;
     font-size: 0.72rem;
     letter-spacing: 1px;
     color: var(--plum-soft);
     opacity: 0.6;
}
/* ============================================================ BURST / CONFETTI / FIREWORKS / SHOOTING STARS (celebration layer used by the opening button + wish card) ============================================================ */
 #burst-layer{
     position: fixed;
     inset: 0;
     z-index: 550;
     pointer-events: none;
     overflow: hidden;
}
 .burst-piece{
     position: absolute;
     left: var(--x, 50%);
     top: var(--y, 50%);
     font-size: var(--size, 18px);
     opacity: 1;
     will-change: transform, opacity;
     animation: burstOut var(--dur, .9s) cubic-bezier(.15,.7,.3,1) forwards;
}
 @keyframes burstOut{
     to{
         transform: translate(var(--tx, 0), var(--ty, -60px)) rotate(var(--rot, 90deg)) scale(var(--scale, 0.6));
         opacity: 0;
    }
}
 .confetti-piece{
     position: absolute;
     top: -20px;
     left: var(--x, 50%);
     width: var(--w, 8px);
     height: var(--h, 14px);
     background: var(--c, var(--pink-deep));
     opacity: .95;
     border-radius: 2px;
     animation: confettiFall var(--dur, 3.2s) ease-in var(--delay, 0s) forwards;
}
 @keyframes confettiFall{
     0%{
         transform: translateY(0) rotate(0deg);
         opacity: 1;
    }
     100%{
         transform: translateY(115vh) rotate(var(--rot, 480deg));
         opacity: .9;
    }
}
 .firework-dot{
     position: absolute;
     left: var(--x, 50%);
     top: var(--y, 50%);
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--c, var(--gold));
     box-shadow: 0 0 8px var(--c, var(--gold));
     animation: fireworkOut var(--dur, 1s) ease-out forwards;
}
 @keyframes fireworkOut{
     0%{
         transform: translate(0,0) scale(1);
         opacity: 1;
    }
     100%{
         transform: translate(var(--tx,0), var(--ty,0)) scale(0.2);
         opacity: 0;
    }
}
 .shooting-star{
     position: absolute;
     left: var(--x, 20%);
     top: var(--y, 10%);
     width: 3px;
     height: 3px;
     background: #fff;
     border-radius: 50%;
     box-shadow: 0 0 8px 2px #fff;
     animation: shootAcross 1.1s ease-in forwards;
}
 .shooting-star::before{
     content:"";
     position: absolute;
     top: 50%;
     right: 100%;
     width: 90px;
     height: 2px;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9));
     transform: translateY(-50%);
}
 @keyframes shootAcross{
     0%{
         transform: translate(0,0);
         opacity: 1;
    }
     100%{
         transform: translate(var(--tx, -220px), var(--ty, 220px));
         opacity: 0;
    }
}

/* ============================================================ REDUCED MOTION ============================================================ */
 @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
    }
}
/* ============================================================ SMALL / SHORT SCREEN POLISH ============================================================ */
 @media (max-height: 700px){
     .section{
         padding: 60px var(--pad) 50px;
    }
     .hero{
         padding-top: 40px;
    }
}