/* ================================================================
   ПОВОД · общий набор приёмов для открыток
   Подключается одной строкой, работает на любых фото клиента.
   ================================================================ */

/* ---------- 1. ОБЛОЖКА С ФОТО КЛИЕНТА ----------
   Три слоя защиты текста: подложка-градиент, локальное размытие,
   цвет и микротень. Режим (светлый/тёмный) ставит скрипт. */
.pv-hero{position:relative;min-height:94svh;overflow:hidden;display:grid;align-content:end;
  isolation:isolate}
.pv-hero .pv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pv-pos,50% 32%);z-index:-3}
.pv-hero .pv-scrim{position:absolute;inset:0;z-index:-2;transition:background .5s}
.pv-hero.pv-dark .pv-scrim{background:linear-gradient(to top,
  #07090ef2 0%,#07090ec4 26%,#07090e63 50%,#07090e12 74%,transparent 88%)}
/* фото средней яркости — самый трудный случай: ни светлое, ни тёмное.
   Гасим сильнее и выше, иначе белый заголовок тонет в полутонах. */
.pv-hero.pv-dark.pv-hazy .pv-scrim{background:linear-gradient(to top,
  #06080cfa 0%,#06080ce8 30%,#06080cb3 52%,#06080c66 72%,#06080c1f 86%,transparent 96%)}
.pv-hero.pv-light.pv-hazy .pv-scrim{background:linear-gradient(to top,
  #fffffffa 0%,#ffffffe8 30%,#ffffffb8 52%,#ffffff6b 72%,#ffffff21 86%,transparent 96%)}
.pv-hero.pv-light .pv-scrim{background:linear-gradient(to top,
  #fffffff7 0%,#ffffffd6 26%,#ffffff7d 50%,#ffffff21 74%,transparent 88%)}
.pv-hero .pv-pad{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:-1;
  backdrop-filter:blur(var(--pv-blur,0px));-webkit-backdrop-filter:blur(var(--pv-blur,0px));
  mask-image:linear-gradient(to top,#000 0%,#000 42%,transparent 92%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 42%,transparent 92%);
  transition:backdrop-filter .5s}

/* цвета текста по режиму */
.pv-hero.pv-dark .pv-title{color:#fff;text-shadow:0 1px 2px #00000040,0 4px 30px #00000059}
.pv-hero.pv-dark .pv-sub{color:#eef2f7;text-shadow:0 1px 3px #00000073}
.pv-hero.pv-light .pv-title{color:#12161c;text-shadow:0 1px 2px #ffffff8c,0 4px 30px #ffffff9e}
.pv-hero.pv-light .pv-sub{color:#2a323b;text-shadow:0 1px 3px #ffffffa6}
.pv-hero.pv-dark .pv-chip{background:#fff;color:#12307d}
.pv-hero.pv-light .pv-chip{background:#12307d;color:#fff}

/* ---------- 2. МЕДЛЕННЫЙ ЗУМ (Ken Burns) ----------
   Оживляет любой статичный кадр. Направление чередуется, чтобы
   соседние фото не «дышали» синхронно. */
.pv-kb{animation:pv-kb-in 26s ease-out both}
.pv-kb-alt{animation:pv-kb-out 30s ease-out both}
@keyframes pv-kb-in{from{transform:scale(1.06) translate(.8%,.6%)}to{transform:scale(1)}}
@keyframes pv-kb-out{from{transform:scale(1)}to{transform:scale(1.1) translate(-1.5%,-1%)}}

/* ---------- 3. ПАРАЛЛАКС ОБЛОЖКИ ----------
   Фон отстаёт от прокрутки. Величину задаёт скрипт. */
.pv-parallax{will-change:transform;transform:translate3d(0,var(--pv-shift,0px),0)}

/* ---------- 4. ПОЯВЛЕНИЕ БЛОКОВ ----------
   ВАЖНО: прозрачность включает скрипт. Если он не выполнится,
   содержимое всё равно видно. */
.pv-js .pv-reveal{opacity:0;transform:translateY(24px) scale(.995);filter:blur(6px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1),filter .85s ease}
.pv-js .pv-reveal.pv-in{opacity:1;transform:none;filter:none}

/* ---------- 5. ТЕКСТ ПО СЛОВАМ ---------- */
.pv-words .pv-w{display:inline-block;opacity:0;transform:translateY(.42em) rotate(1.2deg);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--n) * 55ms)}
.pv-words.pv-in .pv-w{opacity:1;transform:none}

/* ---------- 6. ПОДЛОЖКА ПОД ТЕКСТОМ НА ФОТО ----------
   Мягкое затухание вместо жёсткой плашки. */
.pv-veil{position:absolute;left:0;right:0;bottom:0;padding:46px 18px 16px;color:#fff;
  background:linear-gradient(to top,#0b0f16ed 0%,#0b0f1699 46%,#0b0f1600 100%)}

/* ---------- 7. ФОТО, КОТОРОЕ ОТКРЫВАЕТСЯ МАСКОЙ ---------- */
.pv-js .pv-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.3,1)}
.pv-js .pv-wipe.pv-in{clip-path:inset(0 0 0 0)}

/* ---------- 8. ЗУМ ПРИ НАВЕДЕНИИ ---------- */
.pv-zoom{overflow:hidden}
.pv-zoom img{transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.pv-zoom:hover img{transform:scale(1.06)}

/* ---------- 9. УВАЖЕНИЕ К НАСТРОЙКАМ ---------- */
@media(prefers-reduced-motion:reduce){
  .pv-kb,.pv-kb-alt{animation:none!important}
  .pv-js .pv-reveal,.pv-words .pv-w,.pv-js .pv-wipe{
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
    transition:none!important}
  .pv-parallax{transform:none!important}
  .pv-zoom img{transition:none}
}