/* ==============================
   Animation Core
================================ */
.anim {
    /* transform 狀態變數（預設值） */
    --scale: 1;
    --tx: 0;
    --ty: 0;
    --rotate: 0deg;

    transform:
        scale(var(--scale)) translate(var(--tx), var(--ty)) rotate(var(--rotate));

    transition:
        transform .5s ease,
        opacity .5s ease;

    will-change: transform, opacity;
}

/*二、Hover 父層控制（共用） */
.hover-parent {
    position: relative;
}

/* 三、Scale Utilities（縮放｜同層 & 父層通用） */
.hover-scale-105:hover,
.hover-parent:hover .hover-scale-105 {
    --scale: 1.05;
}

.hover-scale-110:hover,
.hover-parent:hover .hover-scale-110 {
    --scale: 1.1;
}

.hover-scale-120:hover,
.hover-parent:hover .hover-scale-120 {
    --scale: 1.2;
}

/* 四、Translate Utilities（位移） */
/* 初始位移 */
.translate-y-1 {
    --ty: 4px;
}

.translate-y-2 {
    --ty: 8px;
}

.translate-y-3 {
    --ty: 12px;
}

.translate-x-1 {
    --tx: 4px;
}

.translate-x-2 {
    --tx: 8px;
}

/* Hover 回到原位（雙模式） */
.translate-y-1:hover,
.translate-y-2:hover,
.translate-y-3:hover,
.translate-x-1:hover,
.translate-x-2:hover,
.hover-parent:hover .translate-y-1,
.hover-parent:hover .translate-y-2,
.hover-parent:hover .translate-y-3,
.hover-parent:hover .translate-x-1,
.hover-parent:hover .translate-x-2 {
    --tx: 0;
    --ty: 0;
}

/* 五、Rotate Utilities（旋轉） */
.hover-rotate-3:hover,
.hover-parent:hover .hover-rotate-3 {
    --rotate: 3deg;
}

.hover-rotate-6:hover,
.hover-parent:hover .hover-rotate-6 {
    --rotate: 6deg;
}

/* 六、Opacity Utilities（透明度） */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.hover-fade-in:hover,
.hover-parent:hover .hover-fade-in {
    opacity: 1;
}

/* 七、Duration Utilities（動畫時間） */
.anim-fast {
    transition-duration: .25s;
}

.anim-normal {
    transition-duration: .5s;
}

.anim-slow {
    transition-duration: .8s;
}

/* 八、Delay Utilities（延遲） */
.delay-100 {
    transition-delay: .1s;
}

.delay-200 {
    transition-delay: .2s;
}

.delay-300 {
    transition-delay: .3s;
}

/* 九、Easing Utilities（動畫曲線） */
.ease-in {
    transition-timing-function: ease-in;
}

.ease-out {
    transition-timing-function: ease-out;
}

.ease-linear {
    transition-timing-function: linear;
}

/* 十、動畫輔助 Utilities */
.overflow-hidden {
    overflow: hidden;
}

.pointer-none {
    pointer-events: none;
}

.pointer-auto {
    pointer-events: auto;
}

/* 十一、無障礙（專業必備） */
@media (prefers-reduced-motion: reduce) {
    .anim {
        transition: none;
    }
}


























/* 放大動畫 */
.blow-up {
    transform: scale(1, 1);
    transition: all 0.5s ease-out;
}

.blow-up-l:hover {
    transform: scale(1.2);
}

.blow-up-m:hover {
    transform: scale(1.1);
}

.blow-up-s:hover {
    transform: scale(1.05);
}

/* end  */
.country-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.country-card:hover img {
    transform: scale(1.1);
}