/* ────────────────────────────────────────────────────────────
   Cuz Logo — 線條進場 + Logo 淡入 loop 動畫
   用法：
     1. 把這個 css 載進頁面
     2. HTML 套 <div class="cuz-logo-wrap">...SVG...</div>
     3. SVG 內的 path 依分組加 class：
        - Logo 立體盒 5 個 path  → class="logo-part"
        - CUZ 文字 3 個 path    → class="logo-text"
        - 12 條輔助線           → class="line line-1" ~ "line line-12"
   ──────────────────────────────────────────────────────────── */

/* .cuz-logo-wrap 的 width / aspect-ratio / overflow 移到 _cuz_logo.html partial
   的 inline style，方便前端逐個框框調整定位與尺寸。
   這個檔案只負責動畫的 keyframes scope。 */
.cuz-logo-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ═══ 12 條輔助線（從下往上滑入 + stagger 40ms） ═══ */
.cuz-logo-wrap .line {
  opacity: 0;
  transform-box: fill-box;
  animation: cuzLineSweep 4s ease-out infinite;
}
@keyframes cuzLineSweep {
  0%    { opacity: 0; transform: translateY(600px); }
  12.5% { opacity: 1; transform: translateY(0); }      /* 0.5s 到位 */
  75%   { opacity: 1; transform: translateY(0); }      /* 停到 3.0s */
  87.5% { opacity: 0; transform: translateY(-40px); }  /* 3.5s 淡出上浮 */
  100%  { opacity: 0; transform: translateY(600px); }  /* 無縫回起點 */
}
.cuz-logo-wrap .line-1  { animation-delay: 0.00s; }
.cuz-logo-wrap .line-2  { animation-delay: 0.04s; }
.cuz-logo-wrap .line-3  { animation-delay: 0.08s; }
.cuz-logo-wrap .line-4  { animation-delay: 0.12s; }
.cuz-logo-wrap .line-5  { animation-delay: 0.16s; }
.cuz-logo-wrap .line-6  { animation-delay: 0.20s; }
.cuz-logo-wrap .line-7  { animation-delay: 0.24s; }
.cuz-logo-wrap .line-8  { animation-delay: 0.28s; }
.cuz-logo-wrap .line-9  { animation-delay: 0.32s; }
.cuz-logo-wrap .line-10 { animation-delay: 0.36s; }
.cuz-logo-wrap .line-11 { animation-delay: 0.40s; }
.cuz-logo-wrap .line-12 { animation-delay: 0.44s; }

/* ═══ Logo 立體盒（5 個 path）fade in ═══ */
.cuz-logo-wrap .logo-part {
  opacity: 0;
  animation: cuzLogoFade 4s ease-out infinite;
  animation-delay: 0.50s;
}
@keyframes cuzLogoFade {
  0%    { opacity: 0; }
  12.5% { opacity: 0; }
  20%   { opacity: 1; }
  75%   { opacity: 1; }
  87.5% { opacity: 0; }
  100%  { opacity: 0; }
}

/* ═══ CUZ 文字 rise + fade ═══ */
.cuz-logo-wrap .logo-text {
  opacity: 0;
  transform-box: fill-box;
  animation: cuzTextRise 4s ease-out infinite;
  animation-delay: 0.65s;
}
@keyframes cuzTextRise {
  0%    { opacity: 0; transform: translateY(8px); }
  16%   { opacity: 0; transform: translateY(8px); }
  25%   { opacity: 1; transform: translateY(0); }
  75%   { opacity: 1; transform: translateY(0); }
  87.5% { opacity: 0; transform: translateY(0); }
  100%  { opacity: 0; transform: translateY(8px); }
}