/* =========================================================
   motion.css — 홈 히어로 수호신 클립 시안 (2026-08-10)
   - 클립은 히어로 배경 레이어: 은은하게(불투명도 제한) + 하단 페이드로 본문 가독 보존
   - 색·톤은 common.css 테마 변수만 사용 (라이트/다크 자동)
========================================================= */

/* 배경 비디오 — heroBg(정지 이미지) 위, 본문 아래 */
/* 2026-08-10 강위 피드백 "뭐가 바뀌었는지 모르겠다" — 유령 배경(.42) 폐기, 또렷하게.
   상단 55%는 클립이 온전히 보이고, 헤드라인·CTA 구간에서만 부드럽게 사라짐 */
#heroClip{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
  z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.6s ease;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.12) 80%, transparent 94%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.12) 80%, transparent 94%);
}
#heroClip.on{opacity:.92}
@media (min-width:60rem){
  /* PC는 가로 화면이라 세로 클립을 오른쪽에 세워 배치 — 여백의 미 유지 */
  #heroClip{left:auto; right:4vw; width:min(30vw,400px); object-position:center top;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 72%, transparent 98%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 72%, transparent 98%)}
  #heroClip.on{opacity:.95}
}

/* 오늘의 띠 캡션 */
.tticap{margin:.9rem 0 0; font-size:.82rem; color:var(--mist); word-break:keep-all}
.tticap b{color:var(--celadon-deep); font-weight:400}
/* 2026-08-10: 띠 선택의 목적지 — 세 얼굴 랜딩 링크 */
.tticap-go{display:inline-block; margin-left:.45rem; padding:.12rem .55rem;
  border:1px solid var(--celadon); border-radius:999px;
  color:var(--celadon-deep); text-decoration:none; white-space:nowrap}
.tticap-go:active{opacity:.75}

/* 12띠 전환 칩 — 가로 스크롤 한 줄 */
.ttichips{display:flex; gap:.4rem; margin-top:.5rem; padding-bottom:.25rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.ttichips::-webkit-scrollbar{display:none}
.ttichip{flex:0 0 auto; padding:.32rem .72rem; font-size:.8rem; line-height:1;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  word-break:keep-all; white-space:nowrap}
.ttichip.cur{color:var(--celadon-deep); border-color:var(--celadon);
  box-shadow:0 0 0 1px var(--celadon) inset}
.ttichip:active{opacity:.7}

@media (prefers-reduced-motion:reduce){
  #heroClip{display:none}
}