/* 페이지 전반에서 같은 속도와 easing을 사용해 motion 강도를 일관되게 유지한다. */
.button,
.button span{
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-property: transform,translate,border-color,background-color,box-shadow,color,stroke,filter,opacity;
}
.button span{
    display: inline-block;
}
.button:hover span{
    transform: translateX(3px);
}
/* Focus-visible ring은 base.css의 공유 baseline 하나로 통일하고 여기서는 중복 정의하지 않는다. */
.button--primary:hover{
    background: var(--color-primary-dark);
}
.button--secondary:hover{
    border-color: #b3c2ed;
    background: var(--color-primary-soft);
}
.button--light:hover{
    background: #f4f7ff;
}
/* JavaScript가 준비된 경우에만 숨김 상태를 적용해 초기화 실패 시 콘텐츠를 보존한다. */
:root{
    --motion-duration: 600ms;
    --motion-duration-fast: 520ms;
    --motion-ease: cubic-bezier(.22,1,.36,1);
    --motion-rise: 18px;
    --motion-stagger: 80ms;
}
@keyframes motion-enter{
    from{opacity:0;transform:translateY(var(--motion-rise))}
    to{opacity:1;transform:translateY(0)}
}
@keyframes motion-fade{
    from{opacity:0}
    to{opacity:1}
}
@keyframes motion-line-draw{
    from{stroke-dasharray:1 1;stroke-dashoffset:1}
    to{stroke-dasharray:none;stroke-dashoffset:0}
}
.motion-ready .reveal-section{
    opacity: 0;
    transform: translateY(var(--motion-rise));
}
.motion-ready .reveal-section.is-visible{
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease);
}
.motion-ready .reveal-section.motion-reveal-restored{
    transition: none;
}
.motion-ready .motion-reveal-restored .hero__content>*,
.motion-ready .motion-reveal-restored .architecture__heading>*,
.motion-ready .motion-reveal-restored .architecture__row{
    opacity: 1;
    animation: none;
}
/* Hero는 viewport 관찰을 기다리지 않고 읽기 순서대로 진입한다. */
.motion-ready .hero__content.reveal-section{
    opacity: 1;
    transform: none;
}
.motion-ready .hero__content>h1,
.motion-ready .hero__content>.hero__description,
.motion-ready .hero__content>.button-group{
    animation: motion-enter var(--motion-duration) var(--motion-ease) both;
}
.motion-ready .hero__content>h1{animation-delay:60ms}
.motion-ready .hero__content>.hero__description{animation-delay:140ms}
.motion-ready .hero__content>.button-group{animation-delay:220ms}
/* Architecture는 layer 순서대로 등장하고, connector는 한 번만 그려진다. */
.motion-ready .architecture .reveal-section{
    opacity: 1;
    transform: none;
}
.motion-ready .architecture__heading>*,
.motion-ready .architecture__row{
    opacity: 0;
}
.motion-ready .architecture .is-visible .architecture__heading>*,
.motion-ready .architecture .is-visible .architecture__row{
    animation: motion-enter var(--motion-duration) var(--motion-ease) both;
}
.architecture .is-visible .architecture__heading>h2{animation-delay:20ms}
.architecture .is-visible .architecture__heading>p{animation-delay:90ms}
.architecture .is-visible .architecture__diagram>*:nth-child(1){animation-delay:180ms}
.architecture .is-visible .architecture__diagram>*:nth-child(3){animation-delay:340ms}
.architecture .is-visible .architecture__diagram>*:nth-child(5){animation-delay:500ms}
.architecture .is-visible .architecture__diagram>*:nth-child(7){animation-delay:660ms}
.motion-ready .architecture__connector line{
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
}
.motion-ready .architecture .is-visible .architecture__connector line{
    animation: motion-line-draw 420ms var(--motion-ease) both;
}
.architecture .is-visible .architecture__diagram>*:nth-child(2) line{animation-delay:280ms}
.architecture .is-visible .architecture__diagram>*:nth-child(4) line{animation-delay:440ms}
.architecture .is-visible .architecture__diagram>*:nth-child(6) line{animation-delay:600ms}
.motion-ready .motion-reveal-restored .architecture__connector line{
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}
@media(max-width:720px){
    :root{
        --motion-duration: 520ms;
        --motion-duration-fast: 460ms;
        --motion-rise: 14px;
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior: auto;
    }
    .button,
    .button span,
    .architecture__connector line,
    .motion-ready .reveal-section,
    .motion-ready .reveal-section.is-visible {
        animation: none!important;
        transition-duration: 1ms!important;
    }
    /* Header/Footer의 hover/focus 색상 전환도 동일하게 축소한다. */
    .desktop-nav a,
    .mobile-nav > nav > a,
    .site-footer nav a,
    .language-selector summary,
    .language-selector__menu button{
        transition-duration: 1ms!important;
    }
    .motion-ready .hero__content>*,
    .motion-ready .architecture__heading>*,
    .motion-ready .architecture__row,
    .button:hover {
        animation: none!important;
        opacity: 1!important;
        transform: none;
    }
    .motion-ready .architecture__connector line{
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}