/* 首頁功能卡片：色彩與動態效果集中管理 */
/* ==========================================================================
   01. 基本色彩主題：一般功能卡片
   ========================================================================== */

.card-red {
  background: linear-gradient(135deg, #e74c3c, #e63946) !important;
}
.card-green {
  background: linear-gradient(135deg, #27ae60, #229954) !important;
}
.card-indigo {
  background: linear-gradient(135deg, #4834d4, #130f40) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.card-yellow,
.card-gold {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
}
.card-light-blue {
  background: linear-gradient(135deg, #264285, #3498db) !important;
}
.card-orange,
.card-orange-light {
  background: linear-gradient(135deg, #e67e22, #d35400) !important;
}
.card-pink {
  background: linear-gradient(135deg, #ec407a, #e91e63) !important;
}
.card-teal {
  background: linear-gradient(135deg, #1abc9c, #16a085) !important;
}
.card-purple {
  background: linear-gradient(135deg, #af7ac5, #9b59b6) !important;
}
.card-cyan {
  background: linear-gradient(135deg, #00bcd4, #17a2b8) !important;
}
.card-coral {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53) !important;
}
.card-support {
  background: linear-gradient(135deg, #ff9a9e, #f6416c) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.card-gray-light {
  background: linear-gradient(
    135deg,
    rgba(180, 188, 199, 0.45),
    rgba(160, 170, 185, 0.35)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(6px);
}
.card-red,
.card-green,
.card-indigo,
.card-yellow,
.card-light-blue,
.card-orange,
.card-orange-light,
.card-pink,
.card-gold,
.card-teal,
.card-purple,
.card-cyan,
.card-coral,
.card-support,
.card-gray-light {
  color: #fff;
}
.card-red .app-label,
.card-green .app-label,
.card-indigo .app-label,
.card-yellow .app-label,
.card-light-blue .app-label,
.card-orange .app-label,
.card-orange-light .app-label,
.card-pink .app-label,
.card-gold .app-label,
.card-teal .app-label,
.card-purple .app-label,
.card-cyan .app-label,
.card-coral .app-label,
.card-support .app-label,
.card-gray-light .app-label {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.card-indigo:hover {
  box-shadow: 0 0 20px rgba(72, 52, 212, 0.4) !important;
}
/* ==========================================================================
   02. 友善連結：白底品牌卡片
   ========================================================================== */

.card-Association {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease;
}
.card-Association .app-label {
  color: #333 !important;
  font-weight: 700;
  text-shadow: none !important;
}
.card-Association img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) !important;
}
.card-Association:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}
/* ==========================================================================
   03. 潮間帶卡片：深海漸層與柔光
   ========================================================================== */

.card-tide {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a, #155e75 45%, #0f766e) !important;
  color: #fff;
}
.card-tide .app-label {
  color: #fff !important;
}
.card-tide::before {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  content: "";
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  filter: blur(8px);
}
/* ==========================================================================
   04. 活動行事曆：流動漸層動畫
   ========================================================================== */

.card-calendar {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    270deg,
    #240b36,
    #c31432,
    #7028e4,
    #00d2ff
  ) !important;
  background-size: 400% 400% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  animation: paperclip-flow 4s ease infinite !important;
}
.card-calendar .app-label {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-weight: 800;
}
@keyframes paperclip-flow {
  0%,
  100% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
/* ==========================================================================
   05. 緊急救護卡片：救護車與警示燈動畫
   ========================================================================== */

.card-red-dark {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #c0392b, #a93226) !important;
}
.card-red-dark .app-label {
  position: relative;
  z-index: 5;
  color: #fff !important;
}
.card-red-dark .icon-box i {
  display: inline-block;
  font-size: 1.8rem;
  animation: paperclip-ambulance 4s ease-in-out infinite;
}
.card-red-dark::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.3), transparent 70%);
  animation: paperclip-siren 0.5s infinite alternate;
}
@keyframes paperclip-ambulance {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-70px);
  }
  20%,
  70% {
    opacity: 1;
    transform: translateX(0);
  }
  85% {
    opacity: 0;
    transform: translateX(70px);
  }
}
@keyframes paperclip-siren {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.8;
  }
}
/* ==========================================================================
   06. 緊急求助卡片：脈衝光暈與電話圖示
   ========================================================================== */

.card-sos-call {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(135deg, #f5020a, #f91d51) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.sos-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4),
    transparent 70%
  );
  animation: paperclip-pulse 1.5s ease-in-out infinite;
}
.card-sos-call .app-label,
.card-sos-call .icon-box i {
  position: relative;
  z-index: 2;
  color: #fff !important;
}
.card-sos-call .app-label {
  font-weight: 800;
}
.card-sos-call .icon-box i {
  animation: paperclip-shake 0.5s infinite alternate;
}
@keyframes paperclip-pulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}
@keyframes paperclip-shake {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(8deg);
  }
}
/* ==========================================================================
   07. 星空與海象卡片：星點、海浪背景動畫
   ========================================================================== */

.star-card {
  position: relative;
  overflow: visible;
  background: linear-gradient(135deg, #2d3748, #1a202c) !important;
}
.sea-wave-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #3b9fd9, #2e7fb8) !important;
}
.star-card .app-label,
.star-card .icon-box,
.sea-wave-card .app-label,
.sea-wave-card .icon-box {
  position: relative;
  z-index: 2;
  color: #fff !important;
}
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 200%;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,50 Q300,20 600,50 T1200,50 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E")
    repeat-x 0 0/600px 80px;
  animation: paperclip-wave 8s linear infinite;
}
.wave-2 {
  bottom: 10px;
  animation-duration: 6s;
  animation-direction: reverse;
}
.wave-3 {
  bottom: 20px;
  animation-duration: 10s;
}
@keyframes paperclip-wave {
  to {
    background-position: 600px 0;
  }
}
.star {
  position: absolute;
  z-index: 10;
  width: 3px;
  height: 3px;
  opacity: 0.15;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffd700;
  animation: paperclip-twinkle 1.8s ease-in-out infinite;
}
@keyframes paperclip-twinkle {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 1;
  }
}
/* ==========================================================================
   08. 即時公車卡片：車體震動與煙霧動畫
   ========================================================================== */

.app-grid-enhanced .bus-live-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, #ffb83d, #f1871d) !important;
  box-shadow: 0 10px 22px rgba(190, 104, 18, 0.28);
}
.app-grid-enhanced .bus-live-card::before {
  position: absolute;
  right: -25%;
  bottom: -55%;
  left: -25%;
  z-index: 0;
  height: 58%;
  content: "";
  opacity: 0.15;
  background: #fff;
  border-radius: 50%;
}
.app-grid-enhanced .bus-live-card .icon-box,
.app-grid-enhanced .bus-live-card .app-label {
  position: relative;
  z-index: 3;
  color: #fff !important;
}
.app-grid-enhanced .bus-live-card .icon-box i {
  display: inline-block;
  transform-origin: center bottom;
  animation: paperclip-bus 0.42s ease-in-out infinite alternate;
}
@keyframes paperclip-bus {
  from {
    transform: translateY(1px) rotate(-0.7deg);
  }
  to {
    transform: translateY(-3px) rotate(0.7deg);
  }
}
/* ==========================================================================
   09. 空拍機禁航地圖：雷達與目標點動畫
   ========================================================================== */

#drone-map-card.card-drone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff !important;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(75, 194, 216, 0.16),
      transparent 38%
    ),
    linear-gradient(145deg, #123b4b, #0e5365) !important;
  border: 1px solid rgba(116, 216, 235, 0.32) !important;
  box-shadow:
    0 10px 22px rgba(3, 34, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#drone-map-card .drone-radar {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 0;
  width: 86px;
  height: 86px;
  pointer-events: none;
  border: 1px solid rgba(118, 224, 242, 0.2);
  border-radius: 50%;
  opacity: 0.85;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(
    circle,
    transparent 0 13px,
    rgba(108, 218, 237, 0.17) 14px 15px
  );
}
#drone-map-card .drone-radar::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  background: conic-gradient(
    transparent 0 292deg,
    rgba(117, 229, 246, 0.46) 359deg,
    transparent 360deg
  );
  animation: paperclip-radar 4.5s linear infinite;
}
#drone-map-card .radar-dot {
  position: absolute;
  z-index: 2;
  display: block;
  width: 5px;
  height: 5px;
  background: #ff665e;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  animation: paperclip-target 2.2s ease-in-out infinite;
}
#drone-map-card .dot-1 {
  top: 18%;
  left: 67%;
}
#drone-map-card .dot-2 {
  top: 38%;
  left: 19%;
  animation-delay: 0.6s;
}
#drone-map-card .dot-3 {
  top: 68%;
  left: 73%;
  animation-delay: 1.1s;
}
#drone-map-card .dot-4 {
  top: 76%;
  left: 39%;
  animation-delay: 1.6s;
}
#drone-map-card .dot-5 {
  top: 24%;
  left: 34%;
  animation-delay: 1.9s;
}
#drone-map-card .icon-box.drone {
  position: relative;
  z-index: 3;
  color: #fff !important;
  background: rgba(12, 70, 87, 0.9) !important;
  border: 1px solid rgba(157, 232, 245, 0.4) !important;
}
#drone-map-card .app-label {
  position: relative;
  z-index: 4;
  color: #fff !important;
}
@keyframes paperclip-radar {
  to {
    transform: rotate(360deg);
  }
}
@keyframes paperclip-target {
  0%,
  35%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }
  55%,
  75% {
    opacity: 1;
    transform: scale(1.15);
  }
}
/* ==========================================================================
   10. 所有卡片共用：圖示、文字與互動陰影
   ========================================================================== */

.app-grid-enhanced .icon-box i {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.app-grid-enhanced .icon-box img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}
/* ==========================================================================
   13. 卡片共用尺寸：文字、圖示與製作中遮罩
   ========================================================================== */

.app-grid-enhanced .app-label {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.49);
}
.app-grid-enhanced .app-card:hover .icon-box i {
  transform: scale(1.05);
  transition: all 0.25s ease;
}
/* ==========================================================================
   11. 無障礙：使用者要求減少動畫時停止動態效果
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .card-calendar,
  .card-red-dark .icon-box i,
  .sos-glow,
  .card-sos-call .icon-box i,
  .wave,
  .star,
  .app-grid-enhanced .bus-live-card .icon-box i,
  #drone-map-card .drone-radar::before,
  #drone-map-card .radar-dot {
    animation: none !important;
  }
}
/* 原 style.css 轉移的卡片細節 */
/* ==========================================================================
   12. 補充色彩主題：其他頁面或後續卡片可直接使用
   ========================================================================== */

.card-teal-dark {
  background: linear-gradient(135deg, #0d8a77, #099268) !important;
}
.card-sky {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
}
.card-magenta {
  background: linear-gradient(135deg, #e91e63, #c2185b) !important;
}
.card-amber {
  background: linear-gradient(135deg, #ffa500, #ff9500) !important;
}
.card-gray {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
  color: #fff;
  opacity: 0.6;
}
.card-teal-dark .app-label,
.card-sky .app-label,
.card-magenta .app-label,
.card-amber .app-label,
.card-gray .app-label {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* 公車排煙：左右兩側的獨立煙霧層。 */
.app-grid-enhanced .bus-live-card .icon-box::before,
.app-grid-enhanced .bus-live-card .icon-box::after {
  position: absolute;
  bottom: 7px;
  z-index: 1;
  width: 23px;
  height: 17px;
  content: "";
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 18% 75%,
      rgba(255, 255, 255, 0.82) 0 12%,
      transparent 15%
    ),
    radial-gradient(
      circle at 46% 52%,
      rgba(255, 255, 255, 0.62) 0 17%,
      transparent 20%
    ),
    radial-gradient(
      circle at 76% 22%,
      rgba(255, 255, 255, 0.34) 0 21%,
      transparent 24%
    );
  filter: blur(0.6px);
}
.app-grid-enhanced .bus-live-card .icon-box::before {
  left: -8px;
  animation: paperclip-smoke-left 1.5s ease-out infinite;
}
.app-grid-enhanced .bus-live-card .icon-box::after {
  right: -8px;
  animation: paperclip-smoke-right 1.5s 0.75s ease-out infinite;
}
@keyframes paperclip-smoke-left {
  0% {
    opacity: 0;
    transform: translate(0, 2px) scale(0.35);
  }
  25% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(-12px, -16px) scale(1.3);
  }
}
@keyframes paperclip-smoke-right {
  0% {
    opacity: 0;
    transform: translate(0, 2px) scale(0.35);
  }
  25% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(12px, -16px) scale(1.3);
  }
}
/* 空拍機卡片互動：滑過、按下與鍵盤聚焦狀態。 */
#drone-map-card.card-drone:hover {
  border-color: rgba(132, 226, 243, 0.68) !important;
  box-shadow:
    0 15px 29px rgba(3, 34, 46, 0.38),
    0 0 18px rgba(64, 189, 213, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-3px);
}
#drone-map-card.card-drone:active {
  transform: translateY(-1px) scale(0.985);
}
#drone-map-card.card-drone:focus-visible {
  outline: 4px solid rgba(91, 207, 230, 0.38);
  outline-offset: 3px;
}
#drone-map-card .icon-box.drone i {
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 22, 31, 0.46));
  animation: none !important;
}
/* 卡片共用尺寸：從 style.css 完整移入 */
/* ==========================================================================
   13. 卡片共用尺寸：文字、圖示與製作中遮罩
   ========================================================================== */

.app-grid-enhanced .app-label {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  color: #2d3748;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: none;
}
.app-grid-enhanced .icon-box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: none;
  box-shadow: none;
  font-size: 1.7rem;
  text-shadow: none;
  filter: none;
}
.icon-box.red,
.icon-box.green,
.icon-box.blue,
.icon-box.indigo,
.icon-box.yellow,
.icon-box.orange,
.icon-box.teal,
.icon-box.purple,
.icon-box.pink,
.icon-box.gold,
.icon-box.dark-red,
.icon-box.gray,
.icon-box.sky,
.icon-box.dark {
  color: #fff;
}
.app-grid-enhanced .app-card:active {
  transform: scale(0.97);
}
.app-grid-enhanced .disabled {
  position: relative;
  pointer-events: none;
  opacity: 1;
  filter: grayscale(0) !important;
}
.app-grid-enhanced .disabled::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(200, 200, 200, 0.75),
    rgba(180, 180, 180, 0.75)
  );
}
.app-grid-enhanced .disabled .app-label,
.app-grid-enhanced .disabled .icon-box {
  position: relative;
  z-index: 3;
}