/* The material and artwork are separate layers. Theme changes reveal only
   the material; live media, dimensions and captions remain in place. */
@property --project-edge-focus {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
/* The gallery and About use identical alpha masks, so their feathered
   edges share one geometry and never develop a hard outer fringe. */
:root {
  --media-edge-rest: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22edge%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2216%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%221.01%22%20intercept%3D%22-.01%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22920%22%20height%3D%22920%22%20rx%3D%2248%22%20fill%3D%22white%22%20filter%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
  --media-edge-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22edge%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%226%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%221.01%22%20intercept%3D%22-.01%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22920%22%20height%3D%22920%22%20rx%3D%2248%22%20fill%3D%22white%22%20filter%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
}
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b .home-project-visual {
  --project-edge-focus: 0;
  --project-edge-solid: 0;
  --project-edge-rest: var(--media-edge-rest);
  --project-edge-hover: var(--media-edge-hover);
  position: relative;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
  border-radius: var(--nd-radius-preview-canvas);
  transform: scale(1);
  opacity: 1;
  transition: transform 450ms cubic-bezier(.175,.885,.32,1.1), --project-edge-focus 450ms cubic-bezier(.175,.885,.32,1.1);
}
html.work-grid.home-gallery .cms-project-card .home-project-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--project-glass, rgb(220 225 232 / .66));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 500ms cubic-bezier(.42,0,.58,1);
}
html.work-grid.home-gallery .cms-project-card .project-hover-plane {
  position: relative;
  z-index: 1;
}
/* The alpha transfer in each SVG reaches zero before its outer boundary, so
   the soft edge cannot leave a faint rectangular line in the page texture. */
html.work-grid.home-gallery .cms-project-card .home-project-visual::before,
html.work-grid.home-gallery .cms-project-card [data-project-slug="springbom"] .home-project-visual {
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / var(--project-edge-solid)) 0 0), var(--project-edge-rest), var(--project-edge-hover), linear-gradient(rgb(0 0 0 / var(--project-edge-focus)) 0 0);
  mask-image: linear-gradient(rgb(0 0 0 / var(--project-edge-solid)) 0 0), var(--project-edge-rest), var(--project-edge-hover), linear-gradient(rgb(0 0 0 / var(--project-edge-focus)) 0 0);
  -webkit-mask-composite: source-over, source-over, source-in, source-over;
  mask-composite: add, add, intersect, add;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
html.work-grid.home-gallery[data-theme="dark"] .cms-project-card .link-block-image-project-b .home-project-visual {
  --project-edge-solid: 1;
}
/* Full-bleed photography retains its own narrow feather. It has no separate
   painted backdrop, and its recording never fades with the theme. */
html.work-grid.home-gallery .cms-project-card [data-project-slug="springbom"] .home-project-visual {
  --project-edge-rest: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22edge%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%221.01%22%20intercept%3D%22-.01%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22920%22%20height%3D%22920%22%20rx%3D%2248%22%20fill%3D%22white%22%20filter%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
  --project-edge-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22edge%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%221.01%22%20intercept%3D%22-.01%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22920%22%20height%3D%22920%22%20rx%3D%2248%22%20fill%3D%22white%22%20filter%3D%22url%28%23edge%29%22%2F%3E%3C%2Fsvg%3E");
}
html.work-grid.home-gallery [data-project-slug="springbom"] .home-project-visual::before { content: none; }
@media (min-width: 768px) {
  html.work-grid.home-gallery .cms-project-card .project-hover-plane > * { scale: .96; }
}
html.work-grid.home-gallery .cms-project-card [data-project-slug="springbom"] .project-hover-plane > * { scale: 1; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  html.work-grid.home-gallery .cms-project-card .link-block-image-project-b:is(:hover, :focus-visible) .home-project-visual {
    --project-edge-focus: 1;
    transform: scale(1.04);
  }
  html.work-grid.home-gallery[data-theme="dark"] .cms-project-card .link-block-image-project-b:is(:hover, :focus-visible) .home-project-visual { transform: scale(1); }
  html.work-grid.home-gallery[data-theme="dark"] .cms-project-card .link-block-image-project-b:is(:hover, :focus-visible) .project-hover-plane > * { scale: 1; }
}
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  html.work-grid.home-gallery .cms-project-card .project-hover-plane > * { scale: 1; }
}
/* This is the sole exception to the page palette transition guard. Only the
   independent glass backdrop disappears and returns; artwork stays visible. */
html.work-grid.home-gallery[data-gallery-theme-phase="in"] .cms-project-card .home-project-visual::before {
  opacity: 1;
  transition: opacity 500ms cubic-bezier(.42,0,.58,1) !important;
}
html.work-grid.home-gallery[data-gallery-theme-phase="out"] .cms-project-card .home-project-visual::before {
  opacity: 0;
  transition: none !important;
}
html.work-grid.home-gallery .cms-project-card .cms-project-caption {
  box-sizing: border-box;
  padding-inline: 4%;
  align-items: center;
  text-align: center;
}
html.work-grid.home-gallery .cms-project-caption .heading-project-b { text-align: center; }
/* Match the admin browser's 12% side margins. The player uses this same fill
   fraction in its layout calculation so its iframe remains correctly scaled. */
html.work-grid.home-gallery .project-hover-plane .pilates-video-cover { padding: 12%; }
@media (prefers-reduced-motion: reduce) {
  html.work-grid.home-gallery,
  html.work-grid.home-gallery body,
  html.work-grid.home-gallery .cms-project-card .home-project-visual,
  html.work-grid.home-gallery .cms-project-card .home-project-visual::before,
  html.work-grid.home-gallery .cms-project-card .cms-project-caption .heading-project-b {
    transition: none !important;
  }
  html.work-grid.home-gallery .cms-project-card .home-project-visual { transform: none !important; }
}

/* Suppress the older glass surface underneath the independent backdrop. */
html.work-grid.home-gallery .cms-project-card .link-block-image-project-b[data-project-slug] .home-project-visual {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  clip-path: none;
}

/* Share browser rounding with its shadow wrapper. The shell's variables are
   defined below this wrapper and cannot otherwise resolve on the ancestor. */
html.work-grid.home-gallery .swiftly-admin-interface-cover .interface-cover-screen {
  border-radius: calc(var(--nd-radius-preview-viewport) + clamp(2px, .5cqw, 4px));
}

/* In light mode the material's alpha mask is the only outer edge. A second
   rounded overflow clip creates a one-pixel compositor fringe during scale. */
html.work-grid.home-gallery:not([data-theme="dark"]) .cms-project-card .link-block-image-project-b[data-project-slug] .home-project-visual {
  border-radius: 0;
  overflow: visible;
}
html.work-grid.home-gallery .cms-project-card .home-project-visual::before {
  border-radius: var(--nd-radius-preview-canvas);
}

html.work-grid.home-gallery:not([data-theme="dark"]) .cms-project-card .home-project-visual::before { border-radius: 0; }
