/* ===========================================================
   SLITS — Aikawa-style slit-strip gallery.
   Every photo of a series compressed into a thin vertical
   sliver in one horizontal, draggable strip. Hover widens a
   sliver and washes the others out; click expands it into the
   full photograph on a dark field (FLIP), scroll/arrows move
   between frames, Esc / click drops it back into the strip.
   A WebGL layer (slits.js) paints the images with a liquid
   ripple tied to drag velocity; without WebGL the same DOM
   drives a crisp CSS fallback.
   Relies on styles.css tokens + series.css --gx-* vars.
   =========================================================== */

/* the series section becomes a full-viewport stage host */
.series[data-layout="slits"],
.series[data-layout="scroll"]{ max-width:none; padding:0; height:100svh; overflow:hidden; }
.series[data-layout="slits"] .series-list,
.series[data-layout="slits"] .series-end,
.series[data-layout="scroll"] .series-list,
.series[data-layout="scroll"] .series-end{ display:none; }
body[data-gallery-layout="slits"],
body[data-gallery-layout="scroll"]{ overflow:hidden; }

/* soft arrival when swapping into a flow layout (grid / vertical) */
.series.gx-arrive .series-list{ animation:gx-rise .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes gx-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* the photograph that travelled here from the globe */
.sg-arrive{
  position:fixed; inset:0; z-index:600;
  background:#0b0a08 center/cover no-repeat;
  pointer-events:none;
}
.sg-arrive.out{
  opacity:0; transform:scale(1.05);
  transition:opacity .7s ease, transform 1s cubic-bezier(.16,1,.3,1);
}

/* ---- stage ------------------------------------------------ */
.sg-stage{
  position:fixed; inset:0; z-index:40;              /* under the top nav (50) + pill (300) */
  background:var(--gx-canvas,#f4f3ef);
  overflow:hidden; touch-action:none;
  cursor:none;                                      /* custom cursor takes over */
  -webkit-user-select:none; user-select:none;
}
.sg-stage.is-zoom{ z-index:400; }                   /* immersive: above nav + pill */
@media (hover:none){ .sg-stage{ cursor:default; } }

/* ---- the strip / column ------------------------------------ */
.sg-track{
  position:absolute; left:0; top:0; height:100%;
  display:flex; align-items:center;
  will-change:transform;
}
.sg-stage--scroll .sg-track{
  flex-direction:column; align-items:center;
  height:auto; width:100%;
}
.sg-item{
  position:relative; flex:none; padding:0; border:0;
  background:var(--gx-frame,#e9e6df);
  overflow:hidden; cursor:none;
  transition:none; -webkit-tap-highlight-color:transparent;
}
.sg-item:focus{ outline:none; }
.sg-item:focus-visible{ outline:1px solid var(--gx-cap-no,#bdb8ad); outline-offset:4px; }
.sg-close:focus{ outline:none; }
.sg-close:focus-visible{ outline:1px solid rgba(232,226,212,.6); outline-offset:2px; }
.sg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
/* GL mode paints the pixels itself — DOM imgs become geometry only */
.sg-stage[data-gl] .sg-img{ visibility:hidden; }
.sg-stage[data-gl] .sg-item{ background:transparent; }

/* DOM-fallback hover wash (GL mode does this in the shader) */
.sg-stage:not([data-gl]) .sg-img{ transition:opacity .5s cubic-bezier(.16,1,.3,1); }
.sg-stage:not([data-gl]).is-hovering .sg-item:not(.is-hot) .sg-img{ opacity:.24; }

/* ---- zoom layer ------------------------------------------- */
.sg-zoombg{
  position:absolute; inset:0; background:var(--gx-canvas,#f4f3ef);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.sg-stage.is-zoom .sg-zoombg{ opacity:1; }
.sg-ghost{
  position:absolute; left:0; top:0; overflow:hidden;
  visibility:hidden; pointer-events:none; will-change:transform;
  box-shadow:0 42px 90px -36px rgba(20,18,14,.32);
}
.sg-ghost.on{ visibility:visible; }
.sg-ghost img{ width:100%; height:100%; object-fit:cover; display:block; }
.sg-stage[data-gl] .sg-ghost{ box-shadow:none; }
.sg-stage[data-gl] .sg-ghost img{ visibility:hidden; }

/* ---- canvas ------------------------------------------------ */
.sg-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---- chrome ------------------------------------------------ */
.sg-title{
  position:absolute; left:var(--container-pad,36px); top:86px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text); pointer-events:none;
  transition:color .5s ease;
}
.sg-count{ transition:color .5s ease; }
.sg-title em{ font-style:normal; color:var(--gx-cap,#8c887e); margin-left:10px; }
.sg-count{
  position:absolute; left:var(--container-pad,36px); bottom:26px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  color:var(--text); display:flex; align-items:baseline; gap:7px; pointer-events:none;
}
.sg-count b{ font-family:var(--font-display); font-size:24px; letter-spacing:-.01em; font-weight:400; }
.sg-hint{
  position:absolute; right:var(--container-pad,36px); bottom:31px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gx-cap,#8c887e); pointer-events:none;
  transition:opacity .4s ease;
}
.sg-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(20,18,14,.08); pointer-events:none;
}
.sg-progress i{ position:absolute; left:0; top:0; bottom:0; width:18%; background:var(--accent); }

/* zoom-mode chrome flips to light-on-dark */
.sg-stage.is-zoom .sg-title,
.sg-stage.is-zoom .sg-count{ color:var(--text,#1a1712); }
.sg-stage.is-zoom .sg-hint,
.sg-stage.is-zoom .sg-progress{ opacity:0; }
.sg-close{
  position:absolute; right:var(--container-pad,36px); top:86px; z-index:6;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text,#1a1712); background:transparent;
  border:1px solid rgba(20,18,14,.3); padding:9px 14px; cursor:none;
  opacity:0; pointer-events:none; transition:opacity .4s ease, background .2s, color .2s;
}
.sg-close:hover{ background:var(--text,#1a1712); color:var(--gx-canvas,#f4f3ef); }
.sg-stage.is-zoom .sg-close{ opacity:1; pointer-events:auto; transition-delay:.3s; }
@media (hover:none){ .sg-close{ cursor:pointer; } }

/* subscriber perk — save the zoomed frame */
.sg-save{
  position:absolute; right:var(--container-pad,36px); top:132px; z-index:6;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text,#1a1712); background:transparent;
  border:1px solid rgba(20,18,14,.3); padding:9px 14px; cursor:none;
  opacity:0; pointer-events:none; transition:opacity .4s ease, background .2s, color .2s, border-color .2s;
}
.sg-save:hover{ background:var(--accent,#ff5a00); border-color:var(--accent,#ff5a00); color:#fff; }
.sg-stage.is-zoom .sg-save{ opacity:1; pointer-events:auto; transition-delay:.36s; }
@media (hover:none){ .sg-save{ cursor:pointer; } }

/* ---- custom cursor ---------------------------------------- */
.sg-cursor{
  position:fixed; left:0; top:0; z-index:500; pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .25s ease;
}
.sg-cursor span{
  display:flex; align-items:center; justify-content:center;
  min-width:52px; height:52px; padding:0 10px; border-radius:999px;
  background:var(--text); color:var(--gx-canvas,#f4f3ef);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase;
  transform:scale(.35); opacity:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease,
             background .3s ease, color .3s ease;
}
.sg-cursor.on{ opacity:1; }
.sg-cursor.on span{ transform:scale(1); opacity:1; }
.sg-cursor.inv span{ background:var(--text,#1a1712); color:var(--gx-canvas,#f4f3ef); }
@media (hover:none){ .sg-cursor{ display:none; } }

@media (max-width:560px){
  .sg-title{ top:78px; }
  .sg-close{ top:78px; }
  .sg-count b{ font-size:20px; }
  .sg-hint{ display:none; }
}