/* ==========================================================================
   «От идеи до украшения» — ролик, который листается вместе со страницей.
   Базовое состояние (без JS) полностью читаемо: видео идёт по кругу,
   все пять подписей видны списком. Класс .pf-js навешивает JS — и только
   под ним включаются липкий экран и скрытые состояния.
   ========================================================================== */
.pf{
  padding:var(--section-pad) var(--pad);
  background:var(--graphite);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.pf-stage{ max-width:1280px; margin:0 auto; }

.pf-head{ text-align:center; margin-bottom:clamp(24px,3.4vw,40px); }
.pf-head .eyebrow{
  display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:14px;
}
.pf-head h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.12; }

/* ---------- Видео ---------- */
.pf-media{
  position:relative; margin:0 auto;
  width:100%; max-width:1180px; aspect-ratio:1280/540;
  overflow:hidden; background:#ECE3D5;
  box-shadow:0 26px 60px -32px rgba(34,29,23,.45);
}
.pf-video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* мягкая кромка, чтобы кадр не «вырезался» из страницы прямоугольником */
.pf-veil{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);
}

/* ---------- Подписи ---------- */
.pf-captions{
  list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:22px;
}
.pf-caption-num{
  display:block; font-family:var(--serif); font-size:14px; letter-spacing:.22em;
  color:var(--gold-text); margin-bottom:8px;
}
.pf-caption h3{ font-size:19px; margin-bottom:6px; }
.pf-caption p{ font-size:13.5px; line-height:1.7; color:var(--muted); }

.pf-progress{ display:none; }
.pf-hint{ display:none; }

@media (max-width:900px){
  .pf-captions{ grid-template-columns:repeat(2,1fr); gap:20px 18px; }
}
@media (max-width:560px){
  .pf-captions{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Режим с JS: липкий экран и прокрутка ролика
   ========================================================================== */
.pf.pf-js{ padding:0; }
.pf.pf-js .pf-track{ position:relative; height:420vh; }
.pf.pf-js .pf-stage{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px,1.8vw,24px);
  padding:calc(var(--pad) * .9) var(--pad);
  max-width:none;
}
.pf.pf-js .pf-head{ margin:0; }
.pf.pf-js .pf-head h2{ font-size:clamp(24px,2.9vw,36px); }
.pf.pf-js .pf-head .eyebrow{ margin-bottom:10px; }

.pf.pf-js .pf-media{
  width:auto; height:min(48vh,440px); max-width:100%;
  flex:0 0 auto;
}

/* одна активная подпись вместо списка */
.pf.pf-js .pf-captions{
  position:relative; display:block; margin:0;
  width:100%; max-width:660px; min-height:128px; text-align:center;
}
.pf.pf-js .pf-caption{
  position:absolute; inset:0;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease-lux), transform .45s var(--ease-lux);
  pointer-events:none;
}
.pf.pf-js .pf-caption.is-active{ opacity:1; transform:none; }
.pf.pf-js .pf-caption h3{ font-size:clamp(20px,2.4vw,26px); }

/* точки прогресса */
.pf.pf-js .pf-progress{
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.pf-dot{
  width:26px; height:2px; background:var(--line-strong);
  transition:background .4s var(--ease-lux);
}
.pf-dot.is-active{ background:var(--gold); }

.pf.pf-js .pf-hint{
  display:block; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); transition:opacity .4s var(--ease-lux);
}
.pf.pf-js.is-ending .pf-hint{ opacity:0; }

@media (max-width:900px){
  .pf.pf-js .pf-track{ height:360vh; }
  .pf.pf-js .pf-media{ height:auto; width:100%; }
  .pf.pf-js .pf-captions{ min-height:150px; }
}

@media (prefers-reduced-motion: reduce){
  .pf.pf-js .pf-caption{ transition:none; }
}

/* постер для случая без JS */
.pf-media noscript img{ width:100%; height:100%; object-fit:cover; }