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

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


/* ── project motion (all of it switched off by the reduced-motion block below) ── */

/* photos breathe: slow zoom-out, once (Ken Burns) */
.kenburns img { animation: kenburns 14s var(--ease) both; transform-origin: 70% 50%; }
@keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }

/* last draw: balls roll in one by one, then the bonus lands with a bounce */
.draw-pop { animation: rise-in .7s var(--ease-spring) .5s both; }
.draw-pop .ball { animation: ball-roll .55s var(--ease-spring) both; animation-delay: calc(.9s + var(--i) * .14s); }
@keyframes ball-roll { from { opacity: 0; transform: translateX(-26px) rotate(-200deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* floating family shapes: a slow bob on top of the scroll parallax (site.js sets --py) */
.float { translate: 0 var(--py, 0px); animation: bob 7s ease-in-out infinite alternate; }
.float--square { animation-duration: 9s; }
.float--tri { animation-duration: 6s; }
@keyframes bob { from { transform: translateY(-8px) rotate(-4deg); } to { transform: translateY(10px) rotate(5deg); } }

/* results ticker: endless, pauses under the pointer or keyboard focus */
.ticker__track { animation: ticker 60s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* cards tilt toward the pointer (site.js writes --rx / --ry) */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .35s var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base), border-color var(--dur-base); }
[data-tilt].is-tilting { transition: transform .08s linear, box-shadow var(--dur-base); --lift: -4px; }

/* countdown digits flip when they change */
.count b.tick { animation: flip .4s var(--ease); }
@keyframes flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(90deg); opacity: .3; } 100% { transform: rotateX(0); } }

/* reveal: a bit more travel and a hint of scale */
[data-reveal] { transform: translateY(22px) scale(.985); transition-duration: .6s; }
[data-reveal].is-in { transform: none; }
[data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 240ms; }
[data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: 300ms; }

/* number count-up keeps its width while counting */
[data-countup] { font-variant-numeric: tabular-nums; }

/* slip: a picked cell pulses once */
.cell[aria-pressed="true"] { animation: picked .45s var(--ease-spring); }
@keyframes picked { 0% { transform: scale(.7); } 60% { transform: scale(1.05); } 100% { transform: scale(.92); } }

/* way shapes keep turning slowly */
.way .shape--circle { animation: spin-soft 12s linear infinite; background: conic-gradient(from 0deg, oklch(93% .12 92), var(--color-sun), oklch(93% .12 92)); }
@keyframes spin-soft { to { rotate: 360deg; } }

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; }
  .kenburns img, .draw-pop, .draw-pop .ball, .float, .ticker__track, .way .shape--circle { animation: none !important; }
  [data-tilt] { transform: none !important; }
  .ticker__viewport { overflow-x: auto; }
}