/* ============================================================================
   reel-nav.css — sess.53
   Atomi del controllo a "pillola" stile Feature Reel: dot-progress + play/pausa
   + reveal "iPhone 17". CONDIVISO tra:
   - Feature Reel delle bande (family/range)
   - Navigator del lineup (family/range, .family-lineup__reel)
   - Navigator del portfolio-hero (.ph-navigator) — anche su product page
   Estratto da pages/family.css perché serve anche dove family.css non è caricato
   (es. product-f7/f10). Caricare su family/range/product.
   ============================================================================ */
.family-reel-ctrl{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
/* reveal "Apple iPhone 17" — la pillola entra (fade + rise + settle) quando arriva
   in viewport. Stato iniziale via JS solo se non reduced-motion; .is-revealed
   (one-shot) la porta a riposo. */
.family-reel-ctrl--reveal{
  opacity: 0;
  transform: translateY(8px) scale(.55);
  transform-origin: center top;
  transition:
    opacity .55s ease,
    transform 1.05s cubic-bezier(.34, 1.4, .42, 1);
  will-change: opacity, transform;
}
.family-reel-ctrl--reveal.is-revealed{
  opacity: 1;
  transform: none;
}
.family-reel-dots{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(140,140,140,.14);
  border: 1px solid rgba(140,140,140,.22);
  backdrop-filter: blur(6px);
}
.family-reel-dot{
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; cursor: pointer;
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(150,150,150,.55);
  position: relative; overflow: hidden;
  transition: width .45s cubic-bezier(.16, .84, .3, 1.04), background .3s ease;
}
.family-reel-dot.is-active{
  width: 34px;
  background: rgba(150,150,150,.32);
}
.family-reel-dot__fill{
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--ds-c-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.family-reel-dot:not(.is-active) .family-reel-dot__fill{ display: none; }
.family-reel-dot:focus-visible{ outline: 2px solid var(--ds-c-focus, #F4B532); outline-offset: 3px; }

.family-reel-play{
  appearance: none; -webkit-appearance: none; cursor: pointer;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(140,140,140,.14);
  border: 1px solid rgba(140,140,140,.28);
  color: var(--ds-c-text, #E8E6E0);
  transition: background .2s ease, border-color .2s ease;
}
.family-reel-play svg{ width: 18px; height: 18px; fill: currentColor; }
.family-reel-play__play{ display: none; }
.family-reel-ctrl:not(.is-playing) .family-reel-play__pause{ display: none; }
.family-reel-ctrl:not(.is-playing) .family-reel-play__play{ display: block; }
.family-reel-play:focus-visible{ outline: 2px solid var(--ds-c-focus, #F4B532); outline-offset: 3px; }
@media (hover: hover){
  .family-reel-dot:hover{ background: rgba(180,180,180,.75); }
  .family-reel-play:hover{ background: rgba(140,140,140,.24); }
}

/* navigator del portfolio-hero: stesso look, posato sotto lo strip */
.ph-navigator{ margin-top: 12px; }