/* ============================= */
/* FULL SCREEN OVERLAY           */
/* ============================= */

#photo-rain-container {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    background-color: rgba(255, 252, 249, 0.96);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(212, 163, 115, 0.05) 0%, transparent 20%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 45.7c-1.3-1.2-3.1-2.1-4.7-2.1-3.1 0-5.6 2.5-5.6 5.6 0 3.9 6.2 8.3 10.3 11.4 4.1-3.1 10.3-7.5 10.3-11.4 0-3.1-2.5-5.6-5.6-5.6-1.6 0-3.4 0.9-4.7 2.1z' fill='%23c19a6b' fill-opacity='0.12'/%3E%3C/svg%3E");
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.6s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#photo-rain-container.active {
    opacity: 1;
    pointer-events: auto;
}


/* ============================= */
/* CENTER MESSAGE                */
/* ============================= */

.success-message-wrapper {
    position: relative;
    text-align: center;
    z-index: 2500;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.success-title {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(218, 165, 32, 0.15);
    font-family: 'SimSun', 'Microsoft YaHei', serif;
}

.success-subtitle {
    color: #a0a0a0;
    font-weight: 300;
    font-family: 'SimSun', 'Microsoft YaHei', serif;
}

.text-fade-in {
    opacity: 0;
    animation: fadeText 1.5s ease forwards;
    animation-delay: 0.3s;
}

@keyframes fadeText {
    0%  { opacity: 0; transform: translateY(-15px); }
    to  { opacity: 1; transform: translateY(0); }
}


/* ============================= */
/* PHOTO GRID                    */
/* ============================= */

.fixed-photo-grid {
    position: relative;
    flex: 1;
    width: 100%;
    overflow: visible;
    z-index: 1200;
    min-height: 0;
}

.scatter-photo {
    position: absolute;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-radius: 4px;
    opacity: 0;
    cursor: pointer;
    transform: scale(0.3) rotate(var(--rot));
    animation: landPhoto 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes landPhoto {
    0%   { opacity: 0; transform: scale(0.2) rotate(calc(var(--rot) - 25deg)); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(var(--rot)); }
}

.scatter-photo:hover {
    transform: scale(1.08) rotate(var(--rot)) !important;
    z-index: 1500;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}


/* ===================================================== */
/* MOBILE  (max-width: 767px)                            */
/*                                                       */
/* Photos are landscape 3:2 ratio to match wedding pics  */
/* Photo: 32vw wide × 21vw tall (3:2 landscape)         */
/* 4 rows × ~22vw = ~88vw tall                          */
/* Row spacing in vh to fill portrait screen evenly      */
/*                                                       */
/* 3 columns: left 1vw | 34vw | 67vw                    */
/* 4 rows:    top  2vh | 27vh | 52vh | 72vh             */
/* ===================================================== */

@media (max-width: 767px) {
    .success-message-wrapper { padding: 4vh 20px 3vh; }
    .success-title   { font-size: 1.8rem; letter-spacing: 4px; margin-bottom: 2px; }
    .success-subtitle{ font-size: 0.9rem; letter-spacing: 2px; }

    .scatter-photo {
        width: 32vw;
        height: 21vw;   /* landscape 3:2 ratio */
        padding: 4px;
    }

    /* Row 1 — base top: 2vh */
    .scatter-photo:nth-child(1)  { top: calc(2vh  + 1vh);  left: calc(1vw   - 1vw); }
    .scatter-photo:nth-child(2)  { top: calc(2vh  - 0vh);  left: calc(34vw  + 2vw); }
    .scatter-photo:nth-child(3)  { top: calc(2vh  + 2vh);  left: calc(67vw  - 1vw); }

    /* Row 2 — base top: 27vh */
    .scatter-photo:nth-child(4)  { top: calc(27vh - 1vh);  left: calc(1vw   + 2vw); }
    .scatter-photo:nth-child(5)  { top: calc(27vh + 2vh);  left: calc(34vw  - 2vw); }
    .scatter-photo:nth-child(6)  { top: calc(27vh - 2vh);  left: calc(67vw  + 1vw); }

    /* Row 3 — base top: 52vh */
    .scatter-photo:nth-child(7)  { top: calc(52vh + 1vh);  left: calc(1vw   - 1vw); }
    .scatter-photo:nth-child(8)  { top: calc(52vh - 2vh);  left: calc(34vw  + 1vw); }
    .scatter-photo:nth-child(9)  { top: calc(52vh + 2vh);  left: calc(67vw  - 2vw); }

    /* Row 4 — base top: 72vh */
    .scatter-photo:nth-child(10) { top: calc(72vh - 1vh);  left: calc(1vw   + 1vw); }
    .scatter-photo:nth-child(11) { top: calc(72vh + 1vh);  left: calc(34vw  - 1vw); }
    .scatter-photo:nth-child(12) { top: calc(72vh - 2vh);  left: calc(67vw  + 1vw); }
}


/* ===================================================== */
/* DESKTOP  (min-width: 768px)                           */
/*                                                       */
/* 9 photos in a 3×3 loose grid.                        */
/* Base positions: col × 33.33vw, row × 22vw            */
/* Each photo nudged randomly within ±3vw / ±2vw        */
/* ===================================================== */

@media (min-width: 768px) {
    .success-message-wrapper { padding: 3vh 20px 2vh; }
    .success-title   { font-size: 2.8rem; letter-spacing: 8px; margin-bottom: 8px; }
    .success-subtitle{ font-size: 1.15rem; letter-spacing: 4px; }

    .scatter-photo { width: 22vw; height: 22vw; padding: 0.8vw; }

    /* Row 1 — base top: 0 */
    .scatter-photo:nth-child(1)  { top: calc(0vw   + 1vw);  left: calc(5.66vw  - 2vw); }
    .scatter-photo:nth-child(2)  { top: calc(0vw   - 0vw);  left: calc(39vw    + 2vw); }
    .scatter-photo:nth-child(3)  { top: calc(0vw   + 2vw);  left: calc(72.33vw - 1vw); }

    /* Row 2 — base top: 22vw */
    .scatter-photo:nth-child(4)  { top: calc(22vw  - 2vw);  left: calc(5.66vw  + 3vw); }
    .scatter-photo:nth-child(5)  { top: calc(22vw  + 2vw);  left: calc(39vw    - 3vw); }
    .scatter-photo:nth-child(6)  { top: calc(22vw  - 1vw);  left: calc(72.33vw + 1vw); }

    /* Row 3 — base top: 44vw */
    .scatter-photo:nth-child(7)  { top: calc(44vw  + 1vw);  left: calc(5.66vw  - 1vw); }
    .scatter-photo:nth-child(8)  { top: calc(44vw  - 2vw);  left: calc(39vw    + 3vw); }
    .scatter-photo:nth-child(9)  { top: calc(44vw  + 2vw);  left: calc(72.33vw - 2vw); }

    /* Hide any extra mobile-only photos on desktop */
    .scatter-photo:nth-child(n+10) { display: none; }
}


/* ============================= */
/* MODAL                         */
/* ============================= */

#photo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#photo-modal.active {
    opacity: 1;
    pointer-events: auto;
}

#photo-modal img {
    width: 90vw;
    height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    animation: modalZoom 0.4s ease forwards;
}

@keyframes modalZoom {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-hint {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.85rem;
    opacity: 0.7;
    letter-spacing: 2px;
    font-family: 'SimSun', 'Microsoft YaHei', sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}