/* ════════════════════════════════════════════════════════════════════
   entry-scene.css — 상담 건물 ENTRY SCENE (2026-09-12)
   ────────────────────────────────────────────────────────────────────
   사람 지시 [도깨비 마을 — 상담 건물 ENTRY SCENE 누락 수정 MASTER] —
   "단순 zoom/fade/page transition과 ENTRY SCENE을 구분하라." 이미 있는
   village-building-entry.js(마을→건물 push-in)는 손 안 댄다 — 그 뒤,
   각 건물의 기존 정적 랜딩(#228 타로집 · #248 사주집 · #259 도사집) 위에
   [방 밝기 단계 reveal → 상담사 등장 → 말풍선 → 카드/CTA → 보조 UI]
   4단 스테이지를 얹는 것이 이 파일 하나의 일이다.

   ★ 새 캐릭터 레이어가 아니다 — 세 랜딩 전부 루나·하연·청운이 이미 배경
   합성사진(landing-scene.jpg 등) 안에 같이 구워져 있다(2026-09-10
   [내부 리뉴얼]에서 각 랜딩의 캐릭터 cutout 레이어가 `display:none`으로
   꺼지고 배경 자체가 [이미 자연스럽게 앉은 합성본]으로 바뀐 것 — 각
   tarot-landing.css:101 · saju-landing.css:72 · shop-oracle-ui.css:421-422
   주석 확인). **그래서 "상담사가 방과 분리되어 opacity+translateY로 단독
   등장"은 지금 자산으로는 문자 그대로 못 만든다** — 방과 상담사가 한 장의
   사진이라 둘을 따로 못 움직인다. 이 파일은 그것을 [방 밝기가 100%에
   닿는 순간 = 그가 드러나는 순간]으로 근사한다(아래 §2 es-room-reveal).
   [자산 필요] 루나·하연·청운을 지금 배경과 같은 포즈·의상의 투명 cutout
   으로 따로 받으면, 그 레이어만 독립적으로 opacity+translateY 시키는
   문자 그대로의 연출로 바꿀 수 있다 — 지금은 새로 생성하지 않고 이 근사로
   대신하며, 이 사실만 보고한다(§9 새 에셋 임의 생성 금지).

   ★ CSS 애니메이션만으로 자동 재생된다 — entry-scene.js 는 [이번 세션에
   이 건물을 이미 봤는가]로 --es-scale(1=FULL·0.45=SHORT) 값 하나만
   얹는 보조 역할이다. 그 스크립트가 아예 안 돌아도(차단·에러) --es-scale
   은 CSS 기본값 1(FULL)로 남고 아래 애니메이션은 그대로 끝까지 돈다 —
   상담 진입을 지연·차단하지 않는다(요구 §7). 이 파일 자체가 하나도
   안 먹는(@keyframes 미지원) 초구형 WebView라면 opacity/transform 은
   각 요소의 원래 정적값(완전히 보임·완전히 눌림) 그대로다 — 그래서도
   안전하다.
   ════════════════════════════════════════════════════════════════════ */

@keyframes es-room-reveal{
  0%   { filter: brightness(.42) saturate(.82) contrast(.97); }
  70%  { filter: brightness(1) saturate(1) contrast(1); }
  100% { filter: brightness(1) saturate(1) contrast(1); }
}
@keyframes es-glow-reveal{
  0%   { opacity: 0; }
  100% { opacity: var(--es-glow-o, 1); }
}
@keyframes es-tier-reveal{
  0%   { opacity: 0; transform: translateY(var(--es-ty, 8px)); pointer-events: none; }
  99%  { pointer-events: none; }
  100% { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
@keyframes es-tier-reveal-reduced{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── 타로집(#tj-landing) — §1 방(배경 필터) · §1 창문/등불 glow ── */
body.tj-landing-active .tj-landing-bg{
  animation: es-room-reveal calc(var(--es-scale,1) * 480ms) ease-out both;
}
body.tj-landing-active .tj-landing-bg-glow{
  --es-glow-o: .58;
  animation: es-glow-reveal calc(var(--es-scale,1) * 480ms) ease-out both;
}
/* §2 말풍선(=상담사 등장 직후) — 방 reveal(480ms)이 끝나고 80ms 뒤(=560ms)에 시작 */
body.tj-landing-active .tj-landing-bubble{
  animation: es-tier-reveal calc(var(--es-scale,1) * 220ms) ease-out calc(var(--es-scale,1) * 560ms) both;
}
/* §3 카드/CTA */
body.tj-landing-active .tj-landing-cta,
body.tj-landing-active .tj-landing-freebadge,
body.tj-landing-active .tj-landing-row{
  animation: es-tier-reveal calc(var(--es-scale,1) * 200ms) ease-out calc(var(--es-scale,1) * 760ms) both;
}
/* §4 보조 UI — 뒤로가기·음악칩·안내(ⓘ) */
body.tj-landing-active .backhome,
body.tj-landing-active .bgm-chip,
body.tj-landing-active .hud-info{
  animation: es-tier-reveal calc(var(--es-scale,1) * 160ms) ease-out calc(var(--es-scale,1) * 920ms) both;
}

/* ── 사주집(#sj-landing) — 타로집과 같은 4단, 같은 타이밍 ── */
/* ★ VISUAL/ANIMATION FINAL GATE(2026-09-15) — 사주집만 반입(§0 범위: 이번 작업은 하연방 전용,
   타로집·도사집 줄은 그대로 둔다). 콤마로 `sjl-kenburns`(장면 켄번즈 · saju-landing.css 정의)를
   같이 건다 — `es-room-reveal` 은 filter 만, `sjl-kenburns` 는 transform 만 써서 같은 자리에서
   부딪히지 않는다(둘 다 같은 프로퍼티를 쓰면 뒤엣것이 앞엣것을 통째로 덮는다 — 그래서 opacity를
   같이 쓰는 곳(.sj-landing-bg-glow)엔 opacity 대신 filter:brightness() 로 짠 sjl-glow-breathe
   를 썼다). 480ms reveal 이 끝난 뒤에도 두 무한 루프는 계속 돌아 방이 [멈춘 사진]으로 안 굳는다. */
body.sj-landing-active .sj-landing-bg{
  animation: es-room-reveal calc(var(--es-scale,1) * 480ms) ease-out both,
             sjl-kenburns 24s ease-in-out infinite alternate;
}
body.sj-landing-active .sj-landing-bg-glow{
  --es-glow-o: .55;
  animation: es-glow-reveal calc(var(--es-scale,1) * 480ms) ease-out both,
             sjl-glow-breathe 5.2s ease-in-out infinite;
}
body.sj-landing-active .sj-landing-bubble{
  animation: es-tier-reveal calc(var(--es-scale,1) * 220ms) ease-out calc(var(--es-scale,1) * 560ms) both;
}
body.sj-landing-active .sj-landing-cards,
body.sj-landing-active .sj-landing-cards2,
body.sj-landing-active .sj-landing-ai{
  animation: es-tier-reveal calc(var(--es-scale,1) * 200ms) ease-out calc(var(--es-scale,1) * 760ms) both;
}
body.sj-landing-active .backhome,
body.sj-landing-active .bgm-chip,
body.sj-landing-active .hud-info{
  animation: es-tier-reveal calc(var(--es-scale,1) * 160ms) ease-out calc(var(--es-scale,1) * 920ms) both;
}

/* ── 도사집(body.dj-on.dj-landing) — 랜딩 DOM이 상담 준비 후 shop-oracle.js 랜딩보이기()로
   늦게 붙는다. 그래도 이 규칙은 그 순간 그대로 적용된다 — @keyframes 는 [요소가 이 class를
   갖게 된 시점]에 자동으로 시작하지, 페이지 로드 시점에 묶여 있지 않다. 창문/등불 glow
   레이어가 따로 없어(현재 자산 구조) §1은 배경 필터 하나로만 한다. ── */
body.dj-on.dj-landing .dj-landing-scene{
  animation: es-room-reveal calc(var(--es-scale,1) * 480ms) ease-out both;
}
body.dj-on.dj-landing .dj-bubble{
  animation: es-tier-reveal calc(var(--es-scale,1) * 220ms) ease-out calc(var(--es-scale,1) * 560ms) both;
}
body.dj-on.dj-landing .dj-landing{
  animation: es-tier-reveal calc(var(--es-scale,1) * 200ms) ease-out calc(var(--es-scale,1) * 760ms) both;
}
body.dj-on.dj-landing .backhome,
body.dj-on.dj-landing .bgm-chip,
body.dj-on.dj-landing .hud-info{
  animation: es-tier-reveal calc(var(--es-scale,1) * 160ms) ease-out calc(var(--es-scale,1) * 920ms) both;
}

/* ── 저사양/모션최소 — 확대·단계 reveal 없이 짧은 fade 하나(150~250ms)로 대신한다 ── */
@media (prefers-reduced-motion: reduce){
  body.tj-landing-active .tj-landing-bg,
  body.tj-landing-active .tj-landing-bg-glow,
  body.sj-landing-active .sj-landing-bg,
  body.sj-landing-active .sj-landing-bg-glow,
  body.dj-on.dj-landing .dj-landing-scene{
    animation: none !important;
  }
  body.tj-landing-active .tj-landing-bubble,
  body.tj-landing-active .tj-landing-cta,
  body.tj-landing-active .tj-landing-freebadge,
  body.tj-landing-active .tj-landing-row,
  body.sj-landing-active .sj-landing-bubble,
  body.sj-landing-active .sj-landing-cards,
  body.sj-landing-active .sj-landing-cards2,
  body.sj-landing-active .sj-landing-ai,
  body.dj-on.dj-landing .dj-bubble,
  body.dj-on.dj-landing .dj-landing,
  body.tj-landing-active .backhome, body.tj-landing-active .bgm-chip, body.tj-landing-active .hud-info,
  body.sj-landing-active .backhome, body.sj-landing-active .bgm-chip, body.sj-landing-active .hud-info,
  body.dj-on.dj-landing .backhome, body.dj-on.dj-landing .bgm-chip, body.dj-on.dj-landing .hud-info{
    animation: es-tier-reveal-reduced 200ms ease-out both;
  }
}