.camera-story { background: #000; color: #fff; position: relative; margin-block: 48px 0; }
.camera-story.is-scroll-ready { height: 300vh; height: 300svh; }
.camera-stage { height: min(760px, 85vh); height: min(760px, 85svh); min-height: 420px; position: relative; overflow: hidden; background: #000; }
.is-scroll-ready .camera-stage { position: sticky; top: var(--camera-top, 90px); height: calc(100vh - var(--camera-top, 90px)); height: calc(100svh - var(--camera-top, 90px)); }
.camera-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera-heading { position: absolute; top: 8%; inset-inline: 6%; text-align: center; pointer-events: none; text-shadow: 0 2px 20px #000; opacity: var(--camera-title-opacity, 1); }
.camera-heading p { font-size: 12px; letter-spacing: .15em; margin: 0 0 12px; }
html .storefront .camera-heading h2 { color: #fff !important; font-size: clamp(36px, 6vw, 84px); line-height: 1.1; letter-spacing: -.04em; margin: 0; }
.camera-caption { position: absolute; bottom: 100px; inset-inline: 6%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; }
.camera-caption > span, .camera-caption a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 2px 12px #000; }
.camera-caption a { padding: 10px 16px; border: 1px solid #ffffff55; border-radius: 99px; background: #0007; }
.camera-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #ffffff18; }
.camera-progress span { display: block; height: 100%; background: #f5dc35; transform: scaleX(var(--camera-progress, 0)); transform-origin: left; }
.camera-play { position: absolute; bottom: 155px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 99px; border: 1px solid #ffffff66; background: #000a; color: #fff; align-items: center; gap: 8px; cursor: pointer; }
.camera-play:not([hidden]) { display: inline-flex; }
.camera-story:not(.is-scroll-ready) .camera-caption > span { display: none; }
@media (max-width: 700px) {
 .camera-stage { min-height: 0; }
 .camera-video { object-fit: contain; }
 .camera-caption { inset-inline: 5%; font-size: 11px; bottom: 90px; }
 .camera-heading { top: 10%; }
}
 .camera-status { position: absolute; bottom: 155px; inset-inline: 10%; text-align: center; color: #fff; font-size: 12px; margin: 0; text-shadow: 0 2px 12px #000; }
.camera-status[hidden], .camera-play[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .camera-story { height: auto; } }