/* 홈 첫 화면 모션 — 등장 연출(1회) + 은은한 상시 움직임
   지우려면 index.html의 hero-motion.css 링크와 head 스크립트만 빼면 됩니다. */

/* ── 상시: 배경 빛 번짐 ── */
.hero-quote { position: relative; isolation: isolate; }
.hero-quote::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(70, 110, 200, .10), transparent 70%) 18% 40% / 46% 70% no-repeat,
    radial-gradient(closest-side, rgba(230, 140, 60, .08), transparent 70%) 78% 60% / 40% 64% no-repeat;
  animation: hm-drift 26s ease-in-out infinite alternate;
}
@keyframes hm-drift {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  50%  { transform: translate3d(3%, 3%, 0) rotate(4deg); }
  100% { transform: translate3d(5%, -3%, 0) rotate(-3deg); }
}

/* ── 상시: 로고 마크가 몇 초마다 은은하게 빛남 ── */
.hero-quote .hero-logo .mk { animation: hm-glow 7s ease-in-out 3.2s infinite; }
@keyframes hm-glow {
  0%, 70%, 100% { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08)); }
  82%           { filter: drop-shadow(0 0 12px rgba(240, 150, 60, .38)) drop-shadow(0 0 22px rgba(60, 110, 220, .22)); }
}

/* ── 등장 연출 (탭에서 처음 홈을 열 때 1회) ── */
html:not(.hero-seen) .hero-quote .hero-logo .mk {
  animation: hm-mark-in 1s cubic-bezier(.2, .9, .25, 1.15) .15s both,
             hm-glow 7s ease-in-out 3.2s infinite;
}
@keyframes hm-mark-in {
  from { opacity: 0; transform: rotate(-110deg) scale(.55); }
  to   { opacity: 1; transform: none; }
}

html:not(.hero-seen) .hero-quote .hero-logo .wd {
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
          mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  animation: hm-wipe .9s cubic-bezier(.45, 0, .2, 1) .55s both, hm-rise .9s ease-out .55s both;
}

/* 세로선이 위에서 아래로 그어진 뒤 문구가 드러남 */
html:not(.hero-seen) .hero-q { animation: hm-line .55s cubic-bezier(.6, 0, .2, 1) 1.2s both; }
@keyframes hm-line {
  0%    { clip-path: inset(0 calc(100% - 12px) 100% 0); }
  99%   { clip-path: inset(0 calc(100% - 12px) 0 0); }
  100%  { clip-path: none; }
}

/* 知體質而知天命 — 붓으로 쓰듯 왼쪽→오른쪽 */
html:not(.hero-seen) .hero-q .han img {
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
          mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  animation: hm-wipe 1.3s cubic-bezier(.5, 0, .3, 1) 1.65s both;
}
@keyframes hm-wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* 체질을 알면 천명을 안다 */
html:not(.hero-seen) .hero-q .ko img { animation: hm-rise .8s ease-out 2.75s both; }
@keyframes hm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 기기에서 '동작 줄이기'를 켠 방문자에게는 움직임 없이 */
@media (prefers-reduced-motion: reduce) {
  .hero-quote::before, .hero-quote .hero-logo .mk, .hero-quote .hero-logo .wd,
  .hero-q, .hero-q .han img, .hero-q .ko img { animation: none !important; }
  .hero-quote .hero-logo .wd, .hero-q .han img { -webkit-mask: none !important; mask: none !important; }
}