@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; 
}