@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    /* Colors Sora Theme */
    --color-bg-beige: #f4efe9;
    --color-card-beige: #f9f7f3;
    --color-sage-green: #a7bca5;
    --color-sage-light: #e5ece3;
    --color-dark-green: #4a6349;
    --color-text-dark: #373b37;
    --color-text-gray: #6d756d;
    --color-accent-red: #d8695d;
    --white: #ffffff;
    
    /* Fonts */
    --font-heading: 'Cormorant Garamond', serif;
    --font-dance: 'Alex Brush', cursive;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-beige);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    font-size: 0.95rem;
}

/* =========================================
   COMMON UTILS 
   ========================================= */
.hidden { display: none !important; }
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* Typography */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; color: var(--color-dark-green); text-transform: uppercase; letter-spacing: 1px; }
.dance-text { font-family: var(--font-dance); text-transform: none; font-size: 3.5rem; color: var(--color-dark-green); letter-spacing: 0; font-weight: 400; }
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; position: relative; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 40px; height: 2px; background: var(--color-sage-green); transform: translateX(-50%); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-sage-green); color: var(--white);
    padding: 12px 30px; border: none; border-radius: 40px;
    font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
    cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
    transition: background 0.3s;
}
.btn:hover { background: var(--color-dark-green); }

/* Background pattern */
.bg-floral {
    background-image: url('https://images.unsplash.com/photo-1549416878-b9ca95e1bbbe?auto=format&fit=crop&w=800&q=20');
    background-size: cover;
    background-position: center;
    background-blend-mode: color-burn;
    background-color: var(--color-bg-beige);
    opacity: 0.6;
    position: absolute; top:0; left:0; width:100%; height:100%;
    z-index: 0;
    pointer-events: none;
}

/* =========================================
   WELCOME SCREEN
   ========================================= */
#welcome-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: var(--color-sage-light);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.welcome-content {
    background: var(--white);
    padding: 4rem 2rem;
    border-radius: 200px 200px 0 0; /* Arch */
    text-align: center;
    width: 90%; max-width: 450px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.welcome-content .dance-text { font-size: 4rem; margin: 1rem 0; color: var(--color-sage-green); animation: fadeInUp 1s ease; }
.welcome-content .wedding-date-str { font-family: var(--font-heading); font-size: 1.2rem; letter-spacing: 2px; color: var(--color-text-gray); }
#welcome-screen.envelope-open { transform: translateY(-100vh); opacity: 0; }

/* =========================================
   FLOATING BUTTONS
   ========================================= */
.floating-music {
    position: fixed; bottom: 20px; left: 20px; z-index: 999;
}
.floating-actions {
    position: fixed; bottom: 20px; right: 20px; z-index: 999;
    display: flex; flex-direction: column; gap: 10px;
}
.float-btn {
    width: 45px; height: 45px; border-radius: 50%;
    background: var(--white); border: none; color: var(--color-sage-green);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.float-btn:hover { background: var(--color-sage-green); color: var(--white); transform: scale(1.1); }
#music-toggle { background: var(--color-accent-red); color: var(--white); box-shadow: 0 4px 15px rgba(216,105,93,0.4); animation: pulseRed 2s infinite; }
#music-toggle.playing { animation: pulseRedInfinite 2s infinite; }
#music-toggle svg { width: 20px; height: 20px; fill: currentColor; }
#music-toggle.playing svg { animation: spin 4s linear infinite; }
.float-btn svg { width: 22px; height: 22px; }

/* =========================================
   HERO ARCH SECTION 
   ========================================= */
#hero {
    position: relative;
    padding: 3rem 1rem;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--color-bg-beige);
}
.hero-arch {
    position: relative; z-index: 2;
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 50% 50% 0 0 / 25% 25% 0 0;
    text-align: center;
    width: 100%; max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 10px solid var(--color-sage-light);
    margin-top: 2rem;
}
.hero-arch .dance-text { font-size: 4rem; color: var(--color-dark-green); margin: 0.5rem 0; line-height: 1.1; }
.hero-arch-image {
    width: 100%; height: 350px;
    background: url('assets/images/1784171166734_4352902273896587581_4352902273896587581_67ea4ac082a8005c8ec2d239848b42df.jpg') center/cover;
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
    margin-bottom: 2rem;
}
.hero-title { font-size: 1.2rem; letter-spacing: 4px; color: var(--color-sage-green); margin-bottom: 1rem; }

/* =========================================
   INTRO (CD CR) - OVAL SHAPE
   ========================================= */
#intro { padding: 5rem 1rem; background: var(--white); text-align: center; }
.intro-grid {
    display: flex; flex-direction: column; gap: 4rem; max-width: 900px; margin: 0 auto; margin-top: 3rem;
}
.person-card {
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center;
}
.person-oval {
    width: 260px; height: 340px;
    background-size: cover; background-position: center;
    border-radius: 50% / 60% 60% 40% 40%;
    border: 3px solid var(--color-sage-light);
    padding: 8px;
    position: relative;
}
.person-oval div {
    width: 100%; height: 100%; border-radius: 50% / 60% 60% 40% 40%;
    background-size: cover; background-position: center;
}
.person-detail h3 { font-size: 2rem; color: var(--color-dark-green); margin-bottom: 5px; }
.person-detail p { color: var(--color-text-gray); }

/* =========================================
   EVENTS - CIRCLE OVERLAP
   ========================================= */
#events { padding: 5rem 1rem; background: var(--color-bg-beige); display: flex; flex-direction: column; align-items: center; }
.events-wrapper { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; max-width: 1000px; width: 100%; }
.event-card {
    flex: 1 1 350px;
    background: var(--white);
    border-radius: 20px;
    text-align: center;
    padding: 0 0 3rem 0;
    position: relative;
    margin-top: 100px; /* Space for circle */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.event-card-circle {
    width: 180px; height: 180px;
    border-radius: 50%;
    background-size: cover; background-position: center;
    border: 8px solid var(--color-bg-beige);
    margin: -90px auto 1rem;
}
.event-detail { padding: 0 2rem; }
.event-detail h3 { font-size: 1.8rem; color: var(--color-sage-green); margin-bottom: 2rem; }
.event-detail p { border-bottom: 1px dashed var(--color-sage-light); padding: 12px 0; color: var(--color-text-dark); }
.map-container { max-width: 800px; width:100%; margin: 4rem auto 0; text-align: center; border-radius: 12px; overflow: hidden; background: var(--white); padding: 1rem;box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* =========================================
   STORY & GALLERY 
   ========================================= */
#story { padding: 4rem 1rem; background: var(--white); }
.timeline {
    position: relative; max-width: 800px; margin: 0 auto; padding: 2rem 0 2rem 30px; border-left: 2px solid var(--color-sage-light);
}
.timeline-item { position: relative; margin-bottom: 3rem; padding-left: 30px; }
.timeline-item::before {
    content: ''; position: absolute; left: -39px; top: 0; width: 14px; height: 14px;
    border-radius: 50%; background: var(--color-sage-green); border: 4px solid var(--white);
}
.timeline-img {
    height: 250px; background-size: cover; background-position: center; border-radius: 12px 12px 0 0;
}
.timeline-text { padding: 1.5rem; background: var(--color-bg-beige); border-radius: 0 0 12px 12px; }

#gallery { padding: 4rem 1rem; background: var(--color-bg-beige); }
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-width: 1000px; margin: 0 auto; cursor: pointer;
}
.gallery-grid img { width: 100%; height: 250px; object-fit: cover; border-radius: 8px; transition: transform 0.3s; }
.gallery-grid img:hover { transform: scale(1.03); }

/* Lightbox */
#lightbox {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 2000;
    display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s;
}
#lightbox.active { opacity: 1; visibility: visible; }
#lightbox img { max-width: 90%; max-height: 85vh; border-radius: 8px; }
.lc-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 3rem; cursor: pointer; }
.lc-prev, .lc-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 3rem; cursor: pointer; padding: 20px; }
.lc-prev { left: 10px; } .lc-next { right: 10px; }

/* =========================================
   QR BANKING
   ========================================= */
#banking { padding: 5rem 1rem; background: var(--white); }
.banking-wrapper { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; max-width: 900px; margin: 0 auto; }
.bank-card {
    flex: 1 1 300px; padding: 3rem 2rem; text-align: center;
    background: var(--color-sage-light); border-radius: 20px;
}
.bank-card .bank-qr { width: 220px; height: 220px; margin: 1.5rem auto; border-radius: 12px; border: 4px solid var(--white); padding: 5px; background: #fff; }

/* =========================================
   GUESTBOOK / RSVP & WISHES
   ========================================= */
#rsvp { padding: 5rem 1rem 1rem; background: var(--color-bg-beige); }
#rsvp h2.section-title { font-family: 'Times New Roman', serif; font-size: 2.2rem; margin-bottom: 3rem; color: #4a5320; font-weight: 400; letter-spacing: 2px; }
.rsvp-container { 
    max-width: 700px; margin: 0 auto; background: #ffffff; 
    padding: 2.5rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
    border: 1px solid #e1dbce; 
}
.form-group { margin-bottom: 1.5rem; }
.form-group input, .form-group textarea {
    width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 8px;
    font-family: 'Times New Roman', serif; font-size: 1rem; color: #444;
    background: #fff; transition: border-color 0.3s; resize: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #888; font-style: italic; }
.form-group input:focus, .form-group textarea:focus { border-color: #4a5320; outline: none; }

.form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.magic-icon {
    width: 45px; height: 45px; background: #f0f0f0; border-radius: 8px;
    display: flex; justify-content: center; align-items: center; font-size: 1.5rem;
}
.btn-submit-wish { 
    background: #4a5320; 
    color: white; padding: 14px 30px; border: none; border-radius: 30px;
    font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
    font-size: 0.9rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 10px rgba(74,83,32,0.2);
}
.btn-submit-wish:hover { background: #373f15; }
.btn-submit-wish:disabled { background: #9CAF88; cursor: not-allowed; box-shadow: none; }

#wishes { padding: 0 1rem 5rem; background: var(--color-bg-beige); }
#wishes-container { 
    max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px;
    max-height: 500px; overflow-y: auto; padding-right: 10px;
}
/* Scrollbar */
#wishes-container::-webkit-scrollbar { width: 6px; }
#wishes-container::-webkit-scrollbar-track { background: transparent; }
#wishes-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

.wish-card {
    background: #fff; padding: 1.5rem; border-radius: 12px;
    border: 1px solid #e1dbce; box-shadow: 0 2px 10px rgba(0,0,0,0.015);
}
.wish-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.wish-header p.wish-name { font-weight: 700; color: #4a5320; font-size: 1.1rem; }
.wish-header p.wish-time { color: #888; font-size: 0.85rem; font-family: 'Times New Roman', serif; }
.wish-card p.wish-text { color: #444; font-size: 1.05rem; line-height: 1.6; font-family: 'Times New Roman', serif; }
.no-wishes { text-align: center; color: var(--color-text-gray); font-style: italic; }

footer { padding: 4rem 1rem; text-align: center; background: var(--color-sage-green); color: var(--white); }
footer .dance-text { color: var(--white); margin: 2rem 0 1rem; }

/* =========================================
   KEYFRAMES
   ========================================= */
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(216,105,93,0.7); } 70% { box-shadow: 0 0 0 10px rgba(216,105,93,0); } 100% { box-shadow: 0 0 0 0 rgba(216,105,93,0); } }
@keyframes pulseRedInfinite { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (min-width: 768px) {
    .intro-grid { flex-direction: row; justify-content: center; align-items: flex-start; }
    .person-card { flex-basis: 50%; }
    .timeline { padding: 2rem 0; border: none; }
    .timeline::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: var(--color-sage-light); transform: translateX(-50%); }
    .timeline-item { width: 45%; padding-left: 0; text-align: right; margin-left: 0; }
    .timeline-item:nth-child(even) { margin-left: 55%; text-align: left; }
    .timeline-item::before { left: auto; right: -41px; }
    .timeline-item:nth-child(even)::before { left: -41px; right: auto; }
}

@media (max-width: 480px) {
    .welcome-content { border-radius: 120px 120px 0 0; max-width: 320px; padding: 3rem 1.5rem; }
    .welcome-content .dance-text { font-size: 3rem; }
    .hero-arch { border-radius: 50% 50% 0 0 / 15% 15% 0 0; padding: 2rem 1rem; }
    .hero-arch .dance-text { font-size: 3rem; }
    .hero-arch-image { height: 260px; }
    .person-oval { width: 220px; height: 280px; }
    .event-card { margin-top: 70px; padding-bottom: 2rem; }
    .event-card-circle { width: 140px; height: 140px; margin: -70px auto 1rem; border-width: 6px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid img { height: 180px; }
}

/* =========================================
   FALLING CHERRY BLOSSOMS (HOA ĐÀO RƠI)
   ========================================= */
#petals-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9999; overflow: hidden;
}
.petal {
    position: absolute;
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.8) 0%, rgba(255, 204, 213, 0.6) 100%);
    border-radius: 15px 0px 15px 0px;
    box-shadow: 0 0 5px rgba(255, 183, 197, 0.2);
    pointer-events: none;
    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, alternate;
}

@keyframes fall {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

@keyframes sway {
    0% { transform: translateX(0px) rotate(0deg); }
    100% { transform: translateX(45px) rotate(65deg); }
}