.has-motion { position: relative; }
.motion-layer { transition: opacity 1.35s ease, transform 10s linear !important; opacity: 0 !important; transform: scale(1.015); pointer-events: none; }
.motion-layer.is-active { opacity: 1 !important; transform: scale(1.045); }
.page-hero .motion-layer.is-active { opacity: .7 !important; }

/* Photography first: a hairline position indicator, no arrow toolbar or counter. */
.gallery-controls { position: absolute; z-index: 4; inset: auto 22px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: white; pointer-events: none; }
.gallery-progress { display: flex; align-items: center; gap: 6px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); }
.gallery-progress > span { position: relative; width: 14px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.4); transition: width .6s ease, background .6s ease; }
.gallery-progress > .is-current { width: 32px; background: rgba(255,255,255,.95); }
.gallery-controls button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: inherit; background: rgba(8,25,27,.3); backdrop-filter: blur(5px); cursor: pointer; pointer-events: auto; opacity: .78; transition: background .2s ease, opacity .2s ease, border-color .2s ease; }
.gallery-controls button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gallery-controls button .gallery-play-icon { display: none; }
.gallery-controls button[data-playing="false"] .gallery-pause-icon { display: none; }
.gallery-controls button[data-playing="false"] .gallery-play-icon { display: block; }
.has-motion:hover .gallery-controls button, .has-motion:focus-within .gallery-controls button { opacity: 1; }
.gallery-controls button:hover { background: rgba(8,25,27,.6); border-color: rgba(255,255,255,.55); }
.gallery-controls button[hidden] { display: none; }
.gallery-controls button:focus-visible { outline: 2px solid white; outline-offset: 3px; opacity: 1; }
[data-gallery-focus]:focus-visible { outline: 2px solid var(--jade-dark); outline-offset: 4px; }
.hero [data-gallery-focus]:focus-visible, .page-hero[data-gallery-focus]:focus-visible, .journey-hero[data-gallery-focus]:focus-visible { outline-offset: -5px; outline-color: white; }
.gallery-caption { position: absolute; z-index: 4; left: 22px; bottom: 75px; max-width: min(460px,calc(100% - 44px)); padding: 6px 10px; border-radius: 6px; background: rgba(7,22,23,.7); color: white; font-size: .75rem; line-height: 1.5; pointer-events: none; }
.gallery-caption[hidden] { display: none; }
.product-media .gallery-caption { left: 12px; top: 12px; bottom: auto; max-width: calc(100% - 24px); padding: 5px 8px; }
.product-media:has(.product-rank) .gallery-caption { top: 54px; }
.hero > .gallery-controls { left: auto; top: 18px; bottom: auto; }
.hero.has-motion .hero-media { overflow: hidden; }
.hero.has-motion .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-card { display: flex; flex-direction: column; }
.product-media { flex-shrink: 0; }
.product-image-link { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y pinch-zoom; }
.product-image-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-card > .product-content-link { flex: 1; height: auto; }
.product-card .gallery-controls { inset: auto 12px 8px; }
.product-card .motion-layer { transition: opacity 1.15s ease !important; transform: none !important; }
.product-rank { pointer-events: none; z-index: 3; }
.journey-hero.has-motion, .page-hero.has-motion { padding-bottom: 102px; }
@media (max-width:580px) {
  .gallery-controls { inset: auto 16px 12px; }
  .hero > .gallery-controls { top: 16px; right: 16px; left: auto; }
  .hero.has-motion .hero-inner { padding-top: 100px; }
  .gallery-caption { left: 16px; max-width: calc(100% - 32px); }
}
@media (prefers-reduced-motion:reduce) {
  .motion-layer,.motion-layer.is-active { transform: none !important; transition: none !important; }
  .gallery-progress > span,.gallery-controls button { transition: none; }
}