/* 앞쪽 낮은 곳에서 해가 비춰 '8메디한의원' 구조물 뒤 바닥으로 좌상방 45° 그림자가 드리우는 연출
   (hero-motion.css 위에 덧씌움. 빼려면 이 CSS 링크와 index.html의 <span class="cast">만 지우면 됩니다.) */

/* 그림자: 로고를 복제해 검게 만든 뒤, 글자·마크 각각의 밑변을 기준으로 뒤쪽(좌상방)으로 눕힘 → 글자 뒤에 붙음 */
.hero-quote .hero-logo { position: relative; }
.hero-quote .hero-logo .cast {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: inherit; align-items: inherit; justify-content: inherit; gap: inherit;
  filter: brightness(0) blur(1.6px);
  opacity: 0;
  animation: sun-cast-in 1.6s ease-out 2.6s both, sun-breathe 9s ease-in-out 4.2s infinite;
}
html.hero-seen .hero-quote .hero-logo .cast { animation-delay: 0s, 1.6s; }
.hero-quote .hero-logo .cast img {
  filter: none !important;
  transform-origin: 50% 100%;
  transform: skewX(45deg) scaleY(.32);
  -webkit-mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
          mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
}
/* 마크는 아래로 삐져나온 침 끝이 아니라 원형의 밑변(이미지 높이의 85%)을 바닥으로 */
.hero-quote .hero-logo .cast .mk { transform-origin: 50% 85.2%; }
/* 복제본은 원본의 등장·반짝임 애니메이션을 따라가지 않음 (그림자는 위의 페이드로만 등장) */
.hero-quote .hero-logo .cast .mk, .hero-quote .hero-logo .cast .wd { animation: none !important; }

/* 해가 떠오르며 그림자가 바닥에 짙어짐 */
@keyframes sun-cast-in { from { opacity: 0; } to { opacity: .2; } }
/* 구름이 지나가듯 그림자 농도가 아주 살짝 오르내림 */
@keyframes sun-breathe {
  0%, 100% { opacity: .2; }
  50%      { opacity: .13; }
}

/* 햇빛: 오른쪽 아래 앞쪽에서 비추는 따뜻한 빛 */
.hero-quote::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: -90%; right: -10%; width: 70%; height: 160%;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .30), rgba(255, 210, 150, .10) 55%, transparent 100%);
  opacity: 0;
  animation: sun-in 1.8s ease-out 2.4s both, sun-glow 9s ease-in-out 4.2s infinite;
}
html.hero-seen .hero-quote::after { animation-delay: 0s, 1.8s; }
@keyframes sun-in   { from { opacity: 0; transform: translate(-6%, 10%); } to { opacity: 1; transform: none; } }
@keyframes sun-glow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }



@media (prefers-reduced-motion: reduce) {
  .hero-quote .hero-logo .cast { animation: none !important; opacity: .2; }
  .hero-quote::after { animation: none !important; opacity: 1; }
}