/* full-photo visual identity. */


body.theme-full-photo .closing-section::before {
    opacity: .08;
}


body.theme-full-photo .closing-honor,
body.theme-full-photo .closing-happy,
body.theme-full-photo .closing-couple-name,
body.theme-full-photo .closing-family-item,
body.theme-full-photo .closing-family-item span,
body.theme-full-photo .closing-respect-title {
    color: rgba(255, 255, 255, .88);
}


body.theme-full-photo .closing-family-item {
    border-top-color: rgba(255, 255, 255, .18);
}


body.theme-full-photo .closing-section > .container > .closing-wassalam {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .34);
}

/* 14. Full Photo */
.theme-full-photo {
    --bs-light: rgba(0, 0, 0, 0.5);
    --bs-white: rgba(0, 0, 0, 0.35);
    --bs-dark: #ffffff;
    --bs-gray-100: rgba(0, 0, 0, 0.45);
    --bs-body-bg: transparent;
    color: var(--bs-dark);
}

.theme-full-photo .font-esthetic { font-family: "Great Vibes", cursive; }

.theme-full-photo h1, .theme-full-photo h2, .theme-full-photo h3, .theme-full-photo h4, .theme-full-photo h5, .theme-full-photo h6 { font-family: "Playfair Display", serif; }

.theme-full-photo { font-family: "Montserrat", sans-serif; }


/* Bug #1 & #2: Lock scroll before invitation is opened */
body.theme-full-photo:not(.is-open) { overflow: hidden !important; }

body.theme-full-photo:not(.is-open) #root {
    opacity: 0;
    pointer-events: none;
    height: 100vh;
    overflow: hidden;
}

body.theme-full-photo.is-open #root {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    transition: opacity 1s ease-in-out;
}


/* Bug #3: Make all section backgrounds transparent so photo shows through */
body.theme-full-photo,
body.theme-full-photo section,
body.theme-full-photo .col-sm-7,
body.theme-full-photo .bg-light-dark,
body.theme-full-photo .bg-white-black {
    background-color: transparent !important;
}


/* Translucent panels keep text readable over full-photo backgrounds. */
body.theme-full-photo .bg-theme-auto,
body.theme-full-photo .panel,
body.theme-full-photo .modal-content,
body.theme-full-photo .border.rounded-5.shadow,
body.theme-full-photo .border.rounded-pill.shadow {
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}


/* Bug #4: Hide SVG wave separators completely */
body.theme-full-photo .svg-wrapper { display: none !important; }


/* Scroll-reveal animation for each section */
body.theme-full-photo main > section,
body.theme-full-photo main > .svg-wrapper + section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body.theme-full-photo main > section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Blur effect on the first page (#home) after open invitation */
body.theme-full-photo #home {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

body.theme-full-photo #home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(0, 0, 0, 0.18) 42%,
        rgba(0, 0, 0, 0.62) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.theme-full-photo #home > .bg-overlay-auto {
    z-index: 1;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


body.theme-full-photo .color-theme-svg {
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.4) !important;
}

body.theme-full-photo .svg-wrapper:nth-of-type(even) .color-theme-svg {
    color: rgba(0, 0, 0, 0.3) !important;
}


/* Bug #5: Hide desktop left panel, make content full-width but centered */
body.theme-full-photo .sticky-top.vh-100.d-none.d-sm-block { display: none !important; }

body.theme-full-photo .col-sm-7,
body.theme-full-photo .col-md-6,
body.theme-full-photo .col-lg-5,
body.theme-full-photo .col-xl-4,
body.theme-full-photo .col-xxl-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}


/* Responsive content centering */
body.theme-full-photo main {
    max-width: 600px;
    margin: 0 auto;
}

body.theme-full-photo #root {
    justify-content: center !important;
}


/* Navbar follows content width */
body.theme-full-photo #navbar-menu {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem 1rem 0 0 !important;
}


/* Audio float repositioned for full-photo centered layout */
body.theme-full-photo .audio-float {
    /* Position relative to centered content, not viewport edge */
    right: auto;
    left: 50%;
    transform: translateX(280px); /* half of max-width (600/2) minus small offset */
}


/* Full-photo can use photo-friendly decorative ornaments. */
body.theme-full-photo #theme-ornaments {
    display: block !important;
}


/* Full-screen sections with centered content */
body.theme-full-photo main > section {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-top: 2rem !important;
    padding-bottom: 70px !important; /* Clearance for sticky navbar */
    box-sizing: border-box;
}


/* Scroll snap for page-by-page scrolling */
body.theme-full-photo {
    scroll-snap-type: y proximity;
}

body.theme-full-photo main > section {
    scroll-snap-align: start;
}


/* Keep dense sections close to one viewport in the full-photo story flow */
body.theme-full-photo #bride {
    gap: .75rem;
}

body.theme-full-photo #bride .font-arabic,
body.theme-full-photo #bride > .font-esthetic {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    line-height: 1.35;
}

body.theme-full-photo #bride > p {
    padding-bottom: .75rem !important;
}

body.theme-full-photo #bride .img-center-crop {
    width: 10rem;
    height: 10rem;
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
}

body.theme-full-photo #bride .overflow-x-hidden {
    width: 100%;
}

body.theme-full-photo #bride .overflow-x-hidden > .font-esthetic {
    font-size: 3rem !important;
    line-height: 1;
    margin-top: .75rem !important;
    margin-bottom: .25rem !important;
}

body.theme-full-photo #gallery .carousel .gallery-photo {
    height: min(54vh, 560px);
    aspect-ratio: auto;
}

body.theme-full-photo #gallery .row.g-2.mt-3 {
    flex-wrap: nowrap;
}

body.theme-full-photo #gallery .row.g-2.mt-3 > .col-6 {
    flex: 0 0 25%;
    max-width: 25%;
}

body.theme-full-photo #gallery .row.g-2.mt-3 .gallery-photo {
    height: clamp(64px, 18vw, 120px);
    aspect-ratio: auto;
}


/* Bug #6: Navbar semi-transparent with blur */
body.theme-full-photo .navbar {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-full-photo .navbar .nav-link { color: rgba(255, 255, 255, 0.6); }

body.theme-full-photo .navbar .nav-link.active, body.theme-full-photo .navbar .nav-link:hover { color: #ffffff; }


/* Welcome page: hide circle photo, sharp bg, readable text */
body.theme-full-photo .loading-page {
    background: transparent !important;
}

body.theme-full-photo .loading-page .img-center-crop {
    display: none !important;
}

body.theme-full-photo .loading-page h2,
body.theme-full-photo .loading-page small,
body.theme-full-photo .loading-page strong,
body.theme-full-photo .loading-page div {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
}

body.theme-full-photo .loading-page small {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-full-photo .loading-page strong {
    color: #ffffff !important;
    font-size: 1.15rem;
}

body.theme-full-photo .loading-page #button-open-invitation {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* Text & UI colors */
body.theme-full-photo .text-theme-auto { color: #ffffff !important; }

body.theme-full-photo .text-secondary, body.theme-full-photo .text-muted { color: rgba(255, 255, 255, 0.7) !important; }

body.theme-full-photo .btn-outline-auto {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
}

body.theme-full-photo main > section:not(#home) {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}

body.theme-full-photo main > section:not(#home) .btn,
body.theme-full-photo main > section:not(#home) .form-control,
body.theme-full-photo main > section:not(#home) .form-select,
body.theme-full-photo main > section:not(#home) textarea {
    text-shadow: none;
}

body.theme-full-photo .form-control, body.theme-full-photo .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body.theme-full-photo .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }

body.theme-full-photo #home img.bg-cover-home { display: none !important; }

body.theme-full-photo .bg-overlay-auto {
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px);
}

body.theme-full-photo .bg-white-black.border {
    background-color: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


body.theme-full-photo .full-photo-bg-layer {
    animation: fullPhotoKenBurns 18s ease-in-out infinite alternate;
    transform-origin: center;
}


body.theme-full-photo .full-photo-bg-layer:nth-child(even) {
    animation-duration: 22s;
    transform-origin: 60% 40%;
}