/* style.css - Designul si logica de animatie 3D */
body {
  background-color: black;
  margin: 0;
  overflow: hidden;
  /* Previne zoom-ul accidental la dublu tap pe iOS */
  touch-action: manipulation; 
}

#app-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  position: absolute;
  opacity: 0; /* Ascuns pana cand carligul coboara */
  transition: opacity 0.3s ease;
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  position: relative;
}

.card-inner.flipped {
  /* Rotatia care reveleaza cartea */
  transform: rotateY(180deg); 
}

.card-back, .card-front {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-front {
  /* Fata cartii este mereu intoarsa initial */
  transform: rotateY(180deg); 
}