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