:root {
    --brown-dark: #3e2723;
    --brown: #5d4037;
    --brown-light: #8d6e63;
    --cream: #fdf5e6;
    --cream-dark: #f5e6c8;
    --gold: #c9a84c;
    --gold-light: #e8d5a3;
    --sepia: #704214;
    --text: #3e2723;
    --text-muted: #8d6e63;
    --glass-bg: rgba(253,245,230,0.85);
    --font-script: 'Great Vibes', cursive;
    --font-serif: 'Cormorant Garamond', serif;
    --font-body: 'Lora', serif;
    --font-sans: 'Quicksand', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--cream);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.7}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--cream-dark)}
::-webkit-scrollbar-thumb{background:var(--brown-light);border-radius:3px}

.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
.light-leak{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 10% 10%,rgba(201,168,76,0.04) 0%,transparent 60%),radial-gradient(circle at 90% 80%,rgba(141,110,99,0.05) 0%,transparent 50%);pointer-events:none;z-index:2;animation:lightLeakPulse 8s ease-in-out infinite alternate}
@keyframes lightLeakPulse{0%{opacity:0.7}100%{opacity:1}}
#particleCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* INTRO */
.intro-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a0f0a 0%,#2c1810 50%,#1a0f0a 100%);display:flex;justify-content:center;align-items:center;z-index:2000;transition:opacity 1.2s ease,visibility 1.2s ease;padding:20px}
.intro-overlay.fade-out{opacity:0;visibility:hidden}
.intro-card{background:rgba(62,39,35,0.4);border:1px solid rgba(201,168,76,0.3);backdrop-filter:blur(20px);padding:50px 35px;border-radius:20px;max-width:460px;width:100%;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,0.5);animation:introFloat 5s ease-in-out infinite}
@keyframes introFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.intro-ornament{font-size:2rem;color:var(--gold);opacity:.6;margin:10px 0}
.intro-ornament.bottom{transform:rotate(180deg)}
.intro-candle-wrapper{margin:15px auto;display:flex;justify-content:center;align-items:center;position:relative;width:140px;height:140px}
.vintage-sunburst {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px double rgba(201, 168, 76, 0.25);
    border-radius: 50%;
    animation: slowRotate 25s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.vintage-sunburst::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(201, 168, 76, 0.2);
    border-radius: 50%;
}
.vintage-sunburst::after {
    content: '✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦';
    font-size: 0.65rem;
    color: var(--gold);
    opacity: 0.4;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 12px;
    white-space: nowrap;
}
@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.candle{position:relative;display:flex;flex-direction:column;align-items:center;z-index:1}
.candle-body{width:20px;height:60px;background:linear-gradient(135deg,var(--cream-dark),#e8d5a3);border-radius:3px 3px 0 0;position:relative}
.candle-body::before{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:4px;height:12px;background:#333;border-radius:1px}
.flame{position:relative;width:16px;height:24px;margin-bottom:-4px;z-index:2}
.flame-inner{width:16px;height:24px;background:radial-gradient(ellipse at bottom,#ffd54f 0%,#ff9800 40%,#ff5722 70%,transparent 100%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:flicker 0.3s infinite alternate}
.candle-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:80px;height:80px;background:radial-gradient(circle,rgba(255,213,79,0.3),transparent 70%);border-radius:50%;animation:glowPulse 2s infinite}
@keyframes flicker{0%{transform:scale(1) rotate(-1deg)}100%{transform:scale(1.05,1.1) rotate(1deg)}}
@keyframes glowPulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
.intro-pretext{font-family:var(--font-sans);font-size:.9rem;color:var(--gold-light);letter-spacing:3px;text-transform:uppercase;margin-bottom:5px}
.animated-gold-text {
    background: linear-gradient(90deg, #c9a84c 0%, #e8d5a3 25%, #c9a84c 50%, #e8d5a3 75%, #c9a84c 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShine 4s linear infinite;
    text-shadow: 0 4px 10px rgba(62, 39, 35, 0.15);
}
@keyframes goldShine {
    to { background-position: 200% center; }
}
.intro-title{font-family:var(--font-script);font-size:4.5rem;color:var(--cream);margin:5px 0 10px}
.intro-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 20px}
.divider-line{width:50px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.divider-icon{color:var(--gold);font-size:.7rem}
.intro-subtitle{font-family:var(--font-body);font-size:1rem;color:rgba(253,245,230,0.7);font-style:italic;margin-bottom:25px}
.intro-btn{background:linear-gradient(135deg,var(--gold) 0%,#a68836 100%);border:none;color:var(--brown-dark);padding:14px 36px;font-family:var(--font-sans);font-size:1rem;font-weight:600;border-radius:50px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 8px 25px rgba(201,168,76,0.3)}
.intro-btn:hover{transform:scale(1.05);box-shadow:0 12px 35px rgba(201,168,76,0.5)}
.btn-icon-wrapper svg{width:18px;height:18px}

/* MUSIC PLAYER */
.music-player{position:fixed;bottom:25px;right:25px;background:var(--glass-bg);border:1px solid rgba(201,168,76,0.3);backdrop-filter:blur(12px);padding:10px 18px;border-radius:50px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 30px rgba(62,39,35,0.15);z-index:1000;transition:all .4s ease}
.music-player:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(62,39,35,0.25)}
.vinyl-disc{width:40px;height:40px;background:radial-gradient(circle,var(--brown) 30%,#222 31%,#333 60%,#222 61%);border-radius:50%;animation:spin 3s linear infinite;animation-play-state:paused}
.music-player.playing .vinyl-disc{animation-play-state:running}
.vinyl-label{width:14px;height:14px;background:var(--gold);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.player-info{display:flex;flex-direction:column;gap:3px}
.music-title{font-size:.75rem;font-weight:600;color:var(--brown)}
.player-controls{display:flex;gap:8px}
.player-btn{background:none;border:none;color:var(--brown);cursor:pointer;padding:3px;border-radius:50%;transition:all .2s}
.player-btn:hover{color:var(--gold);transform:scale(1.15)}
.player-btn svg{width:18px;height:18px}

/* HEADER */
.romantic-header{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:60px 20px;background:linear-gradient(180deg,var(--cream) 0%,var(--cream-dark) 100%)}
.header-vintage-border{position:absolute;inset:30px;border:1px solid rgba(201,168,76,0.3);border-radius:8px;pointer-events:none}
.corner-ornament{position:absolute;font-size:1.5rem;color:var(--gold);opacity:.5}
.corner-ornament.tl{top:-5px;left:10px}
.corner-ornament.tr{top:-5px;right:10px;transform:scaleX(-1)}
.corner-ornament.bl{bottom:-5px;left:10px;transform:scaleY(-1)}
.corner-ornament.br{bottom:-5px;right:10px;transform:scale(-1)}
.header-pretext{font-family:var(--font-sans);font-size:.85rem;letter-spacing:4px;text-transform:uppercase;color:var(--brown-light);margin-bottom:10px}
.header-subtitle{font-family:var(--font-serif);font-size:2.8rem;font-weight:300;color:var(--brown);margin-bottom:5px}
.header-title{font-family:var(--font-script);font-size:6rem;color:var(--gold);text-shadow:0 2px 15px rgba(201,168,76,0.3);margin-bottom:15px;line-height:1.1}
.header-divider{display:flex;align-items:center;justify-content:center;gap:15px;margin:10px 0 20px}
.hd-line{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.hd-diamond{color:var(--gold);font-size:.6rem}
.header-date{font-family:var(--font-sans);font-size:1rem;color:var(--text-muted);letter-spacing:2px;margin-bottom:20px}
.header-quote{font-family:var(--font-body);font-style:italic;font-size:1.1rem;color:var(--text-muted);max-width:500px;line-height:1.6}
.scroll-indicator{position:absolute;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-indicator p{font-size:.8rem;color:var(--text-muted);letter-spacing:2px}
.scroll-arrow span{display:block;width:12px;height:12px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);transform:rotate(45deg);margin:-4px auto;animation:scrollBounce 2s infinite}
.scroll-arrow span:nth-child(2){animation-delay:.2s}
@keyframes scrollBounce{0%,20%,50%,80%,100%{transform:translateY(0) rotate(45deg)}40%{transform:translateY(-6px) rotate(45deg)}}

/* FADE ANIMATIONS */
.fade-up{opacity:0;transform:translateY(25px);animation:fadeUp 1s ease forwards}
.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}.delay-3{animation-delay:.6s}.delay-4{animation-delay:.8s}.delay-5{animation-delay:1s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.fade-in-section{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}
.fade-in-section.is-visible{opacity:1;transform:translateY(0)}

/* SECTION COMMON */
section{padding:80px 20px;margin:40px 0;position:relative;z-index:5}
.section-header{text-align:center;margin-bottom:50px}
.section-ornament{color:var(--gold);font-size:1.2rem;margin-bottom:10px}
.section-title{font-family:var(--font-serif);font-size:2.5rem;font-weight:400;color:var(--brown-dark);margin-bottom:8px}
.section-subtitle{font-family:var(--font-body);font-style:italic;color:var(--text-muted);font-size:1rem}
.section-divider{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:15px}
.sd-line{width:40px;height:1px;background:var(--gold-light)}
.sd-dot{color:var(--gold);font-size:.5rem}

/* POLAROID GALLERY */
.polaroid-gallery{display:flex;justify-content:center;align-items:center;min-height:450px;position:relative;perspective:1200px;margin:0 auto;max-width:500px}
.polaroid-frame{position:absolute;background:#fff;padding:12px 12px 45px;box-shadow:0 8px 30px rgba(62,39,35,0.15);transition:all .8s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:2px}
.polaroid-frame::after{content:attr(data-caption);position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--font-script);font-size:1.3rem;color:var(--brown)}
.polaroid-frame img{width:100%;height:100%;object-fit:cover;filter:sepia(0.15) contrast(1.05);transition:filter .3s}
.polaroid-frame:hover img{filter:sepia(0) contrast(1.1)}
.polaroid-frame.active{z-index:10;transform:rotate(0deg) scale(1)!important;opacity:1!important}
.polaroid-frame.prev,.polaroid-frame.next{z-index:5;opacity:.5}
.polaroid-frame.hidden{z-index:1;opacity:0;pointer-events:none;transform:scale(.8)!important}
.gallery-nav{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:30px}
.gallery-nav-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.gallery-nav-btn:hover{background:var(--gold);color:var(--cream)}
.gallery-nav-btn svg{width:20px;height:20px}
.gallery-counter{font-family:var(--font-serif);font-size:1.2rem;color:var(--brown-light)}
.counter-sep{margin:0 4px}

/* LETTER */
.letter-wrapper{max-width:600px;margin:0 auto;position:relative}
.wax-seal{width:70px;height:70px;background:radial-gradient(circle,#b71c1c,#8b0000);border-radius:50%;margin:0 auto -35px;position:relative;z-index:20;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(139,0,0,0.4);transition:all .3s}
.wax-seal:hover{transform:scale(1.1) rotate(10deg)}
.seal-inner{width:50px;height:50px;border:2px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.seal-inner span{font-family:var(--font-serif);font-size:1.8rem;color:rgba(255,255,255,0.9);font-weight:700}
.letter-paper{background:linear-gradient(180deg,#faf3e0,#f5e6c8);border-radius:8px;padding:50px 35px 35px;box-shadow:0 15px 40px rgba(62,39,35,0.12);position:relative;overflow:hidden;max-height:0;opacity:0;transition:all .8s cubic-bezier(.4,0,.2,1)}
.letter-paper.open{max-height:800px;opacity:1;padding-top:55px}
.letter-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-script);font-size:15rem;color:rgba(201,168,76,0.06);pointer-events:none}
.letter-heading{font-family:var(--font-script);font-size:2rem;color:var(--sepia);margin-bottom:20px}
.letter-p{font-size:.95rem;color:#5d4037;margin-bottom:12px;text-align:justify;line-height:1.8}
.letter-signature{text-align:right;margin-top:25px;color:var(--text-muted);font-size:.9rem}
.signature-name{font-family:var(--font-script);font-size:1.8rem;color:var(--sepia);margin-top:5px}

/* TIMELINE */
.timeline-container{max-width:700px;margin:0 auto;position:relative;padding-left:40px}
.timeline-container::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--gold),var(--gold-light),transparent)}
.timeline-item{position:relative;margin-bottom:40px;padding-left:30px;opacity:0;transform:translateX(-20px);transition:all .6s ease}
.timeline-item.visible{opacity:1;transform:translateX(0)}
.timeline-item::before{content:'';position:absolute;left:-28px;top:8px;width:12px;height:12px;background:var(--gold);border-radius:50%;border:3px solid var(--cream);box-shadow:0 0 0 2px var(--gold)}
.timeline-item .tl-image{width:100%;max-width:280px;border-radius:6px;box-shadow:0 6px 20px rgba(62,39,35,0.12);margin-bottom:12px;filter:sepia(.1)}
.timeline-item .tl-text{font-family:var(--font-body);font-style:italic;color:var(--text-muted);font-size:.95rem}

/* WISHES */
.wish-card{max-width:500px;margin:0 auto}
.wish-card-inner{background:var(--glass-bg);border:1px solid rgba(201,168,76,0.2);border-radius:16px;padding:30px;text-align:center;box-shadow:0 10px 30px rgba(62,39,35,0.08)}
.wish-icon{font-size:2.5rem;margin-bottom:10px}
.wish-card textarea{width:100%;min-height:100px;border:1px solid var(--cream-dark);border-radius:10px;padding:15px;font-family:var(--font-body);font-size:.95rem;color:var(--text);background:rgba(255,255,255,0.5);resize:none;outline:none;transition:border .3s}
.wish-card textarea:focus{border-color:var(--gold)}
.wish-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.char-counter{font-size:.8rem;color:var(--text-muted)}
.wish-btn{background:linear-gradient(135deg,var(--gold),#a68836);border:none;color:var(--brown-dark);padding:10px 24px;font-family:var(--font-sans);font-size:.9rem;font-weight:600;border-radius:50px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .3s}
.wish-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(201,168,76,0.4)}
.wish-btn svg{width:16px;height:16px}
.floating-wishes{position:relative;min-height:50px}
.wish-balloon{position:fixed;bottom:-80px;padding:12px 20px;background:var(--glass-bg);border:1px solid var(--gold-light);border-radius:12px;font-family:var(--font-body);font-size:.85rem;color:var(--brown);max-width:250px;animation:floatUp 6s ease forwards;z-index:100;box-shadow:0 4px 15px rgba(62,39,35,0.1)}
@keyframes floatUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-110vh);opacity:0}}

/* CAKE */
.cake-container{display:flex;flex-direction:column;align-items:center;gap:25px}
.cake{position:relative;display:flex;flex-direction:column;align-items:center}
.cake-candles{display:flex;gap:30px;margin-bottom:-5px;z-index:5;position:relative}
.cake-candle{display:flex;flex-direction:column;align-items:center}
.candle-stick{width:8px;height:35px;background:linear-gradient(135deg,var(--cream),var(--gold-light));border-radius:2px}
.cake-flame{width:12px;height:18px;margin-bottom:-2px;transition:all .5s}
.cake-flame.active .cake-flame-inner{width:12px;height:18px;background:radial-gradient(ellipse at bottom,#ffd54f,#ff9800 50%,transparent 100%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:flicker .3s infinite alternate}
.cake-flame.blown .cake-flame-inner{opacity:0;transform:scale(0)}
.cake-top{width:200px;height:50px;background:linear-gradient(135deg,#d4a574,#c08c5a);border-radius:10px 10px 0 0;position:relative;overflow:visible;z-index:3}
.cake-drip{position:absolute;bottom:-15px;width:18px;height:22px;background:#d4a574;border-radius:0 0 50% 50%}
.cake-drip:nth-child(1){left:15px;height:18px}.cake-drip:nth-child(2){left:50px;height:25px}.cake-drip:nth-child(3){left:90px;height:15px}.cake-drip:nth-child(4){left:130px;height:22px}.cake-drip:nth-child(5){left:165px;height:17px}
.cake-middle{width:220px;height:60px;background:linear-gradient(135deg,var(--cream-dark),#e8d5a3);border-left:3px solid rgba(201,168,76,0.2);border-right:3px solid rgba(201,168,76,0.2);z-index:2}
.cake-bottom{width:240px;height:55px;background:linear-gradient(135deg,#d4a574,#b8845a);border-radius:0 0 8px 8px;z-index:1}
.cake-plate{width:280px;height:15px;background:linear-gradient(135deg,var(--gold-light),var(--gold));border-radius:0 0 50% 50%;margin-top:-2px}
.cake-text{font-family:var(--font-script);font-size:1.1rem;color:var(--sepia);margin-top:15px}
.blow-btn{background:linear-gradient(135deg,var(--gold),#a68836);border:none;color:var(--brown-dark);padding:12px 30px;font-family:var(--font-sans);font-size:1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:all .3s}
.blow-btn:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(201,168,76,0.4)}
.blow-btn.blown{background:linear-gradient(135deg,#aaa,#888);pointer-events:none}
.cake-hint{font-size:.85rem;color:var(--text-muted);font-style:italic}

/* FOOTER */
.romantic-footer{text-align:center;padding:60px 20px;position:relative;z-index:5}
.footer-ornament{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:20px}
.footer-line{width:50px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.footer-icon{color:var(--gold);font-size:1.2rem}
.footer-text{font-family:var(--font-body);font-style:italic;color:var(--text-muted);font-size:.95rem;margin-bottom:8px}
.footer-name{font-family:var(--font-serif);font-size:1.3rem;color:var(--brown)}
.footer-name span{font-family:var(--font-script);font-size:2rem;color:var(--gold)}
.footer-year{font-size:.8rem;color:var(--text-muted);margin-top:10px}

/* CONFETTI */
.confetti-piece{position:fixed;top:-20px;z-index:1999;pointer-events:none;font-size:20px;animation:confettiFall 3s linear forwards}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* POLAROID GRID WALL */
.photo-wall-header {
    text-align: center;
    margin: 60px 0 30px;
}
.wall-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--brown-dark);
    margin-bottom: 5px;
}
.wall-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.grid-polaroid {
    position: relative;
    background: #fff;
    padding: 12px 12px 40px;
    box-shadow: 0 6px 20px rgba(62,39,35,0.08);
    border-radius: 2px;
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid rgba(62,39,35,0.05);
}
.grid-polaroid:nth-child(odd) {
    transform: rotate(-2deg);
}
.grid-polaroid:nth-child(even) {
    transform: rotate(2deg);
}
.grid-polaroid:nth-child(3n) {
    transform: rotate(1.5deg);
}
.grid-polaroid:nth-child(3n+1) {
    transform: rotate(-1.5deg);
}
.grid-polaroid:hover {
    transform: scale(1.06) rotate(0deg) !important;
    box-shadow: 0 15px 35px rgba(62,39,35,0.18);
    z-index: 10;
}
.grid-polaroid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: sepia(0.12) contrast(1.02);
    transition: filter 0.3s;
    border-radius: 1px;
}
.grid-polaroid:hover img {
    filter: sepia(0) contrast(1.05);
}
.grid-polaroid-caption {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-family: var(--font-script);
    font-size: 1.15rem;
    color: var(--brown);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Washi tape effect */
.grid-polaroid::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 70px;
    height: 20px;
    background-color: rgba(201,168,76,0.22);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    backdrop-filter: blur(1px);
    z-index: 2;
}

/* COUNTDOWN TIMER */
.countdown-container {
    background: rgba(62, 39, 35, 0.03);
    border: 1px dashed rgba(201, 168, 76, 0.4);
    border-radius: 12px;
    padding: 15px 25px;
    margin: 20px auto;
    max-width: 320px;
    text-align: center;
}
.countdown-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.countdown-item span {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--brown-dark);
    background: var(--cream-dark);
    border-radius: 6px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(62,39,35,0.08);
    border: 1px solid rgba(201, 168, 76, 0.2);
}
.countdown-item p {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1px;
}
.countdown-divider {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    margin-top: -20px;
}

/* PHOTO BOOTH STRIPS */
.section-booth {
    background: rgba(245, 230, 200, 0.3);
    border-top: 1px dashed rgba(201,168,76,0.3);
    border-bottom: 1px dashed rgba(201,168,76,0.3);
    padding: 80px 20px;
}
.booth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}
.booth-strip {
    position: relative;
    background: #fff;
    padding: 15px 15px 45px 15px;
    box-shadow: 0 10px 25px rgba(62,39,35,0.12);
    border-radius: 2px;
    max-width: 320px;
    border: 1px solid rgba(62, 39, 35, 0.05);
    transition: all 0.4s ease;
}
.booth-strip.tilt-left {
    transform: rotate(-3deg);
}
.booth-strip.tilt-right {
    transform: rotate(3deg);
}
.booth-strip:hover {
    transform: scale(1.05) rotate(0deg) !important;
    box-shadow: 0 20px 40px rgba(62,39,35,0.22);
    z-index: 10;
}
.booth-strip img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    filter: sepia(0.08) contrast(1.02);
}
.booth-caption {
    position: absolute;
    bottom: 12px;
    left: 15px;
    right: 15px;
    text-align: center;
    font-family: var(--font-script);
    font-size: 1.5rem;
    color: var(--brown-dark);
}
.booth-pin {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* DIARY 10 REASONS */
.section-diary {
    padding: 80px 20px;
    background: var(--cream);
}
.diary-book-wrapper {
    display: flex;
    justify-content: center;
    margin: 30px auto 0;
    max-width: 550px;
    width: 100%;
}
.diary-book {
    background: #fcf8f0;
    border: 2px solid #dfcbb5;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(62,39,35,0.12), inset 0 0 40px rgba(62,39,35,0.03);
    padding: 35px;
    width: 100%;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.diary-decor-border {
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(201,168,76,0.3);
    border-radius: 8px;
    pointer-events: none;
}
.diary-page {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    flex-grow: 1;
}
.diary-number {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}
.diary-content {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--brown-dark);
    line-height: 1.8;
    text-align: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diary-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(62,39,35,0.06);
    padding-top: 15px;
}
.diary-btn {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brown-light);
    cursor: pointer;
    transition: color 0.3s;
    padding: 5px 10px;
}
.diary-btn:hover {
    color: var(--gold);
}
.diary-page-indicator {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* INTERACTIVE TRAIL AND BURSTS */
.trail-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    font-size: 12px;
    animation: fadeDriftOut 0.8s ease-out forwards;
    transform: translate(-50%, -50%);
}
.heart-burst-particle {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    animation: burstDriftUp 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    transform: translate(-50%, -50%);
}
@keyframes fadeDriftOut {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--drift)), calc(-50% + 20px)) scale(1.2) rotate(180deg);
        opacity: 0;
    }
}
@keyframes burstDriftUp {
    0% {
        transform: translate(-50%, -50%) scale(0.5) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--drift)), calc(-50% - 80px)) scale(1.3) rotate(20deg);
        opacity: 0;
    }
}

/* RESPONSIVE */
@media(max-width:600px){
    /* Booth & Diary mobile adjustments */
    .booth-container {
        gap: 20px;
    }
    .booth-strip {
        max-width: 90%;
        padding: 10px 10px 35px 10px;
    }
    .booth-caption {
        font-size: 1.25rem;
        bottom: 8px;
    }
    .diary-book {
        padding: 20px;
        min-height: 240px;
    }
    .diary-content {
        font-size: 1rem;
        line-height: 1.6;
        min-height: 120px;
    }
    /* Intro Gate overlay mobile style */
    .intro-card {
        padding: 35px 20px;
        max-width: 92%;
    }
    .intro-title {
        font-size: 3.2rem;
    }
    .intro-subtitle {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
    .intro-btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }
    
    /* Header mobile style */
    .romantic-header {
        padding: 50px 15px;
    }
    .header-title {
        font-size: 4rem;
        margin-bottom: 5px;
    }
    .header-subtitle {
        font-size: 1.8rem;
    }
    .countdown-container {
        padding: 12px 15px;
        margin: 15px auto;
        max-width: 290px;
    }
    .countdown-item span {
        font-size: 1.4rem;
        width: 42px;
        height: 42px;
    }
    .countdown-divider {
        font-size: 1.2rem;
    }
    .header-quote {
        font-size: 0.95rem;
        padding: 0 10px;
    }
    
    /* Section elements mobile style */
    section {
        padding: 60px 15px;
        margin: 20px 0;
    }
    .section-title {
        font-size: 1.8rem;
    }
    
    /* Gallery mobile style */
    .polaroid-gallery {
        min-height: 380px;
        max-width: 90%;
    }
    .polaroid-frame {
        padding: 8px 8px 32px;
    }
    .polaroid-frame::after {
        font-size: 1.1rem;
        bottom: 6px;
    }
    
    /* Polaroid Grid mobile style */
    .polaroid-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile! */
        gap: 15px;
        padding: 10px 5px;
    }
    .grid-polaroid {
        padding: 8px 8px 28px;
    }
    .grid-polaroid img {
        height: 140px;
    }
    .grid-polaroid-caption {
        font-size: 0.85rem;
        bottom: 5px;
    }
    .grid-polaroid::before {
        width: 45px;
        height: 14px;
        top: -8px;
    }
    
    /* Letter mobile style */
    .letter-paper {
        padding: 35px 20px 25px;
    }
    .letter-heading {
        font-size: 1.6rem;
    }
    .letter-p {
        font-size: 0.85rem;
        line-height: 1.7;
    }
    .signature-name {
        font-size: 1.5rem;
    }
    
    /* Other sections mobile style */
    .timeline-container {
        padding-left: 25px;
    }
    .timeline-item {
        padding-left: 15px;
        margin-bottom: 30px;
    }
    .timeline-item .tl-image {
        max-width: 100%;
    }
    .timeline-item::before {
        left: -23px;
        top: 6px;
        width: 10px;
        height: 10px;
    }
    .wish-card-inner {
        padding: 20px 15px;
    }
    
    /* Cake mobile style */
    .cake-top { width: 140px; height: 35px; }
    .cake-middle { width: 160px; height: 42px; }
    .cake-bottom { width: 180px; height: 38px; }
    .cake-plate { width: 210px; }
    .cake-drip { width: 14px; height: 16px; bottom: -11px; }
    .cake-drip:nth-child(2) { height: 20px; }
    
    /* Music player mobile style */
    .music-player {
        bottom: 15px;
        right: 15px;
        padding: 6px 12px;
        gap: 8px;
    }
    .vinyl-disc {
        width: 32px;
        height: 32px;
    }
    .music-title {
        font-size: 0.65rem;
    }
    .player-btn svg {
        width: 15px;
        height: 15px;
    }
}