/* «Ксерокс оживает» — однократная печатная анимация. Только при no-preference.
   Движения кнопок здесь нет и не появится: селекторы ограничены hero-иллюстрацией,
   заголовком h1, бумажными разворотами и архивным фото. */
@media (prefers-reduced-motion:no-preference){

/* ---------- Первый экран (≈ 740 мс, CSS-only, страница не блокируется) ---------- */
.hero-illustration{animation:gvr-print .78s linear both;animation-fill-mode:none}
.hero h1{animation:gvr-exposure .62s linear .12s;animation-fill-mode:backwards}

/* коллаж: краска набирается неровным фронтом сквозь ксероксную маску, 4 кадра с несовмещением */
@keyframes gvr-print{
  0%{opacity:0;transform:translate(-3px,2px);mask-image:linear-gradient(112deg,#fff -40%,#000 -10%),var(--xerox);
     mask-mode:luminance;mask-composite:intersect;mask-repeat:no-repeat,repeat;mask-size:100% 100%,520px;mask-position:0 0,0 0}
  14%{opacity:.75;transform:translate(-3px,2px);mask-image:linear-gradient(112deg,#fff 2%,#000 32%),var(--xerox);mask-position:0 0,120px 40px}
  36%{opacity:.85;transform:translate(2px,-1px);mask-image:linear-gradient(112deg,#fff 44%,#000 74%),var(--xerox);mask-position:0 0,-80px 150px}
  60%{opacity:.95;transform:translate(0,0);mask-image:linear-gradient(112deg,#fff 86%,#000 116%),var(--xerox);mask-position:0 0,200px -60px}
  84%{opacity:1;transform:translate(0,0);mask-image:linear-gradient(112deg,#fff 110%,#000 140%),var(--xerox);mask-position:0 0,40px 90px}
  100%{opacity:1;transform:none;mask-image:none}
}
/* название: короткая экспозиция, оранжевый «второй прогон» на 2 кадра, текст на месте */
@keyframes gvr-exposure{
  0%{opacity:0;mask-position:0% 0%}
  18%{opacity:.7;mask-position:70% 20%;text-shadow:3px 2px 0 #ff6b20d9}
  42%{opacity:.9;mask-position:10% 80%;text-shadow:-2px 1px 0 #ff6b2099}
  70%{opacity:1;mask-position:60% 60%;text-shadow:none}
  100%{opacity:1;mask-position:40% 40%;text-shadow:none}
}
.hero h1{animation-timing-function:steps(1,end)}
.hero-illustration{animation-timing-function:steps(1,end)}

/* ---------- Разделы ниже (JS добавляет .js-motion и .is-in) ---------- */
.js-motion .music.paper:not(.is-in),
.js-motion .inside.paper:not(.is-in){clip-path:polygon(0 0,100% 0,100% 0,0 0)}
.js-motion .music.paper.is-in,
.js-motion .inside.paper.is-in{animation:gvr-sheet .48s steps(1,end)}
.js-motion .is-in.is-instant{animation:none!important}
/* бумажный разворот выкатывается рваным краем сверху вниз, 4 кадра; финал — без clip-path */
@keyframes gvr-sheet{
  0%{clip-path:polygon(0 0,100% 0,100% 24%,72% 19%,41% 27%,0 21%)}
  25%{clip-path:polygon(0 0,100% 0,100% 52%,68% 47%,38% 56%,0 49%)}
  50%{clip-path:polygon(0 0,100% 0,100% 78%,64% 74%,35% 82%,0 76%)}
  75%{clip-path:polygon(0 0,100% 0,100% 94%,66% 91%,30% 97%,0 92%)}
  100%{clip-path:polygon(-5% -5%,105% -5%,105% 105%,-5% 105%)}
}

/* архивное фото вклеивается: тот же отпечаток, что и на первом экране */
.js-motion .live figure:not(.is-in) img{opacity:0}
.js-motion .live figure.is-in img{animation:gvr-print .64s steps(1,end)}

/* ---------- Периодика: редкая «перепечатка» (≈ 0,4 с раз в 7–12 с, только пока блок на экране; запускает motion.js) ---------- */
.hero-illustration.is-reprint{animation:gvr-reprint .4s steps(1,end)}
.hero h1.is-reprint{animation:gvr-reprint-title .4s steps(1,end)}
.js-motion .live figure.is-in img.is-reprint{animation:gvr-scan .42s steps(1,end)}
/* коллаж: слой отпечатался с несовмещением, часть тонера недобрана */
@keyframes gvr-reprint{
  0%{opacity:.82;transform:translate(3px,-1px);mask-image:var(--xerox);mask-mode:luminance;mask-size:520px;mask-position:60px 20px}
  34%{opacity:.9;transform:translate(-2px,1px);mask-image:var(--xerox);mask-mode:luminance;mask-size:520px;mask-position:-140px 90px}
  68%{opacity:.96;transform:translate(1px,0);mask-image:var(--xerox);mask-mode:luminance;mask-size:520px;mask-position:200px -40px}
  100%{opacity:1;transform:none;mask-image:none}
}
@keyframes gvr-reprint-title{
  0%{text-shadow:3px 2px 0 #ff6b20d9;mask-position:70% 20%}
  50%{text-shadow:-2px 1px 0 #ff6b2099;mask-position:10% 80%}
  100%{text-shadow:none;mask-position:40% 40%}
}
/* фото: полоса пропуска копира едет сверху вниз (3 кадра) */
@keyframes gvr-scan{
  0%{mask-image:linear-gradient(180deg,#fff 0 12%,#000 12% 20%,#fff 20%);mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat,repeat}
  33%{mask-image:linear-gradient(180deg,#fff 0 46%,#000 46% 53%,#fff 53%);mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
  66%{mask-image:linear-gradient(180deg,#fff 0 78%,#000 78% 84%,#fff 84%);mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
  100%{mask-image:none}
}

/* ---------- Бегущая строка на оранжевой полосе (JS дублирует текст и ставит .is-running) ---------- */
.ticker>span.is-running{animation:gvr-ticker var(--ticker-dur,30s) linear infinite;will-change:transform}
@keyframes gvr-ticker{to{transform:translateX(-50%)}}
}