/* 모션 M1~M7 — 숨김·초기 상태는 전부 동작 줄이기 꺼짐 안에만, M1을 뺀 나머지는 .js 접두까지.
   동작 줄이기 켜짐이면 이 파일은 아무것도 바꾸지 않는다(= 끝 모습). JS 없음이면 M1(CSS만으로 도는 로고 등장)만 돈다.
   끝 상태는 «숨김 규칙이 더 이상 안 맞음»으로 만든다(transform 값을 남기지 않음).
   움직이는 속성은 transform · opacity · border-radius · clip-path만. */
@media (prefers-reduced-motion: no-preference) {

  /* M1 히어로 로고 — 첫 로드 1회, 0.3초 뒤 4.1초 동안. JS 없이 돈다(10-18 준 선택: 비교 페이지 lab/hero-candidates.html 6번).
     사각형이 왼쪽 밖에서 통통 튀어 들어와 1번 자리에 앉고 → 그 밑에 숨어 있던 둥근 사각형이 튀어나와 2번 자리 → 원이 3번 자리.
     로고가 완성되면 왼쪽부터 하나씩 바닥선 아래로 꺼지고(도형 줄이 바닥선 아래를 잘라 냄), 같은 자리에서 글자 로고가 올라온다.
     층: .dot = 좌우·투명도, .dot__hop = 위아래(포물선), .dot__body = 찌그러짐(바닥 기준)·모서리.
     아래 키프레임은 lab/hero-candidates.js의 css(6)로 뽑은 것 — 고칠 땐 거기서 고쳐 다시 뽑는다(이름 c6- → m1-).
     꺼진 도형은 끝에 투명으로 둔다: 윗변이 바닥선에 걸리면 가는 밑줄로 남는다(10-18 준 제보). */
  #hero .dots { visibility: visible; clip-path: inset(-100vh -100vw 0 -100vw); }
  .dot, .dot__hop, .dot__body { animation-duration: 4.1s; animation-delay: .3s; animation-fill-mode: both; animation-timing-function: linear; }
  .dot--square { animation-name: m1-square-x; }
  .dot--rounded { animation-name: m1-rounded-x; }
  .dot--circle { animation-name: m1-circle-x; }
  .dot--square .dot__hop { animation-name: m1-square-y; }
  .dot--rounded .dot__hop { animation-name: m1-rounded-y; }
  .dot--circle .dot__hop { animation-name: m1-circle-y; }
  .dot--square .dot__body { animation-name: m1-square-b; }
  .dot--rounded .dot__body { animation-name: m1-rounded-b; }
  .dot--circle .dot__body { animation-name: m1-circle-b; }
  @keyframes m1-square-x {
    0% { transform: translateX(calc(var(--s) * 0.55 + -50vw)); opacity: 1; }
    10.244% { transform: translateX(calc(var(--s) * 0.275 + -25vw)); }
    18.78% { transform: translateX(calc(var(--s) * 0.099 + -9vw)); }
    25.854% { transform: translateX(0px); }
    89.976% { opacity: 1; }
    90% { opacity: 0; }
    100% { transform: translateX(0px); opacity: 0; }
  }
  @keyframes m1-square-y {
    0% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    5.122% { transform: translateY(calc(var(--s) * -1)); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
    10.244% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    14.512% { transform: translateY(calc(var(--s) * -0.7)); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
    18.78% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    22.317% { transform: translateY(calc(var(--s) * -0.45)); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
    25.854% { transform: translateY(0px); }
    80.732% { transform: translateY(0px); animation-timing-function: ease-out; }
    83.512% { transform: translateY(calc(var(--s) * -0.15)); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
    90% { transform: translateY(calc(var(--s) * 1.6)); }
    100% { transform: translateY(calc(var(--s) * 1.6)); }
  }
  @keyframes m1-square-b {
    0% { transform: scale(1.12, 0.88); animation-timing-function: ease-in-out; }
    2.195% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    5.122% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    8.537% { transform: scale(0.93, 1.07); animation-timing-function: ease-in-out; }
    10.244% { transform: scale(1.17, 0.83); animation-timing-function: ease-out; }
    12.378% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    14.512% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    17.073% { transform: scale(0.93, 1.07); animation-timing-function: ease-in-out; }
    18.78% { transform: scale(1.149, 0.851); animation-timing-function: ease-out; }
    20.549% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    22.317% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    24.439% { transform: scale(0.93, 1.07); animation-timing-function: ease-in-out; }
    25.854% { transform: scale(1.131, 0.869); animation-timing-function: ease-out; }
    28.293% { transform: scale(0.96, 1.04); animation-timing-function: ease-out; }
    31.22% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    31.707% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    34.634% { transform: scale(1.12, 0.88); animation-timing-function: ease-out; }
    37.317% { transform: scale(0.97, 1.03); animation-timing-function: ease-out; }
    40.488% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    80.732% { transform: scale(1, 1); animation-timing-function: ease-out; }
    83.512% { transform: scale(0.95, 1.05); animation-timing-function: ease-in-out; }
    90% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    100% { transform: scale(0.9, 1.1); }
  }
  @keyframes m1-rounded-x {
    0% { transform: translateX(calc(var(--s) * -1.25)); opacity: 0; }
    25.829% { opacity: 0; }
    25.854% { opacity: 1; }
    34.634% { transform: translateX(calc(var(--s) * -1.25)); }
    44.39% { transform: translateX(0px); }
    92.171% { opacity: 1; }
    92.195% { opacity: 0; }
    100% { transform: translateX(0px); opacity: 0; }
  }
  @keyframes m1-rounded-y {
    0% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    34.634% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    39.512% { transform: translateY(calc(var(--s) * -1)); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
    44.39% { transform: translateY(0px); }
    82.927% { transform: translateY(0px); animation-timing-function: ease-out; }
    85.707% { transform: translateY(calc(var(--s) * -0.15)); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
    92.195% { transform: translateY(calc(var(--s) * 1.6)); }
    100% { transform: translateY(calc(var(--s) * 1.6)); }
  }
  @keyframes m1-rounded-b {
    0% { transform: scale(1, 1); border-radius: 0%; animation-timing-function: ease-in-out; }
    31.707% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    34.634% { transform: scale(1.12, 0.88); border-radius: 0%; animation-timing-function: ease-out; }
    36.829% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    39.512% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    42.683% { transform: scale(0.93, 1.07); animation-timing-function: ease-in-out; }
    44.39% { transform: scale(1.17, 0.83); border-radius: 28%; animation-timing-function: ease-out; }
    46.829% { transform: scale(0.96, 1.04); animation-timing-function: ease-out; }
    49.756% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    52.683% { transform: scale(1.12, 0.88); animation-timing-function: ease-out; }
    55.366% { transform: scale(0.97, 1.03); animation-timing-function: ease-out; }
    58.537% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    82.927% { transform: scale(1, 1); animation-timing-function: ease-out; }
    85.707% { transform: scale(0.95, 1.05); animation-timing-function: ease-in-out; }
    92.195% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    100% { transform: scale(0.9, 1.1); border-radius: 28%; }
  }
  @keyframes m1-circle-x {
    0% { transform: translateX(calc(var(--s) * -1.25)); opacity: 0; }
    44.366% { opacity: 0; }
    44.39% { opacity: 1; }
    52.683% { transform: translateX(calc(var(--s) * -1.25)); }
    62.439% { transform: translateX(0px); }
    69.268% { transform: translateX(0px); }
    94.366% { opacity: 1; }
    94.39% { opacity: 0; }
    100% { transform: translateX(0px); opacity: 0; }
  }
  @keyframes m1-circle-y {
    0% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    52.683% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    57.561% { transform: translateY(calc(var(--s) * -1)); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
    62.439% { transform: translateY(0px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
    65.854% { transform: translateY(calc(var(--s) * -0.3)); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
    69.268% { transform: translateY(0px); }
    85.122% { transform: translateY(0px); animation-timing-function: ease-out; }
    87.902% { transform: translateY(calc(var(--s) * -0.15)); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
    94.39% { transform: translateY(calc(var(--s) * 1.6)); }
    100% { transform: translateY(calc(var(--s) * 1.6)); }
  }
  @keyframes m1-circle-b {
    0% { transform: scale(1, 1); border-radius: 28%; animation-timing-function: ease-in-out; }
    49.756% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    52.683% { transform: scale(1.12, 0.88); border-radius: 28%; animation-timing-function: ease-out; }
    54.878% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    57.561% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    60.732% { transform: scale(0.93, 1.07); animation-timing-function: ease-in-out; }
    62.439% { transform: scale(1.17, 0.83); border-radius: 50%; animation-timing-function: ease-out; }
    64.146% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    65.854% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    67.902% { transform: scale(0.93, 1.07); animation-timing-function: ease-in-out; }
    69.268% { transform: scale(1.121, 0.879); animation-timing-function: ease-out; }
    71.707% { transform: scale(0.96, 1.04); animation-timing-function: ease-out; }
    74.634% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
    85.122% { transform: scale(1, 1); animation-timing-function: ease-out; }
    87.902% { transform: scale(0.95, 1.05); animation-timing-function: ease-in-out; }
    94.39% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
    100% { transform: scale(0.9, 1.1); border-radius: 50%; }
  }
  /* 글자 로고 — 원이 꺼지는 중(4.03초)에 바닥선 밑에서 0.7초 동안 올라온다(바닥선 아래는 잘라 냄) */
  .hero__word { animation: m1-word .7s cubic-bezier(.2, .8, .2, 1) 4.03s both; }
  @keyframes m1-word {
    from { transform: translateY(100%); clip-path: inset(-30% -10% 100% -10%); }
    to { transform: translateY(0); clip-path: inset(-30% -10% 0 -10%); }
  }

  /* M3 섹션 등장 — 화면 아래 15% 선을 처음 넘을 때 24px 아래에서 떠오름, 아이템은 순차 지연.
     아이템을 가진 컨테이너는 제자리(아이템만 움직임 — 이중 이동 방지) */
  .js [data-reveal],
  .js [data-reveal-item] {
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .js [data-reveal-item] { transition-delay: calc(min(var(--i, 0), 6) * var(--stagger)); }
  .js [data-reveal]:not(.is-in):not(:has([data-reveal-item])),
  .js [data-reveal]:not(.is-in) [data-reveal-item] { opacity: 0; transform: translateY(24px); }

  /* 떠 있는 견적 문의 — 나타날 때 12px 아래에서 떠오름(숨김 상태 규칙은 sections.css).
     visibility는 움직이는 속성이 아니라 사라짐 페이드가 끝난 뒤 포커스·클릭을 끊는 스위치(0s, 지연만) */
  .js .float-cta {
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility 0s linear var(--dur-fast);
  }
  .js .float-cta.is-shown { transition-delay: 0s; }

  /* M4 진행 절차 — 스크롤에 따라 01 → 06 활성, 막대가 활성 카드까지 채움. 06은 활성일 때만 라임 면 */
  .js #process .step {
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .js #process.is-armed .step:not(.is-active) { opacity: .35; transform: translateY(8px); }
  /* ponytail: 06 면색은 즉시 전환(background는 움직이는 속성 목록 밖). ceiling=opacity·이동으로만 부드럽게. upgrade: 준이 «06 색이 툭 바뀐다» 하면 라임 면을 겹친 층의 opacity로 */
  .js #process.is-armed .step--last:not(.is-active) { background: var(--paper-card); box-shadow: inset 0 0 0 1px var(--paper-line); }
  .js #process .process__bar::before { transition: transform var(--dur-base) var(--ease-out); }

  /* M6 맺음 — 라임 원(--clip은 JS가 스크롤로 바꿈, 여기선 transition 없음).
     원이 글자까지 덮기 전엔 먹 글자가 먹 바탕에 묻히므로 내용은 .is-filled 때 함께 떠오름(양방향) */
  .js #closing .closing__inner {
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .js #closing.is-armed:not(.is-filled) .closing__inner { opacity: 0; transform: translateY(24px); }
}