/*
  홈(KO·EN) 전용 움직임 — 히어로 배경, 스크롤 등장, 카드 기울기, 시작하기 진행선.
  동작은 assets/home-motion.js 가 맡는다. 원칙:
  - 은은하게. 콘텐츠보다 눈에 띄지 않는다.
  - transform·opacity 만 움직인다 (레이아웃 재계산 없음).
  - 등장 연출은 translate, 카드 기울기는 transform 을 써서 둘이 서로 덮어쓰지 않게 한다.
  - JS 가 없거나 '동작 줄이기' 설정이면 모든 콘텐츠가 처음부터 보인다.
*/

:root {
  --blob-opacity: 0.55;
  --pin-shadow: 0 6px 14px rgba(42, 42, 50, 0.12);
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pop-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --blob-opacity: 0.16;
    --pin-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  }
}

/* ── 배경 블롭: 추억 색 파스텔이 천천히 흘러다닌다 ─────── */

.hero,
.end-cta {
  position: relative;
  isolation: isolate;
}

.bg-blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* filter: blur 대신 방사형 그라데이션 — 같은 번짐을 훨씬 싸게 낸다 */
.bg-blobs i {
  position: absolute;
  width: var(--size, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 68%);
  opacity: var(--blob-opacity);
  animation: blob-drift var(--dur, 22s) ease-in-out infinite alternate;
}

.hero .bg-blobs i:nth-child(1) { --c: var(--memory-purple); --size: 560px; left: -12%; top: -30%; }
.hero .bg-blobs i:nth-child(2) { --c: var(--memory-pink); --size: 480px; right: -8%; top: -10%; --dur: 26s; animation-delay: -6s; }
.hero .bg-blobs i:nth-child(3) { --c: var(--memory-sky); --size: 420px; left: 30%; bottom: -35%; --dur: 30s; animation-delay: -12s; }
.hero .bg-blobs i:nth-child(4) { --c: var(--memory-yellow); --size: 340px; left: 8%; bottom: -10%; --dur: 24s; animation-delay: -3s; }

.end-cta .bg-blobs i:nth-child(1) { --c: var(--memory-pink); --size: 420px; left: 5%; top: -60%; }
.end-cta .bg-blobs i:nth-child(2) { --c: var(--memory-sky); --size: 420px; right: 5%; bottom: -70%; --dur: 28s; animation-delay: -9s; }

@keyframes blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.08); }
  100% { transform: translate(-5%, 3%) scale(0.95); }
}

/* ── 히어로: 떠다니는 맛집 핀 ────────────────────────── */

.hero-pins {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.float-pin {
  position: absolute;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 18px;
  animation: pin-float var(--dur, 6s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

/* 앱 마커처럼 끝이 뾰족한 물방울 모양 */
.float-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50% 50% 50% 6px;
  background: var(--c);
  border: 3px solid var(--surface);
  box-shadow: var(--pin-shadow);
  transform: rotate(-45deg);
}

/* 위치는 데스크톱 2단(글 | 폰) 배치 기준 — 글자와 폰 화면을 가리지 않는 자리 */
.float-pin:nth-child(1) { --c: var(--memory-pink); left: 6%; top: 10%; --dur: 5.5s; }
.float-pin:nth-child(2) { --c: var(--memory-sky); left: 44%; top: 16%; --dur: 7s; --delay: -2s; }
.float-pin:nth-child(3) { --c: var(--memory-yellow); left: 47%; bottom: 20%; --dur: 6s; --delay: -4s; }
.float-pin:nth-child(4) { --c: var(--memory-green); right: 5%; top: 30%; --dur: 6.5s; --delay: -1s; }
.float-pin:nth-child(5) { --c: var(--memory-orange); right: 8%; bottom: 12%; --dur: 5s; --delay: -3s; }
.float-pin:nth-child(6) { --c: var(--memory-purple); left: 26%; bottom: 6%; --dur: 7.5s; --delay: -5s; }

@keyframes pin-float {
  0% { translate: 0 0; rotate: -6deg; }
  100% { translate: 0 -14px; rotate: 6deg; }
}

/* ── 히어로: 첫 화면 등장 ───────────────────────────── */

.hero-copy > * { animation: rise-in 0.8s var(--reveal-ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero .demo { animation: rise-in 1s 0.2s var(--reveal-ease) both; }

/* 제목 둘째 줄 밑에 형광펜이 쓱 그어진다.
   좁은 폰에서 줄이 바뀌어도 이어지도록 가상 요소 대신 글자 배경으로 그린다. */
.hero-copy h1 .hl {
  --marker: color-mix(in srgb, var(--memory-purple) 75%, transparent);
  background: linear-gradient(var(--marker), var(--marker)) no-repeat left 88% / 100% 0.36em;
  animation: marker-sweep 0.9s 0.7s var(--reveal-ease) both;
}

@media (prefers-color-scheme: dark) {
  .hero-copy h1 .hl { --marker: color-mix(in srgb, var(--brand) 38%, transparent); }
}

@keyframes rise-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes marker-sweep {
  from { background-size: 0% 0.36em; }
  to { background-size: 100% 0.36em; }
}

/* ── 스크롤 등장 ────────────────────────────────────── */
/* html.motion-ready 는 JS 가 붙인다. JS 가 없으면 아무것도 숨기지 않는다. */

.motion-ready .reveal:not(.is-revealed) { opacity: 0; }

.motion-ready .reveal.is-revealed {
  animation: rise-in 0.7s var(--reveal-ease) both;
  animation-delay: calc(var(--reveal-i, 0) * 90ms);
}

/* ── 카드: 마우스를 따라 살짝 기울고 빛이 따라온다 ───── */

.cards .card,
.steps li {
  position: relative;
  isolation: isolate;
  transition: transform 0.25s ease-out, box-shadow 0.25s, border-color 0.25s;
}

.cards .card {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
}

.cards .card:hover,
.steps li:hover {
  --lift: -4px;
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}

.steps li:hover { transform: translateY(-4px); }

/* 커서 자리의 은은한 빛 — 카드 배경 위, 글자 아래 */
.cards .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.cards .card:hover::after { opacity: 1; }

.card .icon { transition: transform 0.35s var(--pop-ease); }
.card:hover .icon { transform: rotate(-8deg) scale(1.1); }

/* ── 시작하기: 단계를 잇는 진행선 ─────────────────────── */
/* 선은 번호 원의 중심을 지난다. 37px = li 패딩(22) + 번호 원 반지름(15), 32px = gap(16) × 2 — site.css .steps 와 맞출 것.
   카드마다 쌓임 맥락이 따로 생겨(등장·호버 애니메이션) 번호를 선 위로 올릴 수 없다.
   그래서 선 쪽에서 번호 자리(선 길이의 0·50·100%)를 마스크로 비워 둔다. 3단계 기준. */

.steps {
  --steps-progress: 1; /* JS 가 없으면 다 그어진 상태 */
  --steps-hole: 22px; /* 번호 원 반지름(15) + 켜진 번호의 링(5) + 여유 */
  position: relative;
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 36px;
  left: 37px;
  right: calc((100% - 32px) / 3 - 37px);
  height: 2px;
  pointer-events: none;
  --hole-mask: linear-gradient(90deg,
    transparent 0 var(--steps-hole),
    #000 var(--steps-hole) calc(50% - var(--steps-hole)),
    transparent calc(50% - var(--steps-hole)) calc(50% + var(--steps-hole)),
    #000 calc(50% + var(--steps-hole)) calc(100% - var(--steps-hole)),
    transparent calc(100% - var(--steps-hole)));
  -webkit-mask-image: var(--hole-mask);
  mask-image: var(--hole-mask);
}

.steps::before {
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}

/* scaleX 로 늘리면 마스크 구멍도 같이 밀리므로, 오른쪽을 잘라 내는 방식으로 채운다 */
.steps::after {
  background: linear-gradient(90deg, var(--memory-purple), var(--brand));
  clip-path: inset(0 calc((1 - var(--steps-progress)) * 100%) 0 0);
  transition: clip-path 0.15s linear;
}

.steps li::before {
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.motion-ready .steps li:not(.is-lit)::before {
  background: var(--surface);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
}

.motion-ready .steps li.is-lit::before {
  animation: num-pop 0.45s var(--pop-ease);
  box-shadow: 0 0 0 5px var(--brand-soft);
}

@keyframes num-pop {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

/* 화면 폭이 좁아지면 오른쪽 여백이 사라져 폰 뒤로 핀이 반쯤 숨는다 */
@media (max-width: 1100px) {
  .float-pin:nth-child(4),
  .float-pin:nth-child(5) { display: none; }
}

/* ── 모바일 ─────────────────────────────────────────── */

@media (max-width: 760px) {
  /* 1단이라 핀이 글자 위에 겹친다. 블롭만 남긴다. */
  .hero-pins { display: none; }
  .bg-blobs i { --size: 320px; }
  /* 카드가 세로로 쌓이면 가로 진행선은 의미가 없다. 번호만 차례로 켠다. */
  .steps::before,
  .steps::after { display: none; }
}

/* ── 동작 줄이기 ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bg-blobs i,
  .float-pin,
  .hero-copy > *,
  .hero .demo,
  .hero-copy h1 .hl,
  .motion-ready .reveal.is-revealed,
  .motion-ready .steps li.is-lit::before { animation: none; }
  .cards .card { transform: none; }
}