/*
 * iFusion Volt — Apple-style scroll-scrubbed product film.
 * A tall section pins a full-bleed video; scroll position drives the frame,
 * and short headlines fade in over it as live HTML (sharp, searchable).
 */
.sf-section {
  position: relative;
  height: 420vh;               /* scroll distance for the whole film */
  background: #000;
}

.sf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.sf-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
/* Wide screens: nudge the film right so headlines sit on the black set, not
   over the product. The set is black at the edges, so the gap is invisible. */
@media (min-width: 901px) {
  .sf-video { transform: translateX(9vw); }
}

/* Soft vignette so headlines stay legible over the lit product */
.sf-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 30%);
}

.sf-beats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sf-beat {
  position: absolute;
  left: clamp(1.5rem, 6vw, 6rem);
  top: 50%;
  max-width: min(480px, 32vw);
  opacity: 0;
  transform: translateY(calc(-50% + 24px));
  will-change: opacity, transform;
}
.sf-beat.is-cta { pointer-events: auto; }

.sf-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.sf-title {
  margin: 0;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.sf-title .blue { color: var(--blue); }
.sf-sub {
  margin: 1.1rem 0 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.sf-beat .btn { margin-top: 1.75rem; }

/* Thin progress rail, bottom centre */
.sf-progress {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 120px;
  height: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.sf-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Phones/tablets in portrait: show the whole frame (black bars blend into the
   black set), product in the upper half, headlines underneath. */
@media (max-width: 900px) {
  .sf-section { height: 360vh; }
  .sf-video { object-fit: contain; object-position: center 34%; }
  .sf-shade {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 55%);
  }
  .sf-beat {
    left: 1.5rem;
    right: 1.5rem;
    top: auto;
    bottom: 13vh;
    max-width: none;
    transform: translateY(24px);
  }
  .sf-title { font-size: clamp(2rem, 8.5vw, 2.75rem); }
}

/* Reduced motion: no scrubbing — a still poster with the headlines stacked. */
@media (prefers-reduced-motion: reduce) {
  .sf-section { height: auto; }
  .sf-sticky { position: relative; height: auto; min-height: 100vh; }
  .sf-beats { position: relative; display: flex; flex-direction: column; gap: 3rem; padding: 55vh 1.5rem 5rem; }
  .sf-beat { position: relative; left: auto; top: auto; bottom: auto; opacity: 1 !important; transform: none !important; max-width: 640px; }
  .sf-progress { display: none; }
}