/* Decorative GridMotion wall, isolated from the foreground video carousel. */
#main[data-sf-design] .shortform-showcase{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);max-width:none;
  padding:clamp(32px,4vw,64px) 0 clamp(48px,5vw,88px);
}
#main[data-sf-design] .shortform-showcase-heading{
  grid-area:1/1;align-self:start;justify-self:start;display:block;
  position:relative;z-index:3;width:min(100%,820px);max-width:none;margin:0;padding-inline:0;
  pointer-events:none;text-shadow:0 2px 18px #07120ef2,0 8px 32px #07120ed9;
}
#main[data-sf-design] .shortform-showcase-heading h2{
  margin:0;font-family:var(--font-latin),var(--font-sans);font-size:clamp(24px,2.65vw,48px);
  font-weight:600;line-height:1.08;letter-spacing:-.055em;word-break:normal;overflow-wrap:anywhere;
}
#main[data-sf-design] .shortform-showcase-heading h2:not([lang=en]){
  max-width:18em;font-family:var(--font-sans);line-height:1.3;word-break:keep-all;
}
#main[data-sf-design] .shortform-reels{
  grid-area:1/1;align-self:center;justify-self:center;position:relative;z-index:1;
  width:min(930px,100%);margin:clamp(48px,4vw,72px) 0;
}
#main[data-sf-design] .shortform-showcase-note{
  grid-area:1/1;align-self:end;justify-self:end;position:relative;z-index:3;
  max-width:100%;margin:0;padding-inline:0;pointer-events:none;
  color:var(--text);font-size:clamp(18px,1.7vw,28px);font-weight:600;line-height:1.5;letter-spacing:-.04em;
  text-align:right;word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 2px 20px #07120ef2,0 8px 32px #07120ed9;
}
.shortform-copy-accent{color:var(--mint)}
.shortform-grid-motion{
  --gm-gap:16px;--gm-radius:14px;--gm-dim:.45;
  position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;
  pointer-events:none;user-select:none;opacity:.62;
  /* A soft fallback also covers the first layout frame. JS adds the source's smoother feather stops. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.shortform-grid-motion::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,#07100c40,transparent 65%);
}
.shortform-grid-motion .grid-motion__plane{position:absolute;top:50%;left:50%;opacity:0;transition:opacity .6s ease}
.shortform-grid-motion .grid-motion__row{position:absolute;left:0;display:flex;gap:var(--gm-gap)}
.shortform-grid-motion[data-running] .grid-motion__row{will-change:transform}
.shortform-grid-motion .grid-motion__tile{
  position:relative;flex:none;width:var(--gm-tile-w);height:var(--gm-tile-h);
  overflow:hidden;border-radius:var(--gm-radius);background:#17231e;
  opacity:calc(1 - var(--gm-dim));
}
.shortform-grid-motion .grid-motion__tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px #d5f5e614;pointer-events:none;
}
.shortform-grid-motion .grid-motion__tile img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* Soft focus and color treatment are baked into the small WebP thumbnails. */
  pointer-events:none;user-select:none;
}
@media(max-width:767px){
  #main[data-sf-design] .shortform-showcase{padding:28px 0 44px}
  #main[data-sf-design] .shortform-showcase-heading{padding-inline:0}
  #main[data-sf-design] .shortform-showcase-heading h2{font-size:clamp(20px,5vw,32px);letter-spacing:-.045em}
  #main[data-sf-design] .shortform-reels{margin-block:40px 22px}
  #main[data-sf-design] .shortform-showcase-note{margin:0;padding-inline:0;font-size:clamp(15px,3.8vw,20px)}
  .shortform-grid-motion{opacity:.52;--gm-radius:10px}
}
@media(prefers-reduced-motion:reduce){
  .shortform-grid-motion .grid-motion__plane{opacity:1;transition:none}
  .shortform-grid-motion .grid-motion__row{will-change:auto}
}