/* Слой движения: полоса прогресса, проявление панели, северное
   свечение, блик на портрете и появление блоков при прокрутке.
   Подключается после layout.css. Всё, что здесь есть, — необязательное
   украшение: без поддержки animation-timeline страница просто статична. */

.cv .progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 45;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  .cv .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes progress-grow {
  to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  .cv .topbar::before {
    animation: fade-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0 18vh;
  }
}

@supports not (animation-timeline: scroll()) {
  .cv .topbar::before { opacity: 1; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .cv .hero::before {
    animation: aurora 24s ease-in-out infinite;
  }
}

@keyframes aurora {
  0%, 100% { transform: translate3d(-1%, 0, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Блик, пробегающий по фото при наведении — намёк, что это кнопка */
.cv .hero__portrait .photo--button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cv .hero__portrait .photo--button:hover::after,
  .cv .hero__portrait .photo--button:focus-visible::after {
    animation: sheen .9s ease;
  }
}

@keyframes sheen {
  to { transform: translateX(120%); }
}

/* --- появление при прокрутке ------------------------------------------------ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cv [data-reveal] > * {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Запасной путь для браузеров без scroll-driven анимаций (классы вешает motion.js) */
.cv .will-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

.cv .is-revealed {
  opacity: 1;
  transform: none;
}