.changecolour {
    opacity: 0;
}

.activemove {
    animation-name: show-text-keyframes;
    animation-duration: 280ms;
    animation-delay: 0ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes show-text-keyframes {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}



/* ===== KV 精品建案節奏重排：先穩住畫面，再分層慢淡入 ===== */
.kv1,
.kv2,
.kv3,
.kv4 {
  opacity: 0;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.33, 0, .18, 1);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 主標：延後、拉長、前段留白，避免一閃就結束 */
.kv1 {
  animation-name: kv1-keyframes;
  animation-duration: 2600ms;
  animation-delay: 650ms;
}
@keyframes kv1-keyframes {
  0% {
    opacity: 0;
    transform: scale(.965) translate3d(0, 8px, 0);
    filter: blur(3px);
  }
  34% {
    opacity: 0;
    transform: scale(.965) translate3d(0, 8px, 0);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* 副標一：跟在主標後，輕微上移淡入 */
.kv2 {
  animation-name: kv2-keyframes;
  animation-duration: 1900ms;
  animation-delay: 1650ms;
}
@keyframes kv2-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(2px);
  }
  24% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* 副標二：再慢半拍，形成精品建案的層次 */
.kv3 {
  animation-name: kv3-keyframes;
  animation-duration: 1900ms;
  animation-delay: 2150ms;
}
@keyframes kv3-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(2px);
  }
  24% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* 右下/裝飾元素：最後輕微縮放收進來 */
.kv4 {
  animation-name: kv4-keyframes;
  animation-duration: 2100ms;
  animation-delay: 2650ms;
}
@keyframes kv4-keyframes {
  0% {
    opacity: 0;
    transform: scale(1.025) translate3d(0, 6px, 0);
    filter: blur(3px);
  }
  26% {
    opacity: 0;
    transform: scale(1.025) translate3d(0, 6px, 0);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0);
  }
}



 .activemove .title{
    animation-name: title1-keyframes;
  animation-duration: 550ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes title1-keyframes {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

 .activemove h5{
     animation-name: h5a1-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes h5a1-keyframes {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
 .activemove h4{
    animation-name: h4a1-keyframes;
  animation-duration: 550ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes h4a1-keyframes {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

 .activemove .ann-p{ 
    animation-name: annp1-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes annp1-keyframes {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}



.activemove .case-showC ,
.activemove .case-showB{
    animation-name: showC-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes showC-keyframes {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.activemove .park-l{
     animation-name: move-l-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes move-l-keyframes {
  0% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}



.activemove .park-r,
.noble-photo.activemove{
     animation-name: move-r-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes move-r-keyframes {
  0% { opacity: 0; transform: translateX(16px); }
  100% { opacity: 1; transform: translateX(0); }
}


.mountain.activemove{
    animation-name: moun-1-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes moun-1-keyframes {
  0% { opacity: 0; transform: translateX(-18px); }
  100% { opacity: 1; transform: translateX(0); }
}


.mountain2.activemove{
    animation-name: moun-2-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes moun-2-keyframes {
  0% { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}


.section-11 .activemove h4{

    animation-name: move-l-keyframes;
  animation-duration: 420ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.section-11 .activemove h5{

   animation-name: moun-1-keyframes;
  animation-duration: 420ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.activemove .ann-pl{
    animation-name: annp2-keyframes;
  animation-duration: 550ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes annp2-keyframes {
  0% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}


.activemove .ill-100{
    animation-name:illzoom-keyframes;
  animation-duration: 420ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes illzoom-keyframes {
  0% { opacity: 0; transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}


.activemove .pl-5,
.activemove .pr-5{
    animation-name:illzoom2-keyframes;
  animation-duration: 850ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes illzoom2-keyframes {
  0% { opacity: 0; transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}




.mountain3.activemove{
    animation-name: moun-3-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes moun-3-keyframes {
  0% { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: translateX(0); }
}


.mountain4.activemove{
    animation-name: moun-4-keyframes;
  animation-duration: 650ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes moun-4-keyframes {
  0% { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}


.activemove .ten-1{
    animation-name: ten-a-keyframes;
  animation-duration: 420ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes ten-a-keyframes {
  0% { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

.activemove .ten-2{
    animation-name: ten-a-keyframes;
  animation-duration: 550ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.activemove .ten-3{
    animation-name: ten-a-keyframes;
  animation-duration: 750ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.activemove .ten-4{
    animation-name: ten-a-keyframes;
  animation-duration: 850ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.activemove .ten-5{
    animation-name: ten-a-keyframes;
  animation-duration: 900ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}


.activemove .ten-6{
    animation-name: ten-b-keyframes;
  animation-duration: 420ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes ten-b-keyframes {
  0% { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}

.activemove .ten-7{
    animation-name: ten-b-keyframes;
  animation-duration: 550ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}


.activemove .ten-8{
    animation-name: ten-b-keyframes;
  animation-duration: 750ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}





.activemove .ten-9{
    animation-name: ten-b-keyframes;
  animation-duration: 850ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}


.activemove .ten-10{
    animation-name: ten-b-keyframes;
  animation-duration: 900ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}











@media (prefers-reduced-motion: reduce) {
  .kv1, .kv2, .kv3, .kv4 {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}