/* ================================
   Back to Top button styling
   ================================ */

/* Default hidden state */
#backToTopBtn {
  position: fixed;                    /* Stay fixed on screen */
  bottom: 20px;                       /* 20px from the bottom */
  right: 20px;                        /* 20px from the right */
  width: 48px;                        /* Adjust to match PNG dimensions */
  height: 48px;                       /* Adjust to match PNG dimensions */
  background: transparent url('/images/back-to-top.png') no-repeat center/contain;
  border: none;                       /* Remove default border */
  outline: none;                      /* Remove focus outline */
  cursor: pointer;                    /* Pointer cursor on hover */
  opacity: 0;                         /* Start fully transparent */
  transform: scale(0.9);              /* Slightly smaller by default */
  pointer-events: none;              /* Prevent interaction when invisible */
  transition:
    opacity 0.6s ease-in-out,
    transform 0.6s ease-in-out;
  z-index: 999;                       /* Sit above most elements */
}

/* Show state: visible and interactive */
#backToTopBtn.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Inactive state: still visible, just more translucent */
#backToTopBtn.inactive {
  opacity: 0.2;
}

/* Fully hidden state for scroll position at top */
#backToTopBtn.hidden {
  display: none;
}

/* Hover and focus styles for interactivity */
#backToTopBtn:hover,
#backToTopBtn:focus {
  opacity: 1;
  transform: scale(1.1);
}

/* Pulse animation when the button reappears */
@keyframes gentle-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#backToTopBtn.pulse {
  animation: gentle-pulse 0.6s ease-in-out;
}

/* Optional: Dark mode support */
@media (prefers-color-scheme: dark) {
  #backToTopBtn {
    border: 1px solid #888;
    background-color: rgba(255,255,255,0.1);
  }

  #backToTopBtn:hover {
    border-color: #aad3ff;
  }
}