/* styles.css */
:root {
    /* Colors */
    --c-maroon: #5C0000;
    --c-royal-red: #C41E3A;
    --c-gold: #D4AF37;
    --c-gold-light: #F3E5AB;
    --c-ivory: #FFFFF0;
    --c-emerald: #145A32;
    --c-saffron: #F4C430;
    --c-pink: #FFB6C1;
    --c-dark: #0a0a0a;

    /* Fonts */
    --f-cinzel: 'Cinzel', serif;
    --f-accent: 'Great Vibes', cursive;
    --f-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--f-body);
    background-color: var(--c-dark);
    color: var(--c-ivory);
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Apply a very subtle baseline text-shadow to all text to prevent blending */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Typography Utilities */
.font-cinzel { font-family: var(--f-cinzel); }
.font-accent { font-family: var(--f-accent); }
.font-bold { font-weight: 600; }

.text-gold { color: var(--c-gold) !important; }
.text-gold-light { color: var(--c-gold-light) !important; }
.text-maroon { color: var(--c-maroon) !important; }
.text-ivory { color: var(--c-ivory) !important; }

/* Golden Gradient for Titles with Animated Sheen */
.text-gradient-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #FFF8DC 20%, #D4AF37 40%, #B5952F 60%, #D4AF37 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    animation: goldSheen 4s linear infinite;
}
@keyframes goldSheen {
    to { background-position: 200% center; }
}
/* Ensure the drop shadow applies correctly to gradient text using filter */
.text-gradient-gold.drop-shadow-heavy {
    filter: drop-shadow(2px 3px 0px #4B2E05) drop-shadow(0px 0px 15px #3A2300);
    text-shadow: none; /* Disable standard text-shadow when using filter */
}

/* Text Shadows for Readability */
.drop-shadow-heavy { text-shadow: 2px 4px 15px rgba(0,0,0,0.9), 0 0 25px rgba(0,0,0,0.8); }
.drop-shadow-light { text-shadow: 2px 2px 10px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.5); }
.glow-text { text-shadow: 0 0 15px rgba(212,175,55,0.8), 0 0 30px rgba(212,175,55,0.6); }

h1, h2, h3 { font-weight: normal; }
.title { font-size: 5rem; line-height: 1.1; margin: 35px 0; padding: 10px; }
.section-title { font-size: 3.5rem; margin-bottom: 20px; letter-spacing: 2px; }
.title-huge { font-size: 5.5rem; margin-bottom: 10px; }
.subtitle { font-size: 1.2rem; font-family: var(--f-cinzel); letter-spacing: 4px; text-transform: uppercase; text-shadow: 2px 2px 8px rgba(0,0,0,1); }
.amp { font-family: var(--f-cinzel); font-size: 3.5rem; color: var(--c-ivory); }
.invite-text { font-size: 1.3rem; margin-top: 10px; text-shadow: 2px 2px 8px rgba(0,0,0,1); }

/* Layout & Cinematic Engine */
.cinematic-section {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* Perfect CSS Parallax */
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Fallback for iOS where fixed can be buggy */
@supports (-webkit-touch-callout: none) { .cinematic-section { background-attachment: scroll; } }

/* Overlays for contrast */
.overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%); z-index: 1; pointer-events: none; }
.overlay-dark { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.65); z-index: 1; pointer-events: none; }
.overlay-light { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(255,255,240,0.65); z-index: 1; pointer-events: none; }

/* Content Container */
.content {
    position: relative;
    z-index: 40;
    text-align: center;
    max-width: 800px;
    width: 90%;
    padding: 20px 0;
}
.flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.text-content {
    /* Extreme text shadows to ensure it never merges with background */
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 0 0 15px rgba(0,0,0,1);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 70%); 
    padding: 20px;
}
.text-content.text-maroon { 
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 0 0 15px rgba(255,255,255,1);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 70%);
}
.text-content p { margin-bottom: 12px; font-size: 1.2rem; line-height: 1.5; }
.text-content .date { font-weight: bold; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;}
.text-content .venue { font-family: var(--f-cinzel); font-size: 1.3rem; font-weight: 600; color: var(--c-ivory); margin-bottom: 15px; letter-spacing: 1px; text-transform: uppercase;}
.text-content.text-maroon .venue { color: var(--c-maroon); }

/* Asset Positioning (Standard Flow / Absolute strictly contained) */
.full-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; pointer-events: none;}
.full-cover-bottom { position: absolute; bottom: 0; left: 0; width: 100%; max-height: 100%; object-fit: contain; object-position: bottom center; z-index: 5; }
.frame-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; z-index: 30; pointer-events: none;}
.frame-top { position: absolute; top: 0; left: 0; width: 100%; object-fit: contain; object-position: top center; z-index: 20; max-height: 30svh;}

.frame-top2 { position: absolute; top: 0; left: 0; width: 100%; object-fit: contain; object-position: top center; z-index: 20; max-height: 70svh;}

.frame-bottom { position: absolute; bottom: 0; left: 0; width: 100%; object-fit: contain; object-position: bottom center; z-index: 10; max-height: 40svh;}

.bg-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 800px; z-index: 5;}
.corner-tl { position: absolute; top: 0; left: 0; width: 50%; max-width: 300px; z-index: 20; }
.corner-tr { position: absolute; top: 0; right: 0; width: 50%; max-width: 300px; z-index: 20; }

.motif-main { width: 50%; max-width: 350px; z-index: 30; position: relative; }
.motif-fire { position: absolute; bottom: 2%; left: 0; right: 0; margin: 0 auto; width: 40%; max-width: 300px; z-index: 30; }
.motif-chandelier { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; max-width: 700px; z-index: 20;}

/* Special Baraat Scene */
.baraat-elephant { position: absolute; bottom: 10%; left: 5%; width: 45%; max-width: 500px; z-index: 20; }
.baraat-horse { position: absolute; bottom: 5%; right: 5%; width: 40%; max-width: 450px; z-index: 30; }

/* Special Family Scene */
.door-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 30; pointer-events: none; }
.door { position: absolute; top: 0; height: 100%; width: 52%; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); }
.door-left { left: 0; }
.door-right { right: 0; }
.peacock-left { position: absolute; bottom: 5%; left: 5%; width: 30%; max-width: 300px; z-index: 20; }
.peacock-right { position: absolute; bottom: 5%; right: 5%; width: 30%; max-width: 300px; z-index: 20; }

/* Utilities */
.flip-h { transform: scaleX(-1); }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }
.z-20 { z-index: 20; }
.z-40 { z-index: 40; }
.shadow-heavy { box-shadow: 0 15px 40px rgba(0,0,0,0.6); }

/* UI Elements */
.scroll-indicator { margin-top: 40px; display: flex; flex-direction: column; align-items: center; font-size: 0.9rem; color: var(--c-ivory); text-transform: uppercase; letter-spacing: 2px;}
.mouse { width: 22px; height: 34px; border: 2px solid var(--c-ivory); border-radius: 12px; margin-top: 10px; position: relative; }
.mouse::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--c-ivory); border-radius: 50%; animation: scrollWheel 1.5s infinite; }

.couple-photo { width: 220px; height: 220px; border-radius: 50%; border: 5px solid var(--c-gold); object-fit: cover; margin-bottom: 25px; }
.family-grid { display: flex; justify-content: space-around; margin-top: 30px; gap: 20px; }
.family-side h3 { font-family: var(--f-cinzel); font-size: 1.4rem; font-weight: 600; margin-bottom: 8px;}
.family-side p { font-size: 1.2rem; }

.border-frame { width: 94%; height: 94%; top: 3%; left: 3%; object-fit: fill; border-radius: 10px;}

.motif-diya-left { position: absolute; bottom: 15%; left: 15%; width: 15%; max-width: 150px; }
.motif-diya-right { position: absolute; bottom: 25%; right: 15%; width: 12%; max-width: 120px; }

/* Buttons & Forms */
.btn { display: inline-block; padding: 14px 28px; margin-top: 20px; text-decoration: none; text-transform: uppercase; font-weight: bold; letter-spacing: 1.5px; border-radius: 40px; transition: all 0.3s; font-size: 1rem; text-shadow: none; }
.btn-maroon { border: 2px solid var(--c-maroon); color: var(--c-maroon); background: transparent; }
.btn-maroon:hover { background: var(--c-maroon); color: var(--c-ivory); }
.btn-solid-maroon { background: var(--c-maroon); color: var(--c-gold); border: none; cursor: pointer; width: 100%; margin-top: 10px;}
.btn-solid-maroon:hover { background: #3a0000; }

.rsvp-form { display: flex; flex-direction: column; gap: 15px; max-width: 450px; margin: 0 auto; margin-top: 30px;}
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { padding: 15px; background: rgba(255,255,255,0.85); border: 1px solid var(--c-maroon); color: var(--c-dark); border-radius: 5px; font-family: var(--f-body); font-size: 1.1rem; width: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-shadow: none;}
.rsvp-form textarea { resize: vertical; min-height: 120px; }


/* --- ROBUST ANIMATION SYSTEM (TRIGGERED BY JS) --- */

.animate-on-scroll { opacity: 0; will-change: transform, opacity; }

.fade-up { transform: translateY(60px); transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

.fade-in { transition: opacity 1.5s ease-in-out; }
.fade-in.is-visible { opacity: 1; }

.slide-down { transform: translateY(-100%); transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.5s ease; }
.slide-down.is-visible { opacity: 1; transform: translateY(0); }

.slide-up { transform: translateY(100%); transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.5s ease; }
.slide-up.is-visible { opacity: 1; transform: translateY(0); }

.slide-in-left { transform: translateX(-100px); transition: transform 1.2s ease-out, opacity 1.2s ease; }
.slide-in-left.is-visible { opacity: 1; transform: translateX(0); }

.slide-in-right { transform: translateX(100px); transition: transform 1.2s ease-out, opacity 1.2s ease; }
.slide-in-right.is-visible { opacity: 1; transform: translateX(0); }

.door-left { transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1); }
.door-right { transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1); }
.open-doors-trigger { opacity: 1 !important; }
.open-doors-trigger.is-visible .door-left { transform: translate3d(-100%, 0, 0); }
.open-doors-trigger.is-visible .door-right { transform: translate3d(100%, 0, 0); }

.scale-up { transform: scale(0.85); transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease; }
.scale-up.is-visible { opacity: 1; transform: scale(1); }

.bounce-in { transform: scale(0.5); transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 1s ease; }
.bounce-in.is-visible { opacity: 1; transform: scale(1); }

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }


/* Endless Ambient Animations */
@keyframes scrollWheel { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 15px); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 0.2; transform: scale(0.95); } 50% { opacity: 0.8; transform: scale(1.05); } }
@keyframes falling { 0% { background-position: 0 -100svh; } 100% { background-position: 0 100svh; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } }
@keyframes fire-flicker { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes rotate-slow { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.blinking { animation: blink 4s infinite ease-in-out; }
.falling { animation: falling 15s linear infinite; }
.float { animation: float 5s infinite ease-in-out; }
.fire-flicker { animation: fire-flicker 1s infinite alternate; }
.rotate-slow { animation: rotate-slow 60s linear infinite; }


/* Mobile Adjustments */
@media (max-width: 768px) {
    .cinematic-section { background-attachment: scroll !important; }
    
    .title { font-size: 3rem; }
    .section-title { font-size: 2.5rem; margin-bottom: 15px; }
    .title-huge { font-size: 4rem; }
    .amp { font-size: 2.2rem; }
    .subtitle { font-size: 1rem; letter-spacing: 2px;}
    .invite-text { font-size: 1.1rem; }
    .text-content p { font-size: 1.05rem; }
    .text-content .date { font-size: 1.2rem; }
    
    .couple-photo { width: 170px; height: 170px; }
    .family-grid { flex-direction: column; gap: 15px; margin-top: 15px; }
    
    .baraat-elephant { width: 60%; bottom: 8%; left: 0; }
    .baraat-horse { width: 55%; bottom: 2%; right: 0; }
    
    .motif-main { width: 70%; }
    .motif-chandelier { width: 85%; }
}

/* Mobile Frame */
body { background-color: #050505; display: flex; justify-content: center; }
#mobile-frame { width: 100%; max-width: 480px; margin: 0 auto; position: relative; background-color: var(--c-dark); min-height: 100vh; box-shadow: 0 0 50px rgba(0,0,0,0.8); overflow-x: hidden; }
@media (min-width: 481px) { #mobile-frame { border-left: 1px solid #333; border-right: 1px solid #333; } }

/* Splash Screen & New Royal Elements */
.splash-doors { z-index: 10; }
.pulse-glow { animation: pulseGlow 2s infinite alternate; }
@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), 0 0 20px rgba(212, 175, 55, 0.2); transform: scale(1); }
    100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.5); transform: scale(1.05); }
}

.cinematic-section::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px);
    pointer-events: none;
    z-index: 100;
    border: 1px solid var(--c-gold);
    outline: 2px solid var(--c-gold);
    outline-offset: -6px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    opacity: 0.6;
}

@keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 60s linear infinite; }
/* Audio Mute Button */
.mute-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.4); /* Gold border */
    color: var(--c-gold);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.mute-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.mute-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

@media (min-width: 481px) {
    .mute-btn {
        right: auto;
        left: calc(50% + 175px);
    }
}