/* 두루미 놀이터 · 홈 첫인상 연출 레이어 (public/fx/home.css)
   index.html 은 건드리지 않아요. fx/home.js 가 <html data-fx-home="1"> 를 달 때만 켜지고, 모든 규칙이 [data-fx-home] 범위 안이에요.
   레이아웃(높이·여백)은 바꾸지 않고 transform·opacity·box-shadow·clip-path 와 개별 변형 속성(scale·rotate·translate)만 써요.
   개별 변형 속성을 써서 앱이 이미 거는 transform 애니메이션(floatD 등)과 겹치지 않고 함께 합성돼요.
   모든 모션은 prefers-reduced-motion:no-preference 안에 있어서, 모션 줄이기 설정이면 정지해요. */

@media (prefers-reduced-motion: no-preference) {

  /* ① 히어로: 마스코트가 숨 쉬듯 아주 조금 커졌다 줄고, 몇 초에 한 번 눈 깜박이듯 살짝 눌린다. 말풍선은 천천히 떠 있다 */
  [data-fx-home] .hero-mas { transform-origin: 50% 100%; animation: fx-h-breathe 4.6s ease-in-out infinite; }
  [data-fx-home] .hero-mas .mascot { transform-origin: 50% 100%; animation: fx-h-blink 5.8s ease-in-out 1.4s infinite; }
  [data-fx-home] .hero-mas .bubble { animation: fx-h-bob 4.2s ease-in-out infinite; }

  /* ③ 오늘의 포춘 쿠키: 아직 안 깬 동안만 쿠키가 주기적으로 흔들리고, 카드 위로 빛줄기가 한 번 지나간다 */
  [data-fx-home] #dailyBox:has(#cookieOut[hidden]) .dcookie:not(.crack) { position: relative; overflow: hidden; }
  [data-fx-home] #dailyBox:has(#cookieOut[hidden]) .dcookie:not(.crack) .ck { transform-origin: 50% 90%; animation: fx-h-wobble 4.4s ease-in-out 1.6s infinite; }
  [data-fx-home] #dailyBox:has(#cookieOut[hidden]) .dcookie:not(.crack)::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -36%; width: 30%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .62), rgba(255, 255, 255, 0));
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
    animation: fx-h-shine 4.4s ease-in-out 2.4s infinite;
  }

  /* ④ 오늘의 미션 줄·도감 막대: JS 가 값이 바뀔 때 잠깐 클래스를 붙여 준다 */
  [data-fx-home] #missionRow.fx-h-pulse { border-radius: 10px; animation: fx-h-flash .9s ease-out; }
  [data-fx-home] #missionRow.fx-h-pulse2 { border-radius: 10px; animation: fx-h-flash2 .9s ease-out; }
  [data-fx-home] .dxbar i.fx-h-fill { animation: fx-h-reveal .9s cubic-bezier(.2, .8, .2, 1) both; }
  [data-fx-home] .dxbar i.fx-h-fill2 { animation: fx-h-reveal2 .9s cubic-bezier(.2, .8, .2, 1) both; }

  /* 화면 밖에 나간 히어로·쿠키 카드는 무한 반복 연출을 멈춘다(JS 가 .fx-h-paused 를 붙임) */
  [data-fx-home] .fx-h-paused, [data-fx-home] .fx-h-paused *, [data-fx-home] .fx-h-paused *::before, [data-fx-home] .fx-h-paused *::after { animation-play-state: paused !important; }   /* !important: 요소별 animation 단축 속성(더 구체적인 선택자)이 play-state 를 되돌리지 못하게 */

  /* ② 목록 순차 등장: 화면 아래에 있던 카드만 JS 가 .fx-h-pre 로 숨겨 뒀다가, 들어올 때 .fx-h-show 로 한 번 올라온다 */
  [data-fx-home] .fx-h-pre { opacity: 0; transform: translateY(12px); }
  [data-fx-home] .fx-h-show { animation: fx-h-rise .4s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--fx-h-d, 0ms); }

  /* ⑤ 카테고리 칩 전환: 바뀐 목록의 제목과 카드가 부드럽게 들어온다(카드 위치 순서대로 아주 짧은 지연) */
  [data-fx-home] #homeTests.fx-h-swap .hsec:not([hidden]) .sec-title { animation: fx-h-fade .26s ease-out both; }
  [data-fx-home] #homeTests.fx-h-swap .hsec:not([hidden]) .tcard:not([hidden]) { animation: fx-h-rise .34s cubic-bezier(.2, .8, .3, 1) both; }
  [data-fx-home] #homeTests.fx-h-swap .hsec:not([hidden]) .tcard:nth-child(3) { animation-delay: .04s; }
  [data-fx-home] #homeTests.fx-h-swap .hsec:not([hidden]) .tcard:nth-child(4) { animation-delay: .08s; }
  [data-fx-home] #homeTests.fx-h-swap .hsec:not([hidden]) .tcard:nth-child(n+5) { animation-delay: .12s; }

  /* ⑥ 첫 방문자에게만 한 번: 시작 버튼 주위로 링이 세 번 퍼지고 작은 안내 말풍선이 잠깐 떠 있다 */
  [data-fx-home] .hero-cta.fx-h-nudge { position: relative; animation: fx-h-ring 1.7s ease-out 3; }
  /* 안내 알약은 JS 가 만드는 실제 요소(.fx-h-pill)예요. 버튼 오른쪽의 빈 공간을 재서 들어갈 때만 보이고,
     글자(.hero p 등)와는 절대 겹치지 않아요(자리가 없으면 링만 보여요). */
  [data-fx-home] .fx-h-pill {
    position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
    padding: 4px 10px; border-radius: 99px; background: #c23e25; color: #fff;
    font-size: 11.5px; font-weight: 800; line-height: 1.3;
    box-shadow: 0 4px 10px rgba(194, 62, 37, .3);
    animation: fx-h-tip 5s ease-in-out both;
  }

  @keyframes fx-h-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.012 1.024; } }
  @keyframes fx-h-blink   { 0%, 91%, 97%, 100% { scale: 1 1; } 94% { scale: 1.012 .962; } }
  @keyframes fx-h-bob     { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
  @keyframes fx-h-wobble  { 0%, 76%, 100% { rotate: 0deg; scale: 1; }
                            80% { rotate: -10deg; scale: 1.07; } 84% { rotate: 9deg; } 88% { rotate: -6deg; } 92% { rotate: 3deg; scale: 1.02; } }
  @keyframes fx-h-shine   { 0%, 62% { opacity: 0; translate: 0 0; } 66% { opacity: 1; } 84% { opacity: 0; translate: 470% 0; } 100% { opacity: 0; translate: 470% 0; } }
  @keyframes fx-h-flash   { 0% { background-color: rgba(255, 214, 140, 0); scale: 1; } 25% { background-color: rgba(255, 214, 140, .75); scale: 1.025; } 100% { background-color: rgba(255, 214, 140, 0); scale: 1; } }
  @keyframes fx-h-flash2  { 0% { background-color: rgba(255, 214, 140, 0); scale: 1; } 25% { background-color: rgba(255, 214, 140, .75); scale: 1.025; } 100% { background-color: rgba(255, 214, 140, 0); scale: 1; } }
  @keyframes fx-h-reveal2 { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes fx-h-reveal  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes fx-h-rise    { from { opacity: 0; transform: translateY(12px); } }
  @keyframes fx-h-fade    { from { opacity: 0; } }
  @keyframes fx-h-ring    { 0% { box-shadow: 0 6px 14px rgba(43, 35, 54, .22), 0 0 0 0 rgba(255, 122, 89, .6); }
                            100% { box-shadow: 0 6px 14px rgba(43, 35, 54, .22), 0 0 0 14px rgba(255, 122, 89, 0); } }
  @keyframes fx-h-tip     { 0% { opacity: 0; translate: -6px 0; } 10%, 82% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 4px 0; } }
}