@charset "utf-8";

/* ==========================================================================
   메인 비주얼 모션 (2026)
   · 일러스트를 레이어로 분해해 GPU transform 으로만 움직임 → 레이아웃 비용 0
   · 바깥 span = 등장 모션 / 안쪽 img = 반복 모션 (transform 충돌 방지)
   · prefers-reduced-motion 존중
   ========================================================================== */

/* ---------- 배경 : 아주 약한 원형 그라데이션 + 빛 스침 ---------- */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none;
  right: -6%; top: -18%; width: min(78vw, 980px); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
              rgba(0, 168, 168, .13) 0%,
              rgba(0, 143, 168, .07) 38%,
              rgba(0, 168, 168, 0) 68%);
  opacity: 0; animation: heroGlowIn 1.6s ease-out .1s forwards;
}
.hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 auto 0 0; width: 26%;
  background: linear-gradient(105deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .34) 46%,
              rgba(0, 168, 168, .05) 54%,
              rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-14deg);
  animation: heroSheen 2.6s cubic-bezier(.35, 0, .2, 1) .45s 1;
}
@keyframes heroGlowIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes heroSheen {
  0%   { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: .35; }
  100% { transform: translateX(330%) skewX(-14deg); opacity: 0; }
}

/* ---------- 일러스트 스테이지 ---------- */
.hero-art { margin: 0; width: 100%; }
.hero-art__stage {
  position: relative; width: 100%; max-width: 620px; margin-left: auto;
  aspect-ratio: 1549 / 1168;
}
.hero-art__l { position: absolute; display: block; }
.hero-art__l picture { display: block; }
.hero-art__l img { display: block; width: 100%; height: auto; will-change: transform; }

/* 레이어 배치 : 디자이너 PSD 원본(2336×1600)에서 실측한 비율 */
.hero-art__edge      { left:  70.05%; top:  14.88%; width:  10.01%; }
.hero-art__bars      { left:  21.69%; top:  29.55%; width:  39.25%; }
.hero-art__arrow     { left:  13.11%; top:   0.60%; width:  40.80%; }
.hero-art__coin--l   { left:   0.00%; top:  44.86%; width:  14.65%; }
.hero-art__coin--r   { left:  83.93%; top:  29.28%; width:  11.62%; }
.hero-art__coin--b   { left:  17.30%; top:  70.72%; width:  15.30%; }
.hero-art__car       { left:  47.77%; top:  58.48%; width:  52.23%; }

/* 카드 본체 : 이미지 대신 CSS 로 그려 어떤 해상도에서도 선명하게 */
.hero-art__card {
  position: absolute; left: 18.72%; top: 2.48%; width: 54.23%; height: 81.34%;
  border-radius: 11% / 9.5%;
  background: linear-gradient(152deg, #FDFEFF 0%, #F3F8FB 46%, #E8F0F6 100%);
  box-shadow: 0 14px 34px rgba(58, 90, 120, .13), 0 2px 6px rgba(58, 90, 120, .05);
  opacity: 0;
  animation: artCardIn .9s cubic-bezier(.22, .8, .28, 1) .05s forwards;
}
/* 카드 아래 접힘(파란 띠) — 이미지 대신 CSS 로 깨끗하게 */
.hero-art__card::after {
  content: ''; position: absolute; left: 6%; right: -6%; bottom: -4.2%; height: 6.4%;
  border-radius: 500rem;
  background: linear-gradient(100deg, #5E99BF 0%, #7CB3CE 55%, #9CC7DC 100%);
  z-index: -1;
}

@keyframes artCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 1) 그래프가 위로 올라가는 효과 ---------- */
.hero-art__bars {
  clip-path: inset(100% 0 0 0);
  animation: artBarsReveal 1.05s cubic-bezier(.16, .84, .3, 1) .42s forwards;
}
@keyframes artBarsReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(-8% 0 0 0); }
}
.hero-art__bars img {
  transform: translateY(16%);
  filter: drop-shadow(-4px 7px 9px rgba(58, 90, 120, .17));
  animation: artBarsRise 1.05s cubic-bezier(.16, .84, .3, 1) .42s forwards;
}
@keyframes artBarsRise { to { transform: none; } }

.hero-art__edge, .hero-art__arrow, .hero-art__coin, .hero-art__car { opacity: 0; }

.hero-art__edge { animation: artFadeUp .8s cubic-bezier(.22, .8, .28, 1) .12s forwards; }

.hero-art__arrow {
  filter: drop-shadow(-6px 9px 11px rgba(58, 90, 120, .19));
  animation: artArrowIn 1s cubic-bezier(.18, .86, .28, 1) .68s forwards;
}
@keyframes artArrowIn {
  from { opacity: 0; transform: translate(-9%, 16%) scale(.9) rotate(-5deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.hero-art__arrow img { animation: artArrowFloat 5.5s ease-in-out 1.7s infinite; }
@keyframes artArrowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3.5%); }
}

/* ---------- 2) 코인이 천천히 떨어지는 효과 ---------- */
.hero-art__coin--l { animation: artCoinDrop 1.05s cubic-bezier(.3, .9, .35, 1) .95s forwards; }
.hero-art__coin--r { animation: artCoinDrop 1.05s cubic-bezier(.3, .9, .35, 1) 1.12s forwards; }
.hero-art__coin--b { animation: artCoinDrop 1.05s cubic-bezier(.3, .9, .35, 1) 1.28s forwards; }
@keyframes artCoinDrop {
  from { opacity: 0; transform: translateY(-58%) rotate(-14deg) scale(.86); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.hero-art__coin--l img { animation: artCoinFall 7.5s ease-in-out 2.1s infinite; }
.hero-art__coin--r img { animation: artCoinFall 9s   ease-in-out 2.4s infinite; }
.hero-art__coin--b img { animation: artCoinFall 8.2s ease-in-out 2.7s infinite; }
@keyframes artCoinFall {
  0%   { transform: translateY(-9%) rotate(-4deg); }
  50%  { transform: translateY(9%)  rotate(4deg); }
  100% { transform: translateY(-9%) rotate(-4deg); }
}

.hero-art__coin img { filter: drop-shadow(2px 6px 8px rgba(120, 90, 30, .26)); }

/* ---------- 3) 자동차가 살짝 앞으로 ---------- */
.hero-art__car { animation: artCarIn 1.1s cubic-bezier(.2, .84, .3, 1) .55s forwards; }
@keyframes artCarIn {
  from { opacity: 0; transform: translateX(-7%) scale(.96); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.hero-art__car img {
  filter: drop-shadow(0 9px 12px rgba(58, 90, 120, .20));
  animation: artCarNudge 4.6s cubic-bezier(.45, 0, .55, 1) 1.9s infinite;
}
@keyframes artCarNudge {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(2.6%, -.9%); }
  70%  { transform: translate(2.2%, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes artFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 4) 숫자 카운트업 ---------- */
.hero__count {
  display: inline-block; text-align: left;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
/* 최종 폭을 미리 예약 → 카운트 중 레이아웃 이동(CLS) 0 */
.hero__count { min-width: var(--count-w, auto); }

/* ---------- 5) 강점 아이콘 순차 등장 ---------- */
.hero__point { opacity: 0; animation: artFadeUp .7s cubic-bezier(.22, .8, .28, 1) forwards; }
.hero__point:nth-child(1) { animation-delay: 1.02s; }
.hero__point:nth-child(2) { animation-delay: 1.14s; }
.hero__point:nth-child(3) { animation-delay: 1.26s; }
.hero__point:nth-child(4) { animation-delay: 1.38s; }
.hero__point i { transition: transform .25s ease; }
.hero__point:hover i { transform: translateY(-3px); }

/* 헤드라인/서브카피도 동일 리듬으로 */
.hero__title { opacity: 0; animation: artFadeUp .8s cubic-bezier(.22, .8, .28, 1) .06s forwards; }
.hero__sub   { opacity: 0; animation: artFadeUp .8s cubic-bezier(.22, .8, .28, 1) .26s forwards; }

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before { opacity: 1; animation: none; }
  .hero::after  { display: none; }
  .hero-art__card,
  .hero-art__l,
  .hero__point,
  .hero__title,
  .hero__sub { opacity: 1 !important; animation: none !important; transform: none !important; }
  .hero-art__bars { clip-path: none !important; }
  .hero-art__l img { animation: none !important; transform: none !important; }
}