/* =========================================================================
   GALLERY PAGE — UNIQUE MODERN UI
   ========================================================================= */

/* ---- Hero: scrolling filmstrips + frosted glass card ---- */
.bo-gal-hero2{
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d1b12;
}
/* columns wrapper */
.bo-strip-wrap{
    position:absolute; inset:0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 16px;
    z-index: 0;
}
@media (max-width: 991px){ .bo-strip-wrap{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px){ .bo-strip-wrap{ grid-template-columns: repeat(3, 1fr); gap:10px; padding:10px; } }

.bo-strip{ position: relative; overflow: hidden; }
.bo-strip-track{
    display: flex;
    flex-direction: column;
    gap: 16px;
    will-change: transform;
}
.bo-strip-track span{ display:block; border-radius: 14px; overflow: hidden; }
.bo-strip-track img{
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}
/* scroll animations — down column starts shifted up, up column starts at 0 */
.bo-strip--down .bo-strip-track{ animation: bo-strip-down 26s linear infinite; }
.bo-strip--up   .bo-strip-track{ animation: bo-strip-up   26s linear infinite; }
.bo-strip--slow .bo-strip-track{ animation-duration: 36s; }
@keyframes bo-strip-down{
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
@keyframes bo-strip-up{
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* tint overlay: colored gradient (brand) so it's readable but NOT black/white */
.bo-gal-hero2-tint{
    position:absolute; inset:0; z-index:1;
    background:
        radial-gradient(1200px 700px at 50% 50%, rgba(13,27,18,.35), rgba(13,27,18,.72)),
        linear-gradient(135deg, rgba(255,103,31,.30), rgba(0,136,46,.34));
    pointer-events:none;
}

/* frosted glass card */
.bo-glass-card{
    position: relative;
    z-index: 2;
    width: min(440px, 88vw);
    padding: 32px 30px;
    border-radius: 22px;
    text-align: center;
    color:#fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.bo-glass-card h1{
    font-weight: 800; font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15; margin: 0 0 12px; letter-spacing:-0.5px;
    text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.bo-glass-card p{
    color: rgba(255,255,255,.94);
    font-size: clamp(13px, 1.2vw, 15px); line-height:1.55; margin: 0 0 20px;
}
.bo-glass-btn{
    display:inline-block;
    padding: 11px 28px; border-radius: 9999px;
    background: linear-gradient(120deg,#FF671F,#ff8a3d);
    color:#fff; font-weight:700; font-size:15px; text-decoration:none;
    box-shadow: 0 12px 26px rgba(255,103,31,.4);
    transition: transform .3s ease, box-shadow .3s ease, background-position .5s ease;
    background-size: 200% auto;
}
.bo-glass-btn:hover{
    transform: translateY(-3px);
    background-position: right center;
    box-shadow: 0 18px 34px rgba(255,103,31,.5);
    color:#fff;
}
@media (prefers-reduced-motion: reduce){
    .bo-strip--down .bo-strip-track,
    .bo-strip--up .bo-strip-track{ animation: none; }
}

/* ---- Gallery section ---- */
.bo-gallery-sec{
    padding: 84px 0;
    background:
        radial-gradient(1000px 500px at 100% -10%, rgba(255,103,31,.06), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(0,136,46,.06), transparent 60%),
        #f6f9f7;
}
.bo-gallery-sec .section-heading{
    position: relative; display: inline-block; padding-bottom: 16px; width:100%;
    font-weight: 800; color:#0d1b12; letter-spacing:-0.5px;
}
.bo-gallery-sec .section-heading::after{
    content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:0; height:4px; border-radius:4px; background: linear-gradient(90deg,#FF671F,#00882E);
    transition: width .7s cubic-bezier(.2,.7,.2,1) .2s;
}
.bo-gallery-sec .section-heading.bo-underline-in::after{ width:84px; }
.bo-gal-intro{ text-align:center; color:#5a6b60; max-width:640px; margin: 16px auto 34px; }

/* ---- Filters: border-draw hover (border traces around the pill) ---- */
.bo-gal-filters{
    display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom: 40px;
}
.bo-gal-filter{
    position: relative;
    border: none;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color:#0d1b12;
    padding: 11px 28px; border-radius: 9999px;
    font-weight:600; font-size:14px; cursor:pointer;
    transition: color .3s ease, transform .25s ease, box-shadow .3s ease, background .3s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
/* two SVG-like borders drawn with pseudo-elements that trace on hover */
.bo-gal-filter::before,
.bo-gal-filter::after{
    content:"";
    position:absolute; inset:0;
    border-radius: 9999px;
    pointer-events:none;
}
/* top+right border grows from top-center clockwise */
.bo-gal-filter::before{
    border: 2px solid transparent;
    border-top-color:#FF671F;
    border-right-color:#FF671F;
    opacity:0;
    transform: rotate(-45deg);
    transition: opacity .01s ease .18s, transform .35s ease;
}
/* bottom+left border grows from bottom-center clockwise */
.bo-gal-filter::after{
    border: 2px solid transparent;
    border-bottom-color:#00882E;
    border-left-color:#00882E;
    opacity:0;
    transform: rotate(-45deg);
    transition: opacity .01s ease, transform .35s ease;
}
.bo-gal-filter:hover{ transform: translateY(-2px); }
.bo-gal-filter:hover::before,
.bo-gal-filter:hover::after{
    opacity:1;
    transform: rotate(0deg);
}
.bo-gal-filter.is-active{
    background: linear-gradient(120deg,#FF671F,#ff8a3d);
    color:#fff;
    box-shadow: 0 12px 24px rgba(255,103,31,.3);
}
.bo-gal-filter.is-active::before,
.bo-gal-filter.is-active::after{ opacity:0; }

/* ---- Grid ---- */
.bo-gal-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    perspective: 1400px;
}
.bo-gal-item{
    position: relative;
    margin:0;
    opacity:0; transform: translateY(34px) scale(.96);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.bo-gal-item.is-visible{ opacity:1; transform:none; }
.bo-gal-item.is-hidden{ display:none; }

/* card media: gradient-glow border frame + 3D hover */
.bo-gal-media{
    position: relative;
    display:block;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background:#f2f4f3;
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.bo-gal-item:hover .bo-gal-media{
    transform: translateY(-10px) rotateX(4deg) rotateZ(-.6deg);
    box-shadow: 0 34px 60px rgba(255,103,31,.22), 0 12px 30px rgba(0,136,46,.16);
}
/* animated gradient ring that appears on hover */
.bo-gal-media::before{
    content:""; position:absolute; inset:0; z-index:3; border-radius:inherit;
    padding:2px;
    background: linear-gradient(130deg,#FF671F,#ffd93b,#00882E,#FF671F);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity:0; transition: opacity .4s ease; animation: bo-ring-flow 4s linear infinite;
    pointer-events:none;
}
.bo-gal-item:hover .bo-gal-media::before{ opacity:1; }
@keyframes bo-ring-flow{ 0%{background-position:0% 50%;} 100%{background-position:300% 50%;} }

.bo-gal-media img,
.bo-gal-media .bo-gal-video-thumb{
    width:100%; height:100%; display:block;
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
/* images: show the WHOLE picture (no cropping) on a soft backdrop */
.bo-gal-media img{
    object-fit: contain;
    background: #ffffff;
}
/* video thumbnails fill nicely, so keep cover */
.bo-gal-media .bo-gal-video-thumb{
    object-fit: cover;
}
.bo-gal-item:hover .bo-gal-media img,
.bo-gal-item:hover .bo-gal-media .bo-gal-video-thumb{
    transform: scale(1.12);
    filter: saturate(1.1);
}
/* dark gradient veil that fades in on hover */
.bo-gal-media::after{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(13,27,18,0) 40%, rgba(13,27,18,.72));
    opacity:0; transition: opacity .45s ease;
}
.bo-gal-item:hover .bo-gal-media::after{ opacity:1; }

/* video play icon: always visible + pulsing */
.bo-gal-playicon{
    position:absolute; top:50%; left:50%;
    transform: translate(-50%,-50%) scale(1);
    width:58px; height:58px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:20px; z-index:2;
    background: rgba(255,103,31,.95);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.bo-gal-playicon::before{
    content:""; position:absolute; inset:-9px; border-radius:50%;
    border:2px solid rgba(255,255,255,.6); animation: bo-gal-pulse 2s ease-out infinite;
}
@keyframes bo-gal-pulse{ 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(1.55);opacity:0;} }
.bo-gal-item:hover .bo-gal-playicon{ background:#FF671F; transform: translate(-50%,-50%) scale(1.12); }

/* caption overlaid on the image — always visible, centered, with hover effect */
.bo-gal-cap{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    margin:0; padding: 34px 14px 14px;
    color:#fff; font-weight:700; font-size:15px; text-align:center;
    letter-spacing:.2px; line-height:1.35;
    background: linear-gradient(180deg, rgba(13,27,18,0), rgba(13,27,18,.85));
    transform: translateY(0);
    transition: padding .4s ease, background .4s ease, letter-spacing .4s ease;
    pointer-events:none;
}
/* small accent underline under the caption text */
.bo-gal-cap::after{
    content:"";
    display:block;
    width:26px; height:3px; border-radius:3px;
    margin: 8px auto 0;
    background: linear-gradient(90deg,#FF671F,#ffd93b);
    transform: scaleX(.6);
    transform-origin:center;
    transition: transform .4s ease, width .4s ease;
}
/* hover: caption grows a touch, gains spacing, underline expands */
.bo-gal-item:hover .bo-gal-cap{
    padding-bottom: 20px;
    letter-spacing:.5px;
    background: linear-gradient(180deg, rgba(13,27,18,0), rgba(13,27,18,.92));
}
.bo-gal-item:hover .bo-gal-cap::after{ transform: scaleX(1); width:44px; }

.bo-gal-empty{ text-align:center; color:#8a988f; padding: 40px 0; font-style: italic; }

/* ---- Lightbox ---- */
.bo-lightbox{
    position: fixed; inset:0; z-index: 2000;
    background: rgba(8,12,10,.94);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 40px 20px;
    opacity:0; visibility:hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.bo-lightbox.is-open{ opacity:1; visibility:visible; }
.bo-lb-stage{
    max-width: min(1020px, 92vw); max-height: 80vh;
    display:flex; align-items:center; justify-content:center;
    transform: scale(.94); opacity:0;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.bo-lightbox.is-open .bo-lb-stage{ transform: scale(1); opacity:1; }
/* lightbox caption — above the image, centered */
.bo-lb-caption{
    color:#fff;
    font-weight:700;
    font-size: clamp(15px, 2vw, 19px);
    text-align:center;
    letter-spacing:.3px;
    margin: 0 0 16px;
    max-width: min(1020px, 92vw);
    opacity:0; transform: translateY(-8px);
    transition: opacity .4s ease .1s, transform .4s ease .1s;
}
.bo-lightbox.is-open .bo-lb-caption{ opacity:1; transform: translateY(0); }
.bo-lb-caption::after{
    content:"";
    display:block; width:46px; height:3px; border-radius:3px;
    margin: 9px auto 0;
    background: linear-gradient(90deg,#FF671F,#ffd93b);
}
.bo-lb-stage img, .bo-lb-stage video{
    max-width: min(1020px, 92vw); max-height: 80vh;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    background:#000;
}
.bo-lb-stage img.bo-lb-img{
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
    transform-origin: center center;
    cursor: zoom-in;
    will-change: transform;
}
/* zoom control bar — compact, top-right corner so it clears the image */
.bo-lb-zoom-controls{
    position:absolute;
    top: 18px; right: 80px;
    display:flex; gap:6px;
    background: rgba(13,27,18,.85);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 5px 7px; border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    z-index: 5;
}
.bo-lb-zbtn{
    width:34px; height:34px; border-radius:50%;
    border:none; cursor:pointer;
    background: rgba(255,255,255,.16); color:#fff; font-size:13px;
    display:flex; align-items:center; justify-content:center;
    transition: background .25s ease, transform .2s ease;
}
.bo-lb-zbtn:hover{ background:#FF671F; transform: translateY(-1px); }
.bo-lb-zbtn:active{ transform: scale(.9); }
.bo-lb-close{
    position:absolute; top:18px; right:24px;
    background:rgba(255,255,255,.1); border:none; color:#fff;
    width:46px; height:46px; border-radius:50%;
    font-size: 26px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: background .25s ease, transform .3s ease;
}
.bo-lb-close:hover{ background: rgba(255,103,31,.9); transform: rotate(90deg); }
.bo-lb-nav{
    position:absolute; top:50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); border:none; color:#fff;
    width:54px; height:54px; border-radius:50%; font-size:20px; cursor:pointer;
    transition: background .25s ease, transform .2s ease;
}
.bo-lb-nav:hover{ background: rgba(255,103,31,.9); }
.bo-lb-nav:active{ transform: translateY(-50%) scale(.9); }
.bo-lb-prev{ left: 20px; }
.bo-lb-next{ right: 20px; }

/* ---- reveal helpers ---- */
.bo-reveal{ opacity:0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.bo-reveal.is-visible{ opacity:1; transform:none; }
.bo-reveal-head{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.bo-reveal-head.is-visible{ opacity:1; transform:none; }

/* ---- Responsive ---- */
@media (max-width: 991px){
    .bo-gal-grid{ grid-template-columns: repeat(2, 1fr); }
    .bo-gal-hero{ min-height:auto; padding: 110px 0 60px; }
}
@media (max-width: 575px){
    .bo-gal-grid{ grid-template-columns: 1fr; }
    .bo-lb-nav{ width:44px; height:44px; }
    .bo-lb-zoom-controls{ right: 66px; }
}
@media (prefers-reduced-motion: reduce){
    .bo-gal-hero::before, .bo-gal-hero::after, .bo-gal-playicon::before, .bo-gal-media::before{ animation:none; }
    .bo-reveal, .bo-reveal-head, .bo-gal-item{ opacity:1 !important; transform:none !important; }
    .bo-gal-media img, .bo-gal-media .bo-gal-video-thumb{ transition:none; }
    .bo-gal-item:hover .bo-gal-media{ transform: translateY(-6px); }
}