/* animations.css — 動畫專屬樣式
 * 對應 assets/js/animations.js
 */

/* ============ 圖片載入淡入（僅在 JS 啟用時）============ */
.js img:not(.is-loaded) {
  opacity: 0;
}
.js img.is-loaded {
  opacity: 1;
  transition: opacity .7s var(--ease-out);
}

/* ============ 卡片 hover tilt（需要 transform-style 由 JS 設定）============ */
.pillar,
.policy-card,
.card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
@media (hover: hover) {
  .pillar:hover,
  .policy-card:hover,
  .card:hover {
    transform: translateY(-6px) perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
}

/* ============ 捲動進度條 ============ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-brand);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(26,99,200,.4);
}

/* ============ Hero 影片 Ken Burns（緩慢縮放）============ */
@media (prefers-reduced-motion: no-preference) {
  .hero__video {
    animation: ken-burns 24s var(--ease-out) infinite alternate;
  }
}
@keyframes ken-burns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}

/* ============ 按鈕 hover 漣漪光 ============ */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.25), transparent 50%);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
}

/* ============ 連結 underline 動畫 ============ */
.pill-link {
  position: relative;
}

/* ============ Section 進入 mask reveal（給特定元素加 data-reveal-mask）============ */
[data-reveal-mask] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
[data-reveal-mask].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ============ 字級慢慢浮現（hero 標題的微強化）============ */
.hero__title {
  --hero-stagger: 80ms;
}
.hero__title .accent,
.hero__title .en {
  display: inline-block;
}

/* ============ Number counter 字級穩定（避免跳動）============ */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ============ Marquee 在 hover 時暫停 ============ */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ============ Sticker 漂浮 ============ */
@media (prefers-reduced-motion: no-preference) {
  .sticker {
    animation: float 4s var(--ease-out) infinite alternate;
  }
}
@keyframes float {
  0%   { transform: rotate(-6deg) translateY(0); }
  100% { transform: rotate(-2deg) translateY(-6px); }
}

/* ============ Hero eyebrow 微閃光 ============ */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow {
    background-size: 200% 100%;
    background-image:
      linear-gradient(90deg, var(--c-bg-alt) 0%, var(--c-bg-alt) 40%, rgba(60,161,238,.4) 50%, var(--c-bg-alt) 60%, var(--c-bg-alt) 100%);
    animation: shimmer 5s linear infinite;
  }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}