/* Noxegen Motion — стандарты плавности и базовые компоненты
 * Использует переменные из tokens.css.
 * Подключение: <link rel="stylesheet" href="/assets/motion.css">
 * (ВАЖНО: tokens.css должен быть подключён ПЕРЕД этим файлом)
 */

/* === Универсальные transitions === */
/* Можно override локально на странице при необходимости */
body {
  transition: background-color var(--dur-base) var(--ease-premium);
}
a, button {
  transition: all var(--dur-base) var(--ease-premium);
}
.card,
[class*="card"] {
  transition:
    background-color var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium);
}

/* === Reveal on scroll === */
/* Добавь класс .reveal на контейнер, JS добавляет .is-visible при скролле */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-long) var(--ease-expo-out),
    transform var(--dur-long) var(--ease-expo-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Pill button === */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-premium);
  cursor: pointer;
  border: none;
}
.btn-pill-primary {
  background: var(--apple-blue);
  color: white;
}
.btn-pill-primary:hover {
  background: var(--apple-blue-hover);
  transform: translateY(-1px);
}
.btn-pill-secondary {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

/* === Squircle card === */
.card-squircle {
  background: var(--bg-charcoal);
  border-radius: var(--radius-squircle);
  padding: var(--space-xl);
  box-shadow: var(--shadow-premium);
  transition: all var(--dur-base) var(--ease-premium);
}
.card-squircle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}

/* === Mesh-gradient background === */
/* Добавь класс .mesh-bg на Hero или Final CTA блок */
.mesh-bg {
  position: relative;
  overflow: hidden;
}
.mesh-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, var(--stripe-cyan) 0%, transparent 40%),
    radial-gradient(circle at 75% 70%, var(--stripe-violet) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--stripe-pink) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, var(--stripe-amber) 0%, transparent 30%);
  filter: blur(80px);
  opacity: 0.6;
  animation: meshFloat var(--dur-gradient) linear infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}
.mesh-bg > * {
  position: relative;
  z-index: 1;
}
@keyframes meshFloat {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  25%  { transform: translate3d(-3%, 2%, 0) rotate(90deg); }
  50%  { transform: translate3d(2%, -3%, 0) rotate(180deg); }
  75%  { transform: translate3d(-2%, 3%, 0) rotate(270deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}

/* === Text shimmer (H1 акценты) === */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--stripe-cyan),
    var(--stripe-violet),
    var(--stripe-pink),
    var(--stripe-amber),
    var(--stripe-cyan)
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmer var(--dur-gradient-text) linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* === Prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mesh-bg::before { animation: none; }
  .text-shimmer { animation: none; }
}