* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fce4ec;
  background-image: url('assets/bg_roses.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hidden { display: none !important; }
.fade-out { animation: fadeOut 0.6s ease forwards; }
@keyframes fadeOut { to { opacity: 0; transform: scale(0.95); } }

#scene1 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
}

/* ناحیه کلیک روی دکمه عکس */
#gift-click-area {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 60px;
  cursor: pointer;
  z-index: 10;
  border-radius: 30px;
  background: rgba(255, 105, 180, 0.01);
  -webkit-tap-highlight-color: transparent;
}
#gift-click-area:hover,
#gift-click-area:active {
  background: rgba(255, 105, 180, 0.2);
}

/* صحنه دوم */
#scene2 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#rotate-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* صحنه سوم */
#scene3 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* موبایل - عمودی */
@media (max-width: 480px) {
  html, body {
    background-size: cover;
    background-position: center;
  }
  #gift-click-area {
    width: 180px;
    height: 50px;
    top: 78%;
  }
}

/* تبلت */
@media (min-width: 481px) and (max-width: 1024px) {
  #gift-click-area {
    width: 200px;
    height: 55px;
  }
}

/* دسکتاپ بزرگ */
@media (min-width: 1441px) {
  #gift-click-area {
    width: 250px;
    height: 70px;
  }
}

/* ارتفاع کم - موبایل افقی */
@media (max-height: 500px) and (orientation: landscape) {
  #gift-click-area {
    top: 70%;
    width: 160px;
    height: 45px;
  }
}