/* Path: assets/css/back-to-top.css
   Purpose: Styles for the back-to-top button (moved out of back-to-top.js) */

#back-to-top {
  position: fixed;
  right: 4vw;
  bottom: 140px;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  padding: 0; outline: none;
  cursor: pointer;

  background: #00CEB0;
  border: 2px solid #00dfbe;
  box-shadow: inset 0 0 6px 0 rgba(255, 255, 255, 0.4),
              inset 0 0 12px 0 rgba(0, 163, 138, 0.5);

  transform-origin: center;

  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;

  /* WHY will-change ถาวร + backface-visibility:
     ประกาศ will-change ถาวรทำให้ button อยู่บน compositor layer ตลอด
     ไม่ต้อง promote/demote ทุกครั้งที่ btt-shown ↔ btt-hidden สลับ
     ซึ่งจังหวะนั้นตรงกับ scroll พอดี ทำให้ ResizeObserver บน body fire
     แล้วไปกวน URE getBoundingClientRect() กลาง scroll = jank
     backface-visibility:hidden กัน repaint เมื่อ transform เปลี่ยน
     contain:layout style isolate button ออกจาก document layout */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style;

  transition:
    opacity 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 450ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    visibility 0s linear 450ms;

  z-index: 1100;
  user-select: none;
}

#back-to-top svg {
  display: block;
  pointer-events: none;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#back-to-top.btt-shown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1.0);
  transition-delay: 0s;
}

#back-to-top.btt-hidden {
  opacity: 0; pointer-events: none;
  transform: translateY(15px) scale(0.6);
}

#back-to-top:active {
  transform: translateY(0) scale(0.85);
  transition: transform 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  outline: none;
}

#back-to-top:active svg {
  transform: scale(0.9);
}

@media (max-width: 600px) {
  #back-to-top {
    right: 16px;
    bottom: 120px;
    width: 45px; height: 45px;
  }
  #back-to-top.btt-shown  { transform: translateY(0) scale(1.0); }
  #back-to-top.btt-hidden { transform: translateY(15px) scale(0.6); }
  #back-to-top:active     { transform: translateY(0) scale(0.85); }
}