:root {
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-duration-enter: 360ms;
  --motion-duration-media: 520ms;
  --motion-duration-feedback: 140ms;
}

/* Контент скрывается только после загрузки JS: без JavaScript всё остаётся доступным. */
.motion-ready [data-reveal],
.motion-ready .animate-item {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--motion-duration-enter) var(--motion-ease-out),
    transform var(--motion-duration-enter) var(--motion-ease-out);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready [data-reveal="left"] {
  transform: translateX(-16px);
}

.motion-ready [data-reveal="right"] {
  transform: translateX(16px);
}

.motion-ready [data-reveal="down"] {
  transform: translateY(-8px);
}

.motion-ready [data-reveal="media"] {
  opacity: 0;
  transform: scale(0.98);
  clip-path: inset(0 0 10% 0);
  transition:
    opacity var(--motion-duration-media) var(--motion-ease-out),
    transform var(--motion-duration-media) var(--motion-ease-out),
    clip-path var(--motion-duration-media) var(--motion-ease-in-out);
}

.motion-ready [data-reveal].is-visible,
.motion-ready .animate-item.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.motion-ready [data-reveal="media"].is-visible {
  clip-path: inset(0 0 0 0);
}

.motion-delay-1 { --motion-delay: 50ms; }
.motion-delay-2 { --motion-delay: 100ms; }
.motion-delay-3 { --motion-delay: 150ms; }

.button,
.btn-primary,
.btn-primary-gradient,
.t-btn-register,
.t-border-link,
.t-white-link {
  transition:
    transform var(--motion-duration-feedback) var(--motion-ease-out),
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.button:active,
.btn-primary:active,
.btn-primary-gradient:active,
.t-btn-register:active,
.t-border-link:active,
.t-white-link:active {
  transform: scale(0.97);
}

.faq-list summary i::before,
.faq-list summary i::after,
.t-faq-icon {
  transition: transform 160ms var(--motion-ease-out);
}

.faq-list details > p,
.t-faq-sub-text {
  transform-origin: top;
}

.faq-list details.is-faq-animating > p,
.t-faq-item.is-faq-animating .t-faq-sub-text {
  will-change: height, opacity;
}

.related-links a {
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms var(--motion-ease-out);
}

.related-links i,
.text-link span,
.button span,
.btn-primary i,
.btn-primary-gradient i {
  transition: transform 160ms var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .related-links a:hover {
    transform: translateY(-2px);
  }

  .related-links a:hover i,
  .button:hover span,
  .btn-primary:hover i,
  .btn-primary-gradient:hover i {
    transform: translate(2px, -2px);
  }

  .text-link:hover span {
    transform: translateY(2px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal],
  .motion-ready .animate-item {
    transform: none;
    transition: opacity 160ms ease !important;
    transition-delay: 0ms;
  }

  .motion-ready [data-reveal="left"],
  .motion-ready [data-reveal="right"],
  .motion-ready [data-reveal="down"],
  .motion-ready [data-reveal="media"] {
    transform: none;
    clip-path: none;
  }

  .faq-list details.is-faq-animating > p,
  .t-faq-item.is-faq-animating .t-faq-sub-text {
    will-change: auto;
  }

  .button:active,
  .btn-primary:active,
  .btn-primary-gradient:active,
  .t-btn-register:active,
  .t-border-link:active,
  .t-white-link:active,
  .related-links a:hover,
  .related-links a:hover i,
  .button:hover span,
  .btn-primary:hover i,
  .btn-primary-gradient:hover i,
  .text-link:hover span {
    transform: none;
  }
}