/* ============================================================
   TRISTAR REALTORS — INTERACTIVE & ANIMATION LAYER
   Loaded after style.css / responsive.css / updates.css.
   Adds sitewide motion + a full responsive gallery rebuild.
   ============================================================ */

/* -------- Scroll progress bar -------- */
.scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg,var(--blue),var(--navy));
    z-index:999; transition:width .1s linear;
}

/* -------- Nav: shrink + shadow on scroll -------- */
.nav{ transition:height .35s ease, box-shadow .35s ease, background .35s ease; }
.nav.scrolled{ height:70px; box-shadow:0 8px 30px rgba(7,88,134,.16); }
.nav.scrolled .brand img{ width:150px; height:50px; }
.nav nav a{ position:relative; }
.nav nav a::after{
    content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
    background:var(--blue); transition:width .3s ease;
}
.nav nav a:hover::after, .nav nav a.active::after{ width:100%; }

/* -------- Buttons: ripple + magnetic hover -------- */
.button, .nav-cta, .mobile-cta a, .side-actions a{
    position:relative; overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease;
}
.button:hover, .nav-cta:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(7,88,134,.25);
}
.btn-ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    background:rgba(255,255,255,.55); transform:scale(0); opacity:.9;
    animation:rippleGrow .6s ease-out forwards;
}
@keyframes rippleGrow{ to{ transform:scale(3.2); opacity:0; } }

/* -------- Back to top -------- */
.back-to-top{
    position:fixed; right:24px; bottom:96px; width:46px; height:46px; border-radius:50%;
    background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:18px; z-index:80; opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .3s ease;
    box-shadow:0 10px 26px rgba(18,59,104,.3); cursor:pointer; border:0;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--blue); }

/* -------- Reveal: richer variants (fallback to existing .reveal/.visible) -------- */
.reveal{ transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.fade-up{ opacity:0; transform:translateY(36px); }
.reveal.fade-up.visible{ opacity:1; transform:translateY(0); }
.reveal.fade-in{ opacity:0; }
.reveal.fade-in.visible{ opacity:1; }
.reveal.zoom-in{ opacity:0; transform:scale(.92); }
.reveal.zoom-in.visible{ opacity:1; transform:scale(1); }
.reveal.fade-left{ opacity:0; transform:translateX(-40px); }
.reveal.fade-left.visible{ opacity:1; transform:translateX(0); }
.reveal.fade-right{ opacity:0; transform:translateX(40px); }
.reveal.fade-right.visible{ opacity:1; transform:translateX(0); }

/* Staggered children helper */
.stagger > *{ transition-delay:calc(var(--i,0) * 70ms); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Subtle image zoom on hover across cards already using overflow:hidden */
.blog-card, .service-card, .award-card{ will-change:transform; }

/* ============================================================
   GALLERY PAGE REBUILD
   ============================================================ */

.gallery-hero-stats{
    display:flex; flex-wrap:wrap; gap:34px; margin-top:28px;
}
.gallery-hero-stats div{ min-width:110px; }
.gallery-hero-stats b{
    display:block; font-size:clamp(26px,3vw,36px); color:var(--navy); font-weight:800; letter-spacing:-1px;
}
.gallery-hero-stats span{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* Filter pills */
.gallery-filters{
    display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px;
}
.gallery-filters button{
    border:1px solid var(--line); background:#fff; color:var(--ink);
    font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
    padding:10px 20px; border-radius:100px; cursor:pointer;
    transition:all .3s ease;
}
.gallery-filters button:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.gallery-filters button.active{
    background:var(--navy); border-color:var(--navy); color:#fff;
    box-shadow:0 10px 24px rgba(18,59,104,.25);
}
.gallery-filters .count{
    margin-left:auto; align-self:center; font-size:12px; color:var(--muted); font-weight:700;
}

/* Masonry grid via CSS columns: naturally responsive, no broken nth-child spans */
.gallery-masonry{
    column-count:4; column-gap:16px;
}
.gallery-masonry .g-tile{
    break-inside:avoid; margin:0 0 16px; display:block; position:relative;
    border-radius:14px; overflow:hidden; background:var(--pale);
    box-shadow:0 10px 28px rgba(18,59,104,.10);
    cursor:pointer; opacity:0; transform:translateY(26px) scale(.98);
    transition:opacity .55s ease, transform .55s ease, box-shadow .35s ease;
}
.gallery-masonry .g-tile.g-visible{ opacity:1; transform:translateY(0) scale(1); }
.gallery-masonry .g-tile.g-hidden{ display:none; }
.gallery-masonry .g-tile:hover{
    box-shadow:0 20px 44px rgba(18,59,104,.22);
}
.gallery-masonry .g-tile img{
    width:100%; display:block; height:auto;
    transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.gallery-masonry .g-tile:hover img{
    transform:scale(1.07);
}
.gallery-masonry .g-tile .g-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,45,79,0) 40%, rgba(11,45,79,.82) 100%);
    display:flex; align-items:flex-end; padding:16px 18px;
    opacity:0; transition:opacity .35s ease;
}
.gallery-masonry .g-tile:hover .g-overlay{ opacity:1; }
.gallery-masonry .g-tile .g-cap{
    color:#fff; font-size:13px; font-weight:700; letter-spacing:.2px;
}
.gallery-masonry .g-tile .g-cap small{
    display:block; font-weight:600; opacity:.75; font-size:10px; text-transform:uppercase; letter-spacing:.6px; margin-top:2px;
}
.gallery-masonry .g-tile .g-zoom{
    position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.92); color:var(--navy); display:flex; align-items:center; justify-content:center;
    font-size:14px; opacity:0; transform:translateY(-8px); transition:all .3s ease;
}
.gallery-masonry .g-tile:hover .g-zoom{ opacity:1; transform:translateY(0); }

.gallery-empty{
    text-align:center; padding:60px 20px; color:var(--muted); display:none;
}
.gallery-empty.show{ display:block; }

@media (max-width:1100px){ .gallery-masonry{ column-count:3; } }
@media (max-width:760px){ .gallery-masonry{ column-count:2; column-gap:10px; } .gallery-masonry .g-tile{ margin-bottom:10px; border-radius:10px; } }
@media (max-width:460px){ .gallery-masonry{ column-count:1; } .gallery-filters .count{ margin-left:0; width:100%; order:99; } }

/* ============================================================
   PROJECT CARDS — fix cropped renders + premium hover
   (overrides the old fixed-height .card-photo across all breakpoints)
   ============================================================ */
.project-card{ border-radius:14px; }
.project-card .card-photo{
    height:auto !important;
    aspect-ratio:4/5;
    background-size:cover !important;
    background-position:top center !important;
    position:relative;
    overflow:hidden;
    transition:background-size .6s cubic-bezier(.2,.8,.2,1);
}
.project-card:hover .card-photo{ background-size:114% !important; }
.project-card .card-photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,45,79,0) 55%, rgba(8,29,51,.55) 100%);
    opacity:0; transition:opacity .4s ease;
}
.project-card:hover .card-photo::after{ opacity:1; }
@media (max-width:768px){ .project-card .card-photo{ aspect-ratio:4/3.1; } }

.whatsapp-button{ gap:8px !important; }
.featured-card .project-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.featured-card .whatsapp-button{
    background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff;
}
.featured-card .whatsapp-button:hover{ background:rgba(255,255,255,.16); }
.whatsapp-button i{
    font-size:15px; color:#25D366;
    display:inline-flex; align-items:center; justify-content:center;
}
.whatsapp-button:hover i{ color:#1ea952; }

/* Floating side / mobile CTA — proper icons */
.side-actions a, .mobile-cta a{ display:flex; align-items:center; gap:8px; justify-content:center; }
.side-actions a i, .mobile-cta a i{ font-size:14px; }
.side-actions a[href*="wa.me"] i, .mobile-cta a[href*="wa.me"] i{ color:#25D366; }
.mobile-cta a:nth-child(2) i{ color:#fff; }

/* ============================================================
   PREMIUM LEADERSHIP / DIRECTOR PROFILES  (About page)
   ============================================================ */
.leadership-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.director-card{
    position:relative;
    border-radius:20px;
    padding:2px;
    background:linear-gradient(160deg,#dce8f2,#eef4f9 40%,#dce8f2);
    box-shadow:0 18px 46px rgba(18,59,104,.12);
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.director-card::before{
    content:"";
    position:absolute; inset:-1px; border-radius:20px; padding:1.5px;
    background:conic-gradient(from 180deg, var(--blue), #b9dbf4, var(--navy), var(--blue));
    -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 .5s ease;
    pointer-events:none;
}
.director-card:hover{ transform:translateY(-10px); box-shadow:0 30px 64px rgba(18,59,104,.22); }
.director-card:hover::before{ opacity:1; }

.director-inner{
    position:relative; border-radius:18px; overflow:hidden; background:#fff;
}
.director-photo{
    position:relative; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(150deg,#0b2d4f,#123b68 55%,#0878ae);
}
.director-photo img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.director-card:hover .director-photo img{ transform:scale(1.06); }

/* Monogram avatar for directors without a photo yet */
.director-avatar{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    position:relative; color:#fff;
    font-family:"Playfair Display",serif; font-weight:500; font-size:76px; letter-spacing:2px;
}
.director-avatar::after{
    content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.35); border-radius:14px;
}
.director-avatar span{ position:relative; z-index:1; transition:transform .5s ease; }
.director-card:hover .director-avatar span{ transform:scale(1.08); }

.director-badge{
    position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); color:var(--navy);
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
    padding:6px 12px; border-radius:100px; backdrop-filter:blur(3px);
}

/* Gradient scrim + socials that rise on hover */
.director-scrim{
    position:absolute; left:0; right:0; bottom:0; padding:20px 18px 16px;
    background:linear-gradient(180deg, rgba(11,45,79,0) 0%, rgba(8,29,51,.86) 78%);
    display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
    color:#fff;
}
.director-quote{
    font-size:11.5px; line-height:1.5; opacity:0; transform:translateY(10px); max-width:74%;
    transition:opacity .4s ease .05s, transform .4s ease .05s;
}
.director-card:hover .director-quote{ opacity:.92; transform:translateY(0); }

.director-social{ display:flex; gap:8px; }
.director-social a{
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:13px;
    opacity:0; transform:translateY(10px); transition:all .35s ease;
}
.director-card:hover .director-social a{ opacity:1; transform:translateY(0); }
.director-social a:nth-child(2){ transition-delay:.05s; }
.director-social a:nth-child(3){ transition-delay:.1s; }
.director-social a:hover{ background:var(--blue); border-color:var(--blue); transform:translateY(-3px); }

.director-info{ padding:22px 20px 24px; }
.director-info h3{ margin:0 0 4px; font-size:19px; letter-spacing:-.3px; }
.director-info .director-role{
    color:var(--blue); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; margin:0 0 10px;
}
.director-info .director-focus{ color:var(--muted); font-size:12.5px; line-height:1.6; margin:0; }

@media (max-width:900px){
    .leadership-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
}

/* Lightbox */
.g-lightbox{
    position:fixed; inset:0; z-index:1000; background:rgba(9,26,45,.94);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
    padding:24px;
}
.g-lightbox.open{ opacity:1; visibility:visible; }
.g-lightbox-inner{
    position:relative; max-width:1000px; width:100%; max-height:88vh;
    display:flex; flex-direction:column; align-items:center;
    transform:scale(.94); transition:transform .35s ease;
}
.g-lightbox.open .g-lightbox-inner{ transform:scale(1); }
.g-lightbox img{
    max-width:100%; max-height:74vh; border-radius:10px; object-fit:contain;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.g-lightbox-caption{ color:#fff; margin-top:16px; font-size:14px; text-align:center; opacity:.9; }
.g-lightbox-caption span{ display:block; font-size:11px; opacity:.6; text-transform:uppercase; letter-spacing:.6px; margin-top:4px; }
.g-lightbox-close, .g-lightbox-prev, .g-lightbox-next{
    position:absolute; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
    border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; transition:all .25s ease; backdrop-filter:blur(4px);
}
.g-lightbox-close:hover, .g-lightbox-prev:hover, .g-lightbox-next:hover{ background:var(--blue); border-color:var(--blue); }
.g-lightbox-close{ top:-56px; right:0; }
.g-lightbox-prev{ left:-64px; top:50%; transform:translateY(-50%); }
.g-lightbox-next{ right:-64px; top:50%; transform:translateY(-50%); }
.g-lightbox-counter{
    position:absolute; top:-56px; left:0; color:#fff; font-size:12px; letter-spacing:.5px; opacity:.75;
}
@media (max-width:760px){
    .g-lightbox-prev{ left:8px; top:auto; bottom:-52px; transform:none; }
    .g-lightbox-next{ right:8px; top:auto; bottom:-52px; transform:none; }
    .g-lightbox-close{ top:-48px; }
    .g-lightbox-counter{ top:-48px; }
    .g-lightbox-inner{ max-height:80vh; }
}