/* Motion, loaded last: transitions, keyframes, and the reduced-motion block.
 *
 * Rules that do not bend (F5-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 matches the mockup exactly, or the fidelity check is measuring
 *     a paused animation instead of the layout.
 */

/* Sections below the fold only: the hero is never marked for reveal. */
[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; }

/* 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; }
}

/* ── project transitions ──────────────────────────────────────────────── */
/* Appearing is slower and eases out; disappearing is a third shorter. */
.overlay { transition: opacity var(--dur-slow) var(--ease-in); }
.overlay.is-open { transition-timing-function: var(--ease); }
.overlay__panel { transform: translateY(8px) scale(.99); transition: transform var(--dur-slow) var(--ease); }
.overlay.is-open .overlay__panel { transform: none; }
.overlay__panel--menu { transform: translateX(-12px); }

.btn, .modal-btn, .tab, .odd, .slip__step, .slip__place, .modal-close, .menu-link,
.nav__link, .footer-col__link, .u-strip__link, .u-strip__limit, .field__toggle,
.cat, .cat__arrow, .to-top, .link-arrow {
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              translate var(--dur-base) var(--ease);
}
.link-arrow::before { transition: scale var(--dur-base) var(--ease); }
.switch__track, .switch__track::after { transition: background-color var(--dur-fast) var(--ease), left var(--dur-fast) var(--ease); }
.to-top { transition: opacity var(--dur-base) var(--ease), background-color var(--dur-fast) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .overlay__panel { transform: none; }
}