/* ── 두 링 에셋(9-29) — Expertise + AX Technology → Business Impact. 서비스 소개 히어로 · 회사 소개 Our Firm M&A AX가 같이 쓴다.
   레퍼런스: Bitget × obside(검정 위 가장자리만 빛나는 두 원) · Webflow × Intellimize(교차하는 빛줄기 X와 흰 마름모 '+'). 흰 빛만.
   링 테두리를 따라 빛이 돈다(두 링 반대 방향) · X 빛줄기 위로 빛이 흐른다 · 겹친 렌즈가 숨쉰다.
   배치 입력(각 페이지 CSS): --rad 반지름 · --sep 두 중심 간격의 반(반지름 배수) · --mx 겹친 곳 가로 위치 · --ay 이름 줄 높이. 글자 크기도 각 페이지에서.
   상태 클래스(감싸는 요소 .appr): .is-live 10초 반복(겹침 → 떨어짐 → 다시 겹침, Business Impact는 겹쳤을 때만) · .is-apart 떨어진 시작 상태 · .no-tr 전환 없이 상태 확정 ── */
@property --spread {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --orbit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.appr__stage {
  --ax: calc(var(--mx) - var(--rad) * var(--sep) - var(--spread));
  --bx: calc(var(--mx) + var(--rad) * var(--sep) + var(--spread));
  --by: var(--ay);
  --ra: var(--rad);
  --rb: var(--rad);
  --lx: var(--mx);
  --ly: var(--ay);
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: --spread 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.appr.is-apart .appr__stage {
  --spread: 14%;
}
/* X 빛줄기 — 렌즈 가운데를 지나는 두 줄, 가운데가 밝고 끝으로 사라진다. 그 위로 짧은 빛이 흘러간다 */
.appr__beam {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 170vmax;
  height: 1px;
  translate: -50% -50%;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0.06) 36%,
    rgba(255, 255, 255, 0.2) 44%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.2) 56%,
    rgba(255, 255, 255, 0.06) 64%,
    rgba(255, 255, 255, 0) 74%
  ); /* 교차점 가까이만 밝고, 글 쪽으로 가기 전에 사라짐 */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  transition: opacity 0.8s ease 1.2s;
}
.appr__beam--1 {
  rotate: 32deg;
}
.appr__beam--2 {
  rotate: -32deg;
}
.appr__beam::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)) no-repeat;
  background-size: 10% 100%;
  animation: appr-flow 5.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent 24%, #000 40%, #000 60%, transparent 76%);
  mask-image: linear-gradient(90deg, transparent 24%, #000 40%, #000 60%, transparent 76%);
} /* 흐르는 빛도 교차점 부근에서만 보임 */
.appr__beam--2::after {
  animation-delay: -2.6s;
  animation-direction: reverse;
}
@keyframes appr-flow {
  from {
    background-position: -14% 0;
  }
  to {
    background-position: 114% 0;
  }
}
/* 링 — 가는 테두리 + 안쪽 가장자리 빛(안으로 사라짐) + 바깥 번짐. 테두리를 따라 도는 빛(::before 선명 · ::after 번짐) */
.appr__ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--r) * 2);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.035) 86%,
    rgba(255, 255, 255, 0.12) 97%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow:
    0 0 60px rgba(255, 255, 255, 0.06),
    inset 0 0 50px rgba(255, 255, 255, 0.05);
}
.appr__ring--a {
  --x: var(--ax);
  --y: var(--ay);
  --r: var(--ra);
}
.appr__ring--b {
  --x: var(--bx);
  --y: var(--by);
  --r: var(--rb);
}
.appr__ring::before,
.appr__ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--orbit),
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 230deg,
    rgba(255, 255, 255, 0.35) 300deg,
    #fff 348deg,
    rgba(255, 255, 255, 0) 360deg
  );
  animation: appr-orbit 10s linear infinite;
}
.appr__ring::before {
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.5px),
    #000 calc(100% - 0.5px),
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.5px),
    #000 calc(100% - 0.5px),
    transparent 100%
  );
}
.appr__ring::after {
  inset: -14px;
  filter: blur(7px);
  opacity: 0.7;
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 26px),
    #000 calc(100% - 15px),
    #000 calc(100% - 12px),
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 26px),
    #000 calc(100% - 15px),
    #000 calc(100% - 12px),
    transparent 100%
  );
}
.appr__ring--b::before,
.appr__ring--b::after {
  animation-duration: 12s;
  animation-direction: reverse;
}
@keyframes appr-orbit {
  to {
    --orbit: 360deg;
  }
}
/* 겹친 렌즈 — 두 원으로 오려 교집합에만 빛 */
.appr__lens {
  position: absolute;
  inset: 0;
  clip-path: circle(var(--ra) at var(--ax) var(--ay));
}
.appr__lens-in {
  position: absolute;
  inset: 0;
  clip-path: circle(var(--rb) at var(--bx) var(--by));
  background: radial-gradient(
    circle at var(--lx) var(--ly),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.06) 14%,
    rgba(255, 255, 255, 0.015) 30%,
    rgba(255, 255, 255, 0) 46%
  );
}
/* 반복 모션(.is-live, 처음 겹친 뒤 시작) — 10초 주기: 겹쳐 머묾(0–30%) → 완전히 떨어짐(30–55%) → 떨어져 머묾(55–70%) → 다시 다가와 겹침(70–100%).
   Business Impact는 **겹쳤을 때만** 보이고(떨어지기 시작하면 사라졌다가 다시 겹치는 끝에 나타남), 떨어져 있는 동안은 가운데 '+'만 두 원을 잇는다 */
.appr.is-live .appr__stage {
  animation: appr-meet 10s infinite;
}
.appr.is-live .appr__lens-in {
  animation: appr-glow 10s infinite;
}
.appr.is-live .appr__plus {
  animation: appr-plus 10s infinite;
}
.appr.is-live .appr__impact {
  animation: appr-impact 10s infinite;
}
@keyframes appr-meet {
  0%,
  30% {
    --spread: 0%;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  55%,
  70% {
    --spread: 9.5%;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  100% {
    --spread: 0%;
  }
}
@keyframes appr-glow {
  0%,
  30% {
    opacity: 1;
  }
  46%,
  84% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appr-plus {
  0%,
  30% {
    scale: 1;
    box-shadow:
      0 0 22px rgba(255, 255, 255, 0.75),
      0 0 70px rgba(255, 255, 255, 0.35);
  }
  55%,
  70% {
    scale: 0.74;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.4),
      0 0 28px rgba(255, 255, 255, 0.14);
  }
  100% {
    scale: 1;
    box-shadow:
      0 0 22px rgba(255, 255, 255, 0.75),
      0 0 70px rgba(255, 255, 255, 0.35);
  }
}
@keyframes appr-impact {
  0%,
  32% {
    opacity: 1;
  }
  40%,
  92% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 이름(영문) — 각 링의 겹치지 않는 쪽 가운데 */
.appr__name {
  position: absolute;
  margin: 0;
  top: var(--ay);
  translate: -50% -50%;
  font: 500 22px/1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
  transition: opacity 0.6s ease 0.9s;
}
.appr__name--a {
  left: calc(var(--ax) - var(--ra) * 0.34);
}
.appr__name--b {
  left: calc(var(--bx) + var(--rb) * 0.34);
  top: var(--by);
}
/* 교차점 — 흰 마름모 '+'(Webflow × Intellimize) + 그 아래 Business Impact */
.appr__plus {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--white);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.75),
    0 0 70px rgba(255, 255, 255, 0.35);
  transition:
    opacity 0.6s ease 1.2s,
    scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}
.appr__plus span {
  position: absolute;
  inset: 0;
  rotate: -45deg;
}
.appr__plus span::before,
.appr__plus span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  translate: -50% -50%;
  background: var(--ink);
}
.appr__plus span::after {
  width: 1.5px;
  height: 16px;
}
.appr__impact {
  position: absolute;
  margin: 0;
  left: var(--lx);
  top: calc(var(--ly) + 58px);
  translate: -50% 0;
  font: 400 17px/1.2 var(--serif);
  letter-spacing: 0.01em;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.55);
  transition: opacity 0.8s ease 1.4s;
}
.appr.is-apart .appr__name,
.appr.is-apart .appr__impact,
.appr.is-apart .appr__beam {
  opacity: 0;
  transition-delay: 0s;
}
.appr.is-apart .appr__plus {
  opacity: 0;
  scale: 0.4;
  transition-delay: 0s;
}
.appr.no-tr .appr__stage,
.appr.no-tr .appr__stage * {
  transition: none !important;
} /* 시작 상태를 전환 없이 확정할 때만(js) */
@media (prefers-reduced-motion: reduce) {
  .appr__stage {
    transition: none;
  }
  .appr__ring::before,
  .appr__ring::after,
  .appr__beam::after,
  .appr.is-live .appr__stage,
  .appr.is-live .appr__lens-in,
  .appr.is-live .appr__plus,
  .appr.is-live .appr__impact {
    animation: none;
  }
}

/* ── 두 링 히어로 배치(9-29 — 서비스 소개에서 회사 소개 첫 화면으로 옮김, 두 페이지 공용). 틀은 .fhero(our-firm.css), 글 위 빈자리에 링. 레퍼런스: Bitget × obside(검정 위 가장자리만 빛나는 두 원) · Webflow × Intellimize(교차하는 빛줄기 X와 흰 마름모 '+').
   흑백 원칙대로 흰 빛만. 배경 에셋이 계속 움직인다: 링 테두리를 따라 빛이 돈다(두 링 반대 방향) · X 빛줄기 위로 빛이 흐른다 · 겹친 렌즈가 숨쉰다.
   들어올 때는 떨어져 있던 두 링이 1.8초에 걸쳐 다가와 겹치고(--spread 14% → 0), 그다음 이름 · '+' · Business Impact가 켜진다. 글은 그 위에 얹힌다 ── */
.fhero.appr {
  isolation: isolate;
  background: #050505;
} /* 히어로 — 틀은 회사 소개 히어로(.fhero: 80vh · 520–900px, 글 좌하단 + 왼쪽 세로 괘선, our-firm.css)를 그대로 쓰고 영상 자리에 두 링(9-29 4차) */
.fhero.appr .fhero__sub {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7);
} /* 링 위에서도 읽히게 */
.fhero.appr .appr__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(5, 5, 5, 0.72) 0%, rgba(5, 5, 5, 0.38) 42%, rgba(5, 5, 5, 0.22) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.42) 0%, rgba(5, 5, 5, 0) 62%);
} /* 10-02 사용자: 에셋 위에 Dim — 링 전체를 한 번 누르고, 글이 놓이는 왼쪽 아래를 더 진하게 */
.fhero.appr .appr__stage {
  --rad: 26vw;
  --sep: 0.73;
  --mx: 50%; /* 히어로 배치 — 링 반지름 · 두 중심 간격의 반(반지름 배수) · 겹친 곳의 가로 위치(모양 · 모션은 css/rings.css) */
  --ay: clamp(
    calc(var(--hdr-h) + 64px),
    44%,
    calc(var(--copy-t, 62%) - 76px)
  ); /* 링 가운데(이름 줄) 높이 — 글 위 빈자리: 헤더 밑 64px ~ 글 시작선(--copy-t, services.js) − Business Impact 자리. 기본은 섹션의 44% */
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--hdr-h) - 24px), #000 calc(var(--hdr-h) + 40px));
  mask-image: linear-gradient(180deg, transparent calc(var(--hdr-h) - 24px), #000 calc(var(--hdr-h) + 40px));
} /* 링 윗부분이 헤더 뒤로 가면 스며들게 사라짐 */
/* 글 — 회사 소개 히어로와 같은 .fhero__copy · .fhero__title · .fhero__sub(our-firm.css) */
@media (max-width: 767px) {
  .fhero.appr .appr__name {
    font-size: 15px;
  }
  .fhero.appr .appr__name--a {
    left: calc(var(--ax) - var(--ra) * 0.26);
  } /* 좁은 화면 — 두 링이 가장 벌어져도 이름이 화면 밖으로 나가지 않게 조금 안쪽으로 */
  .fhero.appr .appr__name--b {
    left: calc(var(--bx) + var(--rb) * 0.26);
  }
  .fhero.appr .appr__plus {
    width: 32px;
    height: 32px;
  }
  .fhero.appr .appr__plus span::before {
    width: 12px;
  }
  .fhero.appr .appr__plus span::after {
    height: 12px;
  }
  .fhero.appr .appr__impact {
    top: calc(var(--ly) + 40px);
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .fhero.appr .appr__stage {
    --rad: 19vw;
    --sep: 0.79;
    --ay: clamp(calc(var(--hdr-h) + 64px), 44%, calc(var(--copy-t, 62%) - 100px));
  }
  .fhero.appr .appr__name {
    font-size: 20px;
  }
  .fhero.appr .appr__impact {
    font-size: 19px;
  }
}
/* 링 묶음은 모든 화면에서 가로 가운데(--mx 50%, 9-29 사용자). 이름 줄은 늘 글 위라 두 링이 벌어져도 글과 닿지 않는다 */
@media (min-width: 768px) and (max-width: 1279px) and (min-aspect-ratio: 4/5) {
  .fhero.appr .appr__stage {
    --sep: 0.58;
    --rad: 18vw;
  }
}
@media (min-width: 1280px) {
  .fhero.appr .appr__stage {
    --sep: 0.58;
    --rad: min(19vw, 290px, 34vh);
    --ay: clamp(calc(var(--hdr-h) + 64px), 44%, calc(var(--copy-t, 62%) - 104px));
  }
  .fhero.appr .appr__name {
    font-size: clamp(22px, 1.7vw, 26px);
  }
  .fhero.appr .appr__plus {
    width: 46px;
    height: 46px;
  }
  .fhero.appr .appr__impact {
    top: calc(var(--ly) + 58px);
    font-size: clamp(20px, 1.6vw, 24px);
  }
}
@media (min-width: 1280px) and (max-height: 749px) {
  /* 낮은 노트북 창 — 글 위 자리가 좁아 '+' · Business Impact를 작고 가깝게 */
  .fhero.appr .appr__stage {
    --ay: clamp(calc(var(--hdr-h) + 64px), 44%, calc(var(--copy-t, 62%) - 80px));
  }
  .fhero.appr .appr__plus {
    width: 38px;
    height: 38px;
  }
  .fhero.appr .appr__impact {
    top: calc(var(--ly) + 40px);
    font-size: 18px;
  }
}