/* =====================================================
   Slide In Animations for Vision & Mission
   ===================================================== */

/* Slide In from Left Animation (Vision) */
.anim-slide-left {
    display: inline-block;
}

.anim-slide-left span {
    display: inline-block;
    opacity: 0;
    filter: blur(16px);
    transform: translateX(-0.7em);
    animation: slideInFromLeft 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-play-state: paused;
}

/* Animation delays for each character (staggered effect) - Using data-char-index for line-based timing */
.anim-slide-left span[data-char-index="0"] {
    animation-delay: 0s;
    transform: translateX(0);
}

.anim-slide-left span[data-char-index="1"] {
    animation-delay: 0.05s;
    transform: translateX(-0.15em);
}

.anim-slide-left span[data-char-index="2"] {
    animation-delay: 0.1s;
    transform: translateX(-0.3em);
}

.anim-slide-left span[data-char-index="3"] {
    animation-delay: 0.15s;
    transform: translateX(-0.45em);
}

.anim-slide-left span[data-char-index="4"] {
    animation-delay: 0.2s;
    transform: translateX(-0.6em);
}

.anim-slide-left span[data-char-index="5"] {
    animation-delay: 0.25s;
    transform: translateX(-0.75em);
}

.anim-slide-left span[data-char-index="6"] {
    animation-delay: 0.3s;
    transform: translateX(-0.9em);
}

.anim-slide-left span[data-char-index="7"] {
    animation-delay: 0.35s;
    transform: translateX(-1.05em);
}

.anim-slide-left span[data-char-index="8"] {
    animation-delay: 0.4s;
    transform: translateX(-1.2em);
}

.anim-slide-left span[data-char-index="9"] {
    animation-delay: 0.45s;
    transform: translateX(-1.35em);
}

.anim-slide-left span[data-char-index="10"] {
    animation-delay: 0.5s;
    transform: translateX(-1.5em);
}

.anim-slide-left span[data-char-index="11"] {
    animation-delay: 0.55s;
    transform: translateX(-1.65em);
}

.anim-slide-left span[data-char-index="12"] {
    animation-delay: 0.6s;
    transform: translateX(-1.8em);
}

.anim-slide-left span[data-char-index="13"] {
    animation-delay: 0.65s;
    transform: translateX(-1.95em);
}

.anim-slide-left span[data-char-index="14"] {
    animation-delay: 0.7s;
    transform: translateX(-2.1em);
}

.anim-slide-left span[data-char-index="15"] {
    animation-delay: 0.75s;
    transform: translateX(-2.25em);
}

.anim-slide-left span[data-char-index="16"] {
    animation-delay: 0.8s;
    transform: translateX(-2.4em);
}

.anim-slide-left span[data-char-index="17"] {
    animation-delay: 0.85s;
    transform: translateX(-2.55em);
}

.anim-slide-left span[data-char-index="18"] {
    animation-delay: 0.9s;
    transform: translateX(-2.7em);
}

.anim-slide-left span[data-char-index="19"] {
    animation-delay: 0.95s;
    transform: translateX(-2.85em);
}

.anim-slide-left span[data-char-index="20"] {
    animation-delay: 1s;
    transform: translateX(-3em);
}

.anim-slide-left span[data-char-index="21"] {
    animation-delay: 1.05s;
    transform: translateX(-3.15em);
}

.anim-slide-left span[data-char-index="22"] {
    animation-delay: 1.1s;
    transform: translateX(-3.3em);
}

.anim-slide-left span[data-char-index="23"] {
    animation-delay: 1.15s;
    transform: translateX(-3.45em);
}

.anim-slide-left span[data-char-index="24"] {
    animation-delay: 1.2s;
    transform: translateX(-3.6em);
}

.anim-slide-left span[data-char-index="25"] {
    animation-delay: 1.25s;
    transform: translateX(-3.75em);
}

.anim-slide-left span[data-char-index="26"] {
    animation-delay: 1.3s;
    transform: translateX(-3.9em);
}

.anim-slide-left span[data-char-index="27"] {
    animation-delay: 1.35s;
    transform: translateX(-4.05em);
}

.anim-slide-left span[data-char-index="28"] {
    animation-delay: 1.4s;
    transform: translateX(-4.2em);
}

.anim-slide-left span[data-char-index="29"] {
    animation-delay: 1.45s;
    transform: translateX(-4.35em);
}

.anim-slide-left span[data-char-index="30"] {
    animation-delay: 1.5s;
    transform: translateX(-4.5em);
}

.anim-slide-left span[data-char-index="31"] {
    animation-delay: 1.55s;
    transform: translateX(-4.65em);
}

.anim-slide-left span[data-char-index="32"] {
    animation-delay: 1.6s;
    transform: translateX(-4.8em);
}

.anim-slide-left span[data-char-index="33"] {
    animation-delay: 1.65s;
    transform: translateX(-4.95em);
}

.anim-slide-left span[data-char-index="34"] {
    animation-delay: 1.7s;
    transform: translateX(-5.1em);
}

.anim-slide-left span[data-char-index="35"] {
    animation-delay: 1.75s;
    transform: translateX(-5.25em);
}

.anim-slide-left span[data-char-index="36"] {
    animation-delay: 1.8s;
    transform: translateX(-5.4em);
}

.anim-slide-left span[data-char-index="37"] {
    animation-delay: 1.85s;
    transform: translateX(-5.55em);
}

.anim-slide-left span[data-char-index="38"] {
    animation-delay: 1.9s;
    transform: translateX(-5.7em);
}

.anim-slide-left span[data-char-index="39"] {
    animation-delay: 1.95s;
    transform: translateX(-5.85em);
}

.anim-slide-left span[data-char-index="40"] {
    animation-delay: 2s;
    transform: translateX(-6em);
}

.anim-slide-left span[data-char-index="41"] {
    animation-delay: 2.05s;
    transform: translateX(-6.15em);
}

.anim-slide-left span[data-char-index="42"] {
    animation-delay: 2.1s;
    transform: translateX(-6.3em);
}

.anim-slide-left span[data-char-index="43"] {
    animation-delay: 2.15s;
    transform: translateX(-6.45em);
}

.anim-slide-left span[data-char-index="44"] {
    animation-delay: 2.2s;
    transform: translateX(-6.6em);
}

.anim-slide-left span[data-char-index="45"] {
    animation-delay: 2.25s;
    transform: translateX(-6.75em);
}

.anim-slide-left span[data-char-index="46"] {
    animation-delay: 2.3s;
    transform: translateX(-6.9em);
}

.anim-slide-left span[data-char-index="47"] {
    animation-delay: 2.35s;
    transform: translateX(-7.05em);
}

.anim-slide-left span[data-char-index="48"] {
    animation-delay: 2.4s;
    transform: translateX(-7.2em);
}

.anim-slide-left span[data-char-index="49"] {
    animation-delay: 2.45s;
    transform: translateX(-7.35em);
}

/* Play animation when .act class is added */
.act .anim-slide-left span {
    animation-play-state: running;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        filter: blur(16px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* Slide In from Right Animation (Mission) */
.anim-slide-right {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.anim-slide-right span {
    display: inline-block;
    opacity: 0;
    filter: blur(16px);
    transform: translateX(0.7em);
    animation: slideInFromRight 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-play-state: paused;
}

/* Animation delays for each character (staggered effect) - Using data-char-index for line-based timing */
.anim-slide-right span[data-char-index="0"] {
    animation-delay: 0s;
    transform: translateX(0);
}

.anim-slide-right span[data-char-index="1"] {
    animation-delay: 0.05s;
    transform: translateX(0.15em);
}

.anim-slide-right span[data-char-index="2"] {
    animation-delay: 0.1s;
    transform: translateX(0.3em);
}

.anim-slide-right span[data-char-index="3"] {
    animation-delay: 0.15s;
    transform: translateX(0.45em);
}

.anim-slide-right span[data-char-index="4"] {
    animation-delay: 0.2s;
    transform: translateX(0.6em);
}

.anim-slide-right span[data-char-index="5"] {
    animation-delay: 0.25s;
    transform: translateX(0.75em);
}

.anim-slide-right span[data-char-index="6"] {
    animation-delay: 0.3s;
    transform: translateX(0.9em);
}

.anim-slide-right span[data-char-index="7"] {
    animation-delay: 0.35s;
    transform: translateX(1.05em);
}

.anim-slide-right span[data-char-index="8"] {
    animation-delay: 0.4s;
    transform: translateX(1.2em);
}

.anim-slide-right span[data-char-index="9"] {
    animation-delay: 0.45s;
    transform: translateX(1.35em);
}

.anim-slide-right span[data-char-index="10"] {
    animation-delay: 0.5s;
    transform: translateX(1.5em);
}

.anim-slide-right span[data-char-index="11"] {
    animation-delay: 0.55s;
    transform: translateX(1.65em);
}

.anim-slide-right span[data-char-index="12"] {
    animation-delay: 0.6s;
    transform: translateX(1.8em);
}

.anim-slide-right span[data-char-index="13"] {
    animation-delay: 0.65s;
    transform: translateX(1.95em);
}

.anim-slide-right span[data-char-index="14"] {
    animation-delay: 0.7s;
    transform: translateX(2.1em);
}

.anim-slide-right span[data-char-index="15"] {
    animation-delay: 0.75s;
    transform: translateX(2.25em);
}

.anim-slide-right span[data-char-index="16"] {
    animation-delay: 0.8s;
    transform: translateX(2.4em);
}

.anim-slide-right span[data-char-index="17"] {
    animation-delay: 0.85s;
    transform: translateX(2.55em);
}

.anim-slide-right span[data-char-index="18"] {
    animation-delay: 0.9s;
    transform: translateX(2.7em);
}

.anim-slide-right span[data-char-index="19"] {
    animation-delay: 0.95s;
    transform: translateX(2.85em);
}

.anim-slide-right span[data-char-index="20"] {
    animation-delay: 1s;
    transform: translateX(3em);
}

.anim-slide-right span[data-char-index="21"] {
    animation-delay: 1.05s;
    transform: translateX(3.15em);
}

.anim-slide-right span[data-char-index="22"] {
    animation-delay: 1.1s;
    transform: translateX(3.3em);
}

.anim-slide-right span[data-char-index="23"] {
    animation-delay: 1.15s;
    transform: translateX(3.45em);
}

.anim-slide-right span[data-char-index="24"] {
    animation-delay: 1.2s;
    transform: translateX(3.6em);
}

.anim-slide-right span[data-char-index="25"] {
    animation-delay: 1.25s;
    transform: translateX(3.75em);
}

.anim-slide-right span[data-char-index="26"] {
    animation-delay: 1.3s;
    transform: translateX(3.9em);
}

.anim-slide-right span[data-char-index="27"] {
    animation-delay: 1.35s;
    transform: translateX(4.05em);
}

.anim-slide-right span[data-char-index="28"] {
    animation-delay: 1.4s;
    transform: translateX(4.2em);
}

.anim-slide-right span[data-char-index="29"] {
    animation-delay: 1.45s;
    transform: translateX(4.35em);
}

.anim-slide-right span[data-char-index="30"] {
    animation-delay: 1.5s;
    transform: translateX(4.5em);
}

.anim-slide-right span[data-char-index="31"] {
    animation-delay: 1.55s;
    transform: translateX(4.65em);
}

.anim-slide-right span[data-char-index="32"] {
    animation-delay: 1.6s;
    transform: translateX(4.8em);
}

.anim-slide-right span[data-char-index="33"] {
    animation-delay: 1.65s;
    transform: translateX(4.95em);
}

.anim-slide-right span[data-char-index="34"] {
    animation-delay: 1.7s;
    transform: translateX(5.1em);
}

.anim-slide-right span[data-char-index="35"] {
    animation-delay: 1.75s;
    transform: translateX(5.25em);
}

.anim-slide-right span[data-char-index="36"] {
    animation-delay: 1.8s;
    transform: translateX(5.4em);
}

.anim-slide-right span[data-char-index="37"] {
    animation-delay: 1.85s;
    transform: translateX(5.55em);
}

.anim-slide-right span[data-char-index="38"] {
    animation-delay: 1.9s;
    transform: translateX(5.7em);
}

.anim-slide-right span[data-char-index="39"] {
    animation-delay: 1.95s;
    transform: translateX(5.85em);
}

.anim-slide-right span[data-char-index="40"] {
    animation-delay: 2s;
    transform: translateX(6em);
}

.anim-slide-right span[data-char-index="41"] {
    animation-delay: 2.05s;
    transform: translateX(6.15em);
}

.anim-slide-right span[data-char-index="42"] {
    animation-delay: 2.1s;
    transform: translateX(6.3em);
}

.anim-slide-right span[data-char-index="43"] {
    animation-delay: 2.15s;
    transform: translateX(6.45em);
}

.anim-slide-right span[data-char-index="44"] {
    animation-delay: 2.2s;
    transform: translateX(6.6em);
}

.anim-slide-right span[data-char-index="45"] {
    animation-delay: 2.25s;
    transform: translateX(6.75em);
}

.anim-slide-right span[data-char-index="46"] {
    animation-delay: 2.3s;
    transform: translateX(6.9em);
}

.anim-slide-right span[data-char-index="47"] {
    animation-delay: 2.35s;
    transform: translateX(7.05em);
}

.anim-slide-right span[data-char-index="48"] {
    animation-delay: 2.4s;
    transform: translateX(7.2em);
}

.anim-slide-right span[data-char-index="49"] {
    animation-delay: 2.45s;
    transform: translateX(7.35em);
}

/* Play animation when .act class is added */
.act .anim-slide-right span {
    animation-play-state: running;
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        filter: blur(16px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* =====================================================
   Slide In from Bottom Animation (下からスライドイン)
   ===================================================== */
.anim-slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFromBottom 0.8s ease-in-out forwards;
    animation-play-state: paused;
}

/* Different delay variations */
.anim-slide-up--delay-1 {
    animation-delay: 0s;
}

.anim-slide-up--delay-2 {
    animation-delay: 0.2s;
}

.anim-slide-up--delay-3 {
    animation-delay: 0.4s;
}

.anim-slide-up--delay-4 {
    animation-delay: 0.6s;
}

/* Play animation when .act class is added */
.act .anim-slide-up {
    animation-play-state: running;
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

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

/* =====================================================
   Circle Mark Animation Sequence
   ===================================================== */
#circle-mark-container.show-circle {
    opacity: 1 !important;
}

#circle-mark-container.hide-circle {
    opacity: 0 !important;
}

#approach-section.bg-orange {
    background-color: #F03700 !important;
}