/* ==================================================================
   히어로 등장 애니메이션 — 기하학 도형(인라인 SVG) + 상단 문구
   index.html 에서만 불러온다.

   크기·여백은 style.css 의 규칙을 그대로 쓰고,
   여기서는 SVG 표시 방식과 애니메이션만 다룬다.

   도형은 크게 세 가지로 나뉘어 움직인다.
     .sh        제자리에서 좌우로 조금(PC 72px / 모바일 44px) 밀려 들어온다
     .sh-lines  선 무리. 제자리에서 한 줄씩 순서대로 켜진다
     .sh--across / .sh--late  원과 물방울. 먼 거리를 가로질러 와 맨 마지막에
                안착한다. 시안의 핵심 도형이라 끝까지 남겨 시선을 모은다
   ================================================================== */

.hero-shapes {
    display: block;
    height: auto;
    /* 도형은 viewBox 밖으로 나가면 잘린다. 그 경계선이 눈에 띄지 않게 하는 방법은
       아래 '잘리는 경계선을 바깥으로 밀어내기' 부분 참고. 폭도 거기서 정한다. */
    overflow: hidden;
}

/* PC 는 01.svg, 모바일은 02.svg — style.css 와 같은 751px 기준으로 바꿔 끼운다 */
.hero-shapes--pc { display: none; }
.hero-shapes--mo { display: block; }

/* ---- 잘리는 경계선을 바깥으로 밀어내기 ----
   index.html 의 viewBox 에 좌우 여백을 덧붙여 놓았다 (PC 90 / 모바일 55 단위).
   그대로 두면 넓어진 만큼 그림이 작아지므로, 넓힌 비율(--grow)만큼 SVG 를 키우고
   늘어난 폭을 음수 여백으로 되돌린다. 그림 크기·위치는 그대로이고,
   잘리는 선만 아무것도 안 그려진 바깥쪽으로 옮겨간다.

   --grow = 넓힌 viewBox 폭 ÷ 원래 viewBox 폭 */
.hero-shapes--pc { --grow: calc(981.983 / 801.983); }   /* 원래 801.983 + 여백 90 x 2 */
.hero-shapes--mo { --grow: calc(571.984 / 461.984); }   /* 원래 461.984 + 여백 55 x 2 */

.hero-shapes {
    width: calc(100% * var(--grow));
    margin: 0 calc(100% * (1 - var(--grow)) / 2);
    /* reset.css 가 모든 svg 를 max-width: 100% 로 묶어두기 때문에,
       풀어주지 않으면 위에서 넓힌 width 가 다시 100% 로 깎여 그림이 작아진다 */
    max-width: none;
}

@media (min-width: 751px) {
    .hero-shapes--pc { display: block; }
    .hero-shapes--mo { display: none; }
}

/* 넓어진 SVG 가 화면 밖으로 삐져나가도 가로 스크롤은 생기지 않게 한다.
   overflow: hidden 이 아니라 clip 을 쓴다 — hidden 은 스크롤 영역을 새로 만들어
   상단 고정 버튼(.cta__inner)이 사라지는 문제가 생기지만, clip 은 자르기만 한다. */
html,
body { overflow-x: clip; }

/* ---- 등장 애니메이션 ----
   --dx  : 도형이 밀려 들어오는 거리. SVG 안의 px 은 viewBox 단위라
           화면 크기가 달라져도 도형과 같은 비율로 함께 줄고 늘어난다.
   --dur : 도형 하나가 다 나타나는 데 걸리는 시간.
           PC 는 화면이 넓어 도형이 지나는 거리도 길기 때문에,
           모바일과 같은 시간을 주면 휙 지나가듯 급해 보인다. 그래서 더 여유 있게 잡았다. */
.hero-shapes--pc { --dx: 72px; --dur: 1.2s; }   /* 여백 90 보다 작다 */
.hero-shapes--mo { --dx: 44px; --dur: .8s;  }   /* 여백 55 보다 작다 */

.sh {
    opacity: 0;
    animation: sh-in-left var(--dur) cubic-bezier(.22, .8, .3, 1) both;
}

/* 오른쪽에 놓인 도형은 반대 방향에서 들어온다 */
.sh--r { animation-name: sh-in-right; }

/* ---- 멀리서 가로질러 오는 도형 (2개) ----
   다른 도형은 제자리에서 조금(72px) 밀려 들어오지만, 이 둘은 훨씬 먼 거리를
   가로질러 온다. 서로 반대 방향이라 화면이 한쪽으로 쏠리지 않는다.

     왼쪽 위 원   : 가운데  -> 왼쪽 제자리    325px  (오른쪽에서 왼쪽으로)
     가운데 물방울 : 왼쪽 끝 -> 가운데 제자리  314px  (왼쪽에서 오른쪽으로)

   거리와 시간이 거의 같아 둘의 속도가 사실상 같다.

   공통 — 이 둘은 시안의 핵심 도형이라 마지막까지 남겨 시선을 모은다.
   다만 나머지가 다 끝난 뒤(1.9s)에 시작하면 움직임이 한 번 끊겨서
   '애니메이션이 끝났다' 고 인식한 뒤에 나오게 되어 그냥 지나치기 쉽다.
   그래서 나머지가 마무리되는 동안 이미 움직이고 있도록 겹쳐 둔다.

     다른 도형 · 선 무리 : 0.00 ~ 1.87s
     이 두 도형          : 1.20 ~ 2.80s
                           1.87s 시점에 65% 진행 -> 움직임이 끊기지 않는다
                           이후 0.93s 동안 이 둘만 남아 움직인다

   곡선은 초반에 튀지 않고 완만하게 감속하는 것을 쓴다.
   시간이 같으므로 이동 거리가 짧은 쪽이 저절로 더 느리게 움직인다.

   더 눈에 띄게 하려면 animation-delay 를 키운다. 다만 1.9s 를 넘기면
   나머지와 겹치는 구간이 사라져 다시 끊겨 보인다.
   0s 로 되돌리면 예전처럼 다른 도형과 완전히 같이 움직인다. */
.sh--across {
    animation-delay: .5s;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* 왼쪽 위 원 — 그림 맨 오른쪽 끝에서 출발해 왼쪽 위 제자리까지 온다.

   출발점 650px = 원(폭 152.5)의 오른쪽 끝을 그림 오른쪽 끝에 맞춘 값.
     그림 폭 801.983 (여백을 뺀 원래 viewBox 폭)
     801.983 - 152.476 = 649.5 -> 650

   숫자를 키우면 그림 밖에서 출발한다. 다만 892(여백까지 넣은 viewBox 의
   오른쪽 끝)를 넘기면 원이 잘린 채로 서 있다가 들어오므로 그 전에서 멈춘다.

   시간은 2s -> 2.6s 로 늘렸다. 거리가 전(325px)의 두 배라 같은 시간을 주면
   속도도 두 배가 되어 휙 지나가듯 보인다. 2.6s 면 1 초에 250px 로,
   전(162px)보다는 빠르지만 눈으로 따라갈 수 있다.
   원래 속도 그대로 가려면 4s 가 필요한데, 그러면 혼자 너무 오래 남는다.

   출발은 기다리지 않고 다른 도형과 같이 0s 에 시작한다. 거리가 길어
   2.6s 를 다 쓰기 때문에, 늦게 출발시키지 않아도 맨 마지막에 안착한다.

     다른 도형          : 0.00 ~ 1.87s
     선 무리(오른쪽 위) : 0.00 ~ 1.44s
     물방울             : 0.50 ~ 2.50s
     왼쪽 위 원         : 0.00 ~ 2.60s

   animation-delay 줄을 지우면 0s 가 아니라 위 .sh--across 의 .5s 를
   물려받는다. 0s 로 두려면 줄을 남겨 둬야 한다.

   이 원은 그림 전체를 가로지르며 다른 도형 위를 지나간다. 그래서
   index.html 에서 PC SVG 의 맨 마지막에 두었다 —
   SVG 는 나중에 적힌 것이 위에 그려지므로, 순서를 앞으로 옮기면 오른쪽 위
   선 무리 뒤로 숨어 버린다. 최종 안착 위치(왼쪽 위 x 0~152)에는 겹치는
   도형이 없어서, 애니메이션이 끝난 화면은 다른 페이지와 완전히 같다.

   투명도는 옅은 상태에서 시작해 금방 제 색이 된다(sh-fade-soft).
   두 가지를 한 번에 해결한다.

   1) 오른쪽 끝에서 불쑥 나타나지 않는다.

   2) 출발 구간에서 옅은 동안 아래가 비쳐, 겹쳐 있는 오른쪽 위 선 무리가
      하나씩 켜지는 장면이 가려지지 않는다.

   다만 끝까지 서서히 진해지게 하면(모바일이 쓰는 sh-fade-late) 출발 구간이
   안 보여서 어디서 왔는지 알 수 없다. 그래서 20%(0.52s) 만에 제 색이 된다. */
.sh--across-r {
    --dx: 650px;
    animation-name: sh-move-right, sh-fade-soft;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1), linear;
    animation-fill-mode: both, both;
    animation-delay: 0s;
    animation-duration: 2.6s;
}

/* 가운데 물방울 — 왼쪽 끝에서 온다.
   출발점은 x 0. 왼쪽 반원·왼쪽 세로선과 세로 띠(y 134.9~261.2)가 같아서
   같은 줄에서 흘러온 것처럼 보인다.

   원과 마찬가지로 왼쪽 선 무리(sh-lines) 뒤에 두어 그 위로 지나가게 했다.
   원본 01.svg 는 선 무리가 물방울을 덮는 순서였는데, 그러면 물방울이
   왼쪽 끝에서 건너오는 동안 선 뒤로 숨어 버린다.
   대신 안착한 뒤에도 물방울 왼쪽 끝(x 313.8~371.3)의 실선이 가려진다.
   그 구간의 선은 폭 0.9px 이하로 가늘어지다 사라지는 부분이라 차이가 작다. */
.sh--across-l {
    --dx: 314px;
    animation-name: sh-in-left;
}

/* ---- 맨 마지막에 들어오는 도형 (모바일 2개) ----
   왼쪽 위 원과 가운데 물방울. PC 에서는 이 둘이 화면을 가로질러 오면서
   맨 마지막까지 남아 시선을 모으는데(.sh--across), 모바일에서는 다른 도형과
   같이 일찍 나타나 버려서 그 역할이 사라져 있었다.

   둘 다 다른 도형 자리에서 출발해 서로 반대 방향으로 건너온다.
   빈 여백에서 불쑥 나오는 대신 이미 자리를 잡은 도형에서 흘러나오는 모양이라,
   좁은 화면에서도 어디서 왔는지가 읽힌다.

     물방울     왼쪽 반원 자리    -> 오른쪽으로 226px  (아래 .sh--from-left)
     왼쪽 위 원 오른쪽 위 도형 자리 -> 왼쪽으로  339px  (아래 .sh--from-right)

     다른 도형 · 선 무리 : 0.00 ~ 1.40s
     물방울              : 0.00 ~ 1.80s
     왼쪽 위 원          : 0.00 ~ 2.00s
                           1.40s 시점에 물방울 78% · 원 70% 진행
                           -> 움직임이 끊기지 않는다
                           이후 0.60s 동안 이 둘만 남아 움직인다

   셋 다 0s 에 같이 출발한다. 이 둘은 거리가 길어 시간을 오래 쓰기 때문에,
   늦게 출발시키지 않아도 저절로 맨 마지막에 안착한다.

   둘 다 index.html 에서 모바일 SVG 의 맨 뒤에 두었다 — SVG 는 나중에 적힌
   것이 위에 그려지므로, 앞으로 옮기면 건너오는 동안 다른 도형 뒤로 숨는다.
   원본 02.svg 는 왼쪽 선 무리가 물방울을 덮는 순서였다. 그래서 안착한 뒤에도
   물방울에 걸치는 실선(x 291.5~414.8)이 가려지는데, 그 구간의 선은 폭 0.2px
   이하로 가늘어지다 사라지는 끝자락이라 차이가 작다.

   시각을 옮기려면 animation-delay 를 만진다. 다만 1.4s 를 넘기면 나머지와
   겹치는 구간이 사라져 '끝난 줄 알았는데 또 움직인다' 로 보인다. */
.sh--late {
    animation-delay: .45s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* 물방울 — 왼쪽 반원 자리에서 출발해 오른쪽 제자리로 온다.

   출발점 226px = 물방울(x 291.5~414.8)의 왼쪽 끝을
   왼쪽 반원(x 65.4~188.7)의 왼쪽 끝에 맞춘 값. 291.485 - 65.369 = 226.
   두 도형의 폭이 123.36 으로 똑같아서 출발 순간 정확히 포개진다.

   1.8s 에 226px = 1 초에 그림 폭의 27%. 거리가 전(44px)의 5배라 시간도
   1s -> 1.8s 로 늘렸다. 그대로 두면 속도가 5배가 되어 튕겨 나가듯 보인다.
   방향은 .sh 의 기본값(왼쪽에서 오른쪽)을 그대로 쓴다 — HTML 에서 sh--r 을
   빼고 sh--l 로 바꾸었다. */
.sh--from-left {
    --dx: 226px;
    animation-delay: 0s;
    animation-duration: 1.8s;
}

/* 왼쪽 위 원 — 오른쪽 위 도형 자리에서 출발해 왼쪽 위 제자리로 온다.

   출발점 339px = 원(x 0~123.36)의 왼쪽 끝을
   오른쪽 위 도형(x 338.6~462)의 왼쪽 끝에 맞춘 값.
   폭이 123.36 으로 같아 색 있는 원 부분이 그 자리에 정확히 포개진다.
   테두리선까지 치면 출발 시 x 487.5 까지 나가지만, 잘리는 경계가 517 이라
   안 잘린다 (461.984 + 여백 55).

   2.0s 에 339px = 1 초에 그림 폭의 37% — PC 의 같은 원(31%)보다 조금 빠르다.
   모바일은 전체 길이가 짧아 같은 비율로 맞추면 늘어져 보인다.
   숫자를 키우면 더 멀리서 오지만, 462(그림 오른쪽 끝)를 넘기면 화면 밖에서
   출발해 앞부분이 안 보인다.

   PC 와 똑같이 '움직임' 과 '색이 드러나는 시점' 을 따로 다룬다. 하나로 묶으면
   투명도가 이동과 같은 곡선을 타서 출발하자마자 색이 다 배어 나온다. */
.sh--from-right {
    --dx: 339px;
    animation-name: sh-move-right, sh-fade-late;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1), linear;
    animation-fill-mode: both, both;
}

/* ---- 세로줄(빗살무늬) 도형 ----
   좌우로 미는 대신, 세로로 그려지듯 자라나며 나타난다.
   transform-box: fill-box 는 "도형 자기 자신의 크기"를 기준으로 삼으라는 뜻이다.
   이걸 빼면 SVG 전체(viewBox)를 기준으로 삼아 엉뚱한 곳에서 늘어난다.

   transform-origin 을 바꾸면 자라는 방향이 바뀐다.
     center      → 가운데에서 위아래 양쪽으로 퍼진다  (지금 설정)
     50% 0       → 위쪽에 붙어서 아래로 내려온다
     50% 100%    → 아래쪽에 붙어서 위로 올라간다        */
.sh--v {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: sh-in-grow;
}

@keyframes sh-in-left {
    from { opacity: 0; transform: translateX(calc(var(--dx) * -1)); }
    to   { opacity: 1; transform: none; }
}

@keyframes sh-in-right {
    from { opacity: 0; transform: translateX(var(--dx)); }
    to   { opacity: 1; transform: none; }
}

/* 가로질러 오는 원 전용 — 이동만 담당하고 투명도는 건드리지 않는다.
   PC 는 이것만 쓰고(처음부터 제 색), 모바일은 아래 sh-fade-late 를 같이 걸어
   서서히 진해지게 한다. */
@keyframes sh-move-right {
    from { transform: translateX(var(--dx)); }
    to   { transform: none; }
}

/* 옅게 시작해 금방 제 색이 된다 (PC 1번 전용).

   20% = 0.52초. 숫자를 키우면 더 오래 옅은 채로 건너온다.
   50% 를 넘기면 그림 절반을 지나도록 흐릿해서 어디서 왔는지 놓치게 된다. */
@keyframes sh-fade-soft {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 1; }
}

/* 출발 직후 잠깐 투명하게 두었다가 서서히 제 색이 된다.

   숫자를 키우면 늦게, 줄이면 일찍 나타난다. 이동 시간(2.4s) 기준 비율이다.
     20%  = 0.37초, 이동을 13% 마친 지점   <- 지금
     35%  = 0.65초, 이동을 절반 마친 지점
   이동 곡선이 뒤로 갈수록 느려져서, 같은 비율이라도 뒤쪽일수록
   화면에서는 훨씬 많이 건너온 상태가 된다. */
@keyframes sh-fade-late {
    0% { opacity: 0; }
    100%    { opacity: 1; }
}

/* 세로 높이를 0 에서 제 크기까지 늘린다 */
@keyframes sh-in-grow {
    from { opacity: 0; transform: scaleY(0); }
    to   { opacity: 1; transform: none; }
}

/* ---- 선이 하나씩 켜지는 도형 (오른쪽 위 그라데이션 면) ----
   전에는 scaleY 로 높이를 0 에서부터 늘렸는데, 선이 워낙 얇아서
   가운데에서 총알이 튀어나오는 모양으로 보였다. 그 '그려지는' 효과를 빼고,
   선이 제자리에 그대로 있는 채 투명도만 올라오게 했다.

   순서는 그대로 오른쪽 선부터 왼쪽으로 하나씩 켜진다.
   각 선의 animation-delay 는 index.html 에 한 줄씩 박아 두었다.
   간격을 선 하나가 켜지는 시간(0.3s)보다 훨씬 짧게 두면 뭉뚱그려 보이므로,
   한 줄씩 넘어가는 느낌이 살 만큼은 벌려 두었다.

   PC     : 0.20s 부터 0.03초 간격  -> 마지막 선 1.49s 시작, 1.79s 에 끝난다
   모바일 : 0.08s 부터 0.022초 간격 -> 마지막 선 1.03s 시작, 1.33s 에 끝난다
            모바일은 도형이 나타나는 시간(--dur .8s)이 PC(1.2s)보다 짧아
            전체가 1.4초쯤에 끝나므로, 간격도 그 비율만큼 좁혀 맞췄다.

   왼쪽 아래 빗살무늬(가로로 누운 선 무리)도 같은 방식이다. PC 와 모바일 모두
   왼쪽 선부터 오른쪽으로 하나씩 켜진다. */
.sh-lines .ln {
    opacity: 0;
    animation: ln-fade .3s ease-out both;
}

/* 제자리에서 투명도만 올린다. 크기·위치는 건드리지 않는다. */
@keyframes ln-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------------
   히어로 상단 문구 (안내 문구 + 큰 제목)

   글자는 도형처럼 좌우로 밀지 않는다. 옆으로 움직이면 읽던 시선이 따라가야 해서
   산만해지기 때문에, 살짝 아래에서 떠오르며 진해지는 방식으로만 나타낸다.
   안내 문구가 먼저, 제목이 아주 조금 늦게 올라와 위에서 아래로 읽히는 순서를 만든다.
   ------------------------------------------------------------------ */
.hero__eyebrow,
.hero__title {
    animation: text-in .9s cubic-bezier(.22, .8, .3, 1) both;
}

.hero__eyebrow { animation-delay: 0s;    }
.hero__title   { animation-delay: .12s;  }

/* 도형과 마찬가지로 PC 에서는 조금 더 여유 있게 */
@media (min-width: 751px) {
    .hero__eyebrow,
    .hero__title { animation-duration: 1.1s; }
}

@keyframes text-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* 움직임을 줄여 달라고 설정한 사용자에게는 완성된 모습만 보여준다 */
@media (prefers-reduced-motion: reduce) {
    .sh,
    .sh-lines .ln,
    .hero__eyebrow,
    .hero__title { opacity: 1; animation: none; }
}