/* Wedding atmosphere: warm light, paper, wax and photographic movement. */
:root { --primary-gold:#b29361; --gold-light:#ead8b4; --rose-red:#7b303b; --gold-gradient:linear-gradient(120deg,#987747,#c9ab74,#987747); }
.navbar { background:rgba(249,246,239,.92); }
.nav-brand { font-family:var(--font-script); font-size:1.8rem; }
.hero-section { margin-top:0; min-height:850px; min-height:100svh; padding:140px 24px 70px; align-items:flex-end; justify-content:center; background:#25201e; }
.hero-bg-wrapper { inset:0; width:100%; height:100%; margin:0; position:absolute; }
.hero-bg-img { object-position:center 38%; filter:brightness(.89); transform:scale(1.09); transition:transform 4s cubic-bezier(.16,1,.3,1); }
body.invitation-open .hero-bg-img { transform:scale(1); animation:photoBreath 24s ease-in-out 4s infinite alternate; }
.hero-overlay { display:block; background:linear-gradient(180deg,rgba(22,18,17,.12) 15%,rgba(27,20,18,.04) 32%,rgba(25,17,17,.65) 72%,rgba(25,17,17,.88)); }
.hero-section::after { content:''; position:absolute; inset:96px 28px 26px; border:1px solid #ead8b44d; z-index:2; pointer-events:none; }
.hero-content { width:100%; max-width:950px; padding:0 20px; color:#fff9ef; position:relative; }
.hero-subtag { color:var(--gold-light); letter-spacing:4px; font-size:.7rem; margin-bottom:12px; }
.hero-invitation-text { color:#f4e9d3; font-size:.7rem; margin-bottom:8px; }
.hero-couple-names { font-family:var(--font-script); font-size:clamp(4rem,8vw,7.5rem); letter-spacing:0; font-weight:400; line-height:1.25; margin-bottom:8px; text-shadow:0 3px 25px #21150f66; }
.hero-couple-names .and-sign { display:inline; font-family:var(--font-serif); font-size:.45em; margin:0 15px; color:var(--gold-light); }
.hero-date-banner { margin-bottom:16px; }
.hero-date-banner .date-solar { font-size:1.15rem; letter-spacing:5px; }
.hero-date-banner .date-lunar { color:#eee0c9; }
.hero-countdown-box { border-color:#ead8b44d; max-width:310px; padding-top:15px; margin-bottom:20px; }
.countdown-title,.countdown-label { color:#eadfcf; }
.countdown-number { font-size:1.7rem; }
.hero-actions .btn { border-radius:30px; }
.hero-actions .btn-primary { background:#f5ecda; color:#5b3030; border:1px solid #f5ecda; }
.hero-actions .btn-primary:hover { background:#dfc69a; transform:translateY(-3px); box-shadow:0 8px 30px #d3ac6133; }
.hero-actions .btn-outline-gold { color:#f7e8ce; border-bottom-color:#ead8b480; }
.hero-actions .btn-outline-gold:hover { color:white; }
.hero-scroll { position:absolute; left:50%; bottom:34px; width:18px; height:29px; border:1px solid #ead8b480; border-radius:15px; transform:translateX(-50%); z-index:3; }
.hero-scroll::after { content:''; position:absolute; width:2px; height:7px; background:#ead8b4; top:6px; left:7px; animation:scrollHint 1.8s infinite; }
.hero-section { padding-bottom:90px; }
.section-subtitle { color:#946346; }
.section-title { color:#673b3e; }
.couple-avatar-wrap { border-radius:180px 180px 4px 4px; outline:1px solid #c3a47480; outline-offset:7px; }
.couple-grid { gap:65px; }
.couple-name { font-family:var(--font-script); font-size:2.9rem; color:#7b303b; }
.couple-card:hover .couple-avatar { transform:scale(1.055); }
.event-card { border-radius:100px 100px 8px 8px; box-shadow:0 15px 50px #674d3110; }
.event-card:hover { transform:translateY(-6px); box-shadow:0 24px 55px #674d3120; }
.event-img-wrap { height:270px; }
.event-badge { top:auto; bottom:0; left:50%; transform:translateX(-50%); white-space:nowrap; border-radius:8px 8px 0 0; padding:9px 20px; }
.gallery-item { border-radius:6px; }
.gallery-item:hover .gallery-img { transform:scale(1.075); }
.btn-primary,.gift-tab-btn.active { background:#7b303b; }
.btn { position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; transform:translateX(-120%) skewX(-20deg); background:linear-gradient(90deg,transparent,#ffffff35,transparent); transition:transform .7s; pointer-events:none; }
.btn:hover::after { transform:translateX(120%) skewX(-20deg); }
.gift-box-card { border-radius:16px; box-shadow:0 15px 50px #674d3110; }
.rsvp-card { border-radius:16px; border:1px solid #d5c4a8; }
.floating-rsvp-btn { border-radius:30px; background:#7b303b; box-shadow:0 5px 22px #54292e33; }
.music-disk-btn.playing { animation:musicHalo 3s ease-in-out infinite; }
.music-disk-btn.playing .disk-center { animation:spinSlow 8s linear infinite; }
#petals-canvas { z-index:1002; opacity:.75; }
.reveal { opacity:0; transform:translateY(32px); filter:blur(4px); transition:opacity .95s,transform .95s cubic-bezier(.16,1,.3,1),filter .95s; }
.reveal.active { opacity:1; transform:translateY(0); filter:blur(0); }
.wedding-footer { background:radial-gradient(ellipse at top,#80434b,#42262b); }
.footer-logo { font-family:var(--font-script); font-size:3.5rem; }
.invitation-cover { background:radial-gradient(ellipse at 30% 15%,#93565b 0%,#632d38 42%,#291a23 100%); overflow:hidden; perspective:1200px; }
.invitation-cover::before,.invitation-cover::after { content:''; position:absolute; width:65vw; height:65vw; border:1px solid #ead8b41a; border-radius:50%; pointer-events:none; animation:coverOrbit 24s linear infinite; }
.invitation-cover::after { width:85vw; height:85vw; animation-direction:reverse; }
.cover-heading { position:absolute; top:max(7vh,28px); left:0; right:0; text-align:center; font-size:.68rem; color:#ead8b4; letter-spacing:4px; }
.cover-heading span { display:block; font-family:var(--font-script); font-size:2.7rem; letter-spacing:0; margin-top:12px; color:#fff4df; }
.envelope-stage { position:relative; width:min(440px,86vw); height:290px; margin-top:120px; perspective:1000px; animation:envelopeFloat 6s ease-in-out infinite; }
.envelope-back { position:absolute; inset:0; background:#9b5059; border-radius:7px; box-shadow:0 30px 90px #120a1766; }
.invitation-paper { position:absolute; inset:12px 14px 8px; width:auto; outline-offset:-8px; padding:24px 20px; box-shadow:none; z-index:1; transition:transform 1.1s cubic-bezier(.16,1,.3,1) .5s; }
.cover-monogram { display:none; }
.cover-eyebrow { font-size:.56rem; letter-spacing:2px; }
.cover-names { font-family:var(--font-script); font-size:2.5rem; line-height:1.2; margin:12px 0; color:#74333c; }
.cover-names span { font-family:var(--font-serif); font-size:1.2rem; }
.cover-date { font-size:.67rem; margin:10px 0; letter-spacing:3px; }
.envelope-front { position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(145deg,#9c5058,#77323f); clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%); border-radius:5px; }
.envelope-front::after { content:''; position:absolute; inset:0; background:#8e424e; clip-path:polygon(0 100%,50% 45%,100% 100%); }
.envelope-lid { position:absolute; inset:0 0 auto; height:56%; z-index:4; background:linear-gradient(160deg,#b46c70,#92424e); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top; transition:transform .8s,opacity .5s .5s; }
.wax-open { position:absolute; z-index:5; left:50%; top:43%; transform:translate(-50%,-10%); width:76px; height:76px; border-radius:48% 52% 45% 55%; border:3px double #e2c891; background:radial-gradient(circle at 30% 25%,#e8ce92,#ba9150 65%,#805d30); color:#653730; cursor:pointer; box-shadow:0 5px 16px #3a172866,inset 0 0 0 5px #cfae72; font-family:var(--font-serif); font-size:1.5rem; transition:opacity .35s,transform .4s; animation:sealGlow 3s ease-in-out infinite; }
.wax-open:hover { transform:translate(-50%,-10%) scale(1.08); }
.cover-instruction { position:absolute; left:0; right:0; bottom:-55px; color:#f1dfc5; text-align:center; font-size:.75rem; letter-spacing:1px; }
.cover-skip { position:absolute; bottom:6vh; color:#dfc9b0; border-color:#dfc9b055; font-size:.7rem; }
.cover-note { display:none; }
.invitation-cover.opening .envelope-stage { animation:none; }
.invitation-cover.opening .envelope-lid { transform:rotateX(180deg); opacity:0; }
.invitation-cover.opening .wax-open { opacity:0; transform:translate(-50%,-10%) scale(1.4); pointer-events:none; }
.invitation-cover.opening .invitation-paper { transform:translateY(-140px); }
.invitation-cover.opening .cover-instruction { opacity:0; transition:opacity .3s; }
.invitation-cover.entering .envelope-stage { transform:translateY(40px) scale(1.06); opacity:0; transition:transform .8s,opacity .8s; }
.invitation-cover.entering .invitation-paper { opacity:1; transform:translateY(-140px); }
@keyframes photoBreath { to { transform:scale(1.055); } }
@keyframes scrollHint { to { transform:translateY(10px); opacity:0; } }
@keyframes envelopeFloat { 50% { transform:translateY(-10px) rotate(-.6deg); } }
@keyframes coverOrbit { to { transform:rotate(360deg) scale(1.12); } }
@keyframes sealGlow { 50% { box-shadow:0 5px 22px #3a172866,inset 0 0 0 5px #cfae72,0 0 28px #efd7a52e; } }
@keyframes musicHalo { 50% { box-shadow:0 0 0 6px #7b303b18; } }
@media(max-width:768px) {
 .hero-section { min-height:850px; min-height:100svh; margin:0; padding:320px 16px 80px; display:flex; flex-direction:row; align-items:flex-end; }
 .hero-bg-wrapper { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; margin:0; }
 .hero-bg-img { object-position:52% top; }
 .hero-overlay { background:linear-gradient(180deg,#21151715 15%,#21151700 28%,#21151780 48%,#211517e6 78%); }
 .hero-section::after { inset:80px 12px 14px; }
 .hero-content { padding:0 8px; }
 .hero-couple-names { font-size:clamp(3.1rem,12vw,5rem); letter-spacing:0; margin-bottom:16px; }
 .hero-couple-names .and-sign { display:block; font-size:.45em; line-height:1; margin:4px 0; }
 .hero-subtag { font-size:.57rem; letter-spacing:2.5px; }
 .hero-countdown-box { margin-bottom:18px; max-width:250px; }
 .countdown-number { font-size:1.5rem; }
 .hero-date-banner .date-solar { font-size:1rem; }
 .hero-scroll { bottom:27px; }
 .couple-grid { gap:24px; }
 .couple-name { font-size:2.1rem; }
 .event-card { border-radius:70px 70px 8px 8px; }
 .envelope-stage { height:250px; margin-top:40px; }
 .invitation-paper { padding:20px 14px; }
 .cover-names { font-size:2.2rem; }
 .cover-monogram { margin-bottom:4px; font-size:1.4rem; }
 .cover-heading { top:7vh; }
 .cover-heading span { font-size:2.3rem; }
 .invitation-cover.opening .invitation-paper,.invitation-cover.entering .invitation-paper { transform:translateY(-115px); }
 .gallery-item:nth-child(even).active { transform:translateY(20px); }
}
@media(max-height:600px) {
 .cover-heading { top:22px; }
 .envelope-stage { margin-top:40px; }
 .cover-instruction { bottom:-34px; }
 .cover-skip { bottom:12px; }
}


/* Clear type and a layered wedding atmosphere on both screen sizes. */
.hero-overlay { background:linear-gradient(180deg,#211a1910 10%,#211a1908 30%,#21151acc 70%,#21151af5 100%); }
.hero-content { max-width:1100px; }
.hero-couple-names { color:#fffaf2; text-shadow:0 2px 6px #24101490,0 8px 35px #140b0c80; }
.name-word { display:inline-block; }
body.invitation-open .name-word { animation:nameUnveil 1.5s cubic-bezier(.16,1,.3,1) both; }
body.invitation-open .name-word:last-child { animation-delay:.2s; }
.hero-subtag { color:#f3dfb7; font-size:.75rem; font-weight:600; text-shadow:0 2px 8px #21151a; }
.hero-light { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 15% 25%,#f8d9a32a,transparent 45%),radial-gradient(ellipse at 80% 60%,#e3acb11c,transparent 45%); animation:lightDrift 16s ease-in-out infinite alternate; }
.wedding-botanical { position:absolute; width:clamp(85px,13vw,190px); height:auto; z-index:3; color:#ead8b4; opacity:.7; pointer-events:none; }
.botanical-left { left:35px; bottom:45px; }
.botanical-right { right:35px; bottom:45px; transform:scaleX(-1); }
.wedding-botanical path { stroke-dasharray:700; stroke-dashoffset:700; }
body.invitation-open .wedding-botanical path { animation:drawWeddingSprig 3.5s ease 1s forwards; }
.hero-date-banner.celebration-dates { display:flex; flex-direction:row; justify-content:center; gap:0; width:fit-content; max-width:100%; margin:20px auto 22px; padding:18px 24px; border:1px solid #ead8b442; background:#291c2559; border-radius:5px; backdrop-filter:blur(6px); }
.celebration-date { padding:0 26px; text-align:center; }
.celebration-date + .celebration-date { border-left:1px solid #ead8b44d; }
.date-family { display:block; color:#ffe9bf; font-size:.76rem; font-weight:500; margin-bottom:9px; }
.hero-date-banner .date-solar { font-family:var(--font-serif); font-size:1.4rem; letter-spacing:3px; font-weight:600; color:#fffdf5; }
.date-calendar { display:block; color:#ead8b4; font-size:.55rem; letter-spacing:1.9px; margin:3px 0 8px; }
.hero-date-banner .date-lunar { font-size:.76rem; color:#ffefdc; }
.countdown-title { font-size:.76rem; color:#ffefdc; letter-spacing:.2px; }
.countdown-label { font-size:.68rem; color:#f6e8d3; }
.countdown-number { font-weight:500; color:#fffaf0; }
.hero-countdown-box { max-width:360px; }
.hero-actions .btn { font-size:.86rem; min-height:46px; }
.hero-date-banner,.hero-countdown-box { text-shadow:0 1px 4px #21131a; }
.cover-date { letter-spacing:1px; margin-top:12px; }
.cover-date span { display:block; font-size:.64rem; line-height:1.9; }
.section-desc,.couple-bio { color:#665c56; }
.section-title { text-wrap:balance; }
.section-header::after { content:'✦'; display:block; width:100px; margin:20px auto 0; color:#a58753; font-size:15px; background:linear-gradient(#bba376,#bba376) left center/34px 1px no-repeat,linear-gradient(#bba376,#bba376) right center/34px 1px no-repeat; }
.event-info-item { color:#64584f; line-height:1.8; }
.event-info-item strong { font-weight:600; color:#4b3433; }
.event-title { line-height:1.5; }
.event-card { position:relative; }
.event-card::after { content:''; position:absolute; inset:9px; border:1px solid #bd9c6340; border-radius:94px 94px 4px 4px; pointer-events:none; }
.event-body { position:relative; z-index:1; }
.couple-avatar-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,#fff5da25 48%,transparent 65%); transform:translateX(-130%); pointer-events:none; }
.couple-avatar-wrap { position:relative; }
.couple-card:hover .couple-avatar-wrap::after { transform:translateX(130%); transition:transform 1.2s; }
.gallery-img-wrapper:focus-visible { outline:3px solid #7b303b; outline-offset:-5px; }
.modal-overlay { transition:opacity .35s,visibility .35s; }
#lightbox-image { animation:photoUnveil .45s ease both; }
.floating-music-player,.floating-rsvp-btn { bottom:max(18px,env(safe-area-inset-bottom)); }
.nav-brand small { font-family:var(--font-sans); }
@keyframes nameUnveil { from { opacity:0; filter:blur(8px); transform:translateY(18px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes lightDrift { from { opacity:.45; transform:translateX(-2%); } to { opacity:.95; transform:translateX(2%); } }
@keyframes drawWeddingSprig { to { stroke-dashoffset:0; } }
@keyframes photoUnveil { from { opacity:.2; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
@media(min-width:1000px) {
 .hero-section { min-height:max(840px,100svh); padding-top:310px; }
 .hero-couple-names { font-size:clamp(5rem,7vw,7.3rem); }
 .gallery-item:nth-child(6n+2) { margin-top:32px; }
 .section-desc { font-size:.94rem; }
}
@media(max-width:768px) {
 .hero-section { padding:310px 14px 100px; }
 .hero-bg-img { object-position:50% top; }
 .hero-content { padding:0 2px; }
 .hero-couple-names { font-size:clamp(3.1rem,13vw,4.5rem); margin-bottom:8px; }
 .hero-couple-names .and-sign { font-size:1.7rem; }
 .hero-subtag { font-size:.64rem; letter-spacing:1.8px; line-height:1.8; }
 .hero-date-banner.celebration-dates { width:100%; padding:15px 4px; margin:16px auto 18px; }
 .celebration-date { flex:1; padding:0 8px; min-width:0; }
 .date-family { font-size:.72rem; line-height:1.6; margin-bottom:6px; }
 .hero-date-banner .date-solar { font-size:1.14rem; letter-spacing:1px; white-space:nowrap; }
 .date-calendar { font-size:.6rem; letter-spacing:1px; }
 .hero-date-banner .date-lunar { font-size:.75rem; line-height:1.7; }
 .countdown-title { font-size:.75rem; }
 .hero-actions { gap:16px; }
 .hero-actions .btn { font-size:.78rem; padding-inline:18px; }
 .hero-scroll { bottom:34px; }
 .wedding-botanical { width:65px; bottom:38px; opacity:.45; }
 .botanical-left { left:18px; }
 .botanical-right { right:18px; }
 .nav-brand { font-size:1.65rem; white-space:nowrap; }
 .nav-brand small { display:none; }
 .nav-container { padding-inline:18px; }
 .section-desc { font-size:.88rem; }
 .event-card::after { border-radius:64px 64px 4px 4px; }
 .floating-rsvp-btn { font-size:.68rem; padding:11px 13px; }
}
@media(max-width:359px) {
 .hero-date-banner.celebration-dates { padding-inline:0; }
 .celebration-date { padding-inline:4px; }
 .hero-date-banner .date-solar { font-size:1rem; }
 .music-track { display:none; }
 .nav-brand { font-size:1.45rem; }
}