/* ============================================================
   纸感按钮：奶油纸边、鼠尾草渐变、指针柔光、3D 按压。
   参考 Uiverse 的 hover glow / magnetic / 3D press 思路，
   用 CSS 变量 + 一个很小的指针助手实现，保持零依赖与离线可开。
   ============================================================ */

:root {
  --btn-spring: cubic-bezier(.34, 1.56, .64, 1);
}

.btn,
.icon-btn,
.seed-card,
.destination-card {
  --mxp: 50%;
  --myp: 50%;
  --mag-x: 0px;
  --mag-y: 0px;
  --lift: 0px;
  isolation: isolate;
}

/* 指针经过时的一小团柔光，不覆盖文字 */
.btn::before,
.icon-btn::before,
.seed-card::before,
.destination-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  background: radial-gradient(120px circle at var(--mxp) var(--myp),
    rgba(255, 255, 255, .26), transparent 66%);
}

.btn:hover::before,
.icon-btn:hover::before,
.seed-card:hover::before,
.destination-card:hover::before {
  opacity: 1;
}

/* ---------- 通用按钮 ---------- */
.btn {
  --depth: 3px;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--lift)), 0);
  transition:
    transform .26s var(--btn-spring),
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    --lift: -1px;
  }
}

.btn:active {
  --lift: 2px;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--lift)), 0) scale(.985);
}

.btn:disabled {
  opacity: .42;
  box-shadow: none !important;
  transform: none !important;
  cursor: default;
}

/* 主按钮：鼠尾草渐变 + 一条纸边厚度 + 指针扫光 */
.btn.primary {
  --depth: 4px;
  color: #FFFDF6;
  border: 1px solid #61774F;
  background: linear-gradient(180deg, #7A9067 0%, #6B8159 48%, #5F754E 100%);
  box-shadow:
    0 var(--depth) 0 #4F6444,
    0 calc(var(--depth) + 5px) 16px rgba(88, 122, 73, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  text-shadow: 0 1px 2px rgba(35, 48, 30, .22);
}

.btn.primary::before {
  background: radial-gradient(130px circle at var(--mxp) var(--myp),
    rgba(255, 255, 255, .24), transparent 64%);
}

.btn.primary::after {
  content: '';
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: 0;
  width: 34%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: translateX(-160%) skewX(-18deg);
  transition: transform .62s var(--m-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.btn.primary:hover {
  --lift: -2px;
  --depth: 6px;
  background: linear-gradient(180deg, #82986F 0%, #738961 48%, #677D56 100%);
  box-shadow:
    0 6px 0 #4F6444,
    0 16px 26px rgba(88, 122, 73, .26),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.btn.primary:hover::after {
  transform: translateX(360%) skewX(-18deg);
}

.btn.primary:active {
  --lift: 2px;
  --depth: 1px;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--lift)), 0) scale(1.012, .978);
  box-shadow:
    0 1px 0 #4F6444,
    0 4px 8px rgba(88, 122, 73, .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* 次按钮：像一张压在现场的奶油纸 */
.btn.ghost {
  --depth: 3px;
  color: #4B5548;
  border: 1.5px solid #DCCFB6;
  background: linear-gradient(180deg, #FFFEF9 0%, #F8F3E7 100%);
  box-shadow:
    0 var(--depth) 0 #E4D8C0,
    0 calc(var(--depth) + 4px) 12px rgba(120, 96, 60, .08),
    inset 0 1px 0 #FFF;
}

.btn.ghost::before {
  background: radial-gradient(120px circle at var(--mxp) var(--myp),
    rgba(190, 208, 170, .32), transparent 66%);
}

.btn.ghost:hover {
  --lift: -1px;
  --depth: 4px;
  color: #3F4A3A;
  border-color: #B6C5A2;
  background: linear-gradient(180deg, #FFFEF9 0%, #F5F1E3 100%);
  box-shadow:
    0 4px 0 #D8CCB4,
    0 8px 18px rgba(120, 96, 60, .10),
    inset 0 1px 0 #FFF;
}

.btn.ghost:active {
  --lift: 2px;
  --depth: 1px;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--lift)), 0) scale(.99);
  box-shadow:
    0 1px 0 #DED2B9,
    0 2px 6px rgba(120, 96, 60, .08),
    inset 0 1px 0 #FFF;
}

.btn.small {
  --depth: 3px;
  border-radius: 12px;
}

/* 危险操作：保留一点温度，不要变成系统警告框 */
.btn.danger {
  color: #A54A43;
  border-color: #E0BDB8;
  background: linear-gradient(180deg, #FFF9F6 0%, #FBF0ED 100%);
  box-shadow:
    0 3px 0 #E7CFC9,
    0 6px 12px rgba(183, 76, 70, .08),
    inset 0 1px 0 #FFF;
}

.btn.danger:hover {
  --depth: 4px;
  border-color: #D4A49D;
  background: linear-gradient(180deg, #FFF9F6 0%, #F9E9E5 100%);
}

.btn.danger-solid {
  color: #FFF;
  border: 1px solid #9E3F3A;
  background: linear-gradient(180deg, #C15B54 0%, #AC4A44 100%);
  box-shadow:
    0 4px 0 #7E3330,
    0 10px 18px rgba(183, 76, 70, .22),
    inset 0 1px 0 rgba(255, 255, 255, .26);
  text-shadow: 0 1px 1px rgba(80, 30, 28, .2);
}

.btn.danger-solid:hover {
  --depth: 6px;
  background: linear-gradient(180deg, #C9635B 0%, #B34E48 100%);
}

/* 出发按钮的箭头稍微晚一点跟上。
   注意：装饰化之后箭头由 .button-orbit 承担，这里只作用于 label 内的直接 span。
   原写法 `.btn.primary span`（优先级 0,2,1）会盖掉 `.motion-ripple` 的
   position:absolute，导致按下的涟漪层变成普通布局元素，把按钮撑成整块绿色。 */
.btn.primary > .button-ink > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: transform .3s var(--m-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.btn.primary:hover > .button-ink > span {
  transform: translate(3px, -3px);
}

.btn.primary:active > .button-ink > span {
  transform: translate(1px, -1px);
}

/* ---------- 图标按钮 ---------- */
.icon-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid #E0E4D3;
  border-radius: 13px;
  background: linear-gradient(180deg, #FFFEF9 0%, #F7F3E7 100%);
  box-shadow:
    0 3px 0 #E2D8C3,
    0 6px 12px rgba(120, 96, 60, .08),
    inset 0 1px 0 #FFF;
  transition:
    transform .24s var(--btn-spring),
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.icon-btn:hover {
  transform: translateY(-2px);
  border-color: #C7D2B6;
  background: linear-gradient(180deg, #FFFEF9 0%, #F4F0E2 100%);
  box-shadow:
    0 5px 0 #DDD3BE,
    0 10px 18px rgba(120, 96, 60, .10),
    inset 0 1px 0 #FFF;
}

.icon-btn:active {
  transform: translateY(2px) scale(.96);
  box-shadow:
    0 1px 0 #DDD3BE,
    0 3px 6px rgba(120, 96, 60, .08),
    inset 0 1px 0 #FFF;
}

.icon-btn.ghost {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

.icon-btn .chev {
  transition: transform .28s var(--m-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.icon-btn:hover .chev {
  transform: rotate(45deg) translate(-2px, 2px);
}

#btn-help {
  transition: transform .24s var(--btn-spring), box-shadow .22s ease, background .22s ease;
}

#btn-help:hover {
  transform: translateY(-2px) rotate(3deg);
}

/* ---------- 种子卡 ---------- */
.seed-card {
  --depth: 3px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFEF8 0%, #FBF7EC 100%);
  box-shadow:
    0 var(--depth) 0 #EAE0CB,
    0 6px 12px rgba(120, 96, 60, .07),
    inset 0 1px 0 #FFF;
  transition:
    transform .26s var(--btn-spring),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
  transform: translateY(var(--lift));
}

.seed-card::before {
  background: radial-gradient(90px circle at var(--mxp) var(--myp),
    rgba(190, 208, 170, .34), transparent 66%);
}

.seed-card:hover {
  --lift: -2px;
  --depth: 4px;
  border-color: #C7D3B4;
  box-shadow:
    0 4px 0 #E2D8C3,
    0 10px 18px rgba(120, 96, 60, .10),
    inset 0 1px 0 #FFF;
}

.seed-card:active {
  --lift: 2px;
  --depth: 1px;
  transform: translateY(2px) scale(.99);
  box-shadow:
    0 1px 0 #E4DAC5,
    0 3px 6px rgba(120, 96, 60, .08),
    inset 0 1px 0 #FFF;
}

.seed-card.on {
  --lift: -3px;
  --depth: 4px;
  transform: translateY(var(--lift));
  background: linear-gradient(180deg, #F4F8EC 0%, #EDF3E1 100%);
  border-color: #94A97E;
  box-shadow:
    0 4px 0 #CBD9B8,
    0 10px 18px rgba(88, 122, 73, .12),
    inset 0 1px 0 #FFF;
}

.seed-card.on:hover {
  --lift: -4px;
  --depth: 5px;
}

.seed-card.on:active {
  --lift: 2px;
  --depth: 1px;
  transform: translateY(2px) scale(.99);
  box-shadow:
    0 1px 0 #D4E0C3,
    0 3px 6px rgba(88, 122, 73, .08),
    inset 0 1px 0 #FFF;
}

.seed-card.on::after {
  content: '✓';
  position: absolute;
  top: 7px;
  right: 8px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: #FFFDF6;
  background: #8B9F79;
  box-shadow: 0 2px 4px rgba(88, 122, 73, .22);
  animation: seed-check .36s var(--btn-spring) both;
}

@keyframes seed-check {
  from { opacity: 0; transform: scale(.4) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.card-art {
  transition: transform .3s var(--m-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.seed-card:hover .card-art {
  transform: translateY(-2px) scale(1.035);
}

.seed-card.on .card-art {
  transform: translateY(-1px) scale(1.02);
}

/* ---------- 导航链接 ---------- */
.link {
  position: relative;
  text-decoration: none;
  transition: color .22s ease;
}

.link::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: #A8B795;
  transform: scaleX(.32);
  transform-origin: left center;
  opacity: .45;
  transition: transform .3s var(--m-ease-out, cubic-bezier(.22, 1, .36, 1)), opacity .22s ease;
}

.link:hover {
  color: #5E7350;
}

.link:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* 品牌花在 hover 时轻轻转一下 */
.brand-flower {
  display: inline-block;
  transition: transform .45s var(--btn-spring);
}

.brand:hover .brand-flower {
  transform: rotate(18deg) scale(1.06);
}

/* ---------- 开关 ---------- */
.switch {
  background: linear-gradient(180deg, #D8CEBA 0%, #E2D8C6 100%);
  box-shadow: inset 0 1px 3px rgba(90, 74, 48, .14), 0 1px 0 #FFF;
}

.switch::after {
  transition: transform .3s var(--btn-spring), box-shadow .22s ease;
}

.row-switch:hover .switch::after {
  box-shadow: 0 2px 6px rgba(90, 74, 48, .26);
}

.row-switch input:checked + .switch {
  background: linear-gradient(180deg, #7F956C 0%, #71885F 100%);
  box-shadow: inset 0 1px 2px rgba(55, 72, 44, .18), 0 1px 0 rgba(255, 255, 255, .5);
}

/* 目的地卡的指针柔光；卡本身的 3D 倾斜在 app.js 里 */
.destination-card::before {
  background: radial-gradient(190px circle at var(--mxp) var(--myp),
    rgba(255, 255, 255, .30), transparent 66%);
}

.destination-card {
  isolation: isolate;
}

/* ---------- 低动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-btn,
  .seed-card,
  .card-art,
  .switch::after {
    transition: none !important;
  }
}