/* ============================================================
   Premium motion layer - Sergei Fedorov site (refined, low-колхоз)
   FAIL-SAFE: эффекты применяются ТОЛЬКО при html.js-anim (ставит JS).
   Если JS не загрузился - контент виден как обычно (никаких скрытых блоков).
   Уважает prefers-reduced-motion и тач (всё гасится).
   ============================================================ */

/* ---------- Scroll reveal (fade-up + stagger) ---------- */
html.js-anim .reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
html.js-anim .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .85s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------- Hero on-load sequence (kinetic, restrained) ---------- */
html.js-anim .hero-item { opacity: 0; transform: translateY(18px); }
html.js-anim .hero-item.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--hero-delay, 0ms);
}

/* ---------- Cover Ken-Burns settle (on first reveal) ---------- */
html.js-anim .kb { overflow: hidden; }
html.js-anim .kb > img,
html.js-anim .kb > .cover-img {
  transform: scale(1.07); transform-origin: 50% 50%;
}
html.js-anim .kb.is-in > img,
html.js-anim .kb.is-in > .cover-img {
  transform: scale(1);
  transition: transform 1.5s cubic-bezier(.19,1,.22,1);
}

/* ---------- Card hover (image zoom) - pure CSS, всегда ---------- */
.work .cover, .work .work-inner > .cover { overflow: hidden; }
.work .cover img { transition: transform 1s cubic-bezier(.19,1,.22,1), filter .6s ease; will-change: transform; }
.work:hover .cover img { transform: scale(1.05); }

/* ---------- Link underline draw-in ---------- */
.anim-underline { position: relative; }
.anim-underline::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1); opacity: .8;
}
.anim-underline:hover::after { transform: scaleX(1); }

/* ---------- Magnetic play button (transform set by JS) ---------- */
html.js-anim .play-circle { transition: transform .25s cubic-bezier(.19,1,.22,1), background 220ms ease, border-color 220ms ease; }

/* ---------- Minimal dot cursor (desktop only, NO label) ---------- */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink, #3A553A); pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); opacity: 0;
  transition: width .28s cubic-bezier(.22,.61,.36,1), height .28s cubic-bezier(.22,.61,.36,1),
              background .28s ease, opacity .3s ease;
}
html.has-dot.dot-ready .cursor-dot { opacity: 1; }
.cursor-dot.is-hover { width: 42px; height: 42px; background: color-mix(in srgb, var(--ink, #3A553A) 16%, transparent); }
html.has-dot a, html.has-dot button, html.has-dot .work,
html.has-dot .cover-frame, html.has-dot .frame, html.has-dot [role="button"] { cursor: none; }

/* ---------- KILL SWITCHES: touch + reduced motion ---------- */
@media (hover: none), (pointer: coarse) {
  .cursor-dot { display: none !important; }
  html.has-dot * { cursor: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal,
  html.js-anim .hero-item,
  html.js-anim .kb > img,
  html.js-anim .kb > .cover-img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cursor-dot { display: none !important; }
}

/* ---------- Мобайл: поднять самые мелкие mono-подписи для читаемости (Vladimir 25.05) ---------- */
@media (max-width: 600px) {
  .work .meta, .credits-col .meta-row { font-size: 11.5px; }
  .work .cover .plate, .plate-no, .filters .filter .count, .contact-sheet .roll-no { font-size: 11px; }
}

/* MPA view transitions - page turn feel */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .4s; }
::view-transition-new(root) { animation-duration: .4s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.filters .filter .count { margin-left: 6px; }

/* ---------- Наезд (зум) на кадры по выбору Серёжи - единообразно, вместо параллакса ---------- */
@media (hover: hover) and (pointer: fine) {
  .work .cover img { transition: transform .55s cubic-bezier(.19,1,.22,1); }
  .work:hover .cover img { transform: scale(1.05); }
  .cover-frame .cover-img { transition: transform .9s cubic-bezier(.19,1,.22,1); }
  .cover-frame:not(.is-playing):hover .cover-img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .work:hover .cover img, .cover-frame:hover .cover-img { transform: none; }
}

/* Old-style цифры в прозе синопсиса/био (по правке Серёжи: цифры с буквами в Cormorant смотрелись грубо) */
.synopsis, .synopsis .lead, .synopsis p, .long p, .about-body .clients {
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
  font-variant-numeric: oldstyle-nums;
}