/* ============================================================
   gallery-space — geometry only. No colors, no element paint.
   The flat .sk-cell-grid is the scripts-off / reduced-motion /
   editor truth; the engine builds the 3D stage and gates every
   enhanced rule on data-space="on".

   Transform ownership: JS writes NUMBERS (unitless vars), CSS
   owns every transform. Exactly ONE transform declaration per
   facing branch — never two competing blocks (the 08-15 bug).
   ============================================================ */

.sk-gallery-space {
  position: relative;
  overflow: clip;
  padding-block: 0;
}

/* Full-bleed band row — internal inset only (accordion gallery model). */
.sk-gallery-space-row {
  position: relative;
  box-sizing: border-box;
  padding: var(--brand-space-2, var(--kit-space-2, 0.65rem));
  height: var(--sk-gallery-space-h, clamp(24rem, 46vw, 34rem));
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-row {
  overflow: hidden;
}

/* ---- knobs (unitless; engine reads via getComputedStyle) ---- */
.sk-gallery-space {
  --sk-gallery-space-depth-factor: 1;
  --sk-gallery-space-perspective-factor: 1.7;
  --sk-gallery-space-spin: 0; /* idle deg/s */
  --sk-gallery-space-cell: 1; /* cell size multiplier */
  --sk-gallery-space-security-gap: 16; /* px; min edge clearance between tiles */
  --sk-gallery-space-fit: 1; /* uniform scale; engine shrinks to fit viewport */
  --sk-gallery-space-perspective: calc(
    var(--sk-gallery-space-radius, 420) * var(--sk-gallery-space-perspective-factor, 1.7)
  );
  /* live orientation — engine-written every frame */
  --sk-gallery-space-yaw: 0;
  --sk-gallery-space-pitch: 0;
  --sk-gallery-space-roll: 0;
  --sk-gallery-space-dolly: 0;
  --sk-gallery-space-dolly-base: 0;
  --sk-gallery-space-pan-x: 0;
  --sk-gallery-space-pan-y: 0;
  --sk-gallery-space-pan-z: 0;
  /* Parallax portal — excursion knob (%) and zoom; engine writes shift per tile. */
  --sk-gallery-space-portal-excursion: 0;
  --sk-gallery-space-portal-zoom: 1;
  /* Media corner rounding */
  --sk-gallery-space-media-radius: var(--sk-media-radius);
  /* Color Face rear — 20% brighter than the section background. */
  --sk-gallery-space-backface: color-mix(in srgb, var(--sk-bg) 80%, white);
  --sk-gallery-space-hover-scale: 1.08;
  --sk-gallery-space-hover-lift: -6px;
  --sk-gallery-space-magnet: 5; /* px pull toward pointer at tile edge */
  --sk-gallery-space-drag-scale-shrink: 0.25; /* uniform cloud pinch while dragging */
  --sk-gallery-space-drag-scale: 1;
}
.sk-gallery-space[data-edge-blur="subtle"] {
  --sk-gallery-space-edge-depth: 64px;
  --sk-gallery-space-edge-blur-1: 1px;
  --sk-gallery-space-edge-blur-2: 3px;
  --sk-gallery-space-edge-blur-3: 6px;
  --sk-gallery-space-edge-blur-4: 10px;
  --sk-gallery-space-edge-blur-5: 16px;
}
.sk-gallery-space[data-edge-blur="strong"] {
  --sk-gallery-space-edge-depth: 112px;
  --sk-gallery-space-edge-blur-1: 3px;
  --sk-gallery-space-edge-blur-2: 6px;
  --sk-gallery-space-edge-blur-3: 12px;
  --sk-gallery-space-edge-blur-4: 20px;
  --sk-gallery-space-edge-blur-5: 32px;
}
.sk-gallery-space[data-corners="small"] {
  --sk-gallery-space-media-radius: 0.5rem;
}
.sk-gallery-space[data-corners="large"] {
  --sk-gallery-space-media-radius: 1.25rem;
}
.sk-gallery-space[data-parallax="subtle"] {
  --sk-gallery-space-portal-excursion: 10;
  --sk-gallery-space-portal-zoom: 1.2;
}
.sk-gallery-space[data-parallax="deep"] {
  --sk-gallery-space-portal-excursion: 40;
  --sk-gallery-space-portal-zoom: 1.8;
}
.sk-gallery-space[data-distance="far"] {
  --sk-gallery-space-dolly-base: calc(var(--sk-gallery-space-radius, 420) * 0.72);
  --sk-gallery-space-perspective-factor: 1.52;
}
.sk-gallery-space[data-distance="normal"] {
  --sk-gallery-space-dolly-base: calc(var(--sk-gallery-space-radius, 420) * 0.8);
  --sk-gallery-space-perspective-factor: 1.36;
}
.sk-gallery-space[data-distance="close"] {
  --sk-gallery-space-dolly-base: calc(var(--sk-gallery-space-radius, 420) * 0.9);
  --sk-gallery-space-perspective-factor: 1.32;
}
/* Sphere / helix close: dolly by the perspective distance so the viewer lands
   at the shape origin (inside the shell). */
.sk-gallery-space[data-distance="close"][data-shape="sphere"],
.sk-gallery-space[data-distance="close"][data-shape="helix"] {
  --sk-gallery-space-perspective-factor: 0.85;
  --sk-gallery-space-dolly-base: var(--sk-gallery-space-perspective);
}
.sk-gallery-space:is([data-idle="spin-cw"], [data-idle="spin-ccw"]) {
  --sk-gallery-space-spin: 6;
}
.sk-gallery-space:is([data-idle="spin-cw"], [data-idle="spin-ccw"])[data-speed="slow"] {
  --sk-gallery-space-spin: 2.5;
}
.sk-gallery-space:is([data-idle="spin-cw"], [data-idle="spin-ccw"])[data-speed="fast"] {
  --sk-gallery-space-spin: 14;
}

/* ---- flat fallback grid (server truth) ---- */
.sk-gallery-space-cells {
  gap: var(--kit-space-3);
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-cells {
  display: none;
}

/* ---- stage ---- */
.sk-gallery-space-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  perspective: calc(var(--sk-gallery-space-perspective) * 1px);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-stage {
  min-height: 0;
  touch-action: none;
}
.sk-gallery-space[data-dragging] .sk-gallery-space-stage {
  cursor: grabbing;
}

/* Progressive edge blur — stacked backdrop-filter layers (Apple-style vignette).
   See https://www.devslovecoffee.com/blog/making-apple-progressive-blur-on-web */
.sk-gallery-space-edge-veil {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.sk-gallery-space[data-space="on"][data-edge-blur="subtle"] .sk-gallery-space-edge-veil,
.sk-gallery-space[data-space="on"][data-edge-blur="strong"] .sk-gallery-space-edge-veil {
  display: block;
}
.sk-gallery-space-edge {
  position: absolute;
  pointer-events: none;
}
.sk-gallery-space-edge-top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--sk-gallery-space-edge-depth);
}
.sk-gallery-space-edge-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sk-gallery-space-edge-depth);
}
.sk-gallery-space-edge-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sk-gallery-space-edge-depth);
}
.sk-gallery-space-edge-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--sk-gallery-space-edge-depth);
}
.sk-gallery-space-blur-step {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sk-gallery-space-edge-top .sk-gallery-space-blur-step:nth-child(1) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 25%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 25%);
}
.sk-gallery-space-edge-top .sk-gallery-space-blur-step:nth-child(2) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 45%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 45%);
}
.sk-gallery-space-edge-top .sk-gallery-space-blur-step:nth-child(3) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 65%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 65%);
}
.sk-gallery-space-edge-top .sk-gallery-space-blur-step:nth-child(4) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.sk-gallery-space-edge-top .sk-gallery-space-blur-step:nth-child(5) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
.sk-gallery-space-edge-bottom .sk-gallery-space-blur-step:nth-child(1) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 25%);
  mask-image: linear-gradient(to top, #000 0%, transparent 25%);
}
.sk-gallery-space-edge-bottom .sk-gallery-space-blur-step:nth-child(2) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%);
  mask-image: linear-gradient(to top, #000 0%, transparent 45%);
}
.sk-gallery-space-edge-bottom .sk-gallery-space-blur-step:nth-child(3) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 65%);
  mask-image: linear-gradient(to top, #000 0%, transparent 65%);
}
.sk-gallery-space-edge-bottom .sk-gallery-space-blur-step:nth-child(4) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}
.sk-gallery-space-edge-bottom .sk-gallery-space-blur-step:nth-child(5) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}
.sk-gallery-space-edge-left .sk-gallery-space-blur-step:nth-child(1) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 25%);
  mask-image: linear-gradient(to right, #000 0%, transparent 25%);
}
.sk-gallery-space-edge-left .sk-gallery-space-blur-step:nth-child(2) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 45%);
  mask-image: linear-gradient(to right, #000 0%, transparent 45%);
}
.sk-gallery-space-edge-left .sk-gallery-space-blur-step:nth-child(3) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 65%);
  mask-image: linear-gradient(to right, #000 0%, transparent 65%);
}
.sk-gallery-space-edge-left .sk-gallery-space-blur-step:nth-child(4) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 85%);
  mask-image: linear-gradient(to right, #000 0%, transparent 85%);
}
.sk-gallery-space-edge-left .sk-gallery-space-blur-step:nth-child(5) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, transparent 100%);
}
.sk-gallery-space-edge-right .sk-gallery-space-blur-step:nth-child(1) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-1));
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 25%);
  mask-image: linear-gradient(to left, #000 0%, transparent 25%);
}
.sk-gallery-space-edge-right .sk-gallery-space-blur-step:nth-child(2) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-2));
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 45%);
  mask-image: linear-gradient(to left, #000 0%, transparent 45%);
}
.sk-gallery-space-edge-right .sk-gallery-space-blur-step:nth-child(3) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-3));
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 65%);
  mask-image: linear-gradient(to left, #000 0%, transparent 65%);
}
.sk-gallery-space-edge-right .sk-gallery-space-blur-step:nth-child(4) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-4));
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
  mask-image: linear-gradient(to left, #000 0%, transparent 85%);
}
.sk-gallery-space-edge-right .sk-gallery-space-blur-step:nth-child(5) {
  -webkit-backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  backdrop-filter: blur(var(--sk-gallery-space-edge-blur-5));
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, transparent 100%);
}

/* cloud: dolly, then Rz·Rx·Ry — the ONLY forward chain */
.sk-gallery-space-cloud {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(
      calc(var(--sk-gallery-space-pan-x, 0) * 1px),
      calc(var(--sk-gallery-space-pan-y, 0) * 1px),
      calc(
        (
            var(--sk-gallery-space-dolly-base, 0) + var(--sk-gallery-space-dolly, 0) +
              var(--sk-gallery-space-pan-z, 0)
          ) *
          1px
      )
    )
    rotateZ(calc(var(--sk-gallery-space-roll, 0) * 1deg))
    rotateX(calc(var(--sk-gallery-space-pitch, 0) * 1deg))
    rotateY(calc(var(--sk-gallery-space-yaw, 0) * 1deg))
    scale3d(
      calc(var(--sk-gallery-space-fit, 1) * var(--sk-gallery-space-drag-scale, 1)),
      calc(var(--sk-gallery-space-fit, 1) * var(--sk-gallery-space-drag-scale, 1)),
      calc(var(--sk-gallery-space-fit, 1) * var(--sk-gallery-space-drag-scale, 1))
    );
}

/* ---- cells ----
   place   = translate3d(position) · R(surface orientation)  (JS, once)
   unplace = R(surface orientation)⁻¹                        (JS, once)
   Scoped to data-space="on": unscoped, absolute cells collapse the flat
   no-JS / reduced-motion grid that is the server truth. */
.sk-gallery-space[data-space="on"] .sk-gallery-space-cell {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: calc(var(--sk-gallery-space-cell, 1) * clamp(130px, 15vw, 220px));
  height: auto;
  transform-style: preserve-3d;
}

/* camera facing: undo orientation (unplace), then the cloud's rotations
   in EXACT reverse order. Nothing else folded in. */
.sk-gallery-space[data-space="on"][data-facing="camera"] .sk-gallery-space-cell {
  transform: var(--sk-gallery-space-place) var(--sk-gallery-space-unplace)
    rotateY(calc(var(--sk-gallery-space-yaw, 0) * -1deg))
    rotateX(calc(var(--sk-gallery-space-pitch, 0) * -1deg))
    rotateZ(calc(var(--sk-gallery-space-roll, 0) * -1deg));
}

/* Close inside shell (sphere / helix): ride the surface. Billboarding
   here hides the media; mirrored rears are hard-ruled in CSS below. */
.sk-gallery-space[data-space="on"][data-facing="camera"][data-inside-shell="on"]
  .sk-gallery-space-cell {
  transform: var(--sk-gallery-space-place);
}

/* surface facing: ride the invisible parametric surface */
.sk-gallery-space[data-facing="surface"] .sk-gallery-space-cell {
  transform: var(--sk-gallery-space-place);
}

/* ---- backface ---- */
/* Close: hard rule — always mirrored rear; stored backface is ignored. */
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media,
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media .sk-image {
  backface-visibility: visible;
}
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media-back {
  display: none;
}
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
}
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media .sk-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Close inside shell: camera at shape origin — inward tiles, front faces visible. */
.sk-gallery-space[data-inside-shell="on"] .sk-gallery-space-media,
.sk-gallery-space[data-inside-shell="on"] .sk-gallery-space-media-face,
.sk-gallery-space[data-inside-shell="on"] .sk-gallery-space-media .sk-image {
  backface-visibility: hidden;
}

/* Far/normal: respect author backface pick. */
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media
  .sk-image {
  backface-visibility: hidden;
}

.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media
  .sk-image {
  backface-visibility: visible;
}

/* Color Face — solid rear tinted from the band background (preserve-3d stack;
   overflow only on the face). */
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media {
  transform-style: preserve-3d;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media-back {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sk-gallery-space-backface);
  transform: rotateY(180deg) translateZ(0.1px);
  backface-visibility: hidden;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transform: translateZ(0.1px);
  backface-visibility: hidden;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media
  .sk-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}

/* Backface modes need a framed face — beat default media-face layout. */
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media
  .sk-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- aspect (section band + per-item overrides) ----
   Ratio token from base.css's ASPECT TOKEN TABLE — same contract as
   gallery-wall. Per-item `auto` inherits the section ratio. */
.sk-gallery-space[data-aspect] {
  --sk-gallery-space-aspect: var(--sk-aspect);
}
.sk-gallery-space .sk-gallery-space-media {
  aspect-ratio: var(--sk-gallery-space-aspect, 3 / 4);
}
.sk-gallery-space-media[data-aspect]:where(:not([data-aspect="auto"], [data-aspect=""])) {
  aspect-ratio: var(--sk-aspect);
}

/* ---- media ---- */
.sk-gallery-space-media {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  border-radius: var(--sk-gallery-space-media-radius);
  --sk-gallery-space-mag-x: 0;
  --sk-gallery-space-mag-y: 0;
  --sk-gallery-space-hover-scale-active: 1;
  --sk-gallery-space-hover-lift-active: 0px;
}
.sk-gallery-space:not([data-space="on"]) .sk-gallery-space-media {
  transition: transform 0.9s var(--sk-ease-out);
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-media {
  transform: translate3d(
      calc(var(--sk-gallery-space-mag-x, 0) * 1px),
      calc(var(--sk-gallery-space-hover-lift-active, 0px) + var(--sk-gallery-space-mag-y, 0) * 1px),
      0
    )
    scale(var(--sk-gallery-space-hover-scale-active, 1));
}
.sk-gallery-space-media-back {
  display: none;
}
.sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Uniform crop — cover-fill inside the frame (beat base.css height:auto). */
.sk-gallery-space-media .sk-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-gallery-space[data-space="on"] .sk-gallery-space-cell {
  -webkit-user-drag: none;
  user-select: none;
}

/* Shared image voice — aspect arms above own height/object-fit. */
.sk-gallery-space-media .sk-image {
  object-position: calc(var(--sk-focal-x, 0.5) * 100%) calc(var(--sk-focal-y, 0.5) * 100%);
  filter: var(--sk-image-filter, none);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Hover settle on the media frame (base.css §8 targets the atom — scale the
   frame instead so parallax portal shifts on .sk-image stay independent). */
.sk-gallery-space a .sk-image {
  transition: none;
}
.sk-gallery-space a:hover .sk-image,
.sk-gallery-space a:focus-visible .sk-image {
  transform: none;
}
.sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cell:hover .sk-gallery-space-media,
.sk-gallery-space:not([data-space="on"])
  .sk-gallery-space-cell:focus-visible
  .sk-gallery-space-media {
  transform: translateY(var(--sk-gallery-space-hover-lift))
    scale(var(--sk-gallery-space-hover-scale));
}
.sk-gallery-space:not([data-space="on"])[data-dragging]
  .sk-gallery-space-cell:hover
  .sk-gallery-space-media,
.sk-gallery-space:not([data-space="on"])[data-dragging]
  .sk-gallery-space-cell:focus-visible
  .sk-gallery-space-media {
  transform: none;
}

/* Flat grid fallback */
.sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cells {
  align-items: center;
}

/* Parallax portal — skip when color backface is live (image transform breaks
   the rear-face stack). Close always uses mirrored mode, so parallax stays on. */
.sk-gallery-space[data-space="on"]:not([data-parallax="none"]):not([data-distance="close"]):not(
    [data-backface="color"]
  )
  .sk-gallery-space-media
  .sk-image {
  will-change: transform;
  transform: translate3d(var(--sk-gallery-space-portal-shift, 0%), 0, 0)
    scale(var(--sk-gallery-space-portal-zoom, 1));
}

/* ---- breakpoint rungs (kit rungs only; no track counts) ---- */
@media (max-width: 900px) {
  .sk-gallery-space {
    --sk-gallery-space-cell: 0.85;
    --sk-gallery-space-perspective-factor: 1.5;
  }
}
@media (max-width: 640px) {
  .sk-gallery-space {
    --sk-gallery-space-cell: 0.7;
  }
}
@media (max-width: 560px) {
  .sk-gallery-space {
    --sk-gallery-space-cell: 0.6;
  }
}

/* ---- reduced-motion belt (engine also tears down live) ---- */
@media (prefers-reduced-motion: reduce) {
  .sk-gallery-space:not([data-space="on"]) .sk-gallery-space-media {
    transition: none;
  }
  .sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cell:hover .sk-gallery-space-media,
  .sk-gallery-space:not([data-space="on"])
    .sk-gallery-space-cell:focus-visible
    .sk-gallery-space-media {
    transform: none;
  }
  .sk-gallery-space[data-space="on"] .sk-gallery-space-edge-veil {
    display: none;
  }
  .sk-gallery-space[data-space="on"] .sk-gallery-space-cells {
    display: grid;
  }
  .sk-gallery-space[data-space="on"] .sk-gallery-space-stage {
    display: none;
  }
}