@keyframes highlight {
    0% {
        background-size: 0% 100%;
    }
    20% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

.animate-highlight {
    animation: highlight 6s ease-in-out infinite;
}

/* 照片動畫 */
@keyframes fadeMoveIn {
    0% {
        opacity: 0;
        transform: translate(var(--dx, 0), var(--dy, 0));
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.animate-in-leftDown {
    --dx: -40px; 
    --dy:  40px; 
    --d: 1550ms; 
    --delay: 0ms;
    animation: fadeMoveIn var(--d) cubic-bezier(.22,.61,.36,1) var(--delay) both;
}

.animate-in-up {
    --dx: 0;
    --dy: 40px;
    --d: 1550ms;
    --delay: 0ms;
    animation: fadeMoveIn var(--d) cubic-bezier(.22,.61,.36,1) var(--delay) both;
}

.animate-in-topRight {
    --dx: 40px; 
    --dy: -40px;  
    --d: 1550ms;
    --delay: 0ms;
    animation: fadeMoveIn var(--d) cubic-bezier(.22,.61,.36,1) var(--delay) both;
}

@keyframes scaleAndRotate {
    0% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
    10% {
        transform: translateY(-50%) scale(1.2) rotate(360deg);
    }
    20% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

.animate-scale-rotate {
    transform-origin: center; /* 設定旋轉中心 */
    animation: scaleAndRotate 18s cubic-bezier(.22,.61,.36,1) infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-50%);
        background: linear-gradient(315deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
    }
    100% {
        transform: translateX(60%);
        background: linear-gradient(315deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
    }
}

.shine-animation::after {
    content: '';
    position: absolute;
    inset: -20%;
    animation: shine 5s infinite;
    pointer-events: none;
}

@keyframes right-arrow {
	0%, 100% {
        transform: translateX(0px);
      }
        40% {
        transform: translateX(6px);
      }
        60% {
        transform: translateX(0px);
      }
}

.animate-right-arrow {
    animation: right-arrow 0.75s alternate infinite;
}

/* CSS 動態核心 Keyframes */
@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

/* 圓圈動畫設定 */
.check-circle {
    stroke: #ffffff;
    stroke-width: 8;
    stroke-linecap: round;
    fill: none;
    
    /* 設定虛線長度與間隔，使其剛好繞圓一圈 */
    stroke-dasharray: 283; 
    stroke-dashoffset: 283;
    
    /* 轉動圓圈角度，讓它從上方偏左開始畫圓 */
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    
    /* 動態效果：時長 0.6 秒，先慢後快再慢 */
    animation: drawCircle 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards ;
    animation-iteration-count: 1;
}

/* 打勾線條動畫設定 */
.check-mark {
    stroke: #ffffff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;

    /* 設定虛線長度與間隔 */
    stroke-dasharray: 60;
    stroke-dashoffset: 60;

    /* 動態效果：延遲 0.5 秒播放，讓圓圈先畫完 */
    animation: drawCheck 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    animation-iteration-count: 1;
}

.highlight-container {
  position: relative;
  display: inline-block;
}

.draw-line {
  position: absolute;
  left: 0;
  bottom: -10px; /* 依據文字位置微調 */
  width: 100%;
  height: auto;
  pointer-events: none; /* 避免擋到文字的點擊事件 */
}

.draw-line path {
  /* 設定虛線長度與間隔，300 夠覆蓋整條線段 */
  stroke-dasharray: 300; 
  stroke-dashoffset: 300; /* 一開始完全隱藏 */
  
  /* 觸發動畫：1.5秒完成，快出慢進，重覆播放（可改為 forwards 只撥一次） */
  animation: draw 1s ease-out infinite forwards; 
}

/* 定義畫線動畫 */
@keyframes draw {
  to {
    stroke-dashoffset: 0; /* 虛線偏移量歸零，線條顯現 */
  }
}

@media screen and (max-width: 1023px) {
    .draw-line path {
        /* 設定虛線長度與間隔，300 夠覆蓋整條線段 */
        stroke-dasharray: 300; 
        stroke-dashoffset: 300; /* 一開始完全隱藏 */
        
        /* 觸發動畫：1.5秒完成，快出慢進，重覆播放（可改為 forwards 只撥一次） */
        animation: draw 3s ease-out infinite forwards; 
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-3deg); /* 建議加上 100% 讓動畫循環更平滑 */
    }
    100% {
        transform: rotate(0deg); /* 建議加上 100% 讓動畫循環更平滑 */
    }
}

.rotate-animation {
    transform-origin: center;
    animation: rotate 3s linear infinite forwards; 
}

@keyframes fly-out-child {
    0% {
        top: 0%;
    }
    100% {
        top: -100%;
    }
}

.fly-out-child-animation {
    animation: fly-out-child 2s linear infinite 2s forwards; 
}

@keyframes kf_child_transform_0 {
  0% {
    transform: translateX(3.08px) translateY(38px) translate(41.847px, 51.106px) scaleX(0.86) scaleY(0.86) translate(-41.847px, -51.106px);
  }
  47% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    transform: translateX(3.08px) translateY(38px) translate(41.847px, 51.106px) scaleX(0.86) scaleY(0.86) translate(-41.847px, -51.106px);
  }
  63% {
    transform: translateX(3.08px) translateY(0px) translate(41.847px, 51.106px) scaleX(1) scaleY(1) translate(-41.847px, -51.106px);
  }
  100% {
    transform: translateX(3.08px) translateY(0px) translate(41.847px, 51.106px) scaleX(1) scaleY(1) translate(-41.847px, -51.106px);
  }
}
@keyframes kf_child_opacity_0 {
  0% {
    animation-timing-function: linear;
    opacity: 0;
  }
  50% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  63% {
    animation-timing-function: linear;
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.child-animation-1 {
    opacity: 0;
  transform-origin: 50% 50%;
  animation:
    kf_child_transform_0 2s linear forwards,
    kf_child_opacity_0 2s linear forwards;
}

.child-animation-2 {
    opacity: 0;
  transform-origin: 50% 50%;
  animation:
    kf_child_transform_0 2s linear 0.2s forwards,
    kf_child_opacity_0 2s linear 0.2s forwards;
}

.child-animation-3 {
    opacity: 0;
  transform-origin: 50% 50%;
  animation:
    kf_child_transform_0 2s linear 0.4s forwards,
    kf_child_opacity_0 2s linear 0.4s forwards;
}