/* Анимации градиента обложки бокса — используются на странице бокса и в карточках списков */
.box-cover-area.box-cover-animate-flow { background-size: 200% 200%; animation: box-grad-flow 8s ease infinite; }
@keyframes box-grad-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.box-cover-area.box-cover-animate-pulse { animation: box-grad-pulse 4s ease-in-out infinite; }
@keyframes box-grad-pulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.9; filter: brightness(1.15); } }

.box-cover-area.box-cover-animate-wave { background-size: 200% 200%; animation: box-grad-wave 6s ease-in-out infinite; }
@keyframes box-grad-wave { 0%, 100% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 100% 0%; } 75% { background-position: 0% 100%; } }

.box-cover-area.box-cover-animate-shift { background-size: 300% 100%; animation: box-grad-shift 10s linear infinite; }
@keyframes box-grad-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.box-cover-area.box-cover-animate-shimmer { position: relative; overflow: hidden; }
.box-cover-area.box-cover-animate-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.15) 45%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.15) 55%, transparent 100%); background-size: 200% 100%; animation: box-grad-shimmer 3s ease-in-out infinite; pointer-events: none; }
@keyframes box-grad-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.box-cover-area.box-cover-animate-breathe { animation: box-grad-breathe 5s ease-in-out infinite; }
@keyframes box-grad-breathe { 0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); } 50% { filter: brightness(1.1) saturate(1.05); transform: scale(1.02); } }

/* Светлый текст на тёмном градиенте (карточки в списках) */
.card.box-theme-dark .text-text-primary,
.card.box-theme-dark h3 a,
.card.box-theme-dark .text-lg { color: rgba(255,255,255,0.95) !important; }
.card.box-theme-dark .text-text-secondary,
.card.box-theme-dark .text-sm,
.card.box-theme-dark .text-xs,
.card.box-theme-dark a:not(.btn-primary):not(.btn-secondary) { color: rgba(255,255,255,0.8) !important; }
.card.box-theme-dark a:hover { color: rgba(255,255,255,0.95) !important; }
.card.box-theme-dark .border-border { border-color: rgba(255,255,255,0.3); }

/* На телефонах — по одному боксу в ряд (работает без пересборки Tailwind) */
@media (max-width: 640px) {
  .masonry-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
}