.wg2-section { --paper: var(--page); --pink: var(--blue); font-family: Goga, Arial, sans-serif; }
/* =====================================================================
   WORK GALLERY — stationary section with a draggable diagonal track
   ===================================================================== */
.wg2-section{
  background:var(--paper);
  padding:56px 0;
}

.wg2-scrollspace{
  position:relative;
  height:auto;
}

.wg2-pin{
  position:relative;
  height:calc(100svh - 112px);
  min-height:680px;
  max-height:900px;
  margin:0 clamp(12px, 3vw, 40px);
  border-radius:32px;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.wg2-pin.is-dragging{ cursor:grabbing; }
.wg2-pin:focus-visible{ outline:2px solid var(--pink); outline-offset:4px; }

.wg2-dots{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.16) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  pointer-events:none;
}

.wg2-head{
  position:relative;
  z-index:2;
  text-align:center;
  padding:clamp(78px, 9vh, 112px) 24px 0;
  pointer-events:none;
}

.wg2-eyebrow{
  display:inline-flex;
  padding:8px 18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  margin:0 0 18px;
}

.wg2-heading{
  margin:0;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(24px, 3.6vw, 42px);
  color:#fff;
  line-height:1.1;
}
.wg2-heading em{ font-style:normal; color:var(--pink); }

/* ---- Track + cards (positioned from data via CSS custom properties) ---- */
.wg2-track{
  position:absolute;
  inset:0;
  z-index:1;
  will-change:transform;
  --card-w:640px;
  --card-h:calc(var(--card-w) / 1.6);
  --step-x:435px;
  --step-y:76px;
  --start-x:-52px;
  --start-y:112px;
}

.wg2-card{
  position:absolute;
  width:var(--card-w);
  height:var(--card-h);
  left:calc(var(--start-x) + (var(--i) * var(--step-x)));
  top:calc(var(--start-y) + (var(--i) * var(--step-y)));
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 44px rgba(0,0,0,.35);
  text-decoration:none;
  display:block;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.wg2-card:hover, .wg2-card:focus-visible{
  transform:scale(1.04);
  box-shadow:0 26px 58px rgba(0,0,0,.5);
  z-index:50;
}
.wg2-card:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }

.wg2-bar{
  height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  background:rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.wg2-dot{ width:9px; height:9px; border-radius:50%; background:rgba(0,0,0,.16); }
.wg2-bar--dark{ background:rgba(255,255,255,.08); border-bottom-color:rgba(255,255,255,.1); }
.wg2-bar--dark .wg2-dot{ background:rgba(255,255,255,.28); }
.wg2-url{
  margin-left:8px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:12px;
  color:rgba(0,0,0,.35);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.wg2-bar--dark .wg2-url{ color:rgba(255,255,255,.45); }

.wg2-body{
  position:relative;
  height:calc(100% - 36px);
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.wg2-kicker{
  font-size:13px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.6;
}
.wg2-title{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size:32px;
}
.wg2-tag{
  font-size:18px;
  line-height:1.4;
  opacity:.7;
  max-width:24ch;
}

.wg2-body--shot{
  padding:0;
  display:block;
  overflow:hidden;
  background:#fff;
}
.wg2-shot{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.wg2-shot--contain{
  object-fit:contain;
  object-position:center;
  background:#fff;
}
.wg2-caption{
  position:absolute;
  left:18px;
  bottom:18px;
  max-width:calc(100% - 36px);
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.wg2-caption-sub{
  display:block;
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,.7);
  white-space:normal;
  line-height:1.3;
  max-width:220px;
}
.wg2-live-btn{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#050505;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.wg2-live-arrow{ font-size:14px; }
@media (hover:hover) and (pointer:fine){
  .wg2-card:hover .wg2-live-btn,
  .wg2-card:focus-visible .wg2-live-btn{
    opacity:1;
    transform:translateY(0);
  }
}
@media (max-width:760px){
  .wg2-caption-sub, .wg2-live-btn{ display:none; }
}

.wg2-t1 .wg2-body{ background:linear-gradient(160deg,#202020,#050505); color:#fff; }
.wg2-t2 .wg2-body{ background:linear-gradient(160deg,#ff4d84,#ff075f); color:#fff; }
.wg2-t3 .wg2-body{ background:#ffffff; color:var(--ink); }
.wg2-t3 .wg2-kicker{ color:var(--pink); opacity:1; }
.wg2-t4 .wg2-body{ background:#e9e9e7; color:var(--ink); }
.wg2-t5 .wg2-body{ background:linear-gradient(160deg,#6b43ff,#4429cc); color:#fff; }
.wg2-t6 .wg2-body{ background:#ffffff; color:var(--ink); }
.wg2-t6 .wg2-title{ border-bottom:2px solid #6b43ff; padding-bottom:4px; display:inline-block; }
.wg2-t7 .wg2-body{ background:#050505; color:#fff; }
.wg2-t7 .wg2-title{ text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:4px; }
.wg2-t8 .wg2-body{ background:#d8d8d5; color:var(--ink); }

/* ---- Responsive: fewer visible cards, smaller step ---- */
@media (max-width:1024px){
  .wg2-track{ --card-w:400px; --step-x:272px; --step-y:68px; --start-x:-28px; --start-y:208px; }
  .wg2-bar{ height:30px; }
  .wg2-body{ height:calc(100% - 30px); padding:22px 24px; }
  .wg2-title{ font-size:24px; }
  .wg2-tag{ font-size:15px; }
}
@media (max-width:640px){
  .wg2-section{ padding:10px 0 36px; }
  .wg2-pin{
    height:calc(100svh - 32px);
    min-height:620px;
    max-height:780px;
    margin:0 10px;
    border-radius:20px;
  }
  .wg2-track{ --card-w:340px; --step-x:238px; --step-y:60px; --start-x:-22px; --start-y:236px; }
  .wg2-title{ font-size:22px; }
  .wg2-tag{ display:none; }
  .goat-page .wg2-caption{ display:none; }
}

/* ---- Reduced motion: keep dragging, remove animated card effects ---- */
@media (prefers-reduced-motion: reduce){
  .wg2-card{ transition:none; }
}