/* =================== CORE RESET & BASE LAYOUT =================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
  width: 100%;
  height: 100%;
  background: #181818 !important;  /* deep dark fallback color */
  color: #f3e9dd;                  /* light text (for all pages) */
  font-family: 'Poppins', Arial, sans-serif !important;
}
a { color: #fff; text-decoration: none; transition: color 0.3s; }
a:hover { color: #3cf9; text-decoration: underline; }
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  width: 100%;
  margin: 0 auto;
 background: transparent !important;
 position: relative;   /* <--- add this! */
  z-index: 1;           /* <--- add this! */
}
#content-area {
  flex: 1 0 auto;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;

  /* transition for soft page swap */
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}
#content-area.is-leaving { opacity: 0; transform: translateY(14px); }
#content-area.is-entering { opacity: 1; transform: translateY(0); }

main {
  flex: 1 0 auto;
  min-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
}
footer {
  position: relative;       /* stays in normal flow */
  z-index: 2;               /* above animation */
  background: transparent !important;
  color: #f3e9dd;
  text-align: center;
  padding: 12px 0 8px 0;
  font-size: 0.75em;
  margin: 0;
  border: none;
  box-shadow: none;
  min-height: unset !important;
  height: auto !important;
  font-weight: 100 !important;
}
.site-bg-animated {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #070a12 0%, #0c0c0c 97%, #000000 100%);
}
.site-bg-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 30%, #888 0px, transparent 40px),
    radial-gradient(circle at 60% 20%, #555 0px, transparent 60px),
    radial-gradient(circle at 80% 70%, #aaa 0px, transparent 25px),
    radial-gradient(circle at 40% 80%, #333 0px, transparent 55px),
    radial-gradient(circle at 70% 60%, #666 0px, transparent 30px),
    radial-gradient(circle at 50% 50%, #999 0px, transparent 45px),
    radial-gradient(circle at 30% 60%, #444 0px, transparent 38px),
   radial-gradient(circle at 20% 35%, #3b4252 0px, transparent 48px),
  radial-gradient(circle at 70% 22%, #4c566a 0px, transparent 62px),
  radial-gradient(circle at 80% 75%, #888c99 0px, transparent 35px),
  radial-gradient(circle at 32% 80%, #292e39 0px, transparent 65px),
  radial-gradient(circle at 61% 64%, #abb1ba 0px, transparent 32px),
  radial-gradient(circle at 52% 58%, #464b55 0px, transparent 54px),
    radial-gradient(circle at 60% 10%, #999 0px, transparent 38px),
    radial-gradient(circle at 35% 90%, #444 0px, transparent 44px),
    radial-gradient(circle at 89% 29%, #ccc 0px, transparent 22px),
radial-gradient(circle at 20% 30%, #3c4353 0px, transparent 40px),
radial-gradient(circle at 60% 20%, #6a7280 0px, transparent 60px),
radial-gradient(circle at 80% 70%, #242b36 0px, transparent 25px),
radial-gradient(circle at 40% 80%, #b8bfc9 0px, transparent 55px),
radial-gradient(circle at 70% 60%, #38404d 0px, transparent 30px),
radial-gradient(circle at 50% 50%, #555b65 0px, transparent 45px),
radial-gradient(circle at 30% 60%, #7b8088 0px, transparent 38px),
    radial-gradient(circle at 50% 15%, #bbb 0px, transparent 26px);
  animation: floatbg 18s linear infinite alternate;
  opacity: 0.15;
}
@keyframes floatbg {
  0% {
    background-position:
      20vw 30vh,
      60vw 20vh,
      80vw 70vh,
      40vw 80vh,
      70vw 60vh,
      50vw 50vh,
      30vw 60vh,
      85vw 40vh,
      10vw 10vh,
      75vw 85vh,
      35vw 35vh,
      90vw 80vh,
      60vw 75vh,
      15vw 80vh,
      55vw 25vh,
      95vw 20vh,
      17vw 18vh,
      77vw 30vh,
      23vw 65vh,
      51vw 82vh,
      60vw 10vh,
      35vw 90vh,
      89vw 29vh,
      72vw 18vh,
      65vw 42vh,
      80vw 60vh,
      30vw 20vh,
      50vw 15vh;
  }
  100% {
    background-position:
      70vw 60vh,
      20vw 70vh,
      60vw 80vh,
      80vw 30vh,
      40vw 80vh,
      75vw 10vh,
      60vw 10vh,
      35vw 90vh,
      50vw 70vh,
      10vw 80vh,
      85vw 25vh,
      25vw 75vh,
      20vw 80vh,
      70vw 25vh,
      30vw 55vh,
      40vw 20vh,
      60vw 75vh,
      20vw 50vh,
      70vw 70vh,
      30vw 30vh,
      60vw 20vh,
      80vw 60vh,
      35vw 29vh,
      20vw 68vh,
      25vw 38vh,
      45vw 55vh,
      60vw 30vh,
      55vw 45vh;
  }
}


/* =============== FONTAWESOME ICONS FIX (COMPATIBILITY) =============== */
.fa, .fa-solid, .fa-brands, .fa-regular, .fab, .fas, .far, [class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  display: inline-block;
  speak: never;
}

/* ================== TOP BANNER & NAVIGATION BAR ================== */
.top-banner {
  width: 100vw;
  max-width: 100vw;
  height: 130px;
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 40px;
  background-color: #10141e !important;
  background-image:
    linear-gradient(rgba(16, 20, 30, 0.98), rgba(16, 20, 30, 0.98)),
    url('https://www.transparenttextures.com/patterns/asfalt-dark.png') !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  box-shadow: 0 4px 18px #000a;
}
.banner-img.web-logo{
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  will-change: filter, transform;
  animation: logo-glow 6s ease-in-out infinite;
}

/* Hide both by default */
.desktop-logo, .mobile-logo { display: none; }

/* Desktop: show desktop logo, hide mobile */
@media (min-width: 700px) {
 .top-banner { 
    position: sticky; 
    top: 10; 
    z-index: 99; 
    box-shadow: 0 2px 20px #0006; 
    background: #10141e; 
  }
  .desktop-logo { display: block; }
  .mobile-logo { display: none; }
}

/* Mobile: show mobile logo, hide desktop */
@media (max-width: 699px) {
  .desktop-logo { display: none; }
  .mobile-logo { display: block; }
}
/* ---- Top banner logo image ---- */
.banner-img.web-logo {
  height: 90px;
  object-fit: contain;
  width: auto;
  max-width: 80%;
  margin-top: -5px;        /* moves logo up by 10px */
  margin-bottom: 0;
  filter: drop-shadow(0 0 0 rgba(150,150,255,0));
  will-change: filter, transform;
  animation: logo-glow 5s ease-in-out infinite;
  animation-duration: 6s;
}
@keyframes logo-glow{
  0%, 86%, 100% { filter: drop-shadow(0 0 0 rgba(150,150,255,0)); }
  90%           { filter: drop-shadow(0 0 12px rgba(150,150,255,.5)); }
  95%           { filter: drop-shadow(0 0 0 rgba(150,150,255,0)); }
}
@media (hover:hover) and (min-width: 700px){
  .banner-img.web-logo{
    transition: transform .55s ease, filter .55s ease;
  }
.banner-img.web-logo:hover{
    transform: translateY(-2px) scale(1.1) rotate(-0.8deg);
    filter: drop-shadow(0 2px 10px rgba(255,255,255,.2));
  }
}/* ---- NAV BAR (desktop + mobile responsive) ---- */
.overlay-nav {
  position: absolute;
  top: 36px;
  right: 40px;
  display: flex;
  gap: 12px;
  z-index: 10;
}
.overlay-nav a {
  min-width: 130px;
  max-width: 130px;
  padding: 10px 0;
  background: rgba(64, 72, 82, 0.4);
  border: 1.0px solid #717983;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 300;
  text-align: center;
  transition: background 0.4s, color 0.4s, transform 0.4s, box-shadow 0.3s;
  box-shadow: 0 2px 10px #0003;
  margin-bottom: 0;
  display: block;
  margin-left: 0;
  margin-right: 0;
}
.overlay-nav a:hover {
  background: #e0fbff;
  color: #000;
  transform: scale(1.2);
  box-shadow: 0 4px 24px #3cf9;
}

/* ============ NAV BUTTONS ENTRANCE ANIMATION ============ */
@keyframes nav-fade-in {
  0% { opacity: 0; transform: translateY(-40px) scale(0.92); filter: blur(6px);}
  75% { opacity: 1; transform: translateY(6px) scale(1.04); filter: blur(4);}
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0);}
}
.nav-btn { opacity: 0; }
.nav-btn.nav-animate-in {
  animation: nav-fade-in 2.7s cubic-bezier(.21,1.05,.41,.96) forwards;
}
.nav-btn.nav-animate-in:nth-of-type(1) { animation-delay: 0.50s; }
.nav-btn.nav-animate-in:nth-of-type(2) { animation-delay: 0.70s; }

/* ============== GALLERY HOMEPAGE BUBBLE BUTTONS ============== */
.gallery-button { position: relative; text-align: center; transition: transform 0.2s ease; opacity: 0; }
.bubble-label {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.68);
  color: #fff;
  font-size: 1.1em;
  font-weight: 200;
  padding: 15px 0 11px 0;
  z-index: 9999;
  text-align: center;
  letter-spacing: 1px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  pointer-events: auto;
  margin: 0;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 2.5s cubic-bezier(.28,1.25,.29,.99), filter 3.0s cubic-bezier(.28,1.25,.29,.99);
}
/* Slight hover lift (desktop) */
@media (hover:hover){
  .gallery-button .bubble-link:hover{
    transform: translateY(-4px) scale(1.01);
    transition: transform .25s ease;
  }
}
/* ---- Gallery entrance/fly-in animations ---- */
@keyframes gallery-fly-left {
  0% { opacity: 0; transform: translateX(-520px) scale(0.68); filter: blur(8px);}
  70% { opacity: 1; transform: translateX(10px) scale(1.15); filter: blur(4);}
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0);}
}
@keyframes gallery-fly-right {
  0% { opacity: 0; transform: translateX(520px) scale(0.68); filter: blur(8px);}
  70% { opacity: 1; transform: translateX(-10px) scale(1.15); filter: blur(4);}
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0);}
}
.gallery-section .gallery-button.gallery-animate-in.fly-left {
  animation: gallery-fly-left 3.0s cubic-bezier(.19,1.13,.69,.89) forwards;
  animation-delay: 0.42s;
}
.gallery-section .gallery-button.gallery-animate-in.fly-right {
  animation: gallery-fly-right 2.5s cubic-bezier(.19,1.13,.69,.89) forwards;
  animation-delay: 0.85s;
}
@keyframes label-reveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.8); filter: blur(6px); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.0); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* =============== GALLERY GRID PAGE / THUMBNAILS =============== */
.gallery-grid { column-count: 5; column-gap: 46px; max-width: 1400px; margin: 18px auto 20px auto; background: transparent !important;}
@media (max-width: 900px) {.gallery-grid { column-count: 3; }}
@media (max-width: 600px) {.gallery-grid { column-count: 2; }}
.gallery-grid a { display: inline-block; margin-bottom: 24px; border-radius: 14px; box-shadow: 0 3px 20px #0002; background: transparent !important; overflow: hidden; width: 100%; transition: transform 0.4s, box-shadow 0.4s, filter 0.4s;}
.gallery-grid a:hover { transform: scale(1.2); box-shadow: 0 4px 24px #7188aa; filter: brightness(1.15);}
.gallery-grid img { width: 100%; height: auto; display: block; opacity: 0; filter: blur(6px); transition: none; border-radius: 10px; background: transparent !important; image-rendering: auto; }
.gallery-grid img.loaded { opacity: 1; filter: blur(0); transition: opacity 2.4s, filter 2s cubic-bezier(.7,.3,.3,1); }

/* ---- GLightbox MODAL GALLERY ---- */
/* Inner container should NOT blur or darken */
.ginner-container {
  background: transparent !important;
  transition: opacity .4s ease !important;
}
/* Main lightbox container: no extra bg/stacking */
.glightbox-container {
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}
/* Single overlay does the work: lighter + more blur */
.goverlay,
.glightbox .goverlay {
  background: rgba(0,0,0,0.2) !important;    /* try 0.44–0.52 to taste */
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* Neutralize any per-slide backgrounds */
.gslide,
.gslide-inner,
.gslide-media,
.gslide-description {
  background: transparent !important;
}

/* ===================== CONTACT PAGE FORM & PHOTO ===================== */
.contact-split-row {
  display: flex;
  width: 95vw;
  max-width: 1600px;
  min-height: 700px;
  margin: 8px auto 32px auto;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 6px 38px #000b;
  background: rgba(22, 22, 28, 0.97);
  align-items: stretch;
  gap: 0;
}
.contact-box {
  width: 100%; max-width: none; margin: 0;
  background: rgba(20,25,30,0.98);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 2px 16px #0007;
  padding: 32px 24px 24px 24px;
}
.contact-info-list { margin-bottom: 20px; }
.contact-info-list div {
  display: flex; align-items: center; margin-bottom: 10px;
}
.contact-info-list i {
  margin-right: 10px; color: #3ea6ff; min-width: 20px; text-align: center; font-size: 1.35em;
}
.contact-info-list a { color: #b6e7ff; text-decoration: none; }
.contact-info-list a:hover { text-decoration: underline; color: #fff; }
form { display: flex; flex-direction: column; }
form label { margin-top: 12px; margin-bottom: 4px; }
form input, form textarea {
  padding: 10px; font-size: 1em; border: none; border-radius: 8px; margin-bottom: 8px;
  background: #2a4358; color: #fff;
}
form button {
  margin-top: 12px; padding: 12px; font-size: 1em; background: #3ea6ff; color: #000;
  border: none; border-radius: 8px; cursor: pointer;
}
form button:hover { background: #1ea6ff; color: #fff; }
.contact-right {
  flex: 1 1 0; min-width: 0; max-width: none; display: flex;
  align-items: stretch; justify-content: center; background: none;
  position: relative; overflow: hidden;
}
.contact-left {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: 100%; max-width: 370px; min-width: 0; margin: 0; padding: 0; background: none;
  flex: 0 0 480px;
}
.contact-photo-container{
  position: relative;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  background: #0c1014;     /* matte background */
  border-radius: 16px;
}
@media (min-width: 800px){ .contact-photo-container{ min-height: 480px;
}
}

/* Ensure slideshow images are on top of the blurred plate */
.contact-photo-container img.contact-photo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center */
  display: block;

  /* sizing: never upscale, but shrink responsively to fit the box */
  width: auto;
  height: auto;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  object-fit: contain;

  border-radius: 16px;
  opacity: 0;                              /* we’ll fade in via JS */
  transition: opacity 1200ms ease-in-out;  /* fade speed */
}
.contact-photo {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 16px; filter: brightness(0.92) grayscale(0.04);
  display: block; box-shadow: 0 6px 38px #000b; background: transparent;
  transition: max-height 0.3s;
}
.intro-overlay-text {
  position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
  background: rgba(12,18,22,0.7); padding: 26px 22px 20px 22px;
  border-radius: 0 0 20px 0; font-size: 1.08em; line-height: 1.55;
  box-shadow: 0 8px 18px #0007; font-weight: 250; z-index: 3;
  text-shadow: 0 2px 7px #000a; backdrop-filter: blur(0.3px);
}

/* ===================== CONTACT FORM POPUP (THANK YOU/ERROR) ===================== */
#contact-popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  z-index: 99999;
  width: clamp(260px, 90vw, 420px);
  max-height: 80vh;
  background: #181f18ee;
  color: #b6e7ff;
  border-radius: 18px;
  box-shadow: 0 8px 48px #000b;
  padding: 26px 22px 22px 22px;
  font-size: 1.13em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}
#contact-popup.show {
  display: block;
  opacity: 1;
}
#contact-popup button#contact-popup-close {
  position: absolute;
  right: 18px;
  top: 14px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4em;
  opacity: 0.55;
  cursor: pointer;
  line-height: 1;
}

/* ===================== SCROLL TO TOP BUTTON ===================== */
#scrollTopBtn { position: fixed; right: 36px; bottom: 40px; z-index: 9999; background: rgba(32,32,32,0.92); border: none; border-radius: 50%; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px #000b; opacity: 0; pointer-events: none; transition: opacity 0.85s cubic-bezier(.21,1.05,.41,.96), background 0.42s; outline: none;}
#scrollTopBtn svg { width: 30px; height: 30px; display: block;}
#scrollTopBtn.show { opacity: 1; pointer-events: auto;}
#scrollTopBtn:hover { background: #111;}
@media (max-width: 600px) {
  #scrollTopBtn { width: 30px; height: 30px; bottom: 16px; right: 14px;}
  #scrollTopBtn svg { width: 22px; height: 22px;}
}
#scrollTopBtn:hover {
  background: #111;
  transition: transform 0.3s cubic-bezier(.21,1.05,.41,.96), background 0.22s;
  box-shadow: 0 6px 22px #3cf9, 0 4px 22px #000a;
}
#scrollTopBtn svg {
  transition: transform 0.33s cubic-bezier(.21,1.05,.41,.96);
}
#scrollTopBtn:hover svg {
  transform: translateY(-7px) scale(1.0);
}


/* ===================== RESPONSIVE (MOBILE) TWEAKS ===================== */
@media (max-width: 700px) {
  /* -- Nav: mobile style -- */
  .overlay-nav {
    top: 7px;
    right: 20px;
    left: unset;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 7px;
    height: auto;
    position: absolute;
    z-index: 10;
  }
  .overlay-nav a {
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.46) !important;
    font-size: 1.3em !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 8px #0005 !important;
    border: 2px solid #888 !important;
    color: #fff !important;
    transition: background 0.2s, color 0.2s, transform 0.2s !important;
  }
  .overlay-nav a:hover { background: #e0fbff !important; color: #000 !important; }
  .overlay-nav .nav-label { display: none !important; }
  .overlay-nav i { font-size: 1.1em !important; }
}
@media (max-width: 900px) {
  /* -- Contact page layout on mobile/tablet -- */
  .contact-split-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .contact-right {
    width: 100vw !important;
    display: block !important;
    height: 400px !important;
    min-height: 400px !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .contact-photo-container {
    width: 100vw !important;
    min-height: 400px !important;
    height: 400px !important;
    min-height: 400px !important;
    background: #181820 !important;
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .contact-photo {
    width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    z-index: 4 !important;
    position: relative !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 1s ease-in-out;
  }
  .intro-overlay-text {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.2) !important;
    color: #fff !important;
    font-size: 0.9em !important;
    font-weight: 100 !important;
    text-shadow: 0 2px 6px #000, 0 1px 2px #222 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    line-height: 1.0 !important;
    padding: 10px 6vw !important;  /* less padding for more space */
    max-height: 75% !important;    /* prevents it from spilling over the photo */
    overflow-y: auto !important;   /* lets you scroll if needed */
  }
  .contact-left {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 1px !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .contact-box {
    background: #181820 !important;
    border-radius: 0 0 14px 14px !important;
    color: #b6e7ff !important;
    padding: 26px 5vw 20px 5vw !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 11 !important;
    display: block !important;
  }
}

/* ===================== HOMEPAGE VIDEO BG (GALLERY SECTION) ===================== */
.gallery-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8vw;
  width: 100%;
  max-width: 55vw;
  margin: 0 auto;
  flex-wrap: wrap;
  padding: 40px 20px 30px 20px;  
  min-height: calc(100vh - 250px);
  z-index: 1;
  flex: 1;
  background: transparent !important;
  overflow: hidden;
}
@keyframes floatbg {
  0% {
    background-position:
      0vw 0vh, 10vw 15vh, 80vw 70vh, 30vw 90vh, 55vw 70vh, 60vw 50vh, 10vw 60vh, 90vw 30vh,
      5vw 10vh, 85vw 75vh, 40vw 35vh, 95vw 85vh, 60vw 65vh, 25vw 90vh, 50vw 15vh, 90vw 15vh;
  }
  100% {
    background-position:
      60vw 60vh, 40vw 90vh, 100vw 10vh, 80vw 95vh, 10vw 60vh, 70vw 0vh, 0vw 100vh, 60vw 20vh,
      80vw 5vh, 20vw 50vh, 5vw 95vh, 55vw 5vh, 99vw 50vh, 80vw 50vh, 10vw 80vh, 15vw 60vh;
  }
}
.top-banner::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 90%);
  z-index: 1;
  pointer-events: none;
}
.lang-flags {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
}
.lang-flags img {
  width: 35px;
  height: auto;
  border-radius: 2px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 4px #0006;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.3s;
}
#glightbox-share-btn {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2147483647 !important;

  display: none;                 /* shown only when lightbox is open */
  align-items: center;
  gap: 8px;

  background: rgba(18,18,20,0.92);
  color: #eaeaea;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-size: 0.9em;
  letter-spacing: .5px;
  cursor: pointer;
}
#glightbox-share-btn svg { width: 16px; height: 16px; fill: currentColor; margin: 0; filter: none; }
#glightbox-share-btn span { display: inline !important; }
#glightbox-share-btn:hover { background: rgba(28,28,32,0.86); }
.glightbox-open #glightbox-share-btn { display: flex !important; }

.glightbox-open #glightbox-share-btn {
  display: flex !important;
}

/* ✅ Prevent GLightbox from covering the button */
.glightbox .gslide.current {
  position: relative !important;
  z-index: auto !important;
}
.gallery-button {
  width: 480px;
  height: 300px;
  max-width: 90vw;
  max-height: 55vw;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.85);
  background: rgba(24, 22, 34, 0.77);
  transition: transform 0.32s cubic-bezier(.25,.8,.5,1), box-shadow 0.4s;
  display: block !important;
  align-items: flex-end;
  justify-content: center;
  margin: 0 18px;
}
@media (min-width: 700px) {
  .gallery-button {
    flex: 1 1 0;
    max-width: 50vw;          /* Each button can grow to 35vw, so together up to 70vw */
    min-width: 260px;         /* Minimum size for nice look */
    height: auto;
    aspect-ratio: 4/3;
    margin: 0;
  }
  .gallery-section {
    max-width: 65vw;          /* Limit container to 72% of viewport width */
  }
}
@media (max-width: 699px) {
  .gallery-button {
    width: 100vw;
    height: 65vw;
    aspect-ratio: 4 / 3; /* Keeps shape consistent */
    max-height: none;
  }
}
.collage-stack {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.collage-stack img {
  position: absolute;
  outline: 1px solid #aaa !important;
  background: rgba(255,0,0,0.09) !important;
  z-index: 2 !important;
  width: 66%;
  height: 120%;
  object-fit: cover;
  border-radius: 9px;
  filter: grayscale(100%) brightness(0.5);
  box-shadow: 0 2px 18px #2226;
  transition: filter 0.75s, box-shadow 0.65s, transform 0.65s;
}

/* Default collage positions for up to 10 images */
.collage-stack .img1 { top: -7%; left: -4%; transform: rotate(-6deg);}
.collage-stack .img2 { top: -2%; right: -5%; transform: rotate(5deg);}
.collage-stack .img3 { bottom: -11%; left: 22%; width: 37%; height: 110%; transform: rotate(-3deg);}
.collage-stack .img4 { top: 8%; left: 38%; width: 50%; height: 70%; transform: rotate(3deg);}
.collage-stack .img5 { top: 24%; left: 5%; width: 45%; height: 55%; transform: rotate(-4deg);}
.collage-stack .img6 { top: 12%; right: 11%; width: 53%; height: 75%; transform: rotate(2deg);}
.collage-stack .img7 { top: 17%; right: 26%; width: 49%; height: 63%; transform: rotate(-8deg);}
.collage-stack .img8 { top: 21%; left: 23%; width: 42%; height: 101%; transform: rotate(7deg);}
.collage-stack .img9 { bottom: 8%; left: 11%; width: 44%; height: 58%; transform: rotate(0deg);}
.collage-stack .img10 { top: 10%; right: 2%; width: 37%; height: 60%; transform: rotate(2deg);}

/* UNIQUE HOVER for each image */
.gallery-button:hover .collage-stack .img1,
.gallery-button:active .collage-stack .img1,
.gallery-button.touched .collage-stack .img1
{
  filter: grayscale(0%) brightness(1.13);
  transform: scale(1.18) rotate(-8deg) translate(-10px, -10px);
  box-shadow: 0 0 22px #fff8, 0 2px 32px #fff3;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img2,
.gallery-button:active .collage-stack .img2,
.gallery-button.touched .collage-stack .img2
 {
  filter: grayscale(0%) brightness(1.13);
  transform: scale(1.15) rotate(8deg) translate(10px, -8px);
  box-shadow: 0 0 22px #fff8, 0 2px 32px #fff3;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img3,
.gallery-button:active .collage-stack .img3,
.gallery-button.touched .collage-stack .img3
{
  filter: grayscale(0%) brightness(1.15);
  transform: scale(1.14) rotate(-7deg) translateY(11px);
  box-shadow: 0 0 18px #fff7, 0 2px 28px #fff2;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img4,
.gallery-button:active .collage-stack .img4,
.gallery-button.touched .collage-stack .img4
{
  filter: grayscale(0%) brightness(1.14);
  transform: scale(1.12) rotate(13deg) translate(-8px, 8px);
  box-shadow: 0 0 16px #fff6, 0 2px 24px #fff2;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img5,
.gallery-button:active .collage-stack .img5,
.gallery-button.touched .collage-stack .img5
{
  filter: grayscale(0%) brightness(1.13);
  transform: scale(1.17) rotate(-11deg) translate(8px, 10px);
  box-shadow: 0 0 16px #fff6, 0 2px 24px #fff2;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img6,
.gallery-button:active .collage-stack .img6,
.gallery-button.touched .collage-stack .img6
{
  filter: grayscale(0%) brightness(1.16);
  transform: scale(1.15) rotate(9deg) translate(-6px, 6px);
  box-shadow: 0 0 17px #fff6, 0 2px 24px #fff3;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img7,
.gallery-button:active .collage-stack .img7,
.gallery-button.touched .collage-stack .img7
{
  filter: grayscale(0%) brightness(1.14);
  transform: scale(1.14) rotate(-12deg) translate(7px, -9px);
  box-shadow: 0 0 16px #fff6, 0 2px 22px #fff2;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img8,
.gallery-button:active .collage-stack .img8,
.gallery-button.touched .collage-stack .img8
{
  filter: grayscale(0%) brightness(1.15);
  transform: scale(1.13) rotate(7deg) translate(-7px, 10px);
  box-shadow: 0 0 15px #fff7, 0 2px 18px #fff2;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img9,
.gallery-button:active .collage-stack .img9,
.gallery-button.touched .collage-stack .img9
{
  filter: grayscale(0%) brightness(1.16);
  transform: scale(1.14) rotate(2deg) translate(7px, -8px);
  box-shadow: 0 0 18px #fff7, 0 2px 20px #fff2;
  z-index: 2;
}
.gallery-button:hover .collage-stack .img10,
.gallery-button:active .collage-stack .img10,
.gallery-button.touched .collage-stack .img10
{
  filter: grayscale(0%) brightness(1.17);
  transform: scale(1.13) rotate(-5deg) translate(-8px, 6px);
  box-shadow: 0 0 17px #fff7, 0 2px 18px #fff2;
  z-index: 2;
}
.bubble-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
.gallery-button:hover .bubble-label {
  opacity: 1;
  filter: blur(0px);
}
.goverlay,
.glightbox .goverlay {
  background: rgba(0,0,0,0.68) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
/* --- Subtle zoom-in on open/slide change --- */
.glightbox-container .gslide.current .gslide-image img {
  animation: glb-zoom-in .55s ease both;
}

@keyframes glb-zoom-in {
  from { transform: scale(0.985); }
  to   { transform: scale(1); }
}
/* === Idle float on the WHOLE button (post fly-in) === */
.gallery-button.floating,
.gallery-button.post-flyin.floating {
  animation: idle-float-2d 8s ease-in-out infinite !important;
  transform-origin: 50% 60%;
  will-change: transform;
  animation-delay: calc(var(--stagger, 0) * .35s);
}
/* Desync each button's float (no JS needed) */
.gallery-section .gallery-button.floating:nth-child(1){
  animation-duration: 8.2s !important;
  animation-delay: .2s !important;
}
.gallery-section .gallery-button.floating:nth-child(2){
  animation-duration: 9.1s !important;
  animation-delay: 1.4s !important;
}

/* If you ever add a 3rd button, give it a different phase too */
.gallery-section .gallery-button.floating:nth-child(3){
  animation-duration: 7.6s !important;
  animation-delay: .9s !important;
}

/* gentle 2D drift */
@keyframes idle-float-2d{
  0%   { transform: translate(0, 0)        rotate(0.15deg); }
  25%  { transform: translate(3px, -9px)   rotate(0deg);    }
  50%  { transform: translate(0, -16px)    rotate(-0.15deg);}
  75%  { transform: translate(-3px, -9px)  rotate(0deg);    }
  100% { transform: translate(0, 0)        rotate(0.15deg); }
}
@media (min-width: 1100px){
  @keyframes idle-float-2d{
    0%   { transform: translate(0, 0)       rotate(0.2deg); }
    25%  { transform: translate(4px, -12px) rotate(0deg);   }
    50%  { transform: translate(0, -20px)   rotate(-0.2deg);}
    75%  { transform: translate(-4px, -12px)rotate(0deg);   }
    100% { transform: translate(0, 0)       rotate(0.2deg); }
  }
}

/* Stable base AFTER fly-in (do NOT pin transform/animation here) */
.gallery-button.post-flyin { opacity: 1 !important; }
.gallery-button.post-flyin .bubble-label { opacity: 1 !important; filter: blur(0) !important; }