/* ====== TUNABLES ====== */
:root{
  --ssv-duration: 1.15s;
  --ssv-ease-in: cubic-bezier(.55,.085,.68,.53);
  --reveal-total: 2000ms;
}
/* ====== GALLERY LAYOUT ====== */
.ssv-gallery{ width:100%; max-width:900px; margin:0 auto; font-family:"Tinos",serif; }
.ssv-row{ display:flex; justify-content:center; gap:20px; margin:22px 0; }
.ssv-item{ position:relative; overflow:hidden; background:#000; cursor:pointer; }
.ssv-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.ssv-row.r1 .ssv-item.large{  width:868.66px; height:490.78px; }
.ssv-row.r2 .ssv-item.left{   width:650px;    height:379.34px; }
.ssv-row.r2 .ssv-item.right{  width:433.32px; height:234.88px; }
.ssv-row.r3 .ssv-item.mid{    width:649.99px; height:379.46px; }
.ssv-row.r4 .ssv-item.left{   width:433.31px; height:244.76px; }
.ssv-row.r4 .ssv-item.right{  width:650px;    height:379.34px; }
.ssv-row.r5 .ssv-item.mid{    width:650px;    height:406.25px; }
.ssv-row.r6 .ssv-item.left{   width:649.98px; height:396.14px; }
.ssv-row.r6 .ssv-item.right{  width:433.32px; height:264.09px; }
.ssv-row.r7 .ssv-item.large{  width:866.65px; height:528.19px; }
/* ====== HOVER TEXT ====== */
.ssv-hover{ position:absolute; left:50%; transform:translate(-50%, -50%); top:50%; color:#fff; text-align:center; opacity:0; transition:none; pointer-events:none; will-change: top; width:90%; max-width:780px; }
.ssv-hover h3, .ssv-hover p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssv-item:hover .ssv-hover{ opacity:1; }
.ssv-hover h3{ margin:0; font-weight:700; font-size:clamp(14px,1.6vw,20px); line-height:1.2; }
.ssv-hover p{  margin:.35rem 0 0 0; opacity:.9; font-size:clamp(12px,1.2vw,16px); line-height:1.3; }
.ssv-row.r2 .ssv-item.right .ssv-hover h3{ font-size:clamp(13px,1.4vw,18px); }
.ssv-row.r2 .ssv-item.right .ssv-hover p{  font-size:clamp(11px,1.1vw,15px); }
/* ====== LIGHTBOX — CLIP-PATH SWEEP ====== */
#ssv-lightbox{ position:fixed; inset:0; z-index:9999; background:#000; visibility:hidden; -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); transform: translateY(0); transition: -webkit-clip-path var(--ssv-duration) var(--ssv-ease-in), clip-path var(--ssv-duration) var(--ssv-ease-in), visibility 0s var(--ssv-duration); will-change: clip-path; }
#ssv-lightbox.is-open{ visibility:visible; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: -webkit-clip-path var(--ssv-duration) var(--ssv-ease-in), clip-path var(--ssv-duration) var(--ssv-ease-in), visibility 0s 0s; }
#ssv-lightbox.is-closing{ visibility:visible; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: -webkit-clip-path var(--ssv-duration) var(--ssv-ease-in), clip-path var(--ssv-duration) var(--ssv-ease-in), visibility 0s var(--ssv-duration); }
#ssv-lightbox .ssv-player{ position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:100vw; max-width:100vw; max-height:88vh; display:flex; align-items:center; justify-content:center; z-index:10002; }
#ssv-lightbox video{ width:100vw; max-width:100vw; height:auto; max-height:88vh; object-fit:contain; background:#000; outline:0; }
.ssv-controlbar{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:18px; z-index:10005; color:#fff; user-select:none; width:min(78vw, 980px); }
.ssv-progress{ flex:1 1 auto; height:4px; background:rgba(255,255,255,.25); border-radius:3px; position:relative; cursor:pointer; }
.ssv-progress .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:rgba(255,255,255,.9); border-radius:3px; }
.ssv-toggle{ font-size:15px; letter-spacing:.18em; cursor:pointer; opacity:.95; }
.ssv-toggle:hover{ opacity:1; }
#ssv-backFollow{ position:fixed; top:0; left:0; transform:translate(22px,-14px); pointer-events:none; color:#fff; letter-spacing:.18em; font-size:14px; opacity:.95; display:none; z-index:10006; }
#ssv-lightbox.is-open + #ssv-backFollow{ display:block; }
/* ====== SCROLL REVEAL ====== */
.ssv-item.ssv-reveal{ opacity: 0; transform: translateY(24px) translateZ(0); will-change: opacity, transform; backface-visibility: hidden; transition: opacity var(--reveal-total) cubic-bezier(.22,.72,.17,1) var(--reveal-delay, 0ms), transform var(--reveal-total) cubic-bezier(.22,.72,.17,1) var(--reveal-delay, 0ms); }
.ssv-item.ssv-reveal.in{ opacity: 1; transform: translateY(0) translateZ(0); }
@media (prefers-reduced-motion: reduce){ .ssv-item.ssv-reveal{ opacity:1; transform:none; transition:none; } }
@media (max-width:980px){ .ssv-gallery{ transform:scale(.9); transform-origin:top center; } }
@media (max-width:820px){ .ssv-gallery{ transform:scale(.8); } }
@media (max-width:700px){ .ssv-gallery{ transform:scale(.72); } }
/* ====== MOBILE: one video per row ====== */
@media (max-width: 767px){
  .ssv-gallery{ width:100%; max-width:100%; margin:0 auto; transform:none !important; }
  .ssv-row{ display:block !important; margin:18px 0 !important; }
  .ssv-row.two{ display:block !important; }
  .ssv-item,
  .ssv-row.r1 .ssv-item.large, .ssv-row.r2 .ssv-item.left, .ssv-row.r2 .ssv-item.right,
  .ssv-row.r3 .ssv-item.mid, .ssv-row.r4 .ssv-item.left, .ssv-row.r4 .ssv-item.right,
  .ssv-row.r5 .ssv-item.mid, .ssv-row.r6 .ssv-item.left, .ssv-row.r6 .ssv-item.right,
  .ssv-row.r7 .ssv-item.large{ width:100% !important; height:auto !important; aspect-ratio:16/9; margin:0 0 18px 0 !important; }
  .ssv-item img{ width:100%; height:100%; object-fit:cover; }
  .ssv-hover{ width:88%; max-width:88%; }
  .ssv-hover h3{ font-size:18px !important; }
  .ssv-hover p{ font-size:13px !important; }
}