/* Shared CSS keyframes. Entrance timelines live in /js/gsap.js. */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marquee2 {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes marquee3 {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slick-circle {
    0% {
        left: 0;
    }

    100% {
        left: 99%;
    }
}

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

    50% {
        transform: rotate(-2deg);
    }

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

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

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: scale(1.05);
    }

    75% {
        transform: rotate(5deg);
    }

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

@keyframes rotate_image1 {
    0% {
        transform: rotate(0);
    }

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

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

    50% {
        transform: matrix(1.1, 0.01, 0.01, 1.2, 0, 0);
    }

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

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

    50% {
        transform: scale(1.02);
    }

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

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

    30% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blk2 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes zlk {
    0% {
        z-index: -10;
    }

    30% {
        z-index: 10;
    }

    31% {
        z-index: 10;
    }

    99% {
        z-index: -10;
    }

    100% {
        z-index: -10;
    }
}

@keyframes rotate_image {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scaleOpa {
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes scaleOpa2 {
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes ball {
    0% {
        bottom: 0px;
    }

    100% {
        bottom: 20px;
    }
}

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

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
    }

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

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

    50% {
        transform: scale(1.1);
    }

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

@keyframes rotate_imageY {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

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

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

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

@keyframes scaleOpa3 {
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes run {
    0% {
        transform: rotate(-4deg) translateY(0px)
    }

    50% {
        transform: rotate(4deg) translateY(-30px)
    }

    100% {
        transform: rotate(-4deg) translateY(0px)
    }
}

@keyframes marqueeXup {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes marqueeXdown {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes marqueeXup {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

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

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

    50% {
        transform: scale(1.05);
    }

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

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

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

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
    }

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

@keyframes light {

    0%,
    31%,
    34%,
    39%,
    42%,
    47% {
        opacity: 0;
    }

    5%,
    30%,
    35%,
    38%,
    43%,
    46% {
        opacity: 0.4;
    }

    50%,
    55%,
    60%,
    67%,
    51%,
    54%,
    68%,
    100% {
        opacity: 1;
    }

    70% {
        opacity: 0.2;
    }
}

@keyframes content_bg {
    0% {
        background: url(/images/con4_11.png) 0 0 fixed;
        background-color: #315247;
    }

    100% {
        background: url(/images/con4_11.png) 1000% 0 fixed;
        background-color: #315247;
    }
}

@keyframes content_bg_02 {
    0% {
        background: url(/images/con4_11.png) 0 0 fixed;
        background-color: #c4a25d;
    }

    100% {
        background: url(/images/con4_11.png) 1000% 0 fixed;
        background-color: #c4a25d;
    }
}

@keyframes fall {
    0% {
        top: -0%;
        opacity: 1;
        transform: rotateY(0deg) (0deg);
        transform-origin: center center;
    }

    100% {
        transform: rotateY(150deg) rotateZ(120deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}

@keyframes bubble {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

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

@keyframes slideRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(1000%);
    }
}

@keyframes scaleAnimation {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes smoke {
    0% {
        transform: translate(0, 30%) rotate(0);
        opacity: 0.5;
    }

    15% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(10px);
        opacity: 1;
    }

    30% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(50px);
        opacity: 1;
    }

    55% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(50px);
        opacity: 1;
    }

    70% {
        transform: translate(calc(random() * 100vw), 200vh) rotate(0) translateX(70px);
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slideInOut {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(100px);
    }

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

@keyframes windyEffect_right {
    0% {
        transform: rotate(-2deg);
    }

    25% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }

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

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

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0.5;
    }
}

@keyframes light {

    0%,
    31%,
    34%,
    39%,
    42%,
    47% {
        opacity: 0.8;
    }

    5%,
    30%,
    35%,
    38%,
    43%,
    46% {
        opacity: 0.4;
    }

    50%,
    55%,
    60%,
    67%,
    51%,
    54%,
    68%,
    100% {
        opacity: 1;
    }

    70% {
        opacity: 0.2;
    }
}

@keyframes shakeAndFall {
    0% {
        transform: translate(0, -50%) rotate(0);
        opacity: 0;
    }
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(-1deg);
    }

    40% {
        transform: rotate(1deg);
    }

    60% {
        transform: rotate(2deg);
    }

    80% {
        transform: rotate(-1deg);
    }

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

@keyframes slide_R {
    0% {
        transform: translateX(50%) translateY(10px);
    }

    10% {
        transform: translateX(150%) translateY(-10px);
    }

    20% {
        transform: translateX(250%) translateY(10px);
    }

    30% {
        transform: translateX(350%) translateY(-10px);
    }

    40% {
        transform: translateX(450%) translateY(10px);
    }

    50% {
        transform: translateX(550%) translateY(-10px);
    }

    60% {
        transform: translateX(650%) translateY(10px);
    }

    70% {
        transform: translateX(750%) translateY(-10px);
    }

    80% {
        transform: translateX(850%) translateY(10px);
    }

    90% {
        transform: translateX(950%) translateY(-10px);
    }

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

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

    10% {
        transform: translateX(-150%) translateY(-10px);
    }

    20% {
        transform: translateX(-250%) translateY(10px);
    }

    30% {
        transform: translateX(-350%) translateY(-10px);
    }

    40% {
        transform: translateX(-450%) translateY(10px);
    }

    50% {
        transform: translateX(-550%) translateY(-10px);
    }

    60% {
        transform: translateX(-650%) translateY(10px);
    }

    70% {
        transform: translateX(-750%) translateY(-10px);
    }

    80% {
        transform: translateX(-850%) translateY(10px);
    }

    90% {
        transform: translateX(-950%) translateY(-10px);
    }

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

@keyframes rotateAnimation {
    0% {
        transform: rotate(-1deg);
    }

    40% {
        transform: rotate(1deg);
    }

    60% {
        transform: rotate(2deg);
    }

    80% {
        transform: rotate(-1deg);
    }

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

@keyframes slideLeft {
    0% {
        transform: translateX(0%) translateY(0) rotate(4deg);
    }

    10% {
        transform: translateX(-70%) translateY(-10px) rotate(2deg);
    }

    30% {
        transform: translateX(-140%) translateY(10px) rotate(-2deg);
    }

    40% {
        transform: translateX(-210%) translateY(-10px) rotate(2deg);
    }

    50% {
        transform: translateX(-280%) translateY(10px) rotate(-2deg);
    }

    60% {
        transform: translateX(-350%) translateY(-10px) rotate(2deg);
    }

    70% {
        transform: translateX(-420%) translateY(10px) rotate(-2deg);
    }

    80% {
        transform: translateX(-490%) translateY(-10px) rotate(2deg);
    }

    90% {
        transform: translateX(-560%) translateY(10px) rotate(-2deg);
    }

    100% {
        transform: translateX(-630%) translateY(0) rotate(-4deg);
    }
}

@keyframes slideLeft_m {
    0% {
        transform: translateX(0%) translateY(0) rotate(4deg);
    }

    20% {
        transform: translateX(-70%) translateY(-10px) rotate(2deg);
    }

    40% {
        transform: translateX(-140%) translateY(10px) rotate(-2deg);
    }

    60% {
        transform: translateX(-210%) translateY(-10px) rotate(2deg);
    }

    80% {
        transform: translateX(-280%) translateY(10px) rotate(-2deg);
    }

    100% {
        transform: translateX(-350%) translateY(-10px) rotate(2deg);
    }
}

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

    50% {
        transform: matrix(1, 0.01, 0.01, 1.05, 0, -8);
    }

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

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

    50% {
        transform: matrix(1, 0.01, 0.01, 1.05, 0, -2);
    }

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

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

    50% {
        transform: matrix(1, 0.01, 0.01, 1.05, 0, 10);
    }

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

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

    50% {
        transform: matrix(1, 0.0, 0.01, 1.005, 0, 5);
    }

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

@keyframes topAnimation {
    0% {
        top: 42%;
    }

    100% {
        top: 17%;
    }
}

@keyframes hero-message-first {
  0%, 40%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-100%); }
  50.01%, 90% { opacity: 0; transform: translateY(100%); }
}

@keyframes hero-message-second {
  0%, 40% { opacity: 0; transform: translateY(100%); }
  50%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

.motion-pending .main_01,
.motion-pending .main_02,
.motion-pending .main_mid_mid,
.motion-pending .main_text_01 { opacity: 0; visibility: hidden; }
.main .main_text_step_01, .main .main_text_step_02 { animation-timing-function: cubic-bezier(.22,.7,.3,1); }
html:not(.hero-cycle) .main .main_text_step_01,
html:not(.hero-cycle) .main .main_text_step_02 { animation-play-state: paused; }
.con01_ct { font-variant-numeric: tabular-nums; }
/* CSS hover transitions must not lag behind GSAP's transform / opacity updates. */
[data-motion] { transition-property: color, background-color, border-color, box-shadow; }
[data-motion-state="queued"], [data-motion-state="playing"] { animation-name: none !important; }
.motion-background section, .motion-background section * { animation-play-state: paused !important; }
/* Preserve emphasis without flashes or continuous bouncing. */
.con07_02, .con07_05, .con13_07, .con13_11, .con13_12, .con13_add_text_02 { animation: none; }
.con11_01 { animation: motion-glow 4s ease-in-out infinite; }
@keyframes motion-glow { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
section.motion-offscreen, section.motion-offscreen * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    section, section * { animation: none !important; }
    .main .main_text_step_02 { visibility: hidden; }
    .main .main_text_step_01 { opacity: 1; transform: none; }
}