:root{
  --neon:#b9fd50;
  --bg:#000;
  --border-soft:rgba(185,253,80,.22);
  --text-soft:#e5e7eb;
}

/* ===== SCOPE ===== */
.sb-work-scope *{box-sizing:border-box;margin:0;padding:0;}
.sb-work-scope{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text-soft);
}

/* ===== SECTION ===== */
.sb-work-scope .work-gallery{
  padding:80px 6%;
  background:
    radial-gradient(circle at 10% 0%, rgba(185,253,80,.18), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(185,253,80,.12), transparent 55%),
    #000;
  position:relative;
  overflow:hidden;
}

/* soft aura */
.sb-work-scope .work-gallery::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 40%, rgba(185,253,80,.10), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(34,211,238,.10), transparent 55%);
  filter:blur(30px);
  animation:auraMove 10s ease-in-out infinite alternate;
}
@keyframes auraMove{
  from{transform:translate(-2%,-2%) scale(1);}
  to{transform:translate(2%,2%) scale(1.05);}
}

.sb-work-scope .work-gallery > *{position:relative;z-index:1;}

.sb-work-scope .work-gallery-header{text-align:center;margin-bottom:40px;}
.sb-work-scope .work-gallery-header h2{color:var(--neon);font-size:2.4rem;margin-bottom:16px; margin-bottom:30px;}
.sb-work-scope .work-gallery-header p{opacity:.85;max-width:520px;margin:0 auto;}

/* ===== GRID ===== */
.sb-work-scope .work-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  perspective:1400px;
}

/* ===== CARDS ===== */
.sb-work-scope .work-item{
  height:360px;
  border-radius:16px;
  background:linear-gradient(170deg,#111,#000);
  border:1px solid var(--border-soft);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:.4s;
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{50%{transform:translateY(-6px);}}

.sb-work-scope .work-item:hover{
  box-shadow:0 0 40px rgba(185,253,80,.35);
  border-color:var(--neon);
  animation-play-state:paused;
}

/* media */
.sb-work-scope .work-thumb{height:72%;overflow:hidden;}
.sb-work-scope .work-thumb img,
.sb-work-scope .work-thumb video{
  width:100%;height:100%;object-fit:cover;transition:.4s;
}
.sb-work-scope .work-item:hover img,
.sb-work-scope .work-item:hover video{transform:scale(1.08);}

.sb-work-scope .play-icon{
  position:absolute;inset:0;margin:auto;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--neon);border:2px solid var(--neon);
  background:rgba(0,0,0,.7);
}

/* title */
.sb-work-scope .work-item h3{
  padding:12px;color:#fff;font-size:.95rem;
}

/* ===========================
   LIGHTBOX – ZERO STRETCH
=========================== */
.sb-work-scope .work-lightbox{
  position:fixed;inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(10px);
  z-index:9999;
}
.sb-work-scope .work-lightbox.show{display:flex;}

.sb-work-scope .work-lightbox-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.9);
}

/* viewer box */
.sb-work-scope .work-lightbox-content{
  position:relative;
  width:min(92vw,980px);
  height:min(82vh,640px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border-soft);
  background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.85);
}

/* real fix */
.sb-work-scope .work-lightbox-content img,
.sb-work-scope .work-lightbox-content video{
  max-width:100%;
  max-height:100%;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
  display:none;
  border-radius:14px;
}

/* close */
.sb-work-scope .work-lightbox-close{
  position:absolute;
  top:10px;right:10px;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--neon);
  background:#000;color:var(--neon);
  font-size:20px;cursor:pointer;
}

/* ===== MOBILE ===== */
@media(max-width:640px){
  .sb-work-scope .work-item{height:260px;}
  .sb-work-scope .work-lightbox-content{
    width:94vw;height:76vh;
  }
}
