/* ───────────────────────────────────────────────
   champion-base 進階效果工具箱（從 Readdy/Lux Builder 拿下）
   純 CSS 部分。搭配 effects.js。全部尊重「減少動態」偏好。
   ─────────────────────────────────────────────── */

/* 1) split-text 逐字/逐詞進場（JS 會把文字拆成 .ce-char span） */
.ce-char{display:inline-block;opacity:0;transform:translateY(0.5em);transition:opacity .6s ease,transform .6s ease}
.ce-char.in{opacity:1;transform:none}

/* 2) 無限跑馬燈（放 logo 列 / 標語列） */
.ce-marquee{overflow:hidden;white-space:nowrap}
.ce-marquee>.ce-track{display:inline-flex;gap:3rem;animation:ce-marquee var(--ce-marquee-speed,28s) linear infinite}
.ce-marquee:hover>.ce-track{animation-play-state:paused}
@keyframes ce-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 3) film grain 顆粒覆蓋（放 hero/深色區，增加高級質感） */
.ce-grain{position:relative}
.ce-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 4) lazy 圖片 shimmer 骨架（載入前的微光占位） */
.ce-lazy{position:relative;overflow:hidden;background:#ece7df}
.ce-lazy img{opacity:0;transition:opacity .7s ease}
.ce-lazy img.in{opacity:1}
.ce-lazy::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 40%,transparent 60%);background-size:200% 100%;animation:ce-shimmer 1.4s ease-in-out infinite}
.ce-lazy.done::before{display:none}
@keyframes ce-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* 5) 自訂 lerp 游標（桌機才開） */
.ce-cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid currentColor;border-radius:99px;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:difference;color:#fff}
.ce-cursor.hot{width:54px;height:54px;background:#fff}
@media (hover:none){.ce-cursor{display:none}}

/* 6) 磁吸按鈕：交給 JS 改 transform；這裡只給過渡 */
[data-ce-magnetic]{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* 無障礙：使用者要求減少動態時，全部關掉 */
@media (prefers-reduced-motion:reduce){
  .ce-char{opacity:1!important;transform:none!important;transition:none}
  .ce-marquee>.ce-track{animation:none}
  .ce-grain::after{display:none}
  .ce-lazy::before{animation:none}
  .ce-cursor{display:none}
  [data-ce-magnetic]{transition:none}
}