/* Scroll-driven product film (assets/js/story-film.js). First built for the Prime page. */

.film-story { position: relative; height: 700vh; } /* real height is set by the scene script */
.film-story .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film-story .film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #000; max-width: none; }
.film-story #film-rev { visibility: hidden; }
.film-story #film-xfade { opacity: 0; pointer-events: none; background: transparent; }
.film-story .rev-on #film-rev { visibility: visible; }
.film-story .rev-on #film { visibility: hidden; }
.film-story .beat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 24px max(13vh, 96px); opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.5); }
.film-story .beat.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.film-story .beat .kicker { color: var(--accent-text); font-weight: 600; font-size: 15px; letter-spacing: .02em; margin-bottom: 6px; }
.film-story .beat h1, .film-story .beat h2 { font-size: clamp(34px, 8vw, 72px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 14px; font-weight: 700; }
.film-story .beat p { font-size: clamp(17px, 2.2vw, 21px); color: rgba(245,245,247,.86); margin: 0; max-width: 520px; }
.film-story .beat p b { color: var(--text); font-weight: 600; }
.film-story .beat ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; max-width: 520px; }
.film-story .beat li { border-left: 2px solid var(--accent); padding-left: 14px; color: rgba(245,245,247,.86); font-size: 16px; }
.film-story .beat li b { display: block; color: var(--text); font-size: 18px; }
.film-story .beat .cta { margin-top: 22px; }
.film-story .stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events: none; }
.film-story .scrollhint { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: opacity .4s; }
.film-story .scrollhint::after { content: ""; display: block; width: 1px; height: 28px; margin: 8px auto 0; background: linear-gradient(var(--muted), transparent); animation: film-hint 1.8s ease-in-out infinite; }
@keyframes film-hint { 0%,100% { transform: translateY(0); opacity: .3 } 50% { transform: translateY(8px); opacity: 1 } }
.film-story .progress { position: absolute; z-index: 3; top: 52px; left: 0; height: 2px; background: var(--accent); width: 0; transition: width .4s ease; }
.film-story .dots { position: absolute; z-index: 3; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.film-story .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; transition: background .3s, transform .3s; }
.film-story .dots button.on { background: var(--accent); transform: scale(1.4); }

/* desktop: film is a portrait column on the right, copy on the left */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
	.film-story .stage::after { display: none; }
	.film-story .beat { text-shadow: none; }
	.film-story .beat p, .film-story .beat li { color: var(--muted); }
	.film-story .film { left: auto; right: 5vw; width: 56.25vh; }
	.film-story .beat { top: 0; bottom: 0; right: auto; width: calc(100% - 56.25vh - 8vw); display: flex; flex-direction: column; justify-content: center; padding: 0 4vw 0 8vw; }
	.film-story .beat h1, .film-story .beat h2 { font-size: clamp(40px, 4.6vw, 76px); }
}