/* ============================================================
    CarMove
============================================================ */

@keyframes CarMove {

    from {
        transform: translate(100%, 0);
    }

    to {
        transform: translate(0%, 0);
    }
}

/* ============================================================
  Move
============================================================ */
@keyframes move {
    0% {
        opacity: 0;
        transform: scale(1) translate(-80%, -37%);

    }

    100% {
        opacity: 1;
        transform: scale(1) translate(0%, 0);

    }
}

@keyframes boat-animation {
    0% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(3deg);
    }
}

;



/* ============================================================
  CardMove
============================================================ */
@keyframes CardMove {

    from {
        opacity: 0;
        transform: translate(0%, 0) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(0%, 0) scale(1);
    }
}



/* ============================================================
  CarMove2
============================================================ */



@keyframes CarMove2 {
    0% {
        transform: translate(-77%, -71%) scale(0.2) rotate(16deg);
        opacity: 0;
    }

    5% {
        transform: translate(-63%, -33%) scale(0.4) rotate(13deg);
        opacity: 1;
    }

    25% {
        transform: translate(-45%, -4%) scale(0.6) rotate(8deg);

        opacity: 1;
    }

    /* 100% 必須明寫 opacity:1 — 元素 base 是 opacity:0，
       少寫的話 25%→100% 會往 base 值內插，車子進場後漸漸消失 */
    100% {
        transform: translate(0%, 0%) scale(1) rotate(0deg);
        opacity: 1;
    }



}


/* ============================================================
  CarMove3
============================================================ */
@-webkit-keyframes CarMove3 {
    from {
        -webkit-transform: translate(50%, 0);
    }

    to {
        -webkit-transform: translate(0%, 0);
    }
}

@-moz-keyframes CarMove3 {
    from {
        -moz-transform: translate(50%, 0);
    }

    to {
        -moz-transform: translate(0%, 0);
    }
}

@-ms-keyframes CarMove3 {
    from {
        -ms-transform: translate(50%, 0);
    }

    to {
        -ms-transform: translate(0%, 0);
    }
}

@-o-keyframes CarMove3 {

    from {
        -o-transform: translate(50%, 0);
    }

    to {
        -o-transform: translate(0%, 0);
    }
}

@keyframes CarMove3 {

    from {
        transform: translate(50%, 0);
    }

    to {
        transform: translate(0%, 0);
    }
}

/* ============================================================
  Up 由下而上彈出（不旋轉，代言人/麻雀2用）
============================================================ */


@keyframes Up {
    0% {
        opacity: 0;
        transform: translate(0%, 12%);
    }

    100% {
        opacity: 1;
        transform: translate(0%, 0);
    }
}

/* ============================================================
  UpSoft 由下而上彈出＋回彈緩衝（代言人用）
  55% 微過衝、78% 回沉再落定，搭配 transform-origin: bottom center
============================================================ */

@keyframes UpSoft {
    0% {
        opacity: 0;
        transform: translate(0%, 14%);
    }

    55% {
        opacity: 1;
        transform: translate(0%, -2.5%);
    }

    78% {
        transform: translate(0%, 1%);
    }

    100% {
        opacity: 1;
        transform: translate(0%, 0%);
    }
}

/* ============================================================
  CarMove2b 白車(car_2)從後方麻雀2位置(x1132 y84)沿雲道開進來
  起點縮小到接近麻雀尺寸(w94/632≈0.15)，帶一點路面傾斜的旋轉；
  translate % 以車2容器(632×363)換算：+316px/-139px → (50%, -38%)
============================================================ */

@keyframes CarMove2b {
    0% {
        transform: translate(50%, -38%) scale(0.15) rotate(-5deg);
        opacity: 0.4;
    }

    45% {
        transform: translate(28%, -24%) scale(0.5) rotate(-3deg);
    }

    50% {
        opacity: 1;
    }

    /* 100% 必須明寫 opacity:1 — 元素 base 是 opacity:0（同 CarMove2 註記） */
    100% {
        transform: translate(0%, 0%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================================
    縮小>放大
============================================================ */

@keyframes ToBig {
    0% {
        opacity: 0;
        transform: scale(0);

    }

    100% {
        opacity: 1;
        transform: scale(1);

    }
}

/* ============================================================
  PULSE
============================================================ */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1);
    }

    25% {
        -moz-transform: scale(1.01);
    }

    50% {
        -moz-transform: scale(1);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: scale(1);
    }

    25% {
        -ms-transform: scale(1.01);
    }

    50% {
        -ms-transform: scale(1);
    }

    100% {
        -ms-transform: scale(1);
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: scale(1);
    }

    25% {
        -o-transform: scale(1.01);
    }

    50% {
        -o-transform: scale(1);
    }

    100% {
        -o-transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

/* ============================================================
  Rotate
============================================================ */
@-webkit-keyframes Rotate {
    0% {
        -webkit-transform: rotate(0)
    }

    25% {
        -webkit-transform: rotate(2deg)
    }

    50% {
        -webkit-transform: rotate(0);
    }

    75% {
        -webkit-transform: rotate(-2deg)
    }

    100% {
        -webkit-transform: rotate(0);
    }
}

@-moz-keyframes Rotate {
    0% {
        -moz-transform: rotate(0)
    }

    25% {
        -moz-transform: rotate(2deg)
    }

    50% {
        -moz-transform: rotate(0);
    }

    75% {
        -moz-transform: rotate(-2deg)
    }

    100% {
        -moz-transform: rotate(0);
    }
}

@-ms-keyframes Rotate {
    0% {
        -ms-transform: rotate(0)
    }

    25% {
        -ms-transform: rotate(2deg)
    }

    50% {
        -ms-transform: rotate(0);
    }

    75% {
        -ms-transform: rotate(-2deg)
    }

    100% {
        -ms-transform: rotate(0);
    }
}

@-o-keyframes Rotate {
    0% {
        -o-transform: rotate(0)
    }

    25% {
        -o-transform: rotate(2deg)
    }

    50% {
        -o-transform: rotate(0);
    }

    75% {
        -o-transform: rotate(-2deg)
    }

    100% {
        -o-transform: rotate(0);
    }
}

@keyframes Rotate {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(2deg)
    }

    50% {
        transform: rotate(0);
    }

    75% {
        transform: rotate(-2deg)
    }

    100% {
        transform: rotate(0);
    }
}

/* ============================================================
  fadeIn
============================================================ */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@keyframes updown {
    0% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(10px);
    }
}

/* ============================================================
  shiny
============================================================ */
@-webkit-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ============================================================
  shiny2(旋轉)
============================================================ */
@keyframes shiny2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes shake {
    0% {
        transform: rotate(10deg);
    }

    55% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }

}

/* ============================================================
  20260907「至尊團圓慶中秋」新增動畫
  titlePop / subtitlePop / ScanLights / birdHop / CarMove2b
============================================================ */

/* 效果2：標題小到大彈出進場 */
@keyframes titlePop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 效果3：副標從標題內往下彈出 */
@keyframes subtitlePop {
    0% {
        opacity: 0;
        transform: translateY(-70%);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

/* 效果6：主標掃光循環(無限)，光帶寫法同 20260608 */
@keyframes ScanLights {
    0% {
        transform: translate(-100%, 50%) rotate(50deg);
    }

    100% {
        transform: translate(100%, 50%) rotate(50deg);
    }
}

/* 效果5：麻雀1從標題後面跳跳跳出(由右往左，3小段跳躍後停留) */
@keyframes birdHop {
    0% {
        opacity: 0;
        transform: translate(110%, 45%) scale(0.6);
    }

    8% {
        opacity: 1;
    }

    22% {
        transform: translate(84%, -8%) scale(0.7);
    }

    36% {
        transform: translate(62%, 18%) scale(0.8);
    }

    52% {
        transform: translate(42%, -10%) scale(0.85);
    }

    68% {
        transform: translate(22%, 12%) scale(0.95);
    }

    84% {
        transform: translate(8%, -6%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(0%, 0%) scale(1);
    }
}