:root {
  --color-main: rgba(234, 223, 201, 0.8); 
}

/* 啟動 CSS 可動畫變數 */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* 旋轉動畫 */
@keyframes rotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* 背景設定 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #F6F1ED;
  font-family: "GenWanMin2 TW", serif;
}

/* 置中容器 */
.container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* 按鈕主體 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: none;
  background: none;
  position: relative;
  padding: 2.5px;
  text-decoration: none;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
}

/* 外圈旋轉光暈（實體） */
.btn::after,
.btn::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 100px;
  /* 只保留在外圈的旋轉光 */
  background-image: conic-gradient(
    from var(--angle) at 50% 50%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 30%,
    rgba(176, 148, 78,1) 50%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0) 100%
  );
  animation: rotate 2s infinite linear;
  pointer-events: none;
}

/* 柔光外圈 */
.btn::before {
  filter: blur(18px);
}

/* 內層按鈕  */
.btnInner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 40px;
  border-radius: 100px;
  background: rgba(234, 223, 201, 0.8);
  color: #C3963B;
  font-size: 36px;
  letter-spacing: 2px;
  backdrop-filter: blur(20px);
  transition: all .2s ease-out;
}

/* 滑過變亮 */
.btn:hover .btnInner {
  background:rgba(204, 188, 152, 0.8);
  color: #342500;
}

/* 按下效果 */
.btn:active {
  transform: scale(0.96);
}

.btn:active .btnInner {
  background:rgba(204, 188, 152, 0.8);
  color: #342500;
}