/* ============================================================
   JET ATLAS — ht-gallery (dual infinite marquee)
   Ported 1:1 from home-two.css. Row speeds are CSS-var driven so the
   widget can expose them; each set is duplicated in markup for the loop.
   ============================================================ */
.ht-gal { background: var(--ht-paper); padding: clamp(72px,11vw,140px) 0; overflow: hidden; }
.ht-gal__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-bottom: 44px; }
.ht-gal__rows { display: flex; flex-direction: column; gap: clamp(14px,1.6vw,22px); }
.ht-gal__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ht-gal__set { display: flex; gap: clamp(14px,1.6vw,22px); width: max-content; }
.ht-gal__row--rtl .ht-gal__set { animation: ht-marq-l var(--ht-gal-rtl, 42s) linear infinite; }
.ht-gal__row--ltr .ht-gal__set { animation: ht-marq-r var(--ht-gal-ltr, 50s) linear infinite; }
@keyframes ht-marq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ht-marq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
[data-ht-gal]:hover .ht-gal__set { animation-play-state: paused; }
.ht-gal__cell { position: relative; flex: 0 0 clamp(280px,32vw,440px); aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; border: 1px solid transparent; box-shadow: 0 20px 40px -30px rgba(10,10,10,0.35); }
.ht-gal__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ht-ease); }
.ht-gal__cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.6), rgba(10,10,10,0) 55%); opacity: 0; transition: opacity .4s var(--ht-ease); }
.ht-gal__cell figcaption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 16px 18px; font-family: var(--ht-serif); font-style: italic; font-size: 20px; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ht-ease), transform .4s var(--ht-ease); }
.ht-gal__cell:hover { border-color: var(--ht-lime); }
.ht-gal__cell:hover img { transform: scale(1.06); }
.ht-gal__cell:hover::after { opacity: 1; }
.ht-gal__cell:hover figcaption { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .ht-gal__head { align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-gal__row--rtl .ht-gal__set, .ht-gal__row--ltr .ht-gal__set { animation: none; }
}