/* ===== https.php 跳转页样式（与首页共享 index.css 的设计变量与主题体系） =====
 * 主题变量（--bg / --text / --bg-card 等）、.brand、.theme-toggle、.btn、响应式断点、
 * prefers-reduced-motion 均由 css/index.css 提供；本文件只编写跳转页特有部分。
 */

/* 跳转页专属布局：全屏居中（index.css 默认是纵向流式） */
body.https-page {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
}

/* 背景氛围光 */
body.https-page::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(2,123,255,0.09), transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: bgPulse 4s ease-in-out infinite alternate;
}
body[data-theme="light"].https-page::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(2,123,255,0.06), transparent 70%);
}
@keyframes bgPulse { to { opacity: 0.6; } }

/* ===== 卡片，复用与首页相同的玻璃态质感与弹性入场 ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  animation: cardIn 0.8s var(--elastic-out) 0.2s forwards;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0) scale(1); } }

.card h1 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}
.card h1 .state-ok { color: #2ecc71; }
.card h1 .state-danger { color: #d9534f; }
.card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 24px;
}

/* 图标圆 */
.icon-wrap {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: iconPop 0.6s var(--elastic-out) 0.5s both;
}
.icon-wrap.icon-ok { background: rgba(46,204,113,0.12); }
.icon-wrap.icon-danger { background: rgba(217,83,79,0.12); animation-name: iconShake; }
@keyframes iconPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes iconShake {
  0% { transform: scale(0) rotate(0); }
  40% { transform: scale(1.1) rotate(-8deg); }
  60% { transform: scale(1) rotate(5deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.icon-wrap img { width: 32px; height: 32px; }
.icon-wrap.icon-danger img { width: 30px; height: 30px; }

/* 倒计时进度条 */
.progress-wrap {
  width: 100%; height: 4px;
  background: var(--bg-card-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
.progress-bar {
  height: 100%; width: 100%;
  border-radius: 4px;
  transform-origin: left;
  animation: progressShrink 3s linear forwards;
}
.progress-ok .progress-bar { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.progress-danger .progress-bar { background: linear-gradient(90deg, #d9534f, #c0392b); animation-duration: 1s; }
@keyframes progressShrink { to { transform: scaleX(0); } }

/* 跳转提示文字 */
.redirect-hint {
  color: var(--text-faint);
  font-size: 13px;
  animation: fadeIn 0.6s ease 0.8s both;
}
.redirect-hint + .btn, .btn + .redirect-hint { margin-top: 12px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== 跳转退出动画 + 金色星星 ===== */
.flash-star {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
}
.flash-star.active { opacity: 1; }
.flash-star .star-body {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%,-50%) scale(0);
  animation: starFall 1s var(--elastic-soft) forwards;
}
.flash-star .star-body img {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.6));
}
@keyframes starFall {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0deg); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.4) rotate(25deg); }
  35%  { transform: translate(-50%,15px) scale(1.1) rotate(-8deg); }
  55%  { transform: translate(-50%,55px) scale(0.9) rotate(3deg); }
  75%  { opacity: 1; transform: translate(-50%,80px) scale(0.7) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,110px) scale(0.2) rotate(0deg); }
}
.flash-star .burst-glow {
  position: fixed; top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,215,0,0.45), rgba(255,255,255,0.25), transparent 70%);
  animation: burstExpand 0.9s ease-out 0.5s forwards;
}
@keyframes burstExpand {
  0%   { width: 0; height: 0; opacity: 0; }
  25%  { opacity: 1; width: 150px; height: 150px; }
  50%  { width: 400px; height: 400px; opacity: 0.7; }
  100% { width: 2500px; height: 2500px; opacity: 0; }
}
body.flash .card { animation: cardFadeOut 0.8s ease-in forwards; }
@keyframes cardFadeOut { to { opacity: 0; transform: scale(0.92) translateY(-10px); } }
body.flash #cursorGlow, body.flash .focus-veil { transition: opacity 0.3s ease; opacity: 0 !important; }

/* ===== 装饰粒子（和首页同质感的小浮点，不使用 Emoji / 文本符号） ===== */
.particle {
  position: fixed;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(2, 123, 255, 0.35);
  z-index: 0;
  pointer-events: none;
  animation: particleFloat 6s ease-in-out infinite;
}
body[data-theme="light"] .particle { background: rgba(2, 123, 255, 0.2); }
.particle.p-danger { background: rgba(217, 83, 79, 0.35); }
body[data-theme="light"] .particle.p-danger { background: rgba(217, 83, 79, 0.25); }
.particle:nth-of-type(1) { top: 15%; left: 10%; animation-delay: 0s; width: 2px; height: 2px; }
.particle:nth-of-type(2) { top: 70%; right: 15%; animation-delay: 1.5s; width: 4px; height: 4px; }
.particle:nth-of-type(3) { bottom: 20%; left: 20%; animation-delay: 3s; }
.particle:nth-of-type(4) { top: 40%; right: 30%; animation-delay: 4.5s; width: 2px; height: 2px; }
@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  50%      { transform: translateY(-16px) scale(1.4); opacity: 0.6; }
}

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  .card { padding: 28px 20px; margin: 10px; }
  .card h1 { font-size: 20px; }
  .card p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.https-page::before, .particle, .icon-wrap { animation: none !important; }
  .card { transition-duration: 0.15s; }
}