@charset "utf-8";
/* CSS Document */

/* ปรับสีและตำแหน่งได้ที่นี่ */
.btt{
  --btt-c: #00aeef;   /* Cyan */
  --btt-m: #ec008c;   /* Magenta */
  --btt-y: #fff200;   /* Yellow */
  --btt-bg: #242424;  /* สีพื้นปุ่ม */
  --btt-ease: cubic-bezier(.2,.7,.2,1);

  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 900;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--btt-bg);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.8);

  /* ซ่อนอยู่จนกว่าจะเลื่อนลงมา */
  opacity: 0;
  transform: translateY(18px) scale(.8);
  pointer-events: none;
  transition: opacity .35s ease, transform .4s var(--btt-ease),
              background .3s ease, color .3s ease, box-shadow .3s ease;
}
.btt *{ box-sizing: border-box; }
.btt.is-show{ opacity: 1; transform: none; pointer-events: auto; }

/* วงแหวนแสดงความคืบหน้าการเลื่อนหน้า */
.btt-ring{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.btt-ring circle{ fill: none; stroke-width: 3; }
.btt-ring-bg{ stroke: rgba(255,255,255,.12); }
.btt-ring-fg{
  stroke: url(#btt-grad);
  stroke-linecap: round;
  stroke-dasharray: 131.95;      /* เส้นรอบวง = 2π × 21 */
  stroke-dashoffset: 131.95;
}
.btt-arrow{ position: relative; transition: transform .35s var(--btt-ease); }

/* Hover: ยกลอย + เงาซ้อนสี C M Y + ลูกศรกระดอน */
.btt.is-show:hover,
.btt:focus-visible{
  background: var(--btt-c);
  color: #191919;
  transform: translateY(-4px);
  box-shadow: 4px 4px 0 var(--btt-m), 8px 8px 0 var(--btt-y), 0 14px 28px -10px rgba(0,0,0,.8);
}
.btt:hover .btt-arrow{ animation: btt-up .7s var(--btt-ease) infinite alternate; }
@keyframes btt-up{ to{ transform: translateY(-4px); } }
.btt:focus-visible{ outline: 3px solid var(--btt-y); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .btt, .btt-arrow{ transition: none; }
  .btt:hover .btt-arrow{ animation: none; }
}

@media screen and (max-width: 670px){
	.btt{

  right: 27px;
	bottom: 25px;

}
}

/* จัดให้อยู่กึ่งกลาง */
.portfolio-btn-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 8%;
	margin-bottom: 3%;
	float: left;
	height: auto;
	font-family: "serithairegular";
}

/* ตัวปุ่มหลัก (ทรงแคปซูลขอบมนคมชัดแบบเดิม) */
.cmyk-btn-ripple {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 52px;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  background: transparent;
  border: none;
  border-radius: 60px; /* ขอบมนแคปซูลแบบเดิม */
  text-decoration: none;
  cursor: pointer;
  z-index: 1;
  animation: megaPulseFloat 3s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

/* กรอบสี CMYK คมชัดวิ่งวนรอบปุ่ม */
.cmyk-btn-ripple::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(90deg, #00A4E4, #E6007E, #FFF200, #00A4E4);
  background-size: 300% 300%;
  z-index: -2;
  border-radius: 63px;
  animation: cmykBorderGlow 4s linear infinite;
}

/* พื้นหลังด้านใน */
.cmyk-btn-ripple::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, #0d0d0d, #1f1f1f);
  border-radius: 57px;
  z-index: -1;
  transition: background 0.4s ease;
}

/* ------------------------------------------------ */
/* สร้างวงคลื่นน้ำกระเพื่อมออกจากขอบ (Water Ripple Effect) */
/* ------------------------------------------------ */
.ripple-ring {
  position: absolute;
  inset: -3px;
  border: 2px solid #E6007E; /* เส้นขอบคลื่นน้ำคมชัด (Magenta) */
  border-radius: 63px;
  z-index: -3;
  opacity: 0;
  pointer-events: none;
}

/* กำหนดอนิเมชั่นให้คลื่นกระเพื่อมเป็นจังหวะเหลื่อมกัน */
.ring1 {
  animation: waterRipple 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
  border-color: #00A4E4; /* คลื่นเส้นแรกสี Cyan */
}

.ring2 {
  animation: waterRipple 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 0.8s;
  border-color: #E6007E; /* คลื่นเส้นสองสี Magenta */
}

.ring3 {
  animation: waterRipple 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.6s;
  border-color: #FFF200; /* คลื่นเส้นสามสี Yellow */
}

/* ลูกเล่นตอนเอาเมาส์วาง (Hover) */
.cmyk-btn-ripple:hover {
  transform: translateY(-8px) scale(1.06);
}

.cmyk-btn-ripple:hover::after {
  background: linear-gradient(135deg, #00A4E4, #E6007E);
}

.cmyk-btn-ripple .btn-icon {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cmyk-btn-ripple:hover .btn-icon {
  transform: translateX(12px);
}

/* ------------------------------------------------ */
/* Keyframes Animations */
/* ------------------------------------------------ */

/* คีย์เฟรมวงคลื่นน้ำกระเพื่อมออกด้านนอก */
@keyframes waterRipple {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scaleX(1.25) scaleY(1.5); /* ขยายความกว้างและสูงออกไปเหมือนหยดน้ำกระทบ */
    opacity: 0;
  }
}

/* คีย์เฟรมปุ่มลอยขึ้น-ลง */
@keyframes megaPulseFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* คีย์เฟรมสีขอบวิ่งวน */
@keyframes cmykBorderGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}