/* ==========================================================================
   Hero film — the product film as the hero (pairs with assets/js/hero-film.js)
   Stage: the film tilts back like a lid and swings flat as you scroll (no pinning).
   Moments: small cards float out past the frame at each payoff, synced to the film.
   Chapters: a clickable row under the film that tracks and jumps through the tour.
   ========================================================================== */
.hero-product { position: relative; }
.hf-stage { position: relative; transform-style: preserve-3d; transform-origin: 50% 0%; will-change: transform; }
.hero-film { background: #f5f8f9; box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 40px 100px -40px rgba(15,23,42,.45), 0 80px 160px -80px rgba(20,184,166,.35); }
.hero-film__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* living glow behind the film — its colour follows the chapter (set by JS as --hf-glow) */
.hf-glow { position: absolute; left: 6%; right: 6%; top: 8%; bottom: -6%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse closest-side, var(--hf-glow, rgba(45,212,191,.42)), transparent 72%); filter: blur(40px); opacity: .9;
  transition: background 1.2s ease; }

/* moments */
.hf-moments { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.hf-moment { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; min-width: 240px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.06); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 50px -18px rgba(15,23,42,.35);
  opacity: 0; will-change: transform, opacity; }
.hf-moment--l { left: -56px; }
.hf-moment--r { right: -56px; }
.hf-moment:nth-child(1) { top: 18%; } .hf-moment:nth-child(2) { top: 30%; } .hf-moment:nth-child(3) { top: 52%; }
.hf-moment:nth-child(4) { top: 24%; } .hf-moment:nth-child(5) { top: 44%; } .hf-moment:nth-child(6) { top: 58%; }
.hf-moment__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #e6fbf8; }
.hf-moment__ic::before { content: ""; width: 18px; height: 18px; background: #0f9f8f;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hf-moment__t b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #09090b; }
.hf-moment__t em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; color: #6f6f68; white-space: nowrap; }
.hf-ic--warn .hf-moment__ic { background: #fff4e5; } .hf-ic--warn .hf-moment__ic::before { background: #ea580c; }
.hf-ic--save .hf-moment__ic { background: #ecfdf3; } .hf-ic--save .hf-moment__ic::before { background: #16a34a; }
.hf-ic--warn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/%3E%3C/svg%3E"); }
.hf-ic--save { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.hf-ic--move { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 3l4 4-4 4V8H4V6h12V3zM8 13v3h12v2H8v3l-4-4 4-4z'/%3E%3C/svg%3E"); }
.hf-ic--gauge { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a10 10 0 0 0-10 10h2a8 8 0 0 1 16 0h2A10 10 0 0 0 12 4zm4.2 4.4L11 13.6a2 2 0 1 0 1.4 1.4l5.2-5.2-1.4-1.4z'/%3E%3C/svg%3E"); }
.hf-ic--rule { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E"); }
.hf-ic--spark { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.6L21 11l-6.8 2.4L12 20l-2.2-6.6L3 11l6.8-2.4z'/%3E%3C/svg%3E"); }

/* chapters */
.hf-chapters { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 22px; padding: 6px;
  border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid var(--color-border, #e8e6dc); backdrop-filter: blur(10px); }
.hf-chapter { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 4px; border: 0; border-radius: 11px; background: transparent;
  font: 600 13px/1.1 Inter, system-ui, sans-serif; color: #6f6f68; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background .3s, color .3s; }
.hf-chapter:hover { color: #09090b; background: rgba(9,9,11,.03); }
.hf-chapter.is-on { color: #09090b; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px -10px rgba(15,23,42,.3); }
.hf-chapter__n { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #a1a1aa; }
.hf-chapter.is-on .hf-chapter__n { color: #0f9f8f; }
.hf-chapter__bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(9,9,11,.06); overflow: hidden; }
.hf-chapter__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2dd4bf, #0f9f8f); transform-origin: 0 50%; transform: scaleX(0); }
.hf-chapter:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; }

@media (max-width: 1180px) { .hf-moment--l { left: 12px; } .hf-moment--r { right: 12px; } }
@media (max-width: 900px) {
  .hf-moments { display: none; }
  .hf-chapters { display: flex; overflow-x: auto; scrollbar-width: none; margin-top: 16px; }
  .hf-chapters::-webkit-scrollbar { display: none; }
  .hf-chapter { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-glow { transition: none; }
}