/* ===========================================================================
   Immersian House — shared fullscreen LIGHTBOX (images + video)
   Used by work.html (carousel) and every service-*.html media slot.
   Arctic Signal palette · sits above header (z50) and WhatsApp float (z9999).
   =========================================================================== */

:root{
  --ihlb-mint:#1de0c1;
  --ihlb-ice:#E8F4FF;
  --ihlb-ink:#0A0F1E;
}

/* ---- Overlay ------------------------------------------------------------- */
.ihlb-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3vw,40px);
  background:radial-gradient(ellipse at 50% 42%, rgba(10,15,30,.86), rgba(4,7,15,.96));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .28s ease;
}
.ihlb-overlay.is-open{display:flex;}
.ihlb-overlay.is-visible{opacity:1;}

.ihlb-overlay::before{ /* faint mint grid, matches site */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(29,224,193,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,224,193,.05) 1px, transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 78%);
}

/* ---- Stage / media ------------------------------------------------------- */
.ihlb-stage{
  position:relative;
  z-index:2;
  width:min(92vw,1280px);
  max-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ihlb-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(29,224,193,.28), 0 0 60px rgba(29,224,193,.10);
  background:rgba(8,13,26,.6);
  transform:scale(.965);
  opacity:0;
  transition:transform .34s cubic-bezier(.2,.85,.25,1), opacity .3s ease;
}
.ihlb-overlay.is-visible .ihlb-media{transform:scale(1);opacity:1;}

.ihlb-media img,
.ihlb-media video{
  display:block;
  max-width:100%;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#05070f;
}
.ihlb-media--video{
  width:min(92vw,1080px);
  max-height:min(82vh,720px);
}
.ihlb-media--video video{
  width:100%;
  height:auto;
  max-height:min(82vh,720px);
}
.ihlb-media--image img{
  max-width:min(92vw,1280px);
  max-height:82vh;
}

/* Loading shimmer on the media frame */
.ihlb-media.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(29,224,193,.10) 50%, transparent 80%);
  background-size:200% 100%;
  animation:ihlbShimmer 1.1s linear infinite;
  pointer-events:none;
}
@keyframes ihlbShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- Controls ------------------------------------------------------------ */
.ihlb-btn{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(29,224,193,.34);
  background:rgba(8,13,26,.72);
  color:var(--ihlb-mint);
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.ihlb-btn:hover,
.ihlb-btn:focus-visible{
  outline:none;
  background:rgba(29,224,193,.12);
  border-color:rgba(29,224,193,.7);
  transform:translateY(-1px);
}
.ihlb-btn svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.ihlb-close{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);width:52px;height:52px;}
.ihlb-prev,
.ihlb-next{top:50%;width:56px;height:56px;transform:translateY(-50%);}
.ihlb-prev{left:clamp(8px,2vw,26px);}
.ihlb-next{right:clamp(8px,2vw,26px);}
.ihlb-prev:hover,.ihlb-next:hover{transform:translateY(-50%) scale(1.05);}
.ihlb-overlay[data-single="true"] .ihlb-prev,
.ihlb-overlay[data-single="true"] .ihlb-next{display:none;}

/* ---- Caption + counter --------------------------------------------------- */
.ihlb-info{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:clamp(10px,2.4vw,26px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  max-width:92vw;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(8,13,26,.66);
  border:1px solid rgba(232,244,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  text-align:center;
}
.ihlb-title-txt{
  color:var(--ihlb-ice);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:800;
  font-size:.92rem;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;
}
.ihlb-cap-txt{
  color:var(--ihlb-mint);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.62rem;
}
.ihlb-counter{
  color:rgba(232,244,255,.6);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.08em;
  padding-left:14px;
  border-left:1px solid rgba(232,244,255,.16);
}
.ihlb-overlay[data-single="true"] .ihlb-counter{display:none;border:0;padding-left:0;}

@media (max-width:640px){
  .ihlb-close{width:44px;height:44px;}
  .ihlb-prev,.ihlb-next{width:46px;height:46px;top:auto;bottom:clamp(72px,16vw,96px);transform:none;}
  .ihlb-prev:hover,.ihlb-next:hover{transform:none;}
  .ihlb-title-txt{max-width:52vw;font-size:.82rem;}
  .ihlb-info{gap:10px;padding:8px 14px;}
}

@media (prefers-reduced-motion: reduce){
  .ihlb-overlay,.ihlb-media,.ihlb-btn{transition:none;}
  .ihlb-media{transform:none;opacity:1;}
  .ihlb-media.is-loading::after{animation:none;}
}

/* ===========================================================================
   Card badge (expand / play) — shared affordance on triggers
   =========================================================================== */
.ihlb-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(29,224,193,.4);
  background:rgba(8,13,26,.62);
  color:var(--ihlb-mint);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  pointer-events:none; /* click passes to the card/trigger */
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.ihlb-badge svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ihlb-badge--play svg{fill:currentColor;stroke:none;width:42%;height:42%;}
:where(.ihwork-pro-card,.ih-content-media):hover .ihlb-badge{
  background:rgba(29,224,193,.16);
  border-color:rgba(29,224,193,.8);
  transform:scale(1.06);
}