/* 그려보카 소개 첫 화면의 움직임 — 이 페이지(word-doodle/index.html)만 싣는다. 정책 페이지는 styles.css 만 쓴다.
   14초 한 바퀴: 「apple · 사과」를 보고 시간 막대가 줄어드는 동안 사과 낙서가 한 획씩 그려지고, 이어서 뜻을 가린
   복습 화면에서 내 낙서를 보고 보기 4개 중 apple 을 고르면 「1일 뒤」가 붙는다. 흐린 빛 대신 테이프 붙인 종이 카드 결을 따른다. */
:root:has(> body.motion), .motion { overflow-x: clip; }

/* ── 첫 화면 글: 차례로 떠오른다 ── */
.motion .hero h1 .line { display: inline-block; overflow: hidden; padding-bottom: .06em; vertical-align: top; }
.motion .hero h1 .line > span { display: inline-block; animation: word-doodle-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.12s + var(--l) * .14s); }
.motion .hero .eyebrow, .motion .hero-copy, .motion .actions, .motion .age-note { animation: word-doodle-fade .8s ease both; }
.motion .hero-copy { animation-delay: .45s; }
.motion .actions { animation-delay: .6s; }
.motion .age-note { animation-delay: .75s; }
@keyframes word-doodle-rise { from { transform: translateY(105%); } }
@keyframes word-doodle-fade { from { opacity: 0; transform: translateY(14px); } }

/* ── 오른쪽 장면: 낙서 카드 ── */
.doodle-scene { --loop: 14s; animation: word-doodle-sway 7s ease-in-out infinite alternate; }
@keyframes word-doodle-sway { from { transform: rotate(2deg); } to { transform: rotate(.8deg) translateY(-6px); } }

/* 머리말: 공부할 때는 단어와 뜻, 복습할 때는 뜻을 가리고 「복습 · 이 그림은?」 */
.doodle-scene .doodle-word { position: relative; }
.doodle-scene .doodle-word strong, .doodle-scene .doodle-word > span:not(.doodle-review) { animation: word-doodle-word var(--loop) ease infinite; }
.doodle-scene .doodle-review {
  position: absolute; left: 0; bottom: .7rem; font-size: .95rem; font-weight: 750; color: var(--accent);
  opacity: 0; animation: word-doodle-review var(--loop) ease infinite;
}
@keyframes word-doodle-word { 0%, 46% { opacity: 1; } 50%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes word-doodle-review { 0%, 48% { opacity: 0; transform: translateY(6px); } 52%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* 시간 막대 — 한 단어를 그리는 동안 줄어든다 */
.doodle-scene .doodle-timer {
  display: block; height: 3px; margin-top: -2px; border-radius: 2px; background: var(--accent);
  transform-origin: left; transform: scaleX(0); animation: word-doodle-timer var(--loop) linear infinite;
}
@keyframes word-doodle-timer { 0%, 4% { transform: scaleX(1); opacity: 1; } 42% { transform: scaleX(.18); opacity: 1; } 46%, 100% { transform: scaleX(.18); opacity: 0; } }

/* 낙서가 한 획씩 그려진다 (pathLength="1") */
.doodle-scene .stroke { stroke-dasharray: 1; stroke-dashoffset: 0; }
.doodle-scene .stroke-1 { animation: word-doodle-s1 var(--loop) ease-in-out infinite; }
.doodle-scene .stroke-2 { animation: word-doodle-s2 var(--loop) ease-in-out infinite; }
.doodle-scene .stroke-3 { animation: word-doodle-s3 var(--loop) ease-in-out infinite; }
.doodle-scene .stroke-4 { animation: word-doodle-s4 var(--loop) ease-in-out infinite; }
@keyframes word-doodle-s1 { 0%, 6% { stroke-dashoffset: 1; opacity: 1; } 20%, 93% { stroke-dashoffset: 0; opacity: 1; } 98% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes word-doodle-s2 { 0%, 21% { stroke-dashoffset: 1; opacity: 1; } 29%, 93% { stroke-dashoffset: 0; opacity: 1; } 98% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes word-doodle-s3 { 0%, 30% { stroke-dashoffset: 1; opacity: 1; } 36%, 93% { stroke-dashoffset: 0; opacity: 1; } 98% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes word-doodle-s4 { 0%, 37% { stroke-dashoffset: 1; opacity: 1; } 41%, 93% { stroke-dashoffset: 0; opacity: 1; } 98% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }

/* 복습 보기 4개 — 내 낙서를 보고 apple 을 고르면 「1일 뒤」가 붙는다 */
.doodle-quiz { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .2rem 0 1rem; padding: 0; }
.doodle-quiz li {
  position: relative; padding: .35rem .2rem; text-align: center; font-family: Georgia, serif; font-size: .92rem; line-height: 1.4;
  border: 1px solid var(--line); border-radius: .5rem .8rem .5rem .6rem; background: var(--paper); color: var(--ink);
}
.doodle-quiz li:nth-child(1) { --n: 0; }
.doodle-quiz li:nth-child(2) { --n: 1; }
.doodle-quiz li:nth-child(3) { --n: 2; }
.doodle-quiz li:nth-child(4) { --n: 3; }
.doodle-quiz .pick { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.doodle-next {
  position: absolute; top: -.85rem; right: -.4rem; padding: 0 .4rem; border-radius: .4rem; transform: rotate(6deg);
  font-family: var(--font); font-size: .7rem; font-weight: 750; line-height: 1.6; white-space: nowrap;
  background: var(--wash); border: 1px solid var(--line); color: var(--accent);
}
.motion .doodle-quiz li { animation: word-doodle-opt var(--loop) cubic-bezier(.3, 1.3, .5, 1) infinite both; animation-delay: calc(var(--n) * .12s); }
.motion .doodle-quiz .pick { animation: word-doodle-opt var(--loop) cubic-bezier(.3, 1.3, .5, 1) infinite both, word-doodle-pick var(--loop) ease infinite; animation-delay: calc(var(--n) * .12s), 0s; }
.motion .doodle-next { animation: word-doodle-next var(--loop) cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes word-doodle-opt { 0%, 52% { opacity: 0; transform: translateY(8px); } 56%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes word-doodle-pick {
  0%, 64% { background: var(--paper); border-color: var(--line); color: var(--ink); }
  67%, 100% { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
}
@keyframes word-doodle-next { 0%, 69% { opacity: 0; transform: rotate(6deg) scale(.4); } 73%, 90% { opacity: 1; transform: rotate(6deg); } 94%, 100% { opacity: 0; transform: rotate(6deg); } }

/* ── 쓰는 법: 세 단계에 차례로 불이 들어온다 ── */
.motion .steps { --slot: 2.4s; }
.motion .step { position: relative; overflow: hidden; animation: word-doodle-step calc(var(--slot) * 3) ease infinite; animation-delay: calc(var(--i) * var(--slot)); }
.motion .step::after {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: .9rem; height: 2px; border-radius: 2px; background: var(--accent);
  transform-origin: left; transform: scaleX(0); animation: word-doodle-bar calc(var(--slot) * 3) ease-out infinite; animation-delay: calc(var(--i) * var(--slot));
}
@keyframes word-doodle-step { 0%, 33% { border-color: var(--accent); box-shadow: .3rem .35rem 0 #e5e9dd; } 40%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes word-doodle-bar { 0% { transform: scaleX(0); } 30% { transform: scaleX(1); opacity: 1; } 38%, 100% { transform: scaleX(1); opacity: 0; } }

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

/* 동작 줄이기 — 모두 멈추고, 다 그린 낙서와 apple 을 고른 복습 보기가 선 마지막 장면을 세운다 */
@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before, .motion *::after { animation: none !important; }
  .doodle-scene { transform: rotate(2deg); }
  .doodle-scene .doodle-timer { opacity: 0; }
}