/**
 * Холст для карт Таро
 * Карта привязана к документу, не движется со скроллом
 */

/* Контейнер для карт - абсолютное позиционирование относительно body */
.tarot-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow-anchor: none; /* Предотвращает scroll anchoring для предотвращения отката скролла */
}

/* Базовые стили карты */
.tarot-card {
  position: absolute; /* Абсолютная позиция относительно документа */
  width: 196px;
  height: 336px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); /* Оптимизировано: только opacity и transform */
  z-index: 10; /* Поверх других элементов */
}

/* Левая карта - начальное состояние (невидима, смещена влево) */
.tarot-card-left {
  background-image: url('../assets/images/tower1.webp');
  /* Позиция устанавливается через JavaScript относительно карточки Process */
  left: -20vw; /* За пределами экрана слева */
  opacity: 0;
  transform: rotate(-15deg) scale(0.8);
  filter: drop-shadow(0 10px 30px rgba(184, 134, 11, 0.3));
  will-change: opacity, transform; /* Оптимизация: не включаем filter в will-change */
}

/* Левая карта - активное состояние (видима, на финальной позиции) */
.tarot-card-left.active {
  /* left и top устанавливаются через JavaScript один раз */
  opacity: 0.3;
  transform: rotate(-10deg) scale(1);
  /* filter остается постоянным, не анимируется - предотвращает reflow */
}

/* Анимация левитации - плавное покачивание */
@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0px) rotate(-10deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(-12deg) scale(1.02);
  }
}

/* Класс для активации левитации */
.tarot-card-left.levitating {
  animation: cardFloat 4s ease-in-out infinite;
  /* Переопределяем transition для плавного перехода */
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform; /* Только transform для GPU ускорения */
}

/* ==================== ПРАВАЯ КАРТА (ЗЕРКАЛО) ==================== */

/* Правая карта - начальное состояние */
.tarot-card-right {
  background-image: url('../assets/images/empress1.webp');
  right: -20vw; /* Зеркально left */
  left: auto;
  opacity: 0;
  transform: rotate(15deg) scale(0.8); /* Зеркальный наклон */
  filter: drop-shadow(0 10px 30px rgba(184, 134, 11, 0.3));
  will-change: opacity, transform;
}

/* Правая карта - активное состояние */
.tarot-card-right.active {
  /* right и top устанавливаются через JavaScript один раз */
  opacity: 0.3;
  transform: rotate(10deg) scale(1); /* Зеркальный поворот */
}

/* Зеркальная анимация левитации */
@keyframes cardFloatRight {
  0%, 100% {
    transform: translateY(0px) rotate(10deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(12deg) scale(1.02);
  }
}

/* Класс для активации левитации правой карты */
.tarot-card-right.levitating {
  animation: cardFloatRight 4s ease-in-out infinite;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ==================== ТРЕТЬЯ КАРТА (TESTIMONIALS) ==================== */

/* Третья карта - начальное состояние */
.tarot-card-testimonials {
  background-image: url('../assets/images/path.webp');
  left: -20vw; /* За пределами экрана СЛЕВА */
  opacity: 0;
  transform: rotate(-12deg) scale(0.8); /* Немного другой угол */
  filter: drop-shadow(0 10px 30px rgba(184, 134, 11, 0.3));
  will-change: opacity, transform;
}

/* Третья карта - активное состояние */
.tarot-card-testimonials.active {
  /* left и top устанавливаются через JavaScript один раз */
  opacity: 0.3;
  transform: rotate(-8deg) scale(1); /* Финальный поворот */
}

/* Анимация левитации для третьей карты */
@keyframes cardFloatTestimonials {
  0%, 100% {
    transform: translateY(0px) rotate(-8deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(-10deg) scale(1.01);
  }
}

/* Класс для активации левитации третьей карты */
.tarot-card-testimonials.levitating {
  animation: cardFloatTestimonials 5s ease-in-out infinite;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ==================== ЧЕТВЕРТАЯ КАРТА (LOVERS) ==================== */

/* Четвертая карта - начальное состояние */
.tarot-card-lovers {
  background-image: url('../assets/images/lovers.webp');
  right: -20vw; /* За пределами экрана СПРАВА */
  left: auto;
  opacity: 0;
  transform: rotate(12deg) scale(0.8); /* Зеркальный угол */
  filter: drop-shadow(0 10px 30px rgba(184, 134, 11, 0.3));
  will-change: opacity, transform;
}

/* Четвертая карта - активное состояние */
.tarot-card-lovers.active {
  /* right и top устанавливаются через JavaScript один раз */
  opacity: 0.3;
  transform: rotate(8deg) scale(1); /* Финальный поворот */
}

/* Анимация левитации для четвертой карты */
@keyframes cardFloatLovers {
  0%, 100% {
    transform: translateY(0px) rotate(8deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(10deg) scale(1.01);
  }
}

/* Класс для активации левитации четвертой карты */
.tarot-card-lovers.levitating {
  animation: cardFloatLovers 5s ease-in-out infinite;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ==================== ПЯТАЯ КАРТА (CONTACT LEFT - EMPRESS) ==================== */

/* Левая карта контакта - начальное состояние */
.tarot-card-contact-left {
  background-image: url('../assets/images/empress.webp');
  /* Позиция устанавливается через JavaScript относительно #contact-title */
  left: -20vw; /* За пределами экрана слева */
  opacity: 0;
  transform: rotate(-15deg) scale(0.8);
  filter: drop-shadow(0 10px 30px rgba(184, 134, 11, 0.3));
  will-change: opacity, transform;
}

/* Левая карта контакта - активное состояние */
.tarot-card-contact-left.active {
  /* left и top устанавливаются через JavaScript один раз */
  opacity: 0.3;
  transform: rotate(-10deg) scale(1);
}

/* Анимация левитации для левой карты контакта */
@keyframes cardFloatContactLeft {
  0%, 100% {
    transform: translateY(0px) rotate(-10deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(-12deg) scale(1.02);
  }
}

/* Класс для активации левитации левой карты контакта */
.tarot-card-contact-left.levitating {
  animation: cardFloatContactLeft 4s ease-in-out infinite;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ==================== ШЕСТАЯ КАРТА (CONTACT RIGHT - EMPEROR) ==================== */

/* Правая карта контакта - начальное состояние */
.tarot-card-contact-right {
  background-image: url('../assets/images/Emperor.webp');
  /* Позиция устанавливается через JavaScript относительно #contact-title */
  right: -20vw; /* За пределами экрана справа */
  left: auto;
  opacity: 0;
  transform: rotate(15deg) scale(0.8); /* Зеркальный наклон */
  filter: drop-shadow(0 10px 30px rgba(184, 134, 11, 0.3));
  will-change: opacity, transform;
}

/* Правая карта контакта - активное состояние */
.tarot-card-contact-right.active {
  /* right и top устанавливаются через JavaScript один раз */
  opacity: 0.3;
  transform: rotate(10deg) scale(1); /* Зеркальный поворот */
}

/* Зеркальная анимация левитации для правой карты контакта */
@keyframes cardFloatContactRight {
  0%, 100% {
    transform: translateY(0px) rotate(10deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(12deg) scale(1.02);
  }
}

/* Класс для активации левитации правой карты контакта */
.tarot-card-contact-right.levitating {
  animation: cardFloatContactRight 4s ease-in-out infinite;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Адаптивный скейлинг для разных разрешений */

/* Очень большие экраны (>1920px) - полный размер */
@media (min-width: 1921px) {
  .tarot-card {
    width: 196px;
    height: 336px;
  }
}

/* Большие экраны (1440px - 1920px) - полный размер */
@media (min-width: 1440px) and (max-width: 1920px) {
  .tarot-card {
    width: 196px;
    height: 336px;
  }
}

/* Средние экраны (1200px - 1439px) - уменьшение на 10% */
@media (min-width: 1200px) and (max-width: 1439px) {
  .tarot-card {
    width: 176px; /* 196 × 0.9 */
    height: 302px; /* 336 × 0.9 */
  }
}

/* Маленькие десктопы (1024px - 1199px) - уменьшение на 20% */
@media (min-width: 1024px) and (max-width: 1199px) {
  .tarot-card {
    width: 157px; /* 196 × 0.8 */
    height: 269px; /* 336 × 0.8 */
  }
}

/* Планшеты ландшафт (769px - 1023px) - уменьшение на 30% */
@media (min-width: 769px) and (max-width: 1023px) {
  .tarot-card {
    width: 137px; /* 196 × 0.7 */
    height: 235px; /* 336 × 0.7 */
  }
}

/* Мобильные устройства — карты как оверлей под UI, над фоном */
@media (max-width: 768px) {
  .tarot-canvas {
    display: block;
    position: absolute; /* под интерфейсом, над фоном */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* выше контента, ниже header */
    pointer-events: none;
    /* overflow: hidden убран - вызывал клиппинг карточек таро в секции contact */
    /* overflow: visible для предотвращения обрезки карточек */
    overflow: visible;
    max-width: 100vw;
    width: 100vw;
    /* Карты могут выходить за границы - это нормально */
  }

  .tarot-card {
    position: absolute;
    aspect-ratio: 196 / 336;
    width: clamp(120px, 28vw, 160px);
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.35));
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); /* Синхронизировано с desktop */
    will-change: opacity, transform;
  }

  /* Новые карты контакта на мобильных */
  .tarot-card-contact-left,
  .tarot-card-contact-right {
    width: clamp(120px, 28vw, 160px);
    height: auto;
    aspect-ratio: 196 / 336;
    filter: drop-shadow(0 8px 20px rgba(184, 134, 11, 0.35));
  }
}