/* =========================================
   PREMIUM BACK TO TOP BUTTON (SELF-CONTAINED)
========================================= */

#bttn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  position: fixed;
  bottom: 30px;
  right: 14px;

  background: #af904f;
  border-radius: 999px;

  text-decoration: none;
  z-index: 1000;

  opacity: 0;
  visibility: hidden;

  /* PREMIUM SHADOW */
  box-shadow:
    0 10px 25px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);

  /* SMOOTH TRANSITIONS */
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.5s ease,
    visibility 0.5s ease;
}

/* =========================================
   CSS ARROW (NO ICON NEEDED)
========================================= */

#bttn::before {
  content: "";
  width: 12px;
  height: 12px;

  border-left: 3px solid #000;
  border-top: 3px solid #000;

  transform: rotate(45deg); /* creates arrow pointing up */

  transition: transform 0.3s ease;
}

/* =========================================
   HOVER STATE
========================================= */

#bttn:hover {
  cursor: pointer;
  background-color: #c6a75c;

  transform: translateY(-4px) scale(1.05);

  box-shadow:
    0 14px 30px rgba(0,0,0,0.35),
    0 0 12px rgba(175,144,79,0.6);
}

/* Arrow lifts slightly */
#bttn:hover::before {
  transform: translateY(-3px) rotate(45deg);
}

/* =========================================
   ACTIVE
========================================= */

#bttn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 6px 15px rgba(0,0,0,0.25);
}

/* =========================================
   VISIBILITY
========================================= */

#bttn.show {
  opacity: 1;
  visibility: visible;
}

/* =========================================
   SMOOTH SCROLL
========================================= */

html,
body {
  scroll-behavior: smooth;
}

/* =========================================
   MOBILE
========================================= */

@media (min-width: 500px) {
  #bttn {
    margin: 10px;
  }
}