/* ================================ */
/* MAIN PAGE STYLES                 */
/* (Separated from index.html)      */
/* ================================ */

/* Prevent mobile browsers from auto-adjusting font sizes */
html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
}
html * {
    max-height: 999999px; /* Disables Android Chrome text-inflation heuristic */
}

/* Hero inner canvas - fixed at design dimensions, scaled via JS */
#heroInner {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Arabic Typesetting fallback - Scheherazade New loaded from Google Fonts */
.font-arabic {
    font-family: 'Scheherazade New', 'Arabic Typesetting', 'Traditional Arabic', serif;
}

/* Gradient text for "Events" */
.gradient-text-green {
    background: linear-gradient(180deg, #55633B 0%, #475037 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gold ribbon bar below hero */
.gold-bar {
    background: linear-gradient(180deg, #AA9354 0%, #796327 100%);
}

/* View Location button gradient */
.btn-location {
    background: linear-gradient(180deg, #79816B 0%, #55633B 100%);
}

/* WhatsApp Button gradient */
.btn-whatsapp {
    background: linear-gradient(180deg, #AEA386 0%, #949083 100%);
    border: 1px solid #A89B79;
    box-shadow: 0px 4px 4px rgba(75, 60, 22, 0.48);
}

/* Icon circle with shadow */
.icon-circle {
    background: linear-gradient(360deg, #FFF6EB 0%, #FFFFFF 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.info-circle-shadow {
    box-shadow: 0px 0px 8.3px rgba(0, 0, 0, 0.31);
}

/* Event card shadow */
.card-shadow {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

/* Venue card shadow */
.venue-shadow {
    box-shadow: 0px 1px 4px 2px #DED2C2;
}

/* Nav pill shadow */
.nav-pill-shadow {
    box-shadow: 0px 0px 4px rgba(142, 102, 142, 0.33);
}

/* Content region bg */
.content-section-bg {
    background: rgba(255, 255, 255, 0.15);
}

/* ================================ */
/* SCROLL ANIMATION STATES          */
/* ================================ */

.anim-hero {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}
.anim-hero.visible {
    opacity: 1;
}

.anim-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.anim-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.anim-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.anim-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.anim-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.anim-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.visible .anim-float {
    animation: float-up-down 3.5s ease-in-out infinite;
}
@keyframes float-up-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Breakdown Line Edge Dots */
.line-dot {
    position: relative;
    overflow: visible !important;
}
.line-dot::before, .line-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 4px;
    height: 4px;
}
.line-dot-dark::before, .line-dot-dark::after {
    background: #475037;
}
.line-dot-light::before, .line-dot-light::after {
    background: rgba(30, 30, 30, 0.5);
}
.line-dot::before { left: -2px; }
.line-dot::after { right: -2px; }

/* Gold variant for lavender theme */
.line-dot-gold::before, .line-dot-gold::after {
    background: #AC9353;
}


/* Smooth scroll on main invitation */
.main-invitation {
    scroll-behavior: smooth;
}

/* ================================ */
/* DESKTOP SCROLLBAR                */
/* Move scrollbar outside phone     */
/* frame to the dark desktop area   */
/* ================================ */

/* Hide scrollbar inside the phone frame */
.invitation-content::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
.invitation-content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Custom themed scrollbar on the desktop wrapper */
.desktop-scroll-track {
    position: fixed;
    right: 0;
    top: 0;
    width: 8px;
    height: 100vh;
    background: rgba(51, 51, 51, 0.6);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.desktop-scroll-track.visible {
    opacity: 1;
    pointer-events: auto;
}

.desktop-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 40px;
    background: linear-gradient(180deg, #D7BC78 0%, #AA9354 100%);
    border-radius: 4px;
    cursor: grab;
    transition: background 0.2s ease;
}
.desktop-scroll-thumb:hover {
    background: linear-gradient(180deg, #E5D08E 0%, #C39826 100%);
}
.desktop-scroll-thumb:active {
    cursor: grabbing;
}

/* Hide desktop scrollbar on actual mobile devices */
@media (max-width: 428px) {
    .desktop-scroll-track {
        display: none !important;
    }
}

/* ================================ */
/* STICKY NAV BEHAVIOR              */
/* Show on scroll-up, hide on stop  */
/* ================================ */

#stickyNav {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#stickyNav.nav-hidden {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(20px) !important;
    pointer-events: none !important;
}
#stickyNav.nav-visible {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}