/* === Global Styles === */
body {
  margin: 0;
  overflow: hidden;
  background: black;
}

/* === Frame Container === */
.frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out; /* Fade time */
  pointer-events: none;
}

.frame.visible {
  opacity: 1;
  pointer-events: auto;
}

/* === Background Image Styling === */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Use 'cover' if you want full-screen cropping */
  z-index: 0;
}

/* === Clickable Ticket Area === */
#ticket {
  position: absolute;
  width: 140px;
  height: 90px;
  bottom: 40px;
  left: 110px;
  background: transparent;
  cursor: url('cursor-ticket.png'), pointer;
  z-index: 10;
}

/* === Fade Animation === */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}