/* =========================================================
   소소도담 다방 공용 효과  v1.0.0  (2026-09-19)
   - 각 페이지 <head> 영역에서 이 파일 하나만 추가하면 적용됩니다.
   - 폰트: Gowun Dodum(제목) / Gaegu(손글씨) / Caveat(영문 필기체)
   - JS가 켜졌을 때(.dfx-js)만 등장 효과가 숨김 처리 -> JS 실패 시에도 내용은 보임
   ========================================================= */
:root{
  --dfx-title:'Gowun Dodum',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --dfx-hand:Gaegu,'Gowun Dodum',Pretendard,'Apple SD Gothic Neo',cursive;
  --dfx-script:Caveat,Gaegu,'Gowun Dodum',cursive;
  --dfx-rose:#eb7fa2;
}

/* 1) 스크롤 등장 */
.dfx-js .dfx-reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--dfx-d,0s)}
.dfx-js .dfx-reveal.dfx-in{opacity:1;transform:none}
.dfx-js .dfx-reveal.dfx-pop{transform:scale(.92)}
.dfx-js .dfx-reveal.dfx-pop.dfx-in{transform:none}

/* 2) 스크롤 진행바 */
.dfx-progress{position:fixed;top:0;left:0;width:100%;height:4px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#f7afc4,#eb7fa2,#f0c987);z-index:99999;pointer-events:none}

/* 3) 떨어지는 꽃잎 */
.dfx-petals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.dfx-petal{position:absolute;top:-30px;opacity:0;color:#f2b8c4;font-size:var(--s,16px);animation:dfx-drift var(--t,14s) linear var(--dl,0s) infinite}
@keyframes dfx-drift{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:.8}100%{transform:translate(var(--dx,30px),110vh) rotate(var(--r,220deg));opacity:0}}

/* 4) 클릭 하트 팡 */
.dfx-pop-heart{position:fixed;z-index:100000;pointer-events:none;color:var(--dfx-rose);font-size:16px;animation:dfx-pop .9s ease-out forwards}
@keyframes dfx-pop{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(1.3)}}

/* 5) 공통 헬퍼 애니메이션 (각 페이지 CSS에서 재사용) */
@keyframes dfx-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes dfx-twinkle{0%,100%{opacity:.5;scale:.85}50%{opacity:1;scale:1.18}}
@keyframes dfx-shine{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes dfx-wobble{0%,100%{rotate:0deg}25%{rotate:-9deg}75%{rotate:8deg}}
@keyframes dfx-pulse{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}28%{transform:scale(1)}42%{transform:scale(1.14)}70%{transform:scale(1)}}
@keyframes dfx-spin{to{transform:rotate(360deg)}}

@media (max-width:820px){.dfx-petal:nth-child(n+7){display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .dfx-js .dfx-reveal{opacity:1;transform:none}
  .dfx-petals,.dfx-pop-heart{display:none}
}