/* Motion, loaded last: transitions, keyframes, and the reduced-motion block.
 *
 * Rules that do not bend (S5-tech, "Движение"):
 *   · only opacity, transform, colour, shadow and filter are animated;
 *   · the first screen does not animate in — that is a direct hit on LCP;
 *   · the end state is the resting layout (transform: none, opacity: 1) — a
 *     screenshot must not catch a half-played animation.
 */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Staggering by nth-child costs nothing and reads as intentional. */
[data-reveal-group] > * { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 300ms; }
[data-reveal-group] > *:nth-child(n+7) { transition-delay: 340ms; }

/* Photo bands drift slower than the page (scroll-driven, no JS). Browsers without
   animation-timeline simply show the static photo. */
@supports (animation-timeline: view()) {
  .band__bg img, .page-hero__bg img { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes drift { from { transform: translateY(-6%) scale(1.12); } to { transform: translateY(6%) scale(1.12); } }
  .sec__head .spot { animation: spot-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes spot-in { from { rotate: -90deg; opacity: 0; } to { rotate: 0deg; opacity: 1; } }
}

/* Height is never animated: a row expands through grid-template-rows. */
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
.collapsible.is-open { grid-template-rows: 1fr; }
.collapsible > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }   /* min-height: a 0fr row cannot collapse a padded item; put padding on the grandchild */
.collapsible.is-open > * { visibility: visible; transition-delay: 0s; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .band__bg img, .page-hero__bg img, .sec__head .spot { animation: none !important; }
}