/* conversacion-deck.css */

/* --------------------------------------------------
   0) Сховати контейнер із deck-даними (не показувати)
-------------------------------------------------- */
.deck-container {
  display: none !important;
}

/* --------------------------------------------------
   1) При друці ховаємо всі .no-print
-------------------------------------------------- */
@media print {
  .no-print {
    display: none !important;
  }
}

/* --------------------------------------------------
   2) Header: заголовок по центру, іконка праворуч
-------------------------------------------------- */
.conversacion-header {
  position: relative;
  margin-bottom: 1rem;
}
.conversacion-title {
  margin: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
.deck-icon {
  position: absolute;
  top: 0.25rem;
  right: 0;
  width: 40px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.deck-icon:hover {
  transform: scale(1.1) rotate(5deg);
}

/* --------------------------------------------------
   3) Контролери / кнопки друку
-------------------------------------------------- */
.controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.print-buttons {
  display: flex;
  gap: 1rem;
}
.print-buttons button {
  background-color: #8b1e3f;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

/* --------------------------------------------------
   4) Overlay (темний фон за карткою)
-------------------------------------------------- */
.deck-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}
.deck-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------
   5) Витягнута картка: контейнер та 3D-фліп
-------------------------------------------------- */
.drawn-card {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
  z-index: 999;
}
.drawn-card.active {
  display: block;
}
.drawn-card .card-inner {
  width: 300px;
  aspect-ratio: 4/3;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.drawn-card .card-inner.flipped {
  transform: rotateY(180deg);
}

/* --------------------------------------------------
   6) Обидві сторони картки
-------------------------------------------------- */
.card-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
}

/* Тильна сторона (бек) */
.card-back {
  background-image: url('/wp-content/themes/astra-child/images/card-back.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.card-back img,
.card-back p {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.card-back.show-content img,
.card-back.show-content p {
  opacity: 1;
}

/* Лицьова сторона (фронт) */
.card-front {
  background-image: url('/wp-content/themes/astra-child/images/card-front-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #fff;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.card-front img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}

/* --------------------------------------------------
   7) CSS-фоллбек для тасування
-------------------------------------------------- */
@keyframes fancyShuffle {
  0%   { transform: perspective(400px) translate(-8px,5px)   rotate(-5deg) skewX(2deg); }
  25%  { transform: perspective(400px) translate(10px,-5px)  rotate(8deg)  skewX(-3deg); }
  50%  { transform: perspective(400px) translate(-6px,3px)   rotate(-4deg) skewX(1deg); }
  75%  { transform: perspective(400px) translate(8px,-4px)   rotate(6deg)  skewX(-2deg); }
  100% { transform: perspective(400px) translate(0,0)       rotate(0)     skewX(0); }
}
.deck-icon.shuffling,
.drawn-card .card-inner.shuffling {
  animation: fancyShuffle 0.6s ease-in-out;
}

/* --------------------------------------------------
   8) Клони картки для GSAP
-------------------------------------------------- */
.clone {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 997;
  pointer-events: none;
}
.clone .card-inner {
  transform: none !important;
}