@charset "utf-8";
/* =========================================================
   DIVUM CLINIC — animation.css
   스크롤 진입 애니메이션 (data-anim) — 섹션별로 서로 다른 효과
   JS(main.js)가 화면에 들어온 요소에 .is-in 을 붙여 재생합니다.
   지연값은 --d (data-stagger 로 자동 부여)
   숨김 상태는 html.js 일 때만 적용되므로, JS 가 동작하지 않으면 모든 내용이 그대로 보입니다.

   공통       : 상단 스크롤 진행 표시줄
   HERO       : 단어별 솟아오름(타이틀) · 원형 열림 + 켄번즈(모델) · 흐림 해제(설명)
                · 떠다니는 빛 번짐 배경 · 마우스 시차 이동
   CONCERN    : 글자별 낙하(타이틀) · 왕관 회전 + 좌측 진입(소개) · 3D 카드 펼침
                · 클릭 시 카드 3D 뒤집기 + 뒷면 문구 순차 등장
   SIGNATURE  : 자간 수렴(타이틀) · 부채꼴 모임(카드) · 이미지 빛 반사 · 부유(강조 카드)
                · 글자 위 빛 흐름(하단 문구)
   ACNE CARE  : 초점 맞춤(줌+흐림 해제, 타이틀·소개) · 대각선 열림(이미지)
                · 사다리 진입(행) + 강조선 세로 그리기 + 화살표 선 그리기
   TREATMENTS : 밑줄 그리기(타이틀) · 탄성 팝(필터칩) · 좌→우 열림 + 시술 카드 튕김(행)
                · 위에서 접혀 내려옴(안내바)
   DOCTOR     : 기울어 올라옴(타이틀) · 원형 아이리스 열림(사진) · 회전하는 링 장식
                · 형광펜 칠하기(문구) · 사선 진입(경력)
   BLOG       : 세로축 회전(타이틀) · 사진과 글이 양쪽에서 모임(게시글)
   SPACE      : 튕기며 떨어짐(타이틀) · 가운데서 열리는 커튼 · 전환 시 줌 정착 + 캡션 상승
   MAP        : 가로로 펼침(타이틀) · 확대 등장(지도) · 핀 낙하 + 물결 · 3D 기울기(정보)
   FOOTER     : 스크롤 애니메이션 없이 항상 표시
   ========================================================= */

[data-anim]:not(.anim-done) {
  transition-property: opacity, transform, filter, clip-path, letter-spacing;
  transition-duration: 1s;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--d);
}
[data-anim] { --d: 0s; }

/* =========================================================
   HERO
   ========================================================= */
.hero__orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__orbs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; animation: orbDrift 18s ease-in-out infinite alternate; }
.hero__orbs i:nth-child(1) { width: 460px; height: 460px; left: 8%; top: 14%; background: #ead6ca; }
.hero__orbs i:nth-child(2) { width: 400px; height: 400px; right: 6%; top: 28%; background: #dcd2e6; animation-duration: 23s; animation-delay: -7s; }
.hero__orbs i:nth-child(3) { width: 340px; height: 340px; left: 38%; bottom: 4%; background: #f2e4da; animation-duration: 16s; animation-delay: -3s; }
[data-theme="dark"] .hero__orbs i { opacity: .16; }
[data-theme="dark"] .hero__orbs i:nth-child(1) { background: #8e6f62; }
[data-theme="dark"] .hero__orbs i:nth-child(2) { background: #6c5a78; }
[data-theme="dark"] .hero__orbs i:nth-child(3) { background: #9a7f70; }
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, -40px) scale(1.15); }
  100% { transform: translate(-40px, 30px) scale(.92); }
}
.hero__slider { z-index: 1; }
/* 모델 이미지 : 마우스를 올리거나 터치하면 천천히 살짝 확대되며 빛이 한 번 지나감 (흔들림 없음) */
.hero__visual .media { transition: scale 1.6s var(--ease-out); }
.hero__visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-130%);
}
@media (hover: hover) {
  .hero__visual:hover .media { scale: 1.045; }
  .hero__visual:hover::after { animation: heroSheen 1.4s var(--ease) 1; }
}
.hero__visual.is-touched .media { scale: 1.045; }
.hero__visual.is-touched::after { animation: heroSheen 1.4s var(--ease) 1; }
@keyframes heroSheen { to { transform: translateX(130%); } }

/* 타이틀 : 단어별로 아래에서 솟아오름 (JS가 단어를 .w > i 로 분리) */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em .1em; margin-bottom: -.1em; }
.hero__title .w > i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(115%) rotate(8deg); transform-origin: 0 100%; }
.hero__slide.is-active .hero__title .w > i { animation: wordUp 1.15s var(--ease-out) calc(.35s + var(--i) * .09s) both; }
@keyframes wordUp {
  from { opacity: 0; transform: translateY(115%) rotate(8deg); }
  to   { opacity: 1; transform: none; }
}
.js .hero__slide .hero__desc { opacity: 0; }
.hero__slide.is-active .hero__desc { animation: blurIn 1.4s var(--ease-out) .95s both; }
@keyframes blurIn {
  from { opacity: 0; filter: blur(14px); letter-spacing: .04em; transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
/* 모델 이미지 : 원형으로 열리며 천천히 줌 아웃 */
.hero__slide.is-active .hero__visual .media {
  animation: heroIris 1.8s var(--ease-out) both, kenBurns 10s ease-out both;
}
@keyframes heroIris {
  from { clip-path: circle(0% at 50% 62%); filter: brightness(1.15) blur(6px); }
  to   { clip-path: circle(80% at 50% 62%); filter: none; }
}
@keyframes kenBurns {
  from { transform: scale(1.16) translateY(14px); }
  to   { transform: scale(1); }
}
.hero__dots button.is-active { animation: dotPop .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dotPop { 50% { transform: scale(1.35); } }

/* =========================================================
   CONCERN
   ========================================================= */
/* 타이틀 : 글자별로 회전하며 떨어짐 (JS가 글자를 .ch 로 분리) */
[data-anim="char-drop"] .ch {
  display: inline-block;
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s var(--ease);
  transition-delay: calc(var(--i) * .06s);
}
.js [data-anim="char-drop"]:not(.is-in) .ch { opacity: 0; transform: translateY(-60px) rotate(-28deg) scale(.6); }
[data-anim="char-drop"] .sec-sub { transition: opacity .8s var(--ease) .6s, transform .8s var(--ease-out) .6s; }
.js [data-anim="char-drop"]:not(.is-in) .sec-sub { opacity: 0; transform: translateY(12px); }

/* 소개 : 좌측 진입 + 왕관 회전 */
.js [data-anim="slide-right"]:not(.is-in) { opacity: 0; transform: translateX(-70px); }
[data-anim="slide-right"].is-in .concern__crown { animation: crownSpin 1.2s cubic-bezier(.34, 1.56, .64, 1) .3s backwards; }
@keyframes crownSpin { from { opacity: 0; transform: rotate(-200deg) scale(.3); } }

/* 카드 : 책장 넘기듯 3D 로 펼쳐짐 */
.js [data-anim="card-flip"]:not(.is-in) { opacity: 0; transform: perspective(1400px) rotateY(-80deg) translateX(60px); }
[data-anim="card-flip"]:not(.anim-done) { transform-origin: 0 50%; transition-duration: 1.3s; }
.c-card { transition: transform .5s var(--ease-out); }
.c-card:not(.is-flipped):hover { transform: translateY(-8px); }

/* 뒷면 : 뒤집히는 동안 문구가 순서대로 떠오름 */
.c-card.is-flipped .c-card__panel dt,
.c-card.is-flipped .c-card__panel dd { animation: panelIn .7s var(--ease-out) backwards; }
.c-card.is-flipped .c-card__panel dl > :nth-child(1) { animation-delay: .45s; }
.c-card.is-flipped .c-card__panel dl > :nth-child(2) { animation-delay: .53s; }
.c-card.is-flipped .c-card__panel dl > :nth-child(3) { animation-delay: .61s; }
.c-card.is-flipped .c-card__panel dl > :nth-child(4) { animation-delay: .69s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }
.c-card.is-flipped .c-card__actions { animation: actionsPop .6s cubic-bezier(.34, 1.56, .64, 1) .7s backwards; }
@keyframes actionsPop { from { opacity: 0; transform: translate(-50%, 12px) scale(.85); } }

/* =========================================================
   SIGNATURE
   ========================================================= */
.js [data-anim="tracking"] .sec-title { letter-spacing: .6em; opacity: 0; transition: letter-spacing 1.3s var(--ease-out), opacity 1s var(--ease); }
.js [data-anim="tracking"] .sec-sub   { opacity: 0; transition: opacity 1s var(--ease) .5s; }
[data-anim="tracking"].is-in .sec-title { letter-spacing: .01em; opacity: 1; }
[data-anim="tracking"].is-in .sec-sub   { opacity: 1; }

/* 카드 : 좌·하·우 세 방향에서 부채꼴로 모여듦 */
.js [data-anim="fan-in"]:not(.is-in) { opacity: 0; }
.js .s-card:nth-child(1)[data-anim="fan-in"]:not(.is-in) { transform: translate(-160px, 90px) rotate(-14deg); }
.js .s-card:nth-child(2)[data-anim="fan-in"]:not(.is-in) { transform: translateY(160px) scale(.8); }
.js .s-card:nth-child(3)[data-anim="fan-in"]:not(.is-in) { transform: translate(160px, 90px) rotate(14deg); }
[data-anim="fan-in"]:not(.anim-done) { transform-origin: 50% 100%; transition-duration: 1.35s; transition-timing-function: cubic-bezier(.2, .9, .25, 1.08); }

/* 이미지 빛 반사 : 등장 직후 1회 + 마우스 올릴 때 */
.s-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%);
}
.s-card.is-in .s-card__media::after { animation: shine 1.4s var(--ease) calc(var(--d) + 1.1s) 1; }
.s-card:hover .s-card__media::after { animation: shineHover 1.1s var(--ease) 1; }
@keyframes shine { to { transform: translateX(120%); } }
@keyframes shineHover { to { transform: translateX(120%); } }

.s-card--featured.is-in { animation: softFloat 5.5s ease-in-out 1.8s infinite; }
@keyframes softFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 하단 문구 : 떠오른 뒤 글자 위로 빛이 흐름 */
.js [data-anim="shimmer"]:not(.is-in) { opacity: 0; transform: translateY(46px); }
[data-anim="shimmer"]:not(.anim-done) { transition-duration: 1.3s; }
[data-anim="shimmer"] .signature__big {
  background: linear-gradient(100deg, var(--brand-ink) 0 42%, #fff 50%, var(--brand-ink) 58% 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
[data-anim="shimmer"].is-in .signature__big { animation: shimmerText 2.4s var(--ease) .7s 1 both; }
@keyframes shimmerText { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* =========================================================
   ACNE CARE
   ========================================================= */
.js [data-anim="focus-in"]:not(.is-in) { opacity: 0; transform: scale(1.08); filter: blur(10px); }
[data-anim="focus-in"]:not(.anim-done) { transition-duration: 1.2s; }

/* 이미지 : 왼쪽 위에서 대각선으로 열림 */
.js [data-anim="diag-wipe"]:not(.is-in) { clip-path: polygon(0 0, 0 0, 0 0); }
[data-anim="diag-wipe"].is-in:not(.anim-done) { clip-path: polygon(0 0, 210% 0, 0 210%); }
[data-anim="diag-wipe"]:not(.anim-done) { transition-duration: 1.5s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }
[data-anim="diag-wipe"] .media { transition: scale 2.2s var(--ease-out); }
.js [data-anim="diag-wipe"]:not(.is-in) .media { scale: 1.2; }

/* 행 : 오른쪽에서 사다리처럼 차례로 들어오고, 왼쪽 강조선·화살표가 그려짐 */
.js [data-anim="ladder"]:not(.is-in) { opacity: 0; transform: translateX(70px) skewY(2deg); }
[data-anim="ladder"]:not(.anim-done) { transition-duration: .95s; }
.js [data-anim="ladder"]:not(.is-in)::before { transform: scaleY(0); }
[data-anim="ladder"]::before { transition: transform .8s var(--ease-out) calc(var(--d) + .45s); }
.js [data-anim="ladder"]:not(.is-in) .a-row__arrow path { stroke-dashoffset: 40; }
[data-anim="ladder"] .a-row__arrow path { transition: stroke-dashoffset .9s var(--ease-out) calc(var(--d) + .55s); }

/* =========================================================
   TREATMENTS
   ========================================================= */
.js [data-anim="line-draw"]:not(.is-in) { opacity: 0; transform: translateY(10px); }
[data-anim="line-draw"] .sec-title { position: relative; display: inline-block; padding-bottom: 8px; }
[data-anim="line-draw"] .sec-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 60px; height: 2px; background: var(--brand-ink);
  transform: translateX(-50%) scaleX(0);
  transition: transform 1.1s var(--ease-out) .45s;
}
[data-anim="line-draw"].is-in .sec-title::after { transform: translateX(-50%) scaleX(1); }

.js [data-anim="pop"]:not(.is-in) { opacity: 0; transform: scale(.5) translateY(14px); }
[data-anim="pop"]:not(.anim-done) { transition-duration: .75s; transition-timing-function: cubic-bezier(.34, 1.7, .64, 1); }

/* 시술 행 : 좌→우로 열린 뒤 카드가 튕기며 등장 */
.js [data-anim="clip-left"]:not(.is-in) { clip-path: inset(0 100% 0 0); opacity: .2; }
[data-anim="clip-left"]:not(.anim-done) { transition-duration: 1.1s; }
.js [data-anim="clip-left"]:not(.is-in) .t-item { opacity: 0; }
[data-anim="clip-left"].is-in .t-item { animation: itemPop .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) + .45s + var(--j, 0) * .13s) backwards; }
@keyframes itemPop { from { opacity: 0; transform: translateY(18px) scale(.88); } }
/* 탭 전환 시 해당 시술만 순서대로 다시 등장 */
.t-table.is-swap .t-row:not(.is-hidden) { animation: rowSwap .45s var(--ease-out) backwards; }
.t-table.is-swap .t-item:not(.is-hidden) { animation: itemSwap .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--k, 0) * .06s) backwards; }
@keyframes rowSwap { from { opacity: 0; } }
@keyframes itemSwap { from { opacity: 0; transform: translateY(14px) scale(.92); } }

.js [data-anim="swing"]:not(.is-in) { opacity: 0; transform: perspective(800px) rotateX(-80deg); }
[data-anim="swing"]:not(.anim-done) { transform-origin: 50% 0; transition-duration: 1.2s; transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }

/* =========================================================
   DOCTOR
   ========================================================= */
.js [data-anim="rotate-in"]:not(.is-in) { opacity: 0; transform: rotate(-4deg) translateY(36px); }
[data-anim="rotate-in"] { transform-origin: 0 100%; }

/* 사진 : 아래에서 원형으로 열림 */
.js [data-anim="iris"]:not(.is-in) { clip-path: circle(0% at 50% 100%); }
[data-anim="iris"].is-in:not(.anim-done) { clip-path: circle(150% at 50% 100%); }
[data-anim="iris"]:not(.anim-done) { transition-duration: 1.9s; }
[data-anim="iris"] .media { transform: scale(1.15); filter: blur(8px); transition: transform 2.4s var(--ease-out), filter 1.6s var(--ease-out); }
[data-anim="iris"].is-in .media { transform: none; filter: none; }

/* 링 장식 : 사진 뒤에서 천천히 회전 */
.doctor__ring { position: absolute; left: -12%; right: -12%; top: 6%; aspect-ratio: 1; z-index: 0; pointer-events: none; }
.doctor__photo { z-index: 1; }
.doctor__ring::before, .doctor__ring::after { content: ""; position: absolute; border-radius: 50%; }
.doctor__ring::before { inset: 0; border: 1px dashed var(--line-strong); animation: spin 70s linear infinite; }
.doctor__ring::after { inset: 8%; border: 2px solid transparent; border-top-color: var(--brand-soft); border-right-color: var(--brand-soft); animation: spin 16s linear infinite reverse; }
.js [data-anim="ring"]:not(.is-in) { opacity: 0; transform: scale(.55); }
[data-anim="ring"]:not(.anim-done) { transition-duration: 1.6s; transition-delay: .5s; }
@keyframes spin { to { transform: rotate(360deg); } }

.js [data-anim="highlight"]:not(.is-in) { opacity: 0; transform: translateX(40px); }
[data-anim="highlight"].is-in mark { background-size: 100% 100%; }
.js [data-anim="skew-in"]:not(.is-in) { opacity: 0; transform: translateX(-30px) skewX(-14deg); }
[data-anim="skew-in"]:not(.anim-done) { transition-duration: .9s; }

/* =========================================================
   BLOG
   ========================================================= */
.js [data-anim="flip-x"]:not(.is-in) { opacity: 0; transform: perspective(700px) rotateY(70deg); }
[data-anim="flip-x"]:not(.anim-done) { transition-duration: 1.2s; }

/* 게시글 : 사진은 왼쪽, 글은 오른쪽에서 모여듦 */
.b-item__body { display: block; }
[data-anim="split-in"] .b-item__thumb { transition: opacity 1s var(--ease-out) var(--d), transform 1.15s var(--ease-out) var(--d); }
[data-anim="split-in"] .b-item__body { transition: opacity 1s var(--ease-out) calc(var(--d) + .12s), transform 1.15s var(--ease-out) calc(var(--d) + .12s), filter 1s var(--ease-out) calc(var(--d) + .12s); }
.js [data-anim="split-in"]:not(.is-in) .b-item__thumb { opacity: 0; transform: translateX(-80px) rotate(-5deg); }
.js [data-anim="split-in"]:not(.is-in) .b-item__body { opacity: 0; transform: translateX(80px); filter: blur(6px); }
[data-anim="split-in"] .b-item__thumb .media { scale: 1.3; transition: scale 1.8s var(--ease-out) var(--d), transform 1s var(--ease-out); }
[data-anim="split-in"].is-in .b-item__thumb .media { scale: 1; }

/* =========================================================
   SPACE
   ========================================================= */
.js [data-anim="drop"]:not(.is-in) { opacity: 0; transform: translateY(-70px); }
[data-anim="drop"]:not(.anim-done) { transition-duration: 1.15s; transition-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
.js [data-anim="curtain"]:not(.is-in) { clip-path: inset(0 50% 0 50%); }
[data-anim="curtain"]:not(.anim-done) { transition-duration: 1.6s; }

.space__slide.is-active .media { animation: zoomSettle 1.8s var(--ease-out) both; }
@keyframes zoomSettle { from { transform: scale(1.18); filter: blur(4px) brightness(1.1); } to { transform: scale(1); filter: none; } }
.space__slide.is-active .space__cap { animation: capRise .9s var(--ease-out) .45s backwards; }
@keyframes capRise { from { opacity: 0; transform: translate(-50%, 24px); letter-spacing: .3em; } }
[data-space-current].is-flip { display: inline-block; animation: numFlip .55s var(--ease-out); }
@keyframes numFlip { from { opacity: 0; transform: rotateX(90deg) translateY(-6px); } }

/* =========================================================
   MAP
   ========================================================= */
.js [data-anim="spread"]:not(.is-in) { opacity: 0; transform: scaleX(.5); filter: blur(4px); }
.js [data-anim="scale-in"]:not(.is-in) { opacity: 0; transform: scale(.88); }
[data-anim="scale-in"]:not(.anim-done) { transition-duration: 1.2s; }
[data-anim="scale-in"] { box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow 1.2s var(--ease); }
[data-anim="scale-in"].is-in { box-shadow: var(--shadow); }

/* 핀 : 위에서 떨어진 뒤 둥실 + 바닥 물결 */
.js [data-anim="scale-in"]:not(.is-in) .map__pin, .js [data-anim="scale-in"]:not(.is-in) .map__ripple { opacity: 0; }
[data-anim="scale-in"].is-in .map__pin {
  animation: pinDrop 1s cubic-bezier(.34, 1.56, .64, 1) .7s backwards, pinBob 2.4s ease-in-out 1.7s infinite;
}
@keyframes pinDrop { from { opacity: 0; transform: translate(-50%, -320%); } }
.map__ripple { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.map__ripple::before, .map__ripple::after {
  content: ""; position: absolute; left: -10px; top: -5px; width: 20px; height: 10px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0;
}
[data-anim="scale-in"].is-in .map__ripple::before { animation: ripple 2.4s ease-out 1.6s infinite; }
[data-anim="scale-in"].is-in .map__ripple::after  { animation: ripple 2.4s ease-out 2.8s infinite; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(5); } }

.js [data-anim="tilt"]:not(.is-in) { opacity: 0; transform: perspective(800px) rotateY(-32deg) translateX(40px); }
[data-anim="tilt"] { transform-origin: 0 50%; }

/* =========================================================
   진입 완료 상태
   초기 상태 규칙이 :not(.is-in) 으로 걸려 있어, .is-in 이 붙으면 컴포넌트 본래 스타일로 돌아옵니다.
   clip-path 는 none 으로 보간되지 않으므로 재생 중에만 끝값을 명시합니다.
   ========================================================= */
[data-anim="clip-left"].is-in:not(.anim-done),
[data-anim="curtain"].is-in:not(.anim-done) { clip-path: inset(0 0 0 0); }

/* ---- 모션 최소화 설정 존중 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  [data-anim], [data-anim] * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  [data-anim="tracking"] .sec-title { letter-spacing: .01em; }
  .hero__title .w > i, .hero__slide .hero__desc { opacity: 1; transform: none; }
  [data-anim="shimmer"] .signature__big { color: var(--brand-ink); background: none; }
  .doctor__quote mark { background-size: 100% 100% !important; }
}