* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Figtree", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-weight: 400; color: #333; background: #f9f9f9; }
.container { max-width: 100%; margin: 0 auto; background: #fff; }

/* Header Menu */
.header-menu { position: fixed; top: 0; background: #fff; border-bottom: 1px solid #e0e0e0; z-index: 100; width: 100%; transform: translateY(-100%); transition: transform 0.3s ease; }
.header-menu.visible { transform: translateY(0); }
.header-nav { display: flex; justify-content: center; padding: 20px 40px; }
.header-nav h1 { font-family: 'Figtree', sans-serif; font-size: 24px; font-weight: 700; color: #2c2c2c; margin: 0; }

/* Hero Section */
.hero { position: relative; height: 700px; background: url('https://assets.ppassets.com/p-7w0BjTk6gDVTLMifhpjEMZ/flyer/backdrop_static/jpeg_large') center/cover fixed; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-animation { width: 50%; max-width: 450px; height: 600px; position: relative; display: flex; align-items: center; justify-content: center; }

.card { width: 85%; height: 95%; background: url('https://assets.ppassets.com/p-3GplrY54olxTl8hNl40P9/flyer/paper_static/base') center/cover; border-radius: 6px; transform: translateY(150%) rotateX(-45deg) rotateZ(-15deg); transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 15px 40px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; padding: 40px; transform-origin: bottom center; }
.card.show { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }

.invitation-center { text-align: center; color: #1f3b63; width: 70%; }
.invitation-center h2 { font-family: 'Youngest Serif', serif; font-size: 24px; margin-bottom: 8px; font-weight: 100; }
.small-text { font-family: 'Cormorant Garamond', serif; font-size: 16px; letter-spacing: 1px; margin-bottom: 8px; }
.script-text { font-family: 'Allura', cursive; font-size: 52px; font-weight: 400; margin: 10px 0 15px 0; }
.body-text { font-family: 'Youngest Serif', serif; font-size: 16px; line-height: 1.6; margin-bottom: 12px; }

/* Banner Section */
.event-banner { padding: 60px 40px; background: #fff; border-bottom: 1px solid #e0e0e0; text-align: center; }
.event-title { font-size: 42px; font-weight: 400; margin-bottom: 30px; color: #2c2c2c; font-family: 'Figtree', sans-serif; }
.hosted-by { font-size: 16px; color: #999; margin-bottom: 20px; font-family: "Figtree", sans-serif; }
.guest-name { font-size: 18px; color: #666; margin-bottom: 30px; font-family: "Figtree", sans-serif; }
.rsvp-buttons { display: flex; gap: 16px; justify-content: center; }
.rsvp-btn { flex: 1; max-width: 200px; padding: 16px 24px; border: 2px solid #2c2c2c; background: transparent; font-size: 15px; cursor: pointer; transition: all 0.2s; border-radius: 0; }
.rsvp-btn:hover { background: #2c2c2c; color: #fff; }
.rsvp-btn.selected { background: #2c2c2c; color: #fff; }

/* Event Info */
.event-info { padding: 100px 40px; background: #fff; }
.photo-cards { display: flex; flex-direction: column; gap: 60px; max-width: 1200px; margin: 0 auto 80px; align-items: center; }
.photo-card { display: flex; gap: 50px; background: transparent; padding: 0; box-shadow: none; opacity: 0; transform: translateY(50px) scale(0.9); transition: all 0.6s ease-out; }
.photo-card.visible { opacity: 1; transform: translateY(0) scale(1); }
.photo-card:nth-child(1) { transform: rotate(-2deg) translateY(50px) scale(0.9); }
.photo-card:nth-child(1).visible { transform: rotate(-2deg) translateY(0) scale(1); }
.photo-card:nth-child(2) { transform: rotate(2deg) translateY(50px) scale(0.9); transition-delay: 0.15s; }
.photo-card:nth-child(2).visible { transform: rotate(2deg) translateY(0) scale(1); }
.photo-card:nth-child(3) { transform: rotate(-2deg) translateY(50px) scale(0.9); transition-delay: 0.3s; }
.photo-card:nth-child(3).visible { transform: rotate(-2deg) translateY(0) scale(1); }
.photo-card img { height: 350px; object-fit: contain; background: #fff; padding: 15px 15px 60px 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.photo-card:nth-child(2) { flex-direction: row-reverse; }
.photo-card-content { width: 280px; height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; background: #ffe8f0; padding: 25px 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence baseFrequency="1.5" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.15" /></svg>'); }
.photo-card:nth-child(1) .photo-card-content { padding: 35px 20px; }
.photo-card-label { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; font-weight: 700; font-family: 'Caveat', cursive; }
.photo-card-text { font-size: 20px; color: #333; line-height: 1.4; font-family: 'Caveat', cursive; font-weight: 400; }

/* Scrapbook Section */
.scrapbook-section { padding: 100px 40px; background: #FDFBF6; position: relative; overflow: hidden; }
.scrapbook-section::before { content: '❀ ✿ ❀ ✿ ❀ ✿ ❀ ✿ ❀'; position: absolute; top: 20%; left: 5%; font-size: 60px; color: rgba(212,165,116,0.1); letter-spacing: 40px; transform: rotate(20deg); z-index: 0; }
.scrapbook-section::after { content: '❀ ✿ ❀ ✿ ❀'; position: absolute; bottom: 15%; right: 8%; font-size: 80px; color: rgba(212,165,116,0.15); letter-spacing: 50px; transform: rotate(-15deg); z-index: 0; }
.scrapbook-cards { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.scrapbook-cards.desktop { display: block; }
.scrapbook-cards.mobile { display: none; }
.scrapbook-cards::before { content: '✿ ❀ ✿'; position: absolute; top: 50%; left: -50px; font-size: 70px; color: rgba(212,165,116,0.12); transform: rotate(45deg); z-index: 0; }
.scrapbook-cards::after { content: '❀ ✿ ❀'; position: absolute; bottom: 10%; right: -30px; font-size: 65px; color: rgba(212,165,116,0.12); transform: rotate(-30deg); z-index: 0; }
.scrapbook-photos { display: flex; gap: 40px; justify-content: center; margin-bottom: 60px; flex-wrap: wrap; position: relative; z-index: 2; }
.scrapbook-photo { position: relative; opacity: 0; transform: translateY(50px); transition: all 0.6s ease-out; z-index: 2; }
.scrapbook-photo.visible { opacity: 1; transform: translateY(0); }
.scrapbook-photo:nth-child(1) { transform: rotate(-2deg) translateY(50px); }
.scrapbook-photo:nth-child(1).visible { transform: rotate(-2deg) translateY(0); }
.scrapbook-photo:nth-child(2) { transform: rotate(1deg) translateY(50px); transition-delay: 0.15s; }
.scrapbook-photo:nth-child(2).visible { transform: rotate(1deg) translateY(0); }
.scrapbook-photo:nth-child(3) { transform: rotate(-1.5deg) translateY(50px); transition-delay: 0.3s; }
.scrapbook-photo:nth-child(3).visible { transform: rotate(-1.5deg) translateY(0); }
.scrapbook-photo::before { content: '❀'; position: absolute; bottom: -30px; left: -40px; font-size: 80px; color: rgba(212,165,116,0.2); transform: rotate(25deg); z-index: -1; }
.scrapbook-photo img { height: 350px; object-fit: contain; background: #fff; padding: 15px 15px 60px 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); border: 3px solid #fff; }
.scrapbook-photo::after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 25px; background: rgba(212,165,116,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.scrapbook-notes { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.scrapbook-note { width: 300px; background: #fff; padding: 30px 25px; box-shadow: 0 3px 12px rgba(0,0,0,0.15); border-left: 4px solid #d4a574; position: relative; opacity: 0; transform: translateY(50px); transition: all 0.6s ease-out; cursor: pointer; z-index: 1; text-align: center; }
.scrapbook-note .add-calendar-btn { display: inline-block; margin-top: 10px; padding: 8px 16px; background: #d4a574; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: "Figtree", sans-serif; transition: background 0.2s; text-decoration: none; }
.scrapbook-note .add-calendar-btn:hover { background: #a67c52; }
.scrapbook-note.visible { opacity: 1; transform: translateY(0); }
.scrapbook-note:nth-child(1) { transform: rotate(1deg) translateY(50px); transition-delay: 0.45s; }
.scrapbook-note:nth-child(1).visible { transform: rotate(1deg) translateY(0); }
.scrapbook-note:nth-child(2) { transform: rotate(-1deg) translateY(50px); transition-delay: 0.6s; }
.scrapbook-note:nth-child(2).visible { transform: rotate(-1deg) translateY(0); }
.scrapbook-note:nth-child(3) { transform: rotate(1.5deg) translateY(50px); transition-delay: 0.75s; }
.scrapbook-note:nth-child(3).visible { transform: rotate(1.5deg) translateY(0); }
.scrapbook-note::after { content: ''; position: absolute; top: -25px; right: 20px; width: 50px; height: 50px; background: rgba(212,165,116,1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.scrapbook-note:nth-child(1)::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: 24px; }
.scrapbook-note:nth-child(2)::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: 24px; }
.scrapbook-note:nth-child(3)::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: 24px; }
.scrapbook-label { font-size: 20px; color: #a67c52; margin-bottom: 15px; font-weight: 700; font-family: "Figtree", sans-serif; }
.scrapbook-text { font-size: 18px; color: #8b6f47; line-height: 1.6; font-family: "Figtree", sans-serif; }

/* Details Grid */
.event-details { margin-top: 40px; }
.details { border-top: none; padding-top: 0; }
.detail-item { padding: 40px 0; text-align: center; width: 100%; max-width: 60%; margin: 0 auto; }
.detail-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 12px; font-weight: 700; font-family: "Figtree", sans-serif; }
.detail-value { font-size: 16px; color: #666; font-weight: 400; font-family: "Figtree", sans-serif; line-height: 1.8; }
.detail-link { color: #2c2c2c; text-decoration: none; position: relative; cursor: pointer; }
.detail-link:hover { text-decoration: underline; }
.detail-link[data-tooltip]:hover::before { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #2c2c2c; color: #fff; padding: 8px 12px; border-radius: 4px; white-space: nowrap; font-size: 12px; margin-bottom: 8px; }
.detail-link[data-tooltip]:hover::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #2c2c2c; margin-bottom: 2px; }

/* Registry Section */
.registry { padding: 120px 40px; background: #fff; border-top: 1px solid #e0e0e0; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-icon { width: 60px; height: 60px; margin: 0 auto 20px; }
.section-title { font-size: 14px; font-weight: 700; color: #2c2c2c; }
.registry-items { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.registry-btn { padding: 16px 24px; background: transparent; border: 2px solid #2c2c2c; border-radius: 0; text-decoration: none; color: #2c2c2c; font-size: 15px; transition: all 0.2s; }
.registry-btn:hover { background: #2c2c2c; color: #fff; }

/* Comment Wall */
.comment-wall { padding: 100px 40px; border-top: 1px solid #e0e0e0; background: #FDFBF6; }
.comment-subtitle { text-align: center; color: #666; margin-bottom: 30px; font-size: 16px; }
.comment-form { max-width: 600px; margin: 0 auto; }
.comment-input { width: 100%; padding: 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; font-family: inherit; resize: vertical; min-height: 80px; }
.comment-input:focus { outline: none; border-color: #2c2c2c; }
.comment-actions { display: flex; justify-content: space-between; margin-top: 16px; }
.btn-secondary { padding: 12px 24px; background: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.btn-secondary:hover { border-color: #2c2c2c; }
.btn-primary { padding: 12px 32px; background: #2c2c2c; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.btn-primary:hover { background: #000; }

/* Footer */
footer { padding: 80px 0 140px; text-align: center; background: #FDFBF6; color: #666; }
.footer-logo { margin-bottom: 20px; }
.footer-links { list-style: none; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.footer-links a { color: #fff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .event-banner { padding: 40px 24px; }
    .event-info { padding: 60px 24px; }
    .event-title { font-size: 32px; }
    .photo-cards { gap: 40px; padding: 0 20px; }
    .photo-card { flex-direction: column; }
    .photo-card img, .photo-card-content { width: 100%; }
    .hero { height: 500px; }
    .hero-animation { width: 300px; height: 420px; }
    .card { padding: 20px; }
    .invitation-center { width: 60%; }
    .script-text { font-size: 36px; }
    .small-text, .body-text { font-size: 12px; }
    .date-text { font-size: 13px; }
    .rsvp-btn { max-width: 100%; }
    .header-nav h1 { text-align: center; font-size: 20px; }
    .scrapbook-cards.desktop { display: none; }
    .scrapbook-cards.mobile { display: block; }
    .scrapbook-photos, .scrapbook-notes { margin-bottom: 30px; }
}