/* «Так выглядит Surprise» — лента живых кадров */
@property --g-dot{syntax:"<length>";inherits:false;initial-value:0px}
.gallery-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.gallery-title{font-size:var(--t-h2);line-height:1.04}
.gallery-lead{font-size:var(--t-lead);line-height:1.4;color:var(--ink-2);max-width:32ch}
.gallery-track{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--m),env(safe-area-inset-right,0px)) 8px max(var(--m),env(safe-area-inset-left,0px));
  scroll-padding-left:max(var(--m),env(safe-area-inset-left,0px));cursor:grab;outline:none
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track.is-drag{cursor:grabbing;scroll-snap-type:none}
.gallery-card{--gh:clamp(320px,34vw,480px);flex:none;width:calc(var(--gh) * var(--ar,.75));margin:0;scroll-snap-align:start;display:grid;gap:14px;align-content:start} /* подпись прижата к кадру, даже если соседний кадр выше */
.gallery-media{position:relative;height:var(--gh);border-radius:var(--r-card-l);overflow:hidden;background:var(--bg-3)}
.gallery-v{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-slow) var(--ease)}
.gallery-card:hover .gallery-v{transform:scale(1.03)}
/* появление «по диодам»: сетка точек растёт до сплошного кадра */
.js .gallery-card .gallery-media{
  -webkit-mask-image:radial-gradient(circle,#000 var(--g-dot),transparent calc(var(--g-dot) + .5px));
  mask-image:radial-gradient(circle,#000 var(--g-dot),transparent calc(var(--g-dot) + .5px));
  -webkit-mask-size:10px 10px;mask-size:10px 10px;
  transition:--g-dot 1100ms var(--ease) calc(var(--i,0) * 70ms)
}
.js .gallery-card.in .gallery-media{--g-dot:8px}
.js .gallery-card.is-done .gallery-media{-webkit-mask-image:none;mask-image:none}
.gallery-card figcaption{display:grid;gap:2px}
.gallery-cat{font-family:var(--f-dot);font-size:13px;letter-spacing:.06em;color:var(--ink-3)}
.gallery-name{font-size:var(--t-small);line-height:1.35;color:var(--ink)}
.gallery-foot{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.gallery-hint{font-size:var(--t-small);color:var(--ink-3)}
.gallery-ctrl{display:flex;gap:8px}
.gallery-arrow{width:44px;min-height:44px;height:44px;padding:0;position:relative;background:var(--bg-3)}
.gallery-arrow::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.6px solid var(--ink);border-left:1.6px solid var(--ink);transform:translate(-30%,-50%) rotate(-45deg)}
.gallery-arrow[data-dir="1"]::before{transform:translate(-70%,-50%) rotate(135deg)}
@media (max-width:860px){
  .gallery-head{grid-template-columns:minmax(0,1fr)}
  .gallery-card{--gh:min(380px,calc(88vw / var(--ar,.75)))}
  .gallery-ctrl{display:none}
}
@media (hover:none){.gallery-ctrl{display:none}}
@media (prefers-reduced-motion:reduce){
  .js .gallery-card .gallery-media{-webkit-mask-image:none;mask-image:none;transition:none}
  .gallery-v{transition:none}
}