/* ===========================
   PhotoBet Custom Styles
   Elegant Luxury Wedding Photography
   =========================== */

/* Font imports MUST sit at the very top of the stylesheet —
   a misplaced @import is silently ignored by browsers.
   (googleVis.com was a typo domain that never served fonts) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Playfair+Display:wght@400;500;600&display=swap');

 html {
     scroll-behavior: smooth !important;
 }

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

 /* Typography */

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Hero Carousel Styles */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   HERO SLIDES — BIG & FILLED (like before)
   Hero images use the generic cover behaviour so
   photos fill the screen edge-to-edge. Slides are
   cream #FDF8F0 (set in the HTML) to match the
   light theme. Packages carousel keeps cover too.
============================================ */

/* ============================================
   GALLERY PAGE — FULL PHOTOS, NO CROPPING
   Only the dedicated gallery page shows the
   complete photo (contain): the fixed 500px card
   height keeps the layout stable and the page
   background shows through around each image.
   The homepage collection intentionally keeps
   cover so photos stay large.
============================================ */

#fullGalleryContainer .gallery-page-item img {
    object-fit: contain;
}

/* Hero Autoplay Animation - WORKING */
.heroSwiper {
    --swiper-pagination-color: rgba(255, 255, 255, 0.5);
}

.heroSwiper.swiper {
    width: 100%;
    height: 100%;
}

/* Button Hover Effects */
a, button {
    transition: all 0.3s ease;
}

input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Gallery Image Hover */
.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* Service Card Styles */
.service-card {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.service-card:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-5px);
}

/* Booking Form Focus States */
.booking-input:focus {
    border-color: white;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Admin Dashboard */
.nav-btn.active {
    background-color: white;
    color: black;
}

.tab-content {
    animation: fadeIn 0.3s ease;
}

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

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .swiper {
        height: 100vh;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Loading Skeleton */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Elegant Text Shadow for Hero */
h1, h2 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.about-section {
    min-height: 100vh;
  background: #FDF8F0;
    color: #171717;
    padding: 90px 20px 100px;
    display: flex;
    justify-content: center;
}

.about-container {
    width: 100%;
    max-width: 850px;
    text-align: center;
}

/* Logo */
.about-logo {
    width: 330px;
    max-width: 75%;
    height: auto;
    object-fit: contain;
    margin: 0 auto 35px;
    display: block;
}

/* Top divider */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 45px;
    width: 560px;
    max-width: 85%;
}

.divider span {
    height: 1px;
    background: #999487;
    flex: 1;
}

.heart {
    font-family: "Times New Roman", serif;
    font-size: 43px;
    line-height: 1;
    color: #817d72;
    transform: scaleX(1.15);
}

/* Main heading */
.about-container h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(64px, 8vw, 92px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2px;
    margin: 0;
}

/* Small line underneath heading */
.heading-line {
    width: 75px;
    height: 1px;
    background: #77736b;
    margin: 42px auto 38px;
}

/* Intro paragraph */
.intro {
    font-family: "DM Sans", sans-serif;
    font-size: 25px;
    line-height: 1.65;
    font-weight: 400;
    max-width: 650px;
    margin: 0 auto 42px;
}

/* Main paragraph */
.description {
    font-family: "DM Sans", sans-serif;
    font-size: 23px;
    line-height: 1.65;
    font-weight: 300;
    max-width: 750px;
    margin: 0 auto;
}

.intro strong,
.description strong {
    font-weight: 500;
}

/* Branch */
.branch {
    width: 220px;
    margin: 65px auto 35px;
    color: #77736b;
}

.branch svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Closing */
.closing {
    font-family: "Playfair Display", serif;
    font-size: 27px;
    line-height: 1.45;
    margin-top: 10px;
}

.closing p {
    margin: 0;
}

.closing strong {
    font-weight: 600;
}


/* Mobile */
@media (max-width: 768px) {

    .about-section {
        padding: 60px 22px 75px;
    }

    .about-logo {
        width: 270px;
        max-width: 85%;
        margin-bottom: 30px;
    }

    .divider {
        margin-bottom: 38px;
    }

    .heart {
        font-size: 35px;
    }

    .about-container h1 {
        font-size: 58px;
        letter-spacing: -1px;
    }

    .heading-line {
        margin: 30px auto 30px;
    }

    .intro {
        font-size: 20px;
        line-height: 1.6;
        margin-bottom: 35px;
    }

    .description {
        font-size: 18px;
        line-height: 1.7;
    }

    .branch {
        width: 190px;
        margin-top: 50px;
        margin-bottom: 30px;
    }

    .closing {
        font-size: 22px;
    }
}

@media (max-width: 480px) {

    .about-section {
        padding-top: 45px;
    }

    .about-logo {
        width: 240px;
    }

    .about-container h1 {
        font-size: 50px;
    }

    .intro {
        font-size: 18px;
    }

    .description {
        font-size: 17px;
    }

    .closing {
        font-size: 20px;
    }
}
/* ================================
   SMOOTH SCROLL
================================ */

html {
    scroll-behavior: smooth;
}


/* ================================
   SCROLL REVEAL
================================ */

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* From left */
.reveal-left {
    opacity: 0;
    transform: translateX(-70px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}


/* From right */
.reveal-right {
    opacity: 0;
    transform: translateX(70px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}


/* Scale images */
.reveal-image {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-image.active {
    opacity: 1;
    transform: scale(1);
}


/* ================================
   STAGGERED ANIMATION
================================ */

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.25s;
}

.delay-3 {
    transition-delay: 0.4s;
}

.delay-4 {
    transition-delay: 0.55s;
}

.delay-5 {
    transition-delay: 0.7s;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-image {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* =====================================================
   GLOBAL SCROLL REVEAL
   PhotoBet — Smooth Premium Animation
   NOTE: no permanent will-change — keeping dozens of
   GPU layers alive causes scroll jank and makes images
   get evicted ("reload") when you scroll back to them.
===================================================== */

.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 56px, 0);
    transition:
        opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Release the GPU layer once the entrance is done */
.scroll-reveal.is-settled {
    will-change: auto;
}

/* Image version — slow cinematic settle zoom */
.scroll-image {
    opacity: 0;
    transform: scale(1.08);
    transition:
        opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-image.visible {
    opacity: 1;
    transform: scale(1);
}

.scroll-image.is-settled {
    will-change: auto;
}


/* ============================================
   IMAGE RENDERING PERFORMANCE
   Photos decode off the main thread and stay
   decoded once loaded — no re-loading flicker
   when you scroll back to them.
============================================ */

.gallery-item img,
.gallery-page-item img,
#galleryContainer img,
#fullGalleryContainer img {
    content-visibility: auto;
    /* Estimated size keeps the layout space reserved so
       there is no page shift, and once a photo has loaded
       and decoded, scrolling back to it is instant */
    contain-intrinsic-size: 500px 500px;
}


/* Delayed elements */
.scroll-delay-1 {
    transition-delay: 0.15s;
}

.scroll-delay-2 {
    transition-delay: 0.3s;
}

.scroll-delay-3 {
    transition-delay: 0.45s;
}


/* Mobile */
@media (max-width: 768px) {
    .scroll-reveal {
        transform: translate3d(0, 36px, 0);
    }

    .gallery-item img,
    .gallery-page-item img,
    #galleryContainer img,
    #fullGalleryContainer img {
        content-visibility: auto;
        contain-intrinsic-size: 384px 384px;
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-image {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* =====================================================
   PHOTOBET — MOBILE RESPONSIVE FIX
===================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.photobet-about {
    width: 100%;
    max-width: 100%;
    background: #FDF8F0 !important;
    color: #111 !important;
    overflow: hidden;
}

.photobet-about-inner {
    width: 100%;
    max-width: 100%;
}

/* About Us image */
.photobet-about img {
    width: 100%;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

/* Remove desktop fixed height on mobile */
@media (max-width: 768px) {

    .photobet-about {
        padding: 0;
        background: #FDF8F0 !important;
    }

    .photobet-about-inner {
        width: 100%;
        padding: 0;
    }

    /* The large About Us image */
    .photobet-about .relative {
        width: 100%;
        height: 55vh;
        min-height: 380px;
        max-height: 550px;
        overflow: hidden;
    }

    .photobet-about .relative img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }

    /* ABOUT US text over image */
    .photobet-about .relative h2 {
        font-size: clamp(3rem, 15vw, 6rem) !important;
        line-height: 0.9;
        white-space: nowrap;
        text-align: center;
        padding: 0 15px;
    }

    /* Story */
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 20px 90px;
    }

    /* Vision / Mission */
    .about-split,
    .about-mission {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 70px 20px;
    }

    .about-split-heading,
    .about-mission-heading {
        position: static;
        text-align: left;
    }

    .about-split-heading h3 {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .about-split-content {
        max-width: 100%;
        padding-top: 0;
    }

    /* Closing */
    .about-closing {
        padding: 90px 20px;
    }

    .about-closing h3 {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }
}
/* OUR VISION */
 .about-split:not(.about-mission) {
     background:    #1c1917;/* Slate Black */
     color: #ffffff;
 }


.about-split:not(.about-mission) .about-split-heading h3,
.about-split:not(.about-mission) .about-split-content p {
    color: #fff;
}
/* LET PHOTOBET MAKE IT UNFORGETTABLE */
.about-closing {
    background:   #1c1917;
    color: #fff;
}

.about-closing h3,
.about-closing p {
    color: #fff;
}

.about-closing-line {
    background: rgba(255, 255, 255, 0.25);
}
/* =====================================================
   MOBILE ABOUT SECTION — REMOVE EXCESSIVE SPACE
===================================================== */

@media (max-width: 768px) {

    .about-intro-grid {
        padding: 20px 0 40px !important;
        gap: 40px !important;
    }

    .photobet-about-inner {
        padding: 0 !important;
    }

    .photobet-about {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Prevent the About image from having an unwanted gap */
    .photobet-about .relative {
        margin-top: 0 !important;
    }

}
@media (max-width: 768px) {

    #packages {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }

    #about {
        margin-top: 0 !important;
    }

    #about > * {
        margin-top: 0;
    }

}
/* =====================================================
   PHOTOGRAPHER IMAGE — MOBILE FIX
===================================================== */

@media (max-width: 768px) {

    /* Make photographer image visible */
    .photographer-section img,
    .photographer-image,
    .photographer-section .photographer-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        position: relative !important;
    }

    /* Prevent parent from hiding/cropping it */
    .photographer-section,
    .photographer-section > div {
        overflow: visible !important;
    }
}

/* ==========================================
   PAGE TRANSITION
========================================== */
body {
    transition: opacity 0.35s ease;
}

body.page-leaving {
    opacity: 0;
}


/* ==========================================
   PERFORMANCE
========================================== */

.gallery-page-item,
.gallery-reveal,
.scroll-reveal {

    contain: layout paint;

}
/* ==========================================
   PHOTOBET GALLERY ANIMATION
========================================== */

.gallery-page-item {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-page-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Gallery image hover */

.gallery-page-item img {
    transition: transform 0.7s ease;
}

.gallery-page-item:hover img {
    transform: scale(1.02);
}

/* Prevent animation from breaking the page */

@media (prefers-reduced-motion: reduce) {
    .gallery-page-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .gallery-page-item img {
        transition: none;
    }
}
html {
    scroll-behavior: smooth;
}
/* =====================================================
   PHOTOBET MOBILE FIXES
===================================================== */

@media (max-width: 768px) {

    /* ---------------------------------
       GENERAL MOBILE SCROLL
    --------------------------------- */

    html {
        scroll-behavior: smooth;
    }


    /* ---------------------------------
       PACKAGES - REMOVE EXTRA WHITE SPACE
    --------------------------------- */

    #packages {
        min-height: auto !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    #packages .packagesSwiper {
        height: auto !important;
        min-height: 0 !important;
    }

    #packages .swiper-wrapper {
        height: auto !important;
    }

    #packages .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
    }


    /* ---------------------------------
       PACKAGE IMAGE
    --------------------------------- */

    #packages .swiper-slide > div {
        height: auto !important;
        min-height: 0 !important;
    }

    #packages .swiper-slide img {
        width: 100% !important;
        height: 300px !important;
        object-fit: cover !important;
        display: block !important;
    }


    /* ---------------------------------
       PACKAGE TEXT AREA
    --------------------------------- */

    #packages .swiper-slide .p-8 {
        padding: 25px 20px !important;
    }


    /* ---------------------------------
       NEXT / PREVIOUS BUTTONS
       Put them beside the image
    --------------------------------- */

    #packages .packagesSwiper {
        position: relative !important;
        overflow: visible !important;
    }

    #packages .packages-prev,
    #packages .packages-next {

        position: absolute !important;

        top: 150px !important;

        transform: translateY(-50%) !important;

        z-index: 20 !important;

        width: 38px !important;
        height: 38px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        /* Fully transparent on every breakpoint — desktop and mobile */
        background: transparent !important;

        /* Light outline + glow keeps the arrow readable even when the
           button overlaps a photo */
        border: 1px solid rgba(255,255,255,0.65) !important;

        box-shadow: none !important;

        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
    }


    /* LEFT */

    #packages .packages-prev {
        left: 5px !important;
        right: auto !important;
    }


    /* RIGHT */

    #packages .packages-next {
        right: 5px !important;
        left: auto !important;
    }


    /* ---------------------------------
       PHOTOGRAPHER MOBILE FIX
    --------------------------------- */

    #photographer {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #photographer img,
    #photographer .photographer-image,
    #photographer .photographer-img {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        max-height: 500px !important;

        min-height: 0 !important;

        object-fit: cover !important;

        object-position: center !important;

        opacity: 1 !important;

        visibility: visible !important;

        position: relative !important;
    }


    /* Photographer containers */

    #photographer > div,
    #photographer .grid {

        height: auto !important;
        min-height: 0 !important;

    }


    /* If photographer uses a two-column layout,
       make it one column on phone */

    #photographer .grid {

        grid-template-columns: 1fr !important;

    }


    /* ---------------------------------
       REMOVE COMMON MOBILE FIXED HEIGHTS
    --------------------------------- */

    #packages *,
    #photographer * {

        max-height: none;

    }

}
/* ==========================================
   PHOTOGRAPHER MOBILE FIX
========================================== */

@media (max-width: 768px) {

    /* Hide Matios photo on phones */
    .photographer-main-image {
        display: none !important;
    }

    /* Make photographer right-side area compact */
    .photographer-image-container {
        display: none !important;
    }

    /* Prevent photographer section from creating overflow */
    #photographer {
        width: 100%;
        overflow: hidden;
    }

    #photographer * {
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* =====================================================
   PHOTOGRAPHER SECTION — MOBILE ONLY
===================================================== */

@media (max-width: 768px) {

    /* Reduce the photographer section height/spacing */
    #photographer {
        padding-top: 40px !important;
        padding-bottom: 25px !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
    }

    /* Reduce the company logo sizes */
    #photographer img[src*="logo"],
    #photographer img[src*="photobet"],
    #photographer img[src*="maf"],
    #photographer img[src*="rasachew"] {
        max-width: 120px !important;
        max-height: 55px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Prevent large empty photographer image container */
    #photographer .h-\[520px\],
    #photographer .lg\:h-\[760px\] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Hide Matios photo on mobile */
    #photographer img[src*="matios.jpg"] {
        display: none !important;
    }

    /* Reduce spacing around photographer content */
    #photographer .grid {
        gap: 20px !important;
    }

    /* Keep photographer company logos compact */
    #photographer .flex {
        gap: 15px !important;
    }

    /* Remove extra bottom gap before Contact */
    #contact {
        margin-top: 0 !important;
        padding-top: 50px !important;
    }
}
/* ==========================================
   REMOVE GAP BETWEEN PHOTOGRAPHER & CONTACT
   MOBILE ONLY (TARGETED PROFILE FIX)
========================================== */

@media (max-width: 768px) {
    /* Target any relative div with a custom height that is NOT in your header navigation */
    div.relative[class*="h-\["],
    div.relative[class*="min-h-"] {
        height: auto !important;
        min-height: unset !important;

        /* Apply flex layout adjustments safely here */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 1.5rem !important; /* This closes up the space */
    }

    /* Prevent this layout rule from bleeding into your navbar/header if it uses relative */
    header div.relative,
    nav div.relative,
    .hamburger div.relative {
        height: auto !important;
        display: flex !important;
        justify-content: space-between !important; /* Restores navigation alignment */
    }
}
/* Keeps the image contained so it doesn't cause horizontal scrolling on the page */
.single-slide-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 15px 0;
     background-color:#FDF8F0


}

/* Sets the image size and attaches the fast, infinite loop animation */
.gliding-image {
    height: 120px; /* Adjust height to match your layout scale */
    width: auto;   /* Maintains perfect aspect ratio */
    display: inline-block;

    /* Animation name, duration (12s is faster than the old 25s), linear movement, infinite loop */
    animation: fastGlidingImage 12s linear infinite;
}

/* The structural path the image takes across the screen */
@keyframes fastGlidingImage {
    0% {
        transform: translate3d(100vw, 0, 0); /* Starts completely off the right side of the screen */
    }
    100% {
        transform: translate3d(-100%, 0, 0); /* Slides completely off the left side of the screen */
    }
}
.single-slide-container {
    background-color: #FDF8F0 !important; /* Matches the 'OUR PACKAGES' section background */
}
@media (max-width: 768px) {
    /* 1. Target the outer card slide wrappers and reset their forced heights */
    #packagesContainer .swiper-slide,
    #packagesContainer div[class*="h-"] {
        height: auto !important;
        min-height: unset !important;
    }

    /* 2. Style the image to span the full width and scale its height proportionately */
    #packagesContainer img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}
/* Forces icons to remain visible before hover interaction takes place */
.group .w-16 svg {
    stroke: rgba(0, 0, 0, 0.7) !important;
}

/* Switches stroke to light cream instantly during mouse hover state execution */
.group:hover .w-16 svg {
    stroke: #FDF8F0 !important;
}
/* =====================================================
   COSMOS COMPACT LUXURY FOOTER CONFIGURATION
===================================================== */

/* Ensures the big typographic background rendering scales sharply and stays ultra-flat */
footer h1 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 800 !important;
    letter-spacing: -0.06em !important;
}

/* Tighter utility styling parameters */
footer a {
    letter-spacing: 0.03em;
    text-decoration: none;
}
/* SECURITY: Never show admin dashboard before login */
#adminSection.hidden {
    display: none !important;
}

/* ============================================
   TEXT SELECTION COLOR
   Replaces the default browser blue with the
   brand charcoal. White text keeps contrast.
============================================ */

::selection {
    background: #3b444b;
    color: #ffffff;
}

/* Firefox-specific rule */
::-moz-selection {
    background: #3b444b;
    color: #ffffff;
}

/* =====================================================
   GALLERY / COLLECTION ENTRANCE — one by one
   (shared by gallery.html and the homepage collection)
   Cards fade up in sequence with a gentle settle zoom,
   driven by --stagger-delay set in JS + initGalleryReveal().
===================================================== */

.gallery-page-item {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    /* transform + opacity only: GPU-composited, no layout work per frame */
    transition:
        opacity 0.7s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.gallery-page-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger: siblings appear one after another, driven by --stagger-delay (set in JS) */
.gallery-page-item[style*="--stagger-delay"] {
    transition-delay: var(--stagger-delay);
}

/* Drop the will-change hint once settled — frees GPU memory on long galleries */
.gallery-page-item.is-settled {
    will-change: auto;
    transition-delay: 0s;
}

/* The image inside each card does a gentle "settle" zoom as the card arrives,
   plus a subtle zoom on hover */
.gallery-image {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    transform: scale(1.04);
}

.gallery-page-item.is-visible .gallery-image {
    transition-delay: var(--stagger-delay, 0s);
    transform: scale(1);
}

.gallery-page-item:hover .gallery-image {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-page-item {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    .gallery-image {
        transform: none;
        transition: none;
    }
}