/* ===== Base ===== */
:root{
  --bg:#0f2a24;
  --text:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ===== bg video & pattern ===== */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
          filter:brightness(.72) saturate(1.05) contrast(1.05);}

/* ===== topbar ===== */
.topbar{position:fixed;z-index:2;left:0;right:0;padding:0 20px;display:flex;align-items:center;height:50px;
        background:linear-gradient(90deg, #00370F 0%, #066E33 100%);box-shadow:0px 4px 4px 0px #00000080;}
.topbar-col{display:flex;gap:10px;align-items:center;height:100%;opacity:1;
            transition:transform 0.6s ease;transform:translateX(0);touch-action:manipulation;}
.logo{width:91px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));inset:0;z-index:1;
      display:flex;align-items:flex-start;justify-content:center;}
.title{font-size: 0.875rem; line-height: 14px;}

    /* animation */
    @keyframes topbarBounce {
      0%   { transform: translateX(100vw); }
      70%  { transform: translateX(-20px); } /* overshoot left */
      100% { transform: translateX(0); }     /* settle at original */
    }
    .hidden {opacity:0;}
    .animate {
      animation: topbarBounce 0.6s ease-out forwards;
    }

/* ===== banner ===== */
.hero{display:flex;justify-content:center;align-items:end;}
.headline{margin-top:36vh;position:relative;padding:18px 22px; transform:none;
          height:clamp(1px, 42vw, 40vh);width:clamp(1px, 108vw, 92vh);bottom:calc(env(safe-area-inset-bottom) + 19vh);}
.banner_text{z-index:1;}

    /* animation */
    @keyframes TextZoomIn {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); } 
      100% { transform: scale(1); } 
    }
    .zoom_banner {
      animation: TextZoomIn 1s infinite;
    }

/* ===== cta area ===== */
.cta-area{
  position:fixed; z-index:2; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 0px);
  display:flex; justify-content:center; padding:0 18px;
}
.cta{display:inline-block; text-decoration:none; color:#fff; font-weight:900; font-size:18px; letter-spacing:.5px}
.pill img{height:clamp(1px, 25vw, 18vh);width:clamp(1px, 49vw, 40vh);}

/* ===== reduce motion ===== */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important}
  .headline,.pill{opacity:1 !important; transform:none !important}
}

/* --- v3.1 fixes: iOS 重繪/疊圖問題導致 CTA 消失 --- */
body{ isolation:isolate; }
.bg-video{ z-index:0 !important; }
.topbar{ z-index:3 !important; }
.hero{ z-index:2 !important; }
.cta-area{ z-index:3 !important;  -webkit-transform: translateZ(0); transform: translateZ(0); }
.pill{ backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0);  }

/* --- v3.2: 穩定層修補，移除不必要的 opacity 動畫 --- */
.bg-video{ pointer-events:none; }
.cta-area{ position:fixed; z-index:9999 !important; }
.pill{ position:relative; z-index:10000; }
.headline{ position:relative; z-index:9000; }

/* --- v3.3 static: 無進場動畫，元素常駐可見 --- */
.headline,.pill{opacity:1 !important; transform:none !important}
.cta-area{z-index: 9999 !important}
.hero{z-index: 9000 !important}
.topbar{z-index: 10000 !important}
.pattern{pointer-events:none; z-index:1 !important}
.bg-video{pointer-events:none; z-index:0 !important; filter: none;} /* 去除濾鏡以降低合成壓力 */

/* 圖層順序：video(0) < hero(3) < CTA(4) < logo(5) */
.bg-video { 
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0 !important;
}

/* 內容層級（依你原本排版） */
.hero     { position: fixed; inset: 0; z-index: 3 !important; }
.cta-area { z-index: 4 !important; }
.topbar   { z-index: 5 !important; }

.headline img {
    height: clamp(1px,55vw,42vh);
    width: clamp(1px,120vw,100vh);
    display: block;
    right: -43px;
    position: absolute;
}
.headline { position: relative; z-index: 9000 !important; }