/* 셀렉터 소개 페이지의 움직임 — index.html 의 body.motion 에만 걸린다(정책 페이지는 styles.css 만 쓴다).
   첫 화면 장면: 연달아 찍은 사진 다섯 장이 놓이고, 가운데 한 장이 「남길 한 장」으로 올라가 라임 테두리와 체크를 받고,
   고른 이유와 나머지 네 장의 「삭제 후보」 표시가 붙는다. 10초 한 바퀴. 스크립트 없이 CSS 로만 움직인다. */

:root:has(> body.motion), .motion { overflow-x: clip; }

/* 첫 화면 뒤에서 라임 빛이 천천히 떠다닌다 */
.motion .hero { position: relative; isolation: isolate; }
.motion .hero::before {
  content: ""; position: absolute; z-index: -1; inset: 6% -12% auto auto; width: 32rem; height: 32rem; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
  animation: piclect-drift 14s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes piclect-drift { to { translate: -6rem 3rem; scale: 1.15; } }

/* 첫 화면 글: eyebrow → 제목 줄마다 → 소개 → 단추 → 안내 */
.motion .hero h1 .line { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.motion .hero h1 .line > span { display: inline-block; animation: piclect-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.12s + var(--l) * .14s); }
.motion .hero .eyebrow, .motion .hero-copy, .motion .hero .actions, .motion .hero .age-note { animation: piclect-fade .8s ease both; }
.motion .hero-copy { animation-delay: .45s; }
.motion .hero .actions { animation-delay: .6s; }
.motion .hero .age-note { animation-delay: .75s; }
.motion .frame-figure { animation: piclect-fade .9s ease .3s both; }
@keyframes piclect-rise { from { transform: translateY(105%); } }
@keyframes piclect-fade { from { opacity: 0; transform: translateY(14px); } }

/* ── 장면 ─────────────────────────────────────────────
   멈춘 모습(기본값)이 완성 장면이다. 키프레임은 0% 에서 숨긴 상태로 시작해 차례로 채운다. */
.motion .pc-svg { --loop: 10s; overflow: visible; }
.motion .pc-svg g, .motion .pc-svg rect { transform-box: fill-box; transform-origin: center; }
.motion .pc-play { animation: piclect-play var(--loop) linear infinite both; }
@keyframes piclect-play { 0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* 1) 연속 촬영 — 다섯 장이 왼쪽부터 차례로 놓인다(가운데 한 장은 .pc-keep 이 작게 앉아 있다) */
.motion .pc-f0 { animation: piclect-f0 var(--loop) ease infinite both; }
.motion .pc-f1 { animation: piclect-f1 var(--loop) ease infinite both; }
.motion .pc-f3 { animation: piclect-f3 var(--loop) ease infinite both; }
.motion .pc-f4 { animation: piclect-f4 var(--loop) ease infinite both; }
@keyframes piclect-f0 { 0%, 2% { opacity: 0; transform: translateY(-10px); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes piclect-f1 { 0%, 4% { opacity: 0; transform: translateY(-10px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes piclect-f3 { 0%, 8% { opacity: 0; transform: translateY(-10px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes piclect-f4 { 0%, 10% { opacity: 0; transform: translateY(-10px); } 14%, 100% { opacity: 1; transform: none; } }

/* 2) 남길 한 장 — 묶음 가운데 자리에서 위로 빠져나오며 커지고, 테두리가 라임으로 바뀐다 */
.motion .pc-keep { animation: piclect-keep var(--loop) cubic-bezier(.3, .9, .3, 1) infinite both; }
@keyframes piclect-keep {
  0%, 6% { opacity: 0; transform: translateY(118px) scale(.41); }
  10%, 22% { opacity: 1; transform: translateY(128px) scale(.41); }
  34%, 100% { opacity: 1; transform: none; }
}
.motion .pc-keep-edge { animation: piclect-edge var(--loop) ease infinite both; }
@keyframes piclect-edge { 0%, 28% { stroke: #8A9099; stroke-width: 3.6; } 34%, 100% { stroke: var(--accent); stroke-width: 2; } }
.motion .pc-slot { animation: piclect-slot var(--loop) ease infinite both; }
@keyframes piclect-slot { 0%, 22% { opacity: 0; } 28%, 100% { opacity: 1; } }
.motion .pc-lift { animation: piclect-lift var(--loop) ease infinite both; }
@keyframes piclect-lift { 0%, 28% { opacity: 0; transform: translateY(10px); } 34%, 100% { opacity: 1; transform: none; } }
.motion .pc-check { animation: piclect-check var(--loop) cubic-bezier(.2, 1.5, .4, 1) infinite both; }
@keyframes piclect-check { 0%, 35% { opacity: 0; transform: scale(.2); } 40%, 100% { opacity: 1; transform: none; } }
.motion .frame-legend strong { display: inline-block; animation: piclect-legend var(--loop, 10s) ease infinite both; }
@keyframes piclect-legend { 0%, 36% { transform: none; } 40% { transform: scale(1.25); } 46%, 100% { transform: none; } }

/* 3) 왜 그 한 장인지 — 이유가 옆에 붙는다 */
.motion .pc-reason { animation: piclect-reason var(--loop) ease infinite both; }
@keyframes piclect-reason { 0%, 44% { opacity: 0; transform: translateX(-8px); } 50%, 100% { opacity: 1; transform: none; } }

/* 4) 나머지 네 장 — 미리 고르지 않고 「삭제 후보」로만 묶인다 */
.motion .pc-cand { animation: piclect-cand var(--loop) ease infinite both; }
@keyframes piclect-cand { 0%, 56% { opacity: 0; transform: translateY(-4px); } 62%, 100% { opacity: 1; transform: none; } }

/* 정리 순서 — 세 단계에 차례로 불이 들어온다 */
.motion .steps { --slot: 2.4s; }
.motion .step { overflow: hidden; animation: piclect-step calc(var(--slot) * 3) ease infinite; animation-delay: calc(var(--i, 0) * var(--slot)); }
.motion .step::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(0); animation: piclect-bar calc(var(--slot) * 3) linear infinite; animation-delay: calc(var(--i, 0) * var(--slot));
}
@keyframes piclect-step { 0%, 33% { border-color: var(--accent); } 40%, 100% { border-color: var(--line); } }
@keyframes piclect-bar { 0% { transform: scaleX(0); opacity: 1; } 33% { transform: scaleX(1); opacity: 1; } 38%, 100% { transform: scaleX(1); opacity: 0; } }

/* 아래 구역은 화면에 들어올 때 떠오른다 (스크롤 타임라인을 아는 브라우저만) */
@supports (animation-timeline: view()) {
  .motion main > .section, .motion main > .local-note { animation: piclect-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}

@media (max-width: 760px) {
  .motion .hero::before { width: 22rem; height: 22rem; inset: auto -30% 0 auto; }
}

/* 동작 줄이기 — 움직임을 모두 멈추고 완성 장면(기본값)을 세운다 */
@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before, .motion *::after { animation: none !important; }
  .motion .step::after { content: none; }
}