/* 모션 (profile.json 의 site.motion 이 true 일 때만 페이지에 포함)
   - 휴대폰 "동작 줄이기" 설정이면 전부 꺼짐
   - 첫 화면 등장은 CSS만 사용 → 스크립트가 실패해도 내용은 그대로 보임 */
@media (prefers-reduced-motion: no-preference) {

  /* A. 첫 화면 등장: 0.75초 안에 끝남 */
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes rise-photo { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  .top .logo, .name, .name-alt, .role, .bg,
  .band .headline, .band .sub, .band .keywords, .band .btns {
    animation: rise .45s cubic-bezier(.2, .7, .2, 1) both;
  }
  .poster { animation: rise-photo .6s cubic-bezier(.2, .7, .2, 1) .08s both; transform-origin: bottom center; }
  .name { animation-delay: .04s; }
  .name-alt { animation-delay: .1s; }
  .role { animation-delay: .14s; }
  .bg { animation-delay: .18s; }
  .band .headline { animation-delay: .2s; }
  .band .sub { animation-delay: .24s; }
  .band .keywords { animation-delay: .27s; }
  .band .btns { animation-delay: .3s; }

  /* B. "쉴 만한 물가" 아래 물결: 완만한 한 줄기가 천천히 그려진 뒤, 아주 느리게 흐름 */
  .headline mark { position: relative; display: inline-block; padding-bottom: .16em; }
  .headline mark::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: .34em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C8 2.6 16 2.6 24 5 S40 7.4 48 5' fill='none' stroke='%23A8DCCB' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 2.8em .34em;
    clip-path: inset(0 100% 0 0);
    animation: wave-draw 1.6s cubic-bezier(.45, 0, .2, 1) .6s forwards, wave-flow 4s linear 2.2s infinite;
  }
  @keyframes wave-draw { to { clip-path: inset(0 0 0 0); } }
  @keyframes wave-flow { from { background-position-x: 0; } to { background-position-x: 2.8em; } }

  /* C. 스크롤 등장: 제목 아래 굵은 선이 그려지고 항목이 차례로 떠오름 (motion.js 가 .in 을 붙임) */
  html.motion main h2 { position: relative; }
  html.motion main h2::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--ink);
    transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  }
  html.motion main section.in h2::after { transform: scaleX(1); }
  /* 원래 굵은 선은 자리만 남기고 숨김 (위 선이 대신 그려짐) */
  html.motion .intro, html.motion .strengths, html.motion .stats, html.motion .clients, html.motion .edu,
  html.motion .topics > li:first-child, html.motion .rows > li:first-child, html.motion .quote:first-of-type {
    border-top-color: transparent;
  }
  html.motion [data-reveal] {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  html.motion section.in [data-reveal] { opacity: 1; transform: none; }

  /* D. 작은 반응 */
  .btn { transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px) scale(.985); }
  .more summary::after { transition: transform .25s ease; display: inline-block; }
  .more[open] summary::after { transform: rotate(180deg); }
  .more[open] dl { animation: rise .3s ease both; }
  .copy-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
}