/* =========================================================
   常威團隊 — 手機 9:16 直式 Landing Page
   ========================================================= */

:root{
  /* 背景圖檔名：要換圖只改這一行 */
  --bg-image: url('./bg.jpg');

  /* CTA 按鈕垂直位置（畫面高度百分比，建議 78%～84%） */
  --cta-top: 80%;

  /* LINE 綠 */
  --line-green-light: #9cff9c;
  --line-green: #00c853;
  --line-green-dark: #008f32;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;          /* 手機瀏覽器網址列變動時仍滿版 */
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------
   桌機左右留白：用同一張圖放大模糊，避免出現死黑區塊
   --------------------------------------------------------- */
.backdrop{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(42px) brightness(0.62) saturate(1.15);
  transform: scale(1.22);       /* 消除模糊邊緣 */
  pointer-events: none;
}

/* 讓模糊延伸與主畫面自然融合，不會看起來像黑色色塊 */
.backdrop::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.35) 100%);
}

/* ---------------------------------------------------------
   9:16 主畫面容器（所有元素都以它為定位基準）
   --------------------------------------------------------- */
.main-container{
  position: relative;
  z-index: 1;

  width: min(100vw, 56.25vh);
  height: min(177.78vw, 100vh);

  /* 支援動態視窗高度的瀏覽器 */
  width: min(100vw, 56.25dvh);
  height: min(177.78vw, 100dvh);

  aspect-ratio: 9 / 16;
  overflow: hidden;

  /* 背景直接鋪滿整個主畫面 */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;

  box-shadow: 0 0 60px rgba(0,0,0,.65);
}

/* 額外背景圖層（保險用：確保任何情況下都鋪滿，不留黑塊） */
.bg-layer{
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* ---------------------------------------------------------
   CTA 區域：絕對定位於 main-container 內，水平置中
   --------------------------------------------------------- */
.cta-area{
  position: absolute;
  top: var(--cta-top);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4%;
  pointer-events: none;         /* 只有按鈕本身可點 */
}

/* ---------------------------------------------------------
   LINE 綠色膠囊按鈕
   --------------------------------------------------------- */
.line-button{
  pointer-events: auto;

  width: 72%;
  max-width: 520px;
  height: clamp(52px, 9.5vh, 76px);
  min-height: 52px;

  border-radius: 999px;
  border: 3px solid #dfffe0;
  background: linear-gradient(180deg,
              var(--line-green-light) 0%,
              var(--line-green) 45%,
              var(--line-green-dark) 100%);
  color: #fff;

  box-shadow:
    0 0 12px rgba(0, 255, 80, .75),
    0 0 28px rgba(0, 255, 80, .45),
    0 8px 18px rgba(0, 0, 0, .40),
    inset 0 2px 8px rgba(255, 255, 255, .70);

  text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;

  font-weight: 900;
  font-size: clamp(19px, 5.2vw, 34px);
  letter-spacing: .04em;
  white-space: nowrap;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  will-change: transform;

  /* 呼吸式柔和發光，提升可點擊感 */
  animation: ctaGlow 2.2s ease-in-out infinite;
}

.line-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.line-icon svg{ width: 100%; height: 100%; display: block; }

.line-text{ line-height: 1; }

/* hover：微微放大 + 加強發光 */
.line-button:hover{
  transform: scale(1.04);
  filter: brightness(1.12);
  box-shadow:
    0 0 18px rgba(0, 255, 80, .95),
    0 0 40px rgba(0, 255, 80, .60),
    0 10px 22px rgba(0, 0, 0, .45),
    inset 0 2px 8px rgba(255, 255, 255, .75);
}

/* 點擊 / 手機按壓感 */
.line-button:active,
.line-button.is-pressed{
  transform: scale(.96);
  filter: brightness(.96);
  box-shadow:
    0 0 10px rgba(0, 255, 80, .60),
    0 2px 6px rgba(0, 0, 0, .40),
    inset 0 3px 10px rgba(0, 0, 0, .30);
  animation: none;
}

.line-button:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@keyframes ctaGlow{
  0%, 100%{
    box-shadow:
      0 0 12px rgba(0, 255, 80, .70),
      0 0 26px rgba(0, 255, 80, .40),
      0 8px 18px rgba(0, 0, 0, .40),
      inset 0 2px 8px rgba(255, 255, 255, .70);
  }
  50%{
    box-shadow:
      0 0 20px rgba(0, 255, 80, .95),
      0 0 44px rgba(0, 255, 80, .60),
      0 8px 18px rgba(0, 0, 0, .40),
      inset 0 2px 8px rgba(255, 255, 255, .80);
  }
}

/* ---------------------------------------------------------
   小螢幕微調
   --------------------------------------------------------- */
@media (max-width: 480px){
  .line-button{ width: 78%; }
}

/* 極寬螢幕（矮視窗）時避免按鈕過小 */
@media (max-height: 560px){
  .line-button{ height: 48px; min-height: 44px; font-size: 18px; }
}

/* 尊重使用者的動態偏好設定 */
@media (prefers-reduced-motion: reduce){
  .line-button{ animation: none; transition: none; }
}