/* ============================================================
   活动集合 · 潜水艇动画按钮
   移植自 "CSS3提交按钮动画特效"（www.jq22.com）
   原版用裸 button{} 全局选择器，此处已全部收敛到 .jz-boat-btn 作用域
   ============================================================ */

/* ---------- 解除外层裁切，让潜艇/水花能露出来并浮在最上层 ---------- */
.eyou_xs,
.inward {
  overflow: visible !important;
}
.jz-boat-wrap {
  position: relative;
  z-index: 60;
}

/* 容器：去掉原黄色“奖状条”本体，占位为缩放后的 190×70 */
.daka-bar.jz-boat-wrap {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  width: 190px;
  height: 70px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ---------- 按钮本体（内部 250×92，整体等比缩放 0.76 → 视觉 190×70） ---------- */
.jz-boat-btn {
  flex: 0 0 auto;
  transform: scale(0.76);
  transform-origin: center center;
  position: relative;
  display: block;
  margin: 0 auto;
  line-height: 65px;
  text-decoration: none;
  text-align: center;
  font-size: 32px;                     /* 字号调大 */
  font-family: 'Lato', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;
  /* 外缘美化：内部高光 + 一圈白色细边 + 柔和蓝色光晕（不是原来的黑色硬投影） */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
              0 0 0 2px rgba(255, 255, 255, .6),
              0 8px 18px rgba(142, 198, 230, .42);
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
  -webkit-transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
  color: #fff;
  background-color: #86CDEA;           /* 温馨浅蓝（再浅一档，偏柔和天青） */
  /* 悬停水波纹：两层柔和圆环，靠 background-size 从 0 涨大实现。
     用「背景」而不是伪元素，好处是背景一定被 border-radius 裁切，
     不会破坏上面为潜艇跃出而设的 overflow: visible */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0) 0 50%, rgba(255, 255, 255, .42) 66%, rgba(255, 255, 255, 0) 82%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 0 50%, rgba(255, 255, 255, .30) 66%, rgba(255, 255, 255, 0) 82%);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 0 0, 0 0;
  border-radius: 10px;
  border: none;
  outline: 0 none;
  width: 250px;
  height: 92px;
  overflow: hidden;
  cursor: pointer;
}

.jz-boat-btn:hover,
.jz-boat-btn:visited,
.jz-boat-btn:focus {
  color: #fff;
  text-decoration: none;
}

.jz-boat-btn:hover {
  transform: scale(.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
              0 0 0 2px rgba(255, 255, 255, .75),
              0 10px 22px rgba(142, 198, 230, .52);
  animation: jz-ripple 2.6s linear infinite;      /* 悬停时的水波纹 */
  -webkit-animation: jz-ripple 2.6s linear infinite;
}

/* 水波纹：两圈从中心不断扩散出去，超出按钮的部分被圆角裁掉，像水面涟漪 */
@keyframes jz-ripple {
  0%   { background-size: 24px 24px, 0 0; }
  55%  { background-size: 250px 250px, 120px 120px; }
  100% { background-size: 430px 430px, 300px 300px; }
}
@-webkit-keyframes jz-ripple {
  0%   { background-size: 24px 24px, 0 0; }
  55%  { background-size: 250px 250px, 120px 120px; }
  100% { background-size: 430px 430px, 300px 300px; }
}

/* 尊重系统的“减少动态效果”设置 */
@media (prefers-reduced-motion: reduce) {
  .jz-boat-btn:hover { animation: none; -webkit-animation: none; }
}

/* 按下回弹：缩小 → 松开时用带过冲的缓动弹回 */
.jz-boat-btn:active {
  transform: scale(.70);
  transition-duration: .07s, .07s;
  box-shadow: inset 0 2px 6px rgba(60, 110, 150, .3),
              0 0 0 2px rgba(255, 255, 255, .5),
              0 3px 8px rgba(142, 198, 230, .42);
}

/* 文案：垂直居中 + 向右靠中 */
.jz-boat-btn .jz-main-text {
  position: absolute;
  left: 96px;
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 1px 3px rgba(48, 98, 140, .55);
}

.jz-boat-btn .jz-submit {
  color: #efd959;
}

.jz-boat-btn .jz-sent-text {
  position: absolute;
  left: 24px;                 /* 靠左，避免和停在右侧的潜艇重合 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 29px;
  opacity: 0;
  text-shadow: 0 1px 3px rgba(48, 98, 140, .55);
}

.jz-boat-btn .jz-sub {
  float: left;
  padding: 0 0 0 10px;
  margin-top: 13px;                    /* 让潜艇在高一点点的按钮里垂直居中 */
  width: 65px;
  height: 65px;
}

.jz-boat-btn .jz-splash {
  float: left;
  margin-left: 30px;
  margin-top: -40px;
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  opacity: 0;
}

.jz-boat-btn .jz-splash-2 {
  float: right;
  margin-right: 30px;
  transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}

.jz-boat-btn .jz-submerge {
  position: absolute;
  top: 92px;
  border-radius: 0 0 10px 10px;
  left: 0;
  opacity: .7;
}

/* ============================================================
   动画时间轴（总 9s，一次播完）
   0%      正常
   25%     潜艇跃起（-90px，-40°）→ 左侧水花
   45%     落到右侧（+150px）     → 右侧水花
   45~80%  “出发啦！”显示，停留约 3 秒
   80~100% 潜艇跳回左侧复位        → 右侧离水花 / 左侧落水花
   ============================================================ */
.jz-boat-btn.active .jz-main-text {
  animation: jz-maintext 9s forwards;
  -webkit-animation: jz-maintext 9s forwards;
}

.jz-boat-btn.active .jz-sent-text {
  animation: jz-sent 9s forwards;
  -webkit-animation: jz-sent 9s forwards;
}

.jz-boat-btn.active .jz-sub {
  animation: jz-jump 9s forwards;
  -webkit-animation: jz-jump 9s forwards;
}

/* 左侧水花：只在“跃起”和“回来落水”时出现 */
.jz-boat-btn.active .jz-splash {
  animation: jz-splash-left 9s forwards;
  -webkit-animation: jz-splash-left 9s forwards;
}
/* 右侧水花：只在“落到右侧”和“从右侧跳回”时出现
   （必须放在上面那条规则之后，同优先级靠书写顺序覆盖） */
.jz-boat-btn.active .jz-splash-2 {
  animation: jz-splash-right 9s forwards;
  -webkit-animation: jz-splash-right 9s forwards;
}

.jz-boat-btn.active .jz-submerge {
  animation: jz-submerge 2s forwards;
  -webkit-animation: jz-submerge 2s forwards;
}

/* ---------- 关键帧（全部带 jz- 前缀，避免与全站同名冲突） ---------- */
@keyframes jz-jump {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  25%  { transform: translateY(-90px) translateX(45px) rotate(-40deg); }
  45%  { transform: translateY(0) translateX(150px) rotate(0deg); }
  80%  { transform: translateY(0) translateX(150px) rotate(0deg); }
  92%  { transform: translateY(-75px) translateX(70px) rotate(35deg); }
  100% { transform: translateY(0) translateX(0) rotate(0deg); }
}
@-webkit-keyframes jz-jump {
  0%   { -webkit-transform: translateY(0) translateX(0) rotate(0deg); }
  25%  { -webkit-transform: translateY(-90px) translateX(45px) rotate(-40deg); }
  45%  { -webkit-transform: translateY(0) translateX(150px) rotate(0deg); }
  80%  { -webkit-transform: translateY(0) translateX(150px) rotate(0deg); }
  92%  { -webkit-transform: translateY(-75px) translateX(70px) rotate(35deg); }
  100% { -webkit-transform: translateY(0) translateX(0) rotate(0deg); }
}

@keyframes jz-maintext {
  0%   { opacity: 1; }
  6%   { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes jz-maintext {
  0%   { opacity: 1; }
  6%   { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes jz-sent {
  0%, 45% { opacity: 0; }
  50%     { opacity: 1; }
  80%     { opacity: 1; }
  88%     { opacity: 0; }
  100%    { opacity: 0; }
}
@-webkit-keyframes jz-sent {
  0%, 45% { opacity: 0; }
  50%     { opacity: 1; }
  80%     { opacity: 1; }
  88%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* 左侧水花：跃起瞬间 + 回位落水瞬间（错开，不同时出现） */
@keyframes jz-splash-left {
  0%, 18% { opacity: 0; }
  25%     { opacity: 1; }
  34%     { opacity: 0; }
  92%     { opacity: 0; }
  98%     { opacity: 1; }
  100%    { opacity: 0; }
}
@-webkit-keyframes jz-splash-left {
  0%, 18% { opacity: 0; }
  25%     { opacity: 1; }
  34%     { opacity: 0; }
  92%     { opacity: 0; }
  98%     { opacity: 1; }
  100%    { opacity: 0; }
}

/* 右侧水花：落到右侧瞬间 + 从右侧跳回瞬间 */
@keyframes jz-splash-right {
  0%, 38% { opacity: 0; }
  45%     { opacity: 1; }
  54%     { opacity: 0; }
  76%     { opacity: 0; }
  82%     { opacity: 1; }
  90%     { opacity: 0; }
  100%    { opacity: 0; }
}
@-webkit-keyframes jz-splash-right {
  0%, 38% { opacity: 0; }
  45%     { opacity: 1; }
  54%     { opacity: 0; }
  76%     { opacity: 0; }
  82%     { opacity: 1; }
  90%     { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes jz-submerge {
  to { transform: translateY(-50px); }
}
@-webkit-keyframes jz-submerge {
  to { -webkit-transform: translateY(-50px); }
}

/* ---------- 宽屏：潜艇跃出水面（必须放开裁切，否则跳不出去） ---------- */
@media (min-width: 800px) {
  .jz-boat-btn { overflow: visible; }
  .jz-boat-btn .jz-submerge { display: none; }
}

/* ---------- 窄屏（<800px）：潜艇下潜模式，按钮内裁切 ---------- */
@media (max-width: 799px) {
  .jz-boat-btn { overflow: hidden; }
}

/* ============================================================
   黑暗模式：按钮变成黑色毛玻璃
   ============================================================ */
body.dark-mode .jz-boat-btn {
  background-color: rgba(26, 26, 32, .55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
              inset 0 0 0 1px rgba(255, 255, 255, .16),
              0 8px 22px rgba(0, 0, 0, .5) !important;
  color: #e9e9f0 !important;
}
body.dark-mode .jz-boat-btn:hover {
  background-color: rgba(40, 40, 48, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              inset 0 0 0 1px rgba(255, 255, 255, .24),
              0 10px 26px rgba(0, 0, 0, .6) !important;
}
body.dark-mode .jz-boat-btn:active {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6),
              inset 0 0 0 1px rgba(255, 255, 255, .14),
              0 3px 10px rgba(0, 0, 0, .5) !important;
}
body.dark-mode .jz-boat-btn .jz-main-text,
body.dark-mode .jz-boat-btn .jz-sent-text {
  color: #e9e9f0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
body.dark-mode .jz-boat-btn .jz-submit {
  color: #ffd75e;
}