/* =========================================================
   Vida.ai 首屏右側 — GIF 即時影像（取代原 mvss-sol canvas）
   Apple 風格：iPad 式黑邊框螢幕 · 3D 微傾 · 鏡面反光 · HUD
   載入：css/vida_all.css 之後
     <link rel="stylesheet" href="css/vida_hero_live.css" />
   支援 .gif / .webp / .mp4 / .webm（由各分頁按鈕的 data-live-src 指定）
========================================================= */

.mvss-live {
  --live-acc: #0a84ff;
  --live-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  perspective: 1600px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC",
               "Helvetica Neue", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mvss-live[data-step="0"] { --live-acc: #64d2ff; }
.mvss-live[data-step="1"] { --live-acc: #30d158; }
.mvss-live[data-step="2"] { --live-acc: #bf5af2; }
.mvss-live[data-step="3"] { --live-acc: #0a84ff; }

/* 原 canvas 僅保留給舊 JS 參照，不顯示（覆蓋 vida_all.css 的 display:block） */
#mvssLive #mvssSolCanvas { display: none !important; }

/* 背後彩色光暈 */
.mvss-live::before {
  content: "";
  position: absolute;
  inset: 8% 6% 14%;
  z-index: 0;
  border-radius: 40px;
  background:
    radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--live-acc) 45%, transparent), transparent 70%),
    radial-gradient(60% 60% at 75% 65%, rgba(94, 92, 230, .35), transparent 70%);
  filter: blur(50px);
  opacity: .75;
  transition: background .8s ease;
  pointer-events: none;
}

/* 地面陰影 */
.mvss-live::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  bottom: 22px;
  height: 40px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 30, 80, .35), transparent);
  filter: blur(10px);
  pointer-events: none;
}

/* ---------- 螢幕本體 ---------- */

.mvss-live-screen {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10;
  border-radius: 26px;
  overflow: hidden;
  background: #05070d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 9px #0c0e14,                         /* 黑色邊框 */
    0 0 0 10px rgba(255, 255, 255, .55),       /* 金屬外緣高光 */
    0 0 0 11px rgba(15, 23, 42, .18),
    0 60px 110px -30px rgba(20, 40, 120, .55),
    0 30px 60px -30px rgba(0, 0, 0, .55);
  transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg));
  transform-style: preserve-3d;
  transition: transform .9s var(--live-ease);
}

.mvss-live:hover .mvss-live-screen { --ry: 0deg; --rx: 0deg; }

/* 玻璃鏡面反光 */
.mvss-live-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 30%, transparent 42%),
    radial-gradient(40% 30% at var(--gx, 20%) var(--gy, 10%), rgba(255, 255, 255, .14), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ---------- 影像層（交叉淡入） ---------- */

.mvss-live-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mvss-live-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(8px) saturate(1.1);
  transition: opacity .8s ease, transform 1.4s var(--live-ease), filter .9s ease;
}

.mvss-live-frame.is-on {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(1.08) contrast(1.04);
}

/* 暗角 + 上下漸層，讓文字清楚 */
.mvss-live-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 62%, rgba(0, 0, 0, .6) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%);
}

/* ---------- HUD：取景框 + 掃描線 ---------- */

.mvss-live-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.mvss-live-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, .75);
  filter: drop-shadow(0 0 6px var(--live-acc));
}
.mvss-live-corner.tl { top: 54px;  left: 20px;  border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.mvss-live-corner.tr { top: 54px;  right: 20px; border-left: 0;  border-bottom: 0; border-radius: 0 8px 0 0; }
.mvss-live-corner.bl,
.mvss-live-corner.br { display: none; }   /* 下方由說明卡與規格 chips 佔用 */

.mvss-live-scan {
  position: absolute;
  left: 0; right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--live-acc) 22%, transparent) 80%, color-mix(in srgb, var(--live-acc) 70%, transparent) 99%, transparent);
  mix-blend-mode: screen;
  animation: liveScan 4.8s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes liveScan {
  0%   { top: -30%; opacity: 0; }
  12%  { opacity: 1; }
  70%  { top: 100%; opacity: .9; }
  100% { top: 100%; opacity: 0; }
}

/* ---------- 頂部狀態列 ---------- */

.mvss-live-top {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mvss-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(12, 14, 22, .45);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  white-space: nowrap;
}

.mvss-live-rec { letter-spacing: .12em; font-weight: 700; }
.mvss-live-rec i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, .7);
  animation: liveRec 1.6s ease-out infinite;
}
@keyframes liveRec {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.mvss-live-cam { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mvss-live-cam b { color: var(--live-acc); font-weight: 700; transition: color .6s ease; }

.mvss-live-clock {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ---------- 右下規格 chips ---------- */

.mvss-live-meta {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 6px;
}
.mvss-live-meta .mvss-live-pill { height: 24px; padding: 0 9px; font-size: 10.5px; }
.mvss-live-meta .ai i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 8px #30d158;
}

/* ---------- 左下說明卡（沿用原 id，改深色玻璃） ---------- */

.mvss-live .mvss-sol-badge {
  z-index: 5;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 200px);
  padding: 12px 16px;
  border-radius: 16px;
  color: #fff;
  background: rgba(12, 14, 22, .5);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.mvss-live .mvss-sol-badge strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.mvss-live .mvss-sol-badge span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}

/* ---------- 訊號連線中 ---------- */

.mvss-live-status {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .8);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.mvss-live-status::before {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  margin-top: -52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .15);
  border-top-color: var(--live-acc);
  animation: liveSpin .8s linear infinite;
}
@keyframes liveSpin { to { transform: rotate(360deg); } }
.mvss-live.is-loading .mvss-live-status { opacity: 1; }

/* ---------- 下方分頁指示（iOS page control） ---------- */

.mvss-live-steps {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.mvss-live-steps button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .2);
  cursor: pointer;
  transition: width .5s var(--live-ease), background .4s ease;
}
.mvss-live-steps button.is-active {
  width: 28px;
  background: linear-gradient(90deg, var(--live-acc), #5e5ce6);
}

/* ---------- RWD ---------- */

@media (max-width: 1024px) {
  .mvss-live-screen { --ry: 0deg; --rx: 0deg; }
}

@media (max-width: 640px) {
  .mvss-live-screen {
    border-radius: 20px;
    box-shadow:
      0 0 0 6px #0c0e14,
      0 0 0 7px rgba(255, 255, 255, .5),
      0 40px 70px -26px rgba(20, 40, 120, .5);
  }
  .mvss-live-meta { display: none; }
  .mvss-live .mvss-sol-badge { max-width: calc(100% - 24px); left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; }
  .mvss-live .mvss-sol-badge strong { font-size: 13.5px; }
  .mvss-live .mvss-sol-badge span { font-size: 11.5px; }
  .mvss-live-corner { display: none; }
  .mvss-live-top { top: 10px; left: 10px; right: 10px; gap: 6px; }
  .mvss-live-pill { height: 24px; padding: 0 9px; font-size: 10.5px; }
  .mvss-live-cam { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mvss-live-scan,
  .mvss-live-rec i { animation: none; }
  .mvss-live-screen,
  .mvss-live-frame { transition: none; }
}