/* ======================================================
   SOLUTIONS MAP (ViDA.ai Application Map)
====================================================== */

.section-solutions{
  margin-top:0px;
}

.solutions-map{
  margin-top:24px;
  position:relative;
  border-radius:32px;
  background:radial-gradient(circle at top,#f7fbff,#e4ebff 55%,#d7e4ff);
  padding:32px;
  box-shadow:0 24px 60px rgba(39,62,140,.18);
   overflow:visible;
  min-height:640px;
}

/* 背景格線 */
.solutions-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,rgba(180,195,255,.25) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(180,195,255,.25) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.55;
  pointer-events:none;
}

/* 中心 Cloud */
.solutions-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
}

.solutions-core{
  padding:14px 22px;
  border-radius:999px;
  background:radial-gradient(circle at 20% 0,#ffffff,#c7d8ff);
  box-shadow:0 20px 40px rgba(40,72,170,.45);
  text-align:center;
  border:1px solid rgba(120,140,255,.5);
}

.core-label{
  font-weight:600;
  font-size:16px;
  display:block;
}

.core-sub{
  font-size:12px;
  color:#4b568a;
}

/* SOL 節點卡片 */
.solutions-node{
  position:absolute;
  z-index:3;
  width:260px;
  max-width:260px;
  background:#ffffff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 16px 36px rgba(60,90,170,.22);
  font-size:13px;
  transform:translate(-50%,-50%);
}

.solutions-node h3{
  margin:0 0 6px;
  font-size:14px;
}

.solutions-node p{
  margin:0 0 8px;
  color:#4b5685;
  font-size:13px;
}

.node-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.node-tags span{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:#edf1ff;
  color:#4450a0;
}

/* 六節點座標 */
.node-its      { top:16%; left:50%; }
.node-tve      { top:32%; left:84%; }
.node-parking  { top:72%; left:84%; }
.node-tunnel   { top:88%; left:50%; }
.node-campus   { top:72%; left:16%; }
.node-harbor   { top:32%; left:16%; }


/* ======================================================
   六線 + pulse
====================================================== */

.solutions-lines{
  overflow:visible !important;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

/* 線樣式 */
.solutions-lines line{
  stroke:url(#lineGrad);
  stroke-width:1.5;
  stroke-linecap:round;
  opacity:.82;
}

/* Pulse dots */
.pulse-dot{
  fill:#7ee0ff;
  filter:drop-shadow(0 0 6px rgba(104,228,255,.9));
  animation: pulseMove 3s linear infinite;
  offset-rotate: 0deg;
}

/* 每條線不同位移時間差 */
.pulse-its      { animation-delay:0s; }
.pulse-tve      { animation-delay:.4s; }
.pulse-parking  { animation-delay:.8s; }
.pulse-tunnel   { animation-delay:1.2s; }
.pulse-campus   { animation-delay:1.6s; }
.pulse-harbor   { animation-delay:2.0s; }

/* pulse 在連線上移動 (0→100%) */
@keyframes pulseMove{
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

/* ======================================================
    Beam 光束 + Pulse 路徑跑動 + Hover 加速
====================================================== */

/* 線條主體 */
.beam-line{
  stroke:url(#lineGrad);
  stroke-width:1.5;
  opacity:.8;
  filter:url(#glow);
  stroke-linecap:round;

  /* 流動光束動畫 (顆粒效果) */
  stroke-dasharray:4 10;
  animation: beamFlow 4s linear infinite;
}

/* 光束流動 */
@keyframes beamFlow{
  0% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-60; }
}

/* Pulse 小光點 */
.pulse-dot{
  r:3;
  fill:#9ef3ff;
  filter:drop-shadow(0 0 6px rgba(110,240,255,.95));
  offset-distance:0%;
  animation:pulseMove 3s linear infinite;
}

/* Pulse 跑動 */
@keyframes pulseMove{
  0%   { offset-distance:0%; }
  100% { offset-distance:100%; }
}

/* 不同線條不同延遲  */
.pulse-its      { animation-delay:0s; }
.pulse-tve      { animation-delay:.4s; }
.pulse-parking  { animation-delay:.8s; }
.pulse-tunnel   { animation-delay:1.2s; }
.pulse-campus   { animation-delay:1.6s; }
.pulse-harbor   { animation-delay:2.0s; }

/* Hover Boost：節點 hover → 這條線亮度增加 + Pulse 加速 */
.solutions-node:hover ~ .solutions-lines .beam-line{
  opacity:1;
  animation-duration:2s;
}

.solutions-node:hover ~ .solutions-lines .pulse-dot{
  animation-duration:1.5s;
}

/* ======================================================
  進場：整張 Application Map 滑入 + 淡入
====================================================== */

.solutions-map{
  opacity:0;
  transform:translateY(20px);
  animation: mapShow .8s ease-out forwards;
}

@keyframes mapShow{
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

/* Center Cloud 軟光脈動 */
.solutions-core{
  animation:coreGlow 4s ease-in-out infinite;
}

@keyframes coreGlow{
  0% { box-shadow:0 20px 40px rgba(40,72,170,.35); }
  50%{ box-shadow:0 25px 55px rgba(80,120,255,.6); }
  100%{ box-shadow:0 20px 40px rgba(40,72,170,.35); }
}

/* ======================================================
   SOLUTIONS MAP 
====================================================== */

/* SVG 外層 */
.solutions-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}

/* 外層（慢速、柔和） */
.beam-outer{
  fill:none;
  stroke:url(#lineGradMain);
  stroke-width:1.3;
  stroke-linecap:round;
  opacity:.8;
  filter:url(#beamGlow);
  stroke-dasharray:6 14;
  animation:beamOuterFlow 5.2s linear infinite;
}

/* 內層（高速、細線） */
.beam-inner{
  fill:none;
  stroke:url(#lineGradInner);
  stroke-width:.9;
  stroke-linecap:round;
  opacity:.9;
  stroke-dasharray:2 10;
  animation:beamInnerFlow 3s linear infinite;
}

/* 外層 beam 流動 */
@keyframes beamOuterFlow{
  0%   { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-120; }
}

/* 內層 beam 流動 */
@keyframes beamInnerFlow{
  0%   { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-80; }
}

/* Pulse = 流星點 */
.pulse-dot{
  r:2.4;
  fill:#9ef3ff;
  filter:drop-shadow(0 0 8px rgba(140,245,255,.95));
  offset-distance:0%;
  offset-rotate:0deg;
  animation:pulseMove 3.4s linear infinite;
}

/* Pulse 走完整條路徑 */
@keyframes pulseMove{
  0%   { offset-distance:0%;   opacity:0;   }
  10%  { opacity:1; }
  80%  { opacity:1; }
  100% { offset-distance:100%; opacity:0;  }
}

/* 每條不同delay */
.pulse-its      { animation-delay:0s;   }
.pulse-tve      { animation-delay:.4s;  }
.pulse-parking  { animation-delay:.9s;  }
.pulse-tunnel   { animation-delay:1.4s; }
.pulse-campus   { animation-delay:1.9s; }
.pulse-harbor   { animation-delay:2.4s; }

/* =========================
   Hover 焦點：只亮被 Hover 的線
========================= */

.solutions-map.has-focus .line-set{
  opacity:.16;
  transition:opacity .25s ease-out, transform .25s ease-out;
}

.solutions-map.has-focus .line-set.is-active{
  opacity:1;
  transform:translateY(-1px);
}

/* 焦點線條加強光束速度 */
.solutions-map.has-focus .line-set.is-active .beam-outer{
  animation-duration:3.2s;
}
.solutions-map.has-focus .line-set.is-active .beam-inner{
  animation-duration:1.8s;
}
.solutions-map.has-focus .line-set.is-active .pulse-dot{
  animation-duration:1.6s;
}

/* Center Cloud 脈動 + Hover 引爆 */
.solutions-core{
  position:relative;
  animation:coreGlow 4s ease-in-out infinite;
}

.solutions-core::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(170,200,255,.55),transparent 70%);
  opacity:.0;
  pointer-events:none;
  transform:scale(.7);
  transition:opacity .35s ease-out, transform .35s ease-out;
}

/* 對應節點 hover 時，加一圈柔光擴張 */
.solutions-map.has-focus .solutions-core::before{
  opacity:.8;
  transform:scale(1);
}

/* 整塊 Application Map 進場動畫 */
.solutions-map{
  opacity:0;
  transform:translateY(16px);
  animation:mapEnter .8s ease-out forwards;
}

@keyframes mapEnter{
  0%   { opacity:0; transform:translateY(16px); }
  100% { opacity:1; transform:translateY(0); }
}

/* 背景格子輕微呼吸 */
.solutions-bg-grid{
  animation:gridPulse 10s ease-in-out infinite;
}

@keyframes gridPulse{
  0%   { opacity:.45; transform:scale(1); }
  50%  { opacity:.7;  transform:scale(1.02); }
  100% { opacity:.45; transform:scale(1); }
}

/* 改直向，不用線條 */
@media(max-width:900px){
  .solutions-lines{ display:none; }
}

/* ======================================================
   SOLUTIONS NODE – 卡片浮起 + 光暈 PRO 特效
====================================================== */

.solutions-node{
  position:absolute;
  z-index:3;
  width:260px;
  background:#ffffff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 16px 36px rgba(60,90,170,.22);
  font-size:13px;
  transform:translate(-50%,-50%);
  transition:
    transform .35s cubic-bezier(.25,.46,.45,1.2),
    box-shadow .35s ease,
    filter .35s ease;
  
  /* 讓光暈能往外散 */
  overflow:visible;
}

/*  Hover：卡片浮起、微旋轉、加亮 */
.solutions-node:hover{
  transform:translate(-50%,-52%) scale(1.04) rotateX(4deg) rotateY(-4deg);
  box-shadow:
      0 24px 48px rgba(60,90,170,.32),
      0 0 14px rgba(150,200,255,.45);
}

/* 光暈層：卡片四周擴散柔光 */
.solutions-node::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:28px;
  background:radial-gradient(
    circle,
    rgba(160,200,255,.3),
    rgba(160,200,255,0) 65%
  );
  opacity:0;
  transform:scale(.8);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}

/*  Hover時光暈出現、放大 */
.solutions-node:hover::before{
  opacity:.85;
  transform:scale(1);
}

/*  玻璃反光層 */
.solutions-node::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:40%;
  border-radius:18px 18px 0 0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.35),
    rgba(255,255,255,0)
  );
  opacity:.0;
  transition:opacity .35s ease;
  pointer-events:none;
}

.solutions-node:hover::after{
  opacity:.35;
}