/* 원본 사이트 실측 타이포(2026-10-21 www.pafgym.com 실측):
   영문 메인 문구 Volte Bold 77px · 자간 0 · 행간 0.9 / 영문 섹션 제목 Volte Bold 자간 0.03em / 한글 자간 기본(normal) · 행간 1.4
   → 시안에 그대로 적용. 크기는 기준표(휴대폰 36·컴퓨터 72) 안에서. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { display: block; font-family: var(--en); font-weight: 700; font-size: 36px; line-height: 0.9; letter-spacing: 0; text-transform: uppercase; }
.hero__kr { font-size: 20px; font-weight: 300; line-height: 1.4; margin-top: 16px; }
.hero__lead { font-size: 14px; margin: 8px 0 24px; opacity: .85; }
.hero__actions { display: flex; gap: 8px; }
.hero__second { display: none; }
.h2en, .label { letter-spacing: 0.03em; }
.h1, .h2, .h3, .statement__text, .sub, .bcard__name, .tcard__name, .vcard__t, .faq summary, body { letter-spacing: normal; }
.statement__text { line-height: 1.4; }
.hero__pause { position: absolute; right: var(--gut); bottom: 40px; z-index: 2; width: 36px; height: 36px; display: grid; grid-auto-flow: column; place-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.7); }
.hero__pause span { width: 2px; height: 12px; background: #fff; }
.hero__pause[aria-pressed="true"] span:first-child { width: 0; height: 0; background: none; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hero__pause[aria-pressed="true"] span:last-child { display: none; }
@media (min-width: 1100px) {
  .display { font-size: 72px; }
  .hero__kr { font-size: 24px; }
  .hero__lead { font-size: 15px; }
  .hero__second { display: inline-flex; }
  .hero__pause { right: 48px; bottom: 48px; }
}

/* ── 움직임(고급스럽게: 느리고 짧게, transform·opacity·clip-path 만, 한 화면에 하나의 주인공) ── */
@media (prefers-reduced-motion: no-preference) {
  /* 첫 화면: 영상이 어둠에서 천천히 밝아지고(1.6초), 문구가 한 줄씩 마스크 안에서 올라온다 */
  html.js .hero__media { opacity: 0; transform: scale(1.06); transition: opacity 1.6s cubic-bezier(.23,1,.32,1), transform 2.4s cubic-bezier(.23,1,.32,1); }
  html.js .hero.ready .hero__media { opacity: 1; transform: none; }
  .line { display: block; overflow: hidden; padding-bottom: .04em; }
  .line > span { display: block; }
  html.js .hero .line > span { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.19,1,.22,1); transition-delay: calc(.25s + var(--l, 0) * .12s); }
  html.js .hero.ready .line > span { transform: none; }
  html.js .hero__kr, html.js .hero__lead, html.js .hero__actions, html.js .hero__pause { opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform .9s cubic-bezier(.23,1,.32,1); }
  html.js .hero.ready .hero__kr { opacity: 1; transform: none; transition-delay: .75s; }
  html.js .hero.ready .hero__lead { opacity: .85; transform: none; transition-delay: .85s; }
  html.js .hero.ready .hero__actions, html.js .hero.ready .hero__pause { opacity: 1; transform: none; transition-delay: 1s; }

  /* 섹션 제목(영문): 마스크 안에서 올라옴 */
  html.js .h2en.mask { overflow: hidden; }
  html.js .h2en.mask > span { display: inline-block; transform: translateY(100%); transition: transform .9s cubic-bezier(.19,1,.22,1); }
  html.js .h2en.mask.in > span { transform: none; }

  /* 큰 문장: 줄마다 아래에서 마스크로 */
  html.js .statement__text .line > span { transform: translateY(105%); transition: transform 1s cubic-bezier(.19,1,.22,1); transition-delay: calc(var(--l, 0) * .12s); }
  html.js .statement__text.in .line > span { transform: none; }

  /* 사진: 아래에서 위로 걷히며 드러남(clip-path) + 사진은 살짝 축소되며 자리잡음 */
  html.js [data-wipe] { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); transition-delay: calc(var(--i, 0) * 90ms); }
  html.js [data-wipe].in { clip-path: inset(0 0 0 0); }
  html.js [data-wipe] img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.23,1,.32,1); transition-delay: calc(var(--i, 0) * 90ms); }
  html.js [data-wipe].in img { transform: none; }

  /* 띠 사진: 스크롤에 따라 아주 천천히(시차) */
  .band { overflow: hidden; }
  .band img { will-change: transform; transform: translateY(var(--py, 0px)) scale(1.12); }
}

/* 카드 줄 진행 막대 */
.rail-progress { height: 2px; background: #e5e5e5; margin: 16px var(--gut) 0; position: relative; overflow: hidden; }
.rail-progress::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, .15)); transition: transform .2s linear; }
.sec--grey .rail-progress { background: #d9d9d9; }
@media (min-width: 1100px) { .rail-progress { margin-left: max(48px, calc((100vw - 1344px) / 2)); margin-right: max(48px, calc((100vw - 1344px) / 2)); } }

/* 숫자 세기(17년·55만 회) */
.count { font-variant-numeric: tabular-nums; }