/* ================================================
   BRANDMAKERS — Animations
   Fade-up on scroll, 3D hover, scroll snap
   ================================================ */

/* ===========================
   SCROLL ANIMATIONS
   Добавь класс .animate к любому элементу.
   JS добавит .animate--visible при попадании в viewport.
   =========================== */

.animate {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--bm-dur-enter) var(--bm-ease),
    transform var(--bm-dur-enter) var(--bm-ease);
}

.animate--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Варианты появления */
.animate--from-left {
  transform: translateX(-32px);
}

.animate--from-right {
  transform: translateX(32px);
}

.animate--scale {
  transform: scale(0.94);
}

.animate--from-left.animate--visible,
.animate--from-right.animate--visible,
.animate--scale.animate--visible {
  transform: none;
  opacity: 1;
}

/* Задержки для stagger-эффекта */
/* Используй data-delay="100" data-delay="200" и т.д. */
/* JS выставит transition-delay из data-delay */

/* ===========================
   3D CARD HOVER
   Добавь .card-3d к карточке
   =========================== */
.card-3d {
  transform-style: preserve-3d;
  transition:
    transform var(--bm-dur) var(--bm-ease),
    box-shadow var(--bm-dur) var(--bm-ease);
  will-change: transform;
}

.card-3d:hover {
  transform: translateY(-6px) rotateX(1.5deg) rotateY(-1.5deg);
  box-shadow: var(--bm-shadow-xl);
}

/* ===========================
   HORIZONTAL SCROLL (кейсы)
   =========================== */
.h-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 8px;
}

.h-scroll:active {
  cursor: grabbing;
}

.h-scroll::-webkit-scrollbar {
  display: none;
}

.h-scroll__track {
  display: flex;
  gap: 16px;
  padding: 4px 4px 8px;
  width: max-content;
}

.h-scroll__item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ===========================
   BENTO GRID ANIMATIONS
   =========================== */

/* Hover glow на оранжевых элементах */
.bento-item:hover .bento-item__accent {
  box-shadow: var(--bm-shadow-orange);
}

/* ===========================
   GLOBAL HOVER TRANSITIONS
   =========================== */

/* Все интерактивные иконки */
.icon-btn {
  transition:
    transform var(--bm-dur-fast) ease,
    background var(--bm-dur-fast) ease,
    color var(--bm-dur-fast) ease;
}

.icon-btn:hover {
  transform: scale(1.1);
}

/* ===========================
   HERO ENTRANCE
   =========================== */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__badge    { animation: hero-in 0.5s var(--bm-ease) 0.1s both; }
.hero__title    { animation: hero-in 0.6s var(--bm-ease) 0.2s both; }
.hero__subtitle { animation: hero-in 0.6s var(--bm-ease) 0.3s both; }
.hero__actions  { animation: hero-in 0.6s var(--bm-ease) 0.4s both; }
.hero__stats    { animation: hero-in 0.6s var(--bm-ease) 0.5s both; }
.hero__media    { animation: hero-in 0.7s var(--bm-ease) 0.35s both; }

/* ===========================
   LOADING SPINNER
   =========================== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ===========================
   PULSE (live-dot)
   =========================== */
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.8);  opacity: 0; }
}

.live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
}

.live-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-ring 1.6s ease-out infinite;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: currentColor;
}

/* ===========================
   GRADIENT TEXT
   =========================== */
.text-gradient {
  background: linear-gradient(135deg, var(--bm-orange) 0%, #FF8C42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===========================
   SCROLL INDICATOR
   =========================== */
@keyframes scroll-down {
  0%   { transform: translateY(0);   opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

.scroll-indicator {
  animation: scroll-down 1.5s ease-in-out infinite;
}