/* ========================================================== 코드 모션 (2026-09-28) — 글자가 선명하고 파일이 거의 없는 움직임 js/motion.js 가 에 .motion-ok 를 붙일 때만 움직인다 (자바스크립트가 없거나 '동작 줄이기'를 켠 사람은 그대로 멈춘 그림). 칸이 화면에 들어오면 site.js 가 .reveal 에 .in 을 붙이고, 그때 시작한다. ========================================================== */ /* ---------- 1. 어원 조각 합치기: in + spect = inspect ---------- */ .motion-ok .reveal .power-formula > *, .motion-ok .reveal .ec-parts > * { opacity: 0; } .motion-ok .reveal.in .power-formula > *, .motion-ok .reveal.in .ec-parts > * { animation: mo-piece .55s var(--ease) both; } .motion-ok .reveal.in :is(.power-formula, .ec-parts) > :nth-child(1) { animation-delay: .25s; } .motion-ok .reveal.in :is(.power-formula, .ec-parts) > :nth-child(2) { animation-delay: .6s; animation-name: mo-op; } .motion-ok .reveal.in :is(.power-formula, .ec-parts) > :nth-child(3) { animation-delay: .85s; } .motion-ok .reveal.in :is(.power-formula, .ec-parts) > :nth-child(4) { animation-delay: 1.3s; animation-name: mo-op; } .motion-ok .reveal.in .power-formula > .pc.ans { animation: mo-answer .8s var(--ease) 1.6s both; } @keyframes mo-piece { from { opacity: 0; transform: translateY(18px) scale(.85); } to { opacity: 1; transform: none; } } @keyframes mo-op { from { opacity: 0; transform: scale(.4) rotate(-90deg); } to { opacity: 1; transform: none; } } @keyframes mo-answer { 0% { opacity: 0; transform: scale(.6); box-shadow: 0 0 0 0 rgba(0, 92, 251, .5); } 55% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; box-shadow: 0 0 0 16px rgba(0, 92, 251, 0); } } /* 풀이 식 → 뜻, 같은 뿌리 단어들은 하나씩 */ .motion-ok .reveal .ec-logic, .motion-ok .reveal .ec-origin, .motion-ok .reveal .ec-rel { opacity: 0; } .motion-ok .reveal.in .ec-logic { animation: mo-up .5s var(--ease) 1.4s both; } .motion-ok .reveal.in .ec-origin { animation: mo-up .5s var(--ease) 1.6s both; } .motion-ok .reveal.in .ec-rel { animation: mo-up .5s var(--ease) 1.8s both; } .motion-ok .reveal .etym-root li { opacity: 0; } .motion-ok .reveal.in .etym-root li { animation: mo-up .45s var(--ease) both; animation-delay: calc(.9s + var(--k, 0) * .12s); } .etym-root li:nth-child(2) { --k: 1; } .etym-root li:nth-child(3) { --k: 2; } .etym-root li:nth-child(4) { --k: 3; } .etym-root li:nth-child(5) { --k: 4; } .etym-root li:nth-child(6) { --k: 5; } @keyframes mo-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---------- 2. 검색: 글자가 쳐지고 → 결과가 뜬다 (js/motion.js 가 .typed 를 붙임) ---------- */ .ps-q.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--blue); animation: mo-caret .8s steps(1) infinite; } @keyframes mo-caret { 50% { opacity: 0; } } .motion-ok .power-search .ps-hit, .motion-ok .sf-results li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .motion-ok .typed .ps-hit, .motion-ok .typed .sf-results li { opacity: 1; transform: none; } .motion-ok .typed .sf-results li:nth-child(2) { transition-delay: .15s; } .motion-ok .typed .sf-results li:nth-child(3) { transition-delay: .3s; } .motion-ok .typed .sf-results li:nth-child(2) { background: #FFF6D6; } /* ---------- 3. 단어장에 쌓이기: 위에서 한 장씩 내려앉음 ---------- */ .motion-ok .reveal .sf-ui.book li { opacity: 0; } .motion-ok .reveal.in .sf-ui.book li { animation: mo-drop .5s var(--ease) both; } .motion-ok .reveal.in .sf-ui.book li:nth-child(1) { animation-delay: .3s; } .motion-ok .reveal.in .sf-ui.book li:nth-child(2) { animation-delay: .5s; } .motion-ok .reveal.in .sf-ui.book li:nth-child(3) { animation-delay: .7s; } .motion-ok .reveal.in .sf-ui.book li:nth-child(4) { animation-delay: .9s; } .motion-ok .reveal.in .sf-ui.book li:nth-child(5) { animation-delay: 1.1s; } .motion-ok .reveal.in .sb-btn { animation: mo-pulse 2.4s var(--ease) 1.6s infinite; } @keyframes mo-drop { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes mo-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(0, 92, 251, .45); } 35% { box-shadow: 0 0 0 10px rgba(0, 92, 251, 0); } } /* ---------- 4. 검색 → 사전 → 단어장 → 학습: 차례로 불이 켜짐 (반복) ---------- */ .motion-ok .sbd-flow span { animation: mo-flow 4.8s linear infinite; } .motion-ok .sbd-flow span:nth-of-type(2) { animation-delay: 1.2s; } .motion-ok .sbd-flow span:nth-of-type(3) { animation-delay: 2.4s; } .motion-ok .sbd-flow span:nth-of-type(4) { animation-delay: 3.6s; } @keyframes mo-flow { 0%, 22% { background: var(--blue); transform: translateY(-2px); } 26%, 100% { background: rgba(255, 255, 255, .09); transform: none; } } .motion-ok .sbd-flow span.on { animation-name: mo-flow-last; } @keyframes mo-flow-last { 0%, 22% { background: #3D83FF; transform: translateY(-2px) scale(1.05); } 26%, 100% { background: var(--blue); transform: none; } } @media (prefers-reduced-motion: reduce) { .motion-ok * { animation: none !important; transition: none !important; } } /* ---------- 5. 첫 화면 움직이는 사진 (힉스필드 영상, js/motion.js 가 재생) ---------- */ video.hero-photo { display: block; background: var(--ice); } /* ========================================================== 더 넓힌 코드 모션 (2026-09-28) — [data-mo] 가 화면에 들어오면 js/motion.js 가 .mo-in 을 붙인다 ========================================================== */ /* 6. 추천 이벤트 도장: 1→7 차례로 '쾅' 찍히고, 10번 칸이 두근 */ .motion-ok [data-mo].promo-stamps i:nth-child(-n+7) { opacity: 0; } .motion-ok .mo-in.promo-stamps i:nth-child(-n+7) { animation: mo-stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.15s + var(--s, 0) * .16s); } .promo-stamps i:nth-child(2) { --s: 1; } .promo-stamps i:nth-child(3) { --s: 2; } .promo-stamps i:nth-child(4) { --s: 3; } .promo-stamps i:nth-child(5) { --s: 4; } .promo-stamps i:nth-child(6) { --s: 5; } .promo-stamps i:nth-child(7) { --s: 6; } .motion-ok .mo-in.promo-stamps i.last { animation: mo-beat 1.6s var(--ease) 1.4s infinite; } @keyframes mo-stamp { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } to { opacity: 1; transform: none; } } @keyframes mo-beat { 0%, 60%, 100% { transform: none; } 30% { transform: scale(1.15); } } /* 7. 그물망 계단: 막대가 아래에서 차례로 자라고, 건진 수가 뜬다 */ .motion-ok [data-mo].net-climb .st i { transform: scaleY(0); transform-origin: bottom; } .motion-ok [data-mo].net-climb .st em { opacity: 0; } .motion-ok .mo-in.net-climb .st i { animation: mo-grow .7s var(--ease) both; animation-delay: calc(.1s + var(--g, 0) * .25s); } .motion-ok .mo-in.net-climb .st em { animation: mo-up .4s var(--ease) both; animation-delay: calc(.6s + var(--g, 0) * .25s); } .net-climb .s2 { --g: 1; } .net-climb .s3 { --g: 2; } .net-climb .s4 { --g: 3; } @keyframes mo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* 8. 기억 곡선 · 목표 길: 선이 그려지고, 점·깃발이 뒤따른다 */ .motion-ok [data-mo] .mo-draw { stroke-dasharray: 1; stroke-dashoffset: 1; } .motion-ok .mo-in .mo-draw { animation: mo-draw 1.8s var(--ease) .2s forwards; } @keyframes mo-draw { to { stroke-dashoffset: 0; } } .motion-ok [data-mo] circle, .motion-ok [data-mo] .mo-flag { opacity: 0; transform-box: fill-box; transform-origin: center; } .motion-ok .mo-in circle { animation: mo-dot .4s var(--ease) both; animation-delay: 1.2s; } .motion-ok .mo-in .mo-flag { animation: mo-dot .5s var(--ease) 1.8s both; transform-origin: left bottom; } @keyframes mo-dot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } } .motion-ok [data-mo] .mo-q { transform-box: fill-box; transform-origin: center; } .motion-ok .mo-in .mo-q { animation: mo-wobble 2.4s ease-in-out 1s infinite; } @keyframes mo-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } } /* 9. 3단 복습 카드 아래 표시: ✓ 튀어오름 · 1→14일 차례로 켜짐 · 졸업 반짝 */ .motion-ok [data-mo].r3-vis > * { opacity: 0; } .motion-ok .mo-in.r3-vis > * { animation: mo-dot .45s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(.1s + var(--v, 0) * .15s); } .r3-vis > :nth-child(2) { --v: 1; } .r3-vis > :nth-child(3) { --v: 2; } .r3-vis > :nth-child(4) { --v: 3; } .r3-vis > :nth-child(5) { --v: 4; } .r3-vis > :nth-child(6) { --v: 5; } .motion-ok .mo-in.r3-vis .grad { animation: mo-dot .5s cubic-bezier(.2, 1.5, .4, 1) .2s both, mo-beat 2s var(--ease) 1s infinite; } /* 10. 단어 가족: 뿌리 → 화살표가 뻗고 → 가족 단어가 하나씩 */ .motion-ok [data-mo].fam-demo .fam-arrow i { transform: scaleX(0); transform-origin: left; } .motion-ok [data-mo].fam-demo .fam-kids li { opacity: 0; } .motion-ok .mo-in.fam-demo .fam-arrow i { animation: mo-grow-x .6s var(--ease) .4s both; } .motion-ok .mo-in.fam-demo .fam-kids li { animation: mo-up .45s var(--ease) both; animation-delay: calc(.9s + var(--f, 0) * .12s); } .fam-kids li:nth-child(2) { --f: 1; } .fam-kids li:nth-child(3) { --f: 2; } .fam-kids li:nth-child(4) { --f: 3; } .fam-kids li:nth-child(5) { --f: 4; } @keyframes mo-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 1024px) { .motion-ok [data-mo].fam-demo .fam-arrow i { transform: scaleY(0); transform-origin: top; } .motion-ok .mo-in.fam-demo .fam-arrow i { animation-name: mo-grow; } } /* ========================================================== 11. 움직이는 사진 넓히기 — js/motion.js 가 img[data-video] 를 영상으로 바꾸고, 모양은 원래 사진 규칙을 그대로 따른다. (학습 사례·마지막 칸 사진은 움직이지 않는다 — 대표 09-28) ========================================================== */ video.mo-video { display: block; } .curve-side video { width: 92%; margin: auto auto -10px; } .t-cut video { width: min(360px, 100%); margin: -30px auto -80px; } @media (max-width: 1024px) { .t-cut video { width: 280px; margin: 10px auto -90px; } } /* 두더지 영상은 카드 색 배경이 구워져 있음 — 가장자리를 부드럽게 녹여 네모 테두리가 안 보이게 */ .curve-side video, .t-cut video { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); } /* ========================================================== 12. 두더지 게임 (09-28) — 그림 위에 코드로 얹는 움직임. 그림 속 글자는 건드리지 않는다. js/motion.js 가 .mg-stage 와 칸들을 만든다. 좌표는 그림(1168×880) 기준 % 값. 점수판 글꼴 DSEG7 (SIL Open Font License, fonts/) ========================================================== */ @font-face { font-family: "DSEG7"; src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2"); font-display: swap; } .mg-stage { position: relative; container-type: inline-size; border-radius: var(--r); overflow: hidden; } .mg-stage > img { display: block; } .mg-led { position: absolute; display: flex; align-items: center; justify-content: center; background: #020200; font-family: "DSEG7", monospace; font-weight: 700; line-height: 1; white-space: nowrap; } .mg-led.orange { color: #FF9A1F; text-shadow: 0 0 .6cqw rgba(255, 140, 20, .85); } .mg-led.red { color: #FF2B24; text-shadow: 0 0 .6cqw rgba(255, 30, 20, .9); } .mg-led.score { left: 3.6%; top: 17%; width: 9%; height: 6.8%; font-size: 3.7cqw; } .mg-led.combo { left: 6%; top: 27.9%; width: 6%; height: 5.8%; font-size: 3.2cqw; } .mg-led.time { left: 87.6%; top: 16.9%; width: 9.5%; height: 6.1%; font-size: 3.1cqw; } .mg-led.stage { left: 88%; top: 27.7%; width: 6.6%; height: 4.9%; font-size: 2.7cqw; font-family: inherit; font-weight: 900; } .mg-led.stage b { color: #FF8A1A; } .mg-led.stage i { font-style: normal; color: #9AA0A6; margin-left: .2em; } .mg-led.bump { animation: mg-bump .3s var(--ease); } @keyframes mg-bump { 50% { transform: scale(1.12); filter: brightness(1.5); } } /* 뿅망치가 치는 자리: 번쩍 + 원 퍼짐 + "+100" */ .mg-hit { position: absolute; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; } .mg-hit::before, .mg-hit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; } .mg-hit::before { background: radial-gradient(circle, rgba(255, 244, 180, .95) 0%, rgba(255, 196, 40, .6) 35%, transparent 65%); } .mg-hit::after { border: .5cqw solid #FFE066; } .mg-hit span { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); opacity: 0; font-size: 3cqw; font-weight: 900; color: #FFE066; -webkit-text-stroke: .25cqw #3B1F00; paint-order: stroke; white-space: nowrap; } .mg-hit.go::before { animation: mg-flash .55s ease-out; } .mg-hit.go::after { animation: mg-ring .6s ease-out; } .mg-hit.go span { animation: mg-plus .9s var(--ease); } @keyframes mg-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } } @keyframes mg-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.25); } } @keyframes mg-plus { 0% { opacity: 0; transform: translate(-50%, 30%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } } /* 아래 1→7 단계 동그라미: 친 순서대로 불이 들어옴 */ .mg-chip { position: absolute; width: 7.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none; box-shadow: 0 0 0 .45cqw #FFE066, 0 0 2.4cqw .6cqw rgba(255, 214, 80, .75); transition: opacity .25s; } .mg-chip.on { opacity: 1; } .mg-chip.on.last { animation: mg-bump .5s var(--ease) 2; } /* 한 판 끝: 트로피 칸 반짝 */ .mg-clear { position: absolute; left: 75%; top: 86%; width: 24%; height: 12%; border-radius: 2cqw; opacity: 0; pointer-events: none; background: radial-gradient(ellipse, rgba(255, 220, 90, .35), transparent 70%); } .mg-clear.on { animation: mg-clear 1.6s ease-in-out; } @keyframes mg-clear { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } } .mole-game .mg-stage { box-shadow: 0 30px 70px rgba(8, 24, 53, .25); } .mole-game .mg-stage > img { box-shadow: none; border-radius: 0; } @media (max-width: 760px) { .mg-stage { border-radius: 18px; } }