/* Styles for the gallery page */
body {
    display: block; /* Override the flexbox centering from style.css */
    height: auto; /* Allow the page to scroll */
    align-items: flex-start;
    /* Deep atmospheric haunted mansion background - because Pinterest weddings aren't spooky */
    background-color: #0a0a0f;
    background-image: radial-gradient(ellipse at top, #1a1520 0%, #0a0a0f 50%, #050508 100%);
    cursor: url('../assets/pencil.png'), auto; /* Custom pencil cursor */
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #ff7f50;
    color: #1a1a1a;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
    font-family: 'Lato', sans-serif;
}

.skip-link:focus {
    top: 0;
}

header {
    width: 100%;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    position: relative; /* Needed for back button positioning */
}

.back-button {
    position: absolute;
    top: 25px;
    left: 25px;
    color: #1a1410;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: 'Creepster', cursive;
    background-color: #d4c4b0;
    padding: 10px 20px;
    border-radius: 3px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.6), 0 0 15px rgba(0,0,0,0.3);
    transform: rotate(-4deg);
    transition: transform 0.3s ease;
}

.back-button:hover {
    transform: rotate(0deg) scale(1.1);
}

.back-button:focus-visible {
    outline: 3px solid #ff7f50;
    outline-offset: 4px;
}

/* Tape for the back button - aged and weathered */
.back-button::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background-color: rgba(180, 160, 100, 0.25);
    border-left: 1px dashed rgba(0,0,0,0.3);
    border-right: 1px dashed rgba(0,0,0,0.3);
}

/* Gallery title - prominent and separate from the book */
.gallery-title {
    font-family: 'Creepster', cursive;
    font-size: 3.5rem;
    color: #d4c4b0;
    text-align: center;
    margin: 20px auto 30px;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.9), 0 0 20px rgba(255,107,53,0.3);
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    animation-delay: 0.2s; /* Slightly delayed after page elements */
}

#continue-button {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #1a1410;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: 'Creepster', cursive;
    background-color: #d4c4b0;
    padding: 10px 20px;
    border-radius: 3px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.6), 0 0 15px rgba(0,0,0,0.3);
    transform: rotate(4deg);
    transition: transform 0.3s ease;
}

#continue-button:hover {
    transform: rotate(0deg) scale(1.1);
}

#continue-button:focus-visible {
    outline: 3px solid #ff7f50;
    outline-offset: 4px;
}

#continue-button::before {
    content: '✉️ '; /* Envelope emoji */
}


.book-container {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto; /* Increased margin for better spacing */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    /* Add a book cover effect - deeper shadows for drama */
    border: 15px solid #1a1108;
    border-radius: 10px;
    /* Enhanced dramatic shadows - this book casts shadows like it's cursed */
    box-shadow:
        0 15px 50px rgba(0,0,0,0.9),    /* Deep primary shadow */
        0 8px 25px rgba(0,0,0,0.8),     /* Mid-range shadow */
        0 30px 80px rgba(0,0,0,0.7),    /* Extended far shadow */
        inset 0 0 30px rgba(0,0,0,0.3); /* Subtle inner depth */
    background-color: #1a1108; /* Match border for a solid cover */
    /* Page load animation - fade in with subtle upward movement */
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.book-page {
    width: 45%;
    padding: 20px;
    /* Dark aged paper - like it's been sitting in a dusty attic since the 1920s */
    background-color: #2d2820; /* Base aged paper */

    /* Multi-layered background system - fine grain texture + coffee stains */
    background-image:
        /* Fine grain texture using repeating gradients */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.03) 2px,
            rgba(0,0,0,0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.03) 2px,
            rgba(0,0,0,0.03) 4px
        ),
        /* Coffee stains / age spots in random positions */
        radial-gradient(
            ellipse at 20% 30%,
            rgba(50,40,20,0.15) 0%,
            transparent 40%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(40,30,15,0.1) 0%,
            transparent 35%
        ),
        radial-gradient(
            ellipse at 60% 10%,
            rgba(45,35,20,0.12) 0%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 15% 85%,
            rgba(48,38,22,0.08) 0%,
            transparent 25%
        );

    /* Enhanced vignette - stronger corner darkness */
    box-shadow:
        inset 0 0 80px rgba(0,0,0,0.6),    /* Stronger outer vignette */
        inset 0 0 40px rgba(0,0,0,0.4),    /* Mid-range darkness */
        inset 0 0 20px rgba(0,0,0,0.2),    /* Inner subtle shade */
        8px 8px 30px rgba(0,0,0,0.9),      /* Deep external shadow */
        4px 4px 15px rgba(0,0,0,0.7);      /* Mid external shadow */

    /* Subtle contrast/brightness adjustment for aged feel */
    filter: contrast(1.08) brightness(0.92) saturate(0.95);

    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.book-page.left {
    border-right: 2px solid #1a1410; /* Darker book spine for the new aesthetic */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    /* Torn right edge (facing the spine) - organic hand-ripped look */
    clip-path: polygon(
        0% 0%, /* Top left corner - clean */
        95% 0%, 96% 1%, 98% 0.5%, 99% 1.5%, 100% 1%, /* Top edge - slightly rough */
        100% 3%, 100% 8%, 99.5% 12%, 100% 18%, /* Right edge start - tears */
        99% 25%, 100% 32%, 99.5% 40%, /* More tears */
        100% 48%, 99% 55%, 100% 63%, /* Mid-right tears */
        99.5% 70%, 100% 78%, 99% 85%, /* Lower tears */
        100% 92%, 99.5% 96%, 100% 98%, 100% 100%, /* Bottom right */
        98% 100%, 95% 99.5%, 90% 100%, 80% 99%, /* Bottom edge - rough */
        70% 100%, 60% 99.5%, 50% 100%, 40% 99%,
        30% 100%, 20% 99.5%, 10% 100%, 5% 99%, 2% 100%,
        0% 100%, 0% 95%, 0% 5%, 0% 0% /* Left edge - clean */
    );
}

.book-page.right {
    border-left: 2px solid #1a1410; /* Darker book spine for the new aesthetic */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    /* Torn left edge (facing the spine) - organic hand-ripped look */
    clip-path: polygon(
        0% 1%, 1% 0.5%, 2% 1.5%, 3% 0%, 5% 1%, 100% 0%, /* Top edge */
        100% 0%, 100% 100%, /* Right edge - clean */
        95% 100%, 90% 99%, 80% 100%, 70% 99.5%, /* Bottom edge - rough */
        60% 100%, 50% 99%, 40% 100%, 30% 99.5%,
        20% 100%, 10% 99%, 5% 100%, 2% 99.5%, 1% 100%,
        0% 100%, 0% 98%, 0.5% 95%, 0% 90%, /* Left edge - tears start */
        1% 85%, 0% 78%, 0.5% 70%, /* More tears */
        0% 63%, 1% 55%, 0% 48%, 0.5% 40%, /* Mid-left tears */
        0% 32%, 1% 25%, 0% 18%, 0.5% 12%, /* Upper tears */
        0% 8%, 0% 3%, 0% 1% /* Top left */
    );
}

/* --- Spiral Binding - Centered at spine --- */
.spiral-binding {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 100%;
    z-index: 5; /* Above pages, below photos so photos can lift on hover */
    pointer-events: none;
}

.spiral-binding svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.8));
}





/* --- Floating Orbs Animation --- */
.floating-orbs-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind everything */
    overflow: hidden;
}

.orb {
    position: absolute;
    background-color: rgba(255, 127, 80, 0.3); /* Coral, semi-transparent */
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 127, 80, 0.5);
    animation: float-orb 20s infinite ease-in-out;
}

.orb:nth-child(1) { width: 50px; height: 50px; left: 10%; animation-duration: 25s; }
.orb:nth-child(2) { width: 20px; height: 20px; left: 30%; animation-duration: 18s; animation-delay: 3s; }
.orb:nth-child(3) { width: 80px; height: 80px; left: 50%; animation-duration: 30s; animation-delay: 1s; }
.orb:nth-child(4) { width: 40px; height: 40px; left: 70%; animation-duration: 22s; animation-delay: 5s; }
.orb:nth-child(5) { width: 60px; height: 60px; left: 90%; animation-duration: 28s; animation-delay: 2s; }

@keyframes float-orb {
    0% { transform: translateY(100vh) scale(1); }
    50% { transform: translateY(40vh) scale(1.2); opacity: 0.8; }
    100% { transform: translateY(-100px) scale(0.8); opacity: 0; }
}


.gallery-item {
    position: relative;
    background-color: #fff;
    padding: 10px;
    /* Subtle spotlight effect - brighter center, darker edges */
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.3),        /* Subtle vignette */
        0 4px 12px rgba(0,0,0,0.6),             /* Drop shadow */
        0 0 20px rgba(255,107,53,0.05);         /* Very subtle warm glow */
    /* Slight contrast boost for "dusty attic" feel */
    filter: contrast(1.05) brightness(0.98);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: scale(1.05) rotate(0deg) !important; /* Untilt on hover */
    z-index: 10;
    /* Enhanced dramatic lighting on hover */
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.2),
        0 8px 20px rgba(0,0,0,0.8),
        0 0 30px rgba(255,107,53,0.15);  /* Stronger warm glow on hover */
    filter: contrast(1.08) brightness(1.02);
}

.gallery-item:focus-visible {
    outline: 3px solid #ff7f50;
    outline-offset: 4px;
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 10;
}

/* Add random-looking rotations */
.gallery-item:nth-child(3n) { transform: rotate(2deg); }
.gallery-item:nth-child(3n+1) { transform: rotate(-3deg); }
.gallery-item:nth-child(3n+2) { transform: rotate(1deg); }

.gallery-item img {
    width: 100%;
    display: block;
}

/* "Taped-in" effect - aged, darker tape for the haunted aesthetic */
.gallery-item::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 25px;
    background-color: rgba(180, 160, 100, 0.25); /* Darker aged tape */
    border-left: 1px dashed rgba(0,0,0,0.3);
    border-right: 1px dashed rgba(0,0,0,0.3);
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* --- Modal Styles --- */
.modal {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0);
    /* Use visibility and opacity for smooth transitions */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* When modal is visible - triggered by JavaScript */
.modal.modal-visible {
    visibility: visible;
    opacity: 1;
    background-color: rgba(0,0,0,0.9);
}

/* Frame deleted - clean bordered style across all devices now */
.modal::after {
    display: none; /* The ornate frame fought a good fight, but simplicity won */
}

.modal-content {
    margin: auto;
    display: block;
    width: 85%; /* Responsive width for desktop */
    max-width: 800px;
    max-height: 80vh; /* Viewport-based for flexibility across screen sizes */
    object-fit: contain; /* Fit within bounds without cropping */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 100;
    /* Clean bordered style - consistent with mobile */
    border: 3px solid #8b4513; /* Aged wood brown */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 107, 53, 0.2); /* Haunted glow */
    border-radius: 4px;
}

/* Animate modal content when visible */
.modal.modal-visible .modal-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

#modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    opacity: 0;
    transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;
}

/* Animate caption when modal is visible */
.modal.modal-visible #modal-caption {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #d4c4b0; /* Aged cream to match the haunted theme */
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 102; /* Above everything else in the modal so it's always clickable */
    /* Dark semi-transparent background with gothic border - like an old ornate fixture */
    background: rgba(26, 26, 26, 0.85);
    border: 2px solid #8b4513; /* Dark aged wood border */
    border-radius: 6px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* Subtle blur for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 0 8px rgba(0, 0, 0, 0.4); /* Depth and dimension */
    transition: all 0.3s ease;
}

.modal-close:hover,
.modal-close:focus {
    background: rgba(255, 107, 53, 0.25); /* Orange glow on hover - haunted mansion lighting */
    color: #ff6b35; /* Halloween orange */
    border-color: #ff6b35;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4), 0 4px 12px rgba(0, 0, 0, 0.7);
    text-decoration: none;
    cursor: pointer;
    transform: scale(1.05); /* Slight growth on hover */
}

.modal-close:focus-visible {
    outline: 3px solid #ff7f50;
    outline-offset: 4px;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    /* Hide spiral binding on mobile - not needed in stacked layout */
    .spiral-binding {
        display: none;
    }

    .book-container {
        flex-direction: column; /* Stack pages vertically */
        border: none; /* Remove the book cover border */
        box-shadow: none;
        background-color: transparent;
        margin-top: 20px;
    }

    .book-page {
        width: 90%; /* Make pages wider */
        margin-bottom: 20px;
    }

    .book-page.left, .book-page.right {
        border: 2px solid #1a1410; /* Dark border to match the new theme */
        border-radius: 10px; /* Rounded corners all around */
        /* Remove torn edges on mobile for better compatibility and cleaner stacked layout */
        clip-path: none;
    }

    /* Remove the ornate frame entirely on mobile - it was fighting with portrait photos */
    .modal::after {
        display: none; /* Goodbye, gothic frame. You tried. */
    }

    .modal-content {
        width: 90%; /* Wider since there's no frame to constrain us */
        max-width: 500px;
        max-height: 70vh; /* Use viewport height for better mobile adaptation */
        object-fit: contain;
        /* Add a simple border so photos don't look naked without the frame */
        border: 3px solid #8b4513; /* Aged wood brown */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 107, 53, 0.2); /* Haunted glow */
        border-radius: 4px; /* Subtle rounding */
    }

    /* Close button needs to be more accessible on mobile */
    .modal-close {
        top: 10px;
        right: 15px;
        font-size: 35px;
        width: 45px;
        height: 45px;
    }

    /* Caption needs more space on mobile */
    #modal-caption {
        font-size: 1rem;
        width: 90%;
        bottom: 15px;
    }
}

/* --- Very Small Screens (Phone Portrait) --- */
@media (max-width: 480px) {
    .gallery-title {
        font-size: 2.5rem; /* Smaller title for tiny screens */
    }

    .back-button, #continue-button {
        font-size: 1.2rem;
        padding: 8px 15px;
        top: 15px;
    }

    .back-button {
        left: 15px;
    }

    #continue-button {
        right: 15px;
    }

    /* Frame is already hidden by the 768px breakpoint, so no need to hide it again */

    .modal-content {
        width: 90%; /* Keep it simple and consistent with tablet breakpoint */
        max-width: 450px;
        max-height: 65vh; /* Slightly smaller vh for portrait phones */
    }

    /* Close button easier to tap on small screens */
    .modal-close {
        top: 8px;
        right: 12px;
        font-size: 32px;
        width: 42px;
        height: 42px;
    }

    /* Caption even more compact */
    #modal-caption {
        font-size: 0.9rem;
        bottom: 10px;
    }
}

/* --- Interactive Ghost Styles --- */
.interactive-ghost {
    position: absolute; /* For ghosts inside containers */
    width: 150px;
    height: auto;
    z-index: 999;
    transition: top 6s ease, left 6s ease, opacity 3s ease;
    cursor: pointer;
    opacity: 0; /* Start invisible */
}

#ghost-follower {
    position: fixed; /* For the ghost that roams the whole page */
    pointer-events: none; /* Make the mouse pass through it */
}

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations for users who prefer reduced motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Ensure page content is immediately visible */
    .book-container,
    .gallery-title {
        animation: none;
        opacity: 1;
    }

    /* Disable ghost movements */
    .interactive-ghost {
        transition: none;
        opacity: 0 !important; /* Keep ghosts hidden if they rely on animation */
    }

    /* Gallery items hover effects become instant */
    .gallery-item:hover,
    .gallery-item:focus-visible {
        transition: none;
    }

    /* Modal appears/disappears instantly */
    .modal,
    .modal::after,
    .modal-content,
    #modal-caption {
        transition: none;
    }

    .modal.modal-visible {
        opacity: 1;
    }

    .modal.modal-visible .modal-content,
    .modal.modal-visible #modal-caption {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .modal.modal-visible #modal-caption {
        transform: translateX(-50%) translateY(0);
    }

    /* Navigation buttons transition instantly */
    .back-button,
    #continue-button {
        transition: none;
    }
}