@keyframes graybar {
    0% {
        width: 0;
    }

    95% {
        width: 95%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

@-webkit-keyframes graybar {
    0% {
        width: 0;
    }

    95% {
        width: 95%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}


@keyframes bluebar {
    0% {
        width: 0;
    }

    95% {
        width: 95%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}
@-webkit-keyframes bluebar {
    0% {
        width: 0;
    }

    95% {
        width: 95%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

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

    95% {
        opacity: .95;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes desc {
    0% {
        opacity: 0;
    }

    95% {
        opacity: .95;
    }

    to {
        opacity: 1;
    }
}

@keyframes halfblue {
    0% {
        width: 70%;
    }

    /* 95% {
        width: 95%;
        opacity: 1;
    } */

    to {
        width: 100%;
        opacity: 1;
    }
}

@-webkit-keyframes halfblue {
    0% {
        width: 70%;
    }

    /* 95% {
        width: 95%;
        opacity: 1;
    } */

    to {
        width: 100%;
        opacity: 1;
    }
}

@keyframes play-scroll {
    0% {
        height: 15rem;
    }
    50% {
        height: 12rem;
    }
    100% {
        height: 15rem;
    }
}

@-webkit-keyframes play-scroll {
    0% {
        height: 15rem;
    }
    50% {
        height: 12rem;
    }
    100% {
        height: 15rem;
    }
}


@keyframes play-state {
    0% {
        left: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        left: 70%;
        opacity: 0;
    }
}


@-webkit-keyframes play-state {
    0% {
        left: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        left: 70%;
        opacity: 0;
    }
}


@keyframes play-down {
    0% {
        margin-top: 0;
    }

    75% {
        margin-top: .5rem;
    }

    100% {
        margin-top: 0;
    }
}


@-webkit-keyframes play-down {
    0% {
        margin-top: 0;
    }

    75% {
        margin-top: .5rem;
    }

    100% {
        margin-top: 0;
    }
}

/* =========================================================
   OUR SYSTEM - 순차 카드 등장 + 텍스트 페이드 인
========================================================= */

/* 카드: 아래에서 위로 올라오면서 나타남 */
.sec-our-system.is-our-system-motion-ready
.our-system-step {
    opacity: 0;
    translate: 0 20px;
    transition:
        opacity .6s cubic-bezier(.22, 1, .36, 1),
        translate .6s cubic-bezier(.22, 1, .36, 1),
        transform .3s ease;
}

.sec-our-system.is-our-system-motion-ready
.our-system-step.is-process-visible {
    opacity: 1;
    translate: 0 0;
}

/* 제목과 설명: 왼쪽에서 오른쪽으로 부드럽게 등장 */
.sec-our-system.is-our-system-motion-ready
.our-system-reveal {
    opacity: 0;
    translate: -24px 0;
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        translate .7s cubic-bezier(.22, 1, .36, 1);
}

.sec-our-system.is-our-system-motion-ready
.our-system-reveal.is-reveal-visible {
    opacity: 1;
    translate: 0 0;
}

/* 움직임 감소를 설정한 사용자는 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
    .sec-our-system.is-our-system-motion-ready
    .our-system-step,
    .sec-our-system.is-our-system-motion-ready
    .our-system-reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* =========================================================
   PROVEN EXPERIENCE - 카드 2개 순차 등장
========================================================= */

/* 등장 전 */
.sec-our-system.is-our-system-motion-ready
.our-system-experience-card {
    opacity: 0;
    translate: 0 22px;
    transition:
        opacity .65s cubic-bezier(.22, 1, .36, 1),
        translate .65s cubic-bezier(.22, 1, .36, 1);
}

/* 등장 후 */
.sec-our-system.is-our-system-motion-ready
.our-system-experience-card.is-experience-visible {
    opacity: 1;
    translate: 0 0;
}

/* 마지막 강조 문구는 왼쪽이 아니라 아래에서 올라옴 */
.sec-our-system.is-our-system-motion-ready
.our-system-reveal.is-up {
    translate: 0 24px;
}

.sec-our-system.is-our-system-motion-ready
.our-system-reveal.is-up.is-reveal-visible {
    translate: 0 0;
}

/* 움직임 감소 설정 */
@media (prefers-reduced-motion: reduce) {
    .sec-our-system.is-our-system-motion-ready
    .our-system-experience-card,
    .sec-our-system.is-our-system-motion-ready
    .our-system-reveal.is-up {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* =========================================================
   PROVEN RESULTS - 운영 실적 애니메이션
========================================================= */

/* 상단 설명: 왼쪽에서 등장 */
.sec-proven-results.is-proven-motion-ready
.proven-results-reveal {
    opacity: 0;
    translate: -24px 0;
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        translate .7s cubic-bezier(.22, 1, .36, 1);
}

.sec-proven-results.is-proven-motion-ready
.proven-results-reveal.is-proven-visible {
    opacity: 1;
    translate: 0 0;
}

/* 실적 카드: 아래에서 위로 등장 */
.sec-proven-results.is-proven-motion-ready
.proven-results-stat {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity .65s cubic-bezier(.22, 1, .36, 1),
        translate .65s cubic-bezier(.22, 1, .36, 1);
}

.sec-proven-results.is-proven-motion-ready
.proven-results-stat.is-proven-visible {
    opacity: 1;
    translate: 0 0;
}

/* 그래프 막대: 실제 높이는 유지하고 아래에서 펼쳐짐 */
.sec-proven-results.is-proven-motion-ready
.proven-results-bar {
    transform: scaleY(0);
    transform-origin: bottom center;
    transition:
        transform 1.6s cubic-bezier(.22, 1, .36, 1);
}

.sec-proven-results.is-proven-motion-ready
.proven-results-chart.is-proven-visible
.proven-results-bar {
    transform: scaleY(1);
}

/* 막대 위 숫자 등장 */
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-value {
    opacity: 0;
    translate: 0 8px;
    transition:
        opacity .45s ease,
        translate .45s ease;
}

.sec-proven-results.is-proven-motion-ready
.proven-results-chart.is-proven-visible
.proven-results-bar-value {
    opacity: 1;
    translate: 0 0;
}

/* 연도별 막대와 숫자가 왼쪽부터 순서대로 움직임 */
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(2)
.proven-results-bar,
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(2)
.proven-results-bar-value {
    transition-delay: .1s;
}

.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(3)
.proven-results-bar,
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(3)
.proven-results-bar-value {
    transition-delay: .2s;
}

.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(4)
.proven-results-bar,
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(4)
.proven-results-bar-value {
    transition-delay: .3s;
}

.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(5)
.proven-results-bar,
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(5)
.proven-results-bar-value {
    transition-delay: .4s;
}

.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(6)
.proven-results-bar,
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(6)
.proven-results-bar-value {
    transition-delay: .5s;
}

.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(7)
.proven-results-bar,
.sec-proven-results.is-proven-motion-ready
.proven-results-bar-item:nth-child(7)
.proven-results-bar-value {
    transition-delay: .6s;
}

/* 움직임 감소 설정을 위한 보호 */
@media (prefers-reduced-motion: reduce) {
    .sec-proven-results.is-proven-motion-ready
    .proven-results-reveal,
    .sec-proven-results.is-proven-motion-ready
    .proven-results-stat,
    .sec-proven-results.is-proven-motion-ready
    .proven-results-bar-value {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .sec-proven-results.is-proven-motion-ready
    .proven-results-bar {
        transform: none;
        transition: none;
    }
}

/* =========================================================
   PAGE 04 - RED OCEAN / BLUE OCEAN 등장 애니메이션
========================================================= */

/* 카드가 화면에 진입하기 전 */
.partner-startup-opportunity-grid.is-ocean-motion-ready
.partner-startup-ocean-card {
    opacity: 0;
    translate: 0 32px;
    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        translate .75s cubic-bezier(.22, 1, .36, 1);
}

/* 화면에 진입하면 카드가 위로 올라오며 등장 */
.partner-startup-opportunity-grid.is-ocean-motion-ready
.partner-startup-ocean-card.is-ocean-visible {
    opacity: 1;
    translate: 0 0;
}

/* BLUE OCEAN은 RED OCEAN보다 조금 늦게 등장 */
.partner-startup-opportunity-grid.is-ocean-motion-ready
.partner-startup-ocean-card.is-online {
    transition-delay: .2s;
}

/* 각도 값을 부드럽게 애니메이션할 수 있도록 등록 */
@property --ocean-draw {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* BLUE OCEAN 등장 후 노란 선을 한 바퀴 그리고 유지 */
.partner-startup-opportunity-grid.is-ocean-motion-ready
.partner-startup-ocean-card.is-online.is-ocean-visible::after {
    opacity: 1;
    animation: partnerOceanBorderDraw 1.8s ease-in-out .85s forwards;
}

/* 카드 상단 중앙에서 시작해 외곽을 따라 360도 완성 */
@keyframes partnerOceanBorderDraw {
    from {
        --ocean-draw: 0deg;
    }
    to {
        --ocean-draw: 360deg;
    }
}




/* 움직임 감소를 선호하는 사용자는 애니메이션 생략 */
@media (prefers-reduced-motion: reduce) {
    .partner-startup-opportunity-grid.is-ocean-motion-ready
    .partner-startup-ocean-card {
        opacity: 1;
        translate: none;
        transition: none;
        animation: none;
    }

    .partner-startup-opportunity-grid.is-ocean-motion-ready
    .partner-startup-ocean-card.is-online::after {
        --ocean-draw: 360deg;
        opacity: 1;
        animation: none !important;
    }
    
}

/* =========================================================
   PAGE 01 - 창업 지원 카드 좌우 등장
   PAGE 03 - 직영점 수익 / 시뮬레이터 등장
========================================================= */

/* 01 카드: 왼쪽에서 오른쪽으로 */
.is-startup-motion-ready.startup-motion-left {
    opacity: 0;
    translate: -65px 0;
    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        translate .9s cubic-bezier(.22, 1, .36, 1);
}

/* 02 카드: 오른쪽에서 왼쪽으로 */
.is-startup-motion-ready.startup-motion-right {
    opacity: 0;
    translate: 65px 0;
    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        translate .9s cubic-bezier(.22, 1, .36, 1);
}

/* 두 창업 지원 카드가 화면에 나타났을 때 */
.is-startup-motion-ready.startup-motion-left.is-startup-motion-visible,
.is-startup-motion-ready.startup-motion-right.is-startup-motion-visible {
    opacity: 1;
    translate: 0 0;
}

/* 738만원: 움직이지 않고 제자리에서 서서히 나타남 */
.is-startup-motion-ready.startup-motion-profit {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.is-startup-motion-ready.startup-motion-profit.is-startup-motion-visible {
    opacity: 1;
}

/* 시뮬레이터: 아래에서 위로 부드럽게 등장 */
.is-startup-motion-ready.startup-motion-simulator {
    opacity: 0;
    translate: 0 45px;
    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        translate .9s cubic-bezier(.22, 1, .36, 1);
}

.is-startup-motion-ready.startup-motion-simulator.is-startup-motion-visible {
    opacity: 1;
    translate: 0 0;
}

/* 움직임 감소를 설정한 경우 애니메이션 생략 */
@media (prefers-reduced-motion: reduce) {
    .is-startup-motion-ready.startup-motion-left,
    .is-startup-motion-ready.startup-motion-right,
    .is-startup-motion-ready.startup-motion-profit,
    .is-startup-motion-ready.startup-motion-simulator {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* =========================================================
   3단계 정리: layout.css에서 이동한 독립 @keyframes 정의
   - 아래 네 정의의 원문은 그대로 보존
   - 실행 선택자 및 transition 규칙은 기존 파일에 유지
   ========================================================= */

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

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

@keyframes ocean-border-draw-fast {
    from { --ocean-draw: 0deg; }
    to { --ocean-draw: 360deg; }
}

@keyframes marketing-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes marketing-scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}