/*
 * /about-us/ 전용 스타일.
 *
 * 크롬(topbar·nav·btn·footer·wrap·reveal)은 /batioffice/styles.css 를 그대로 쓴다.
 * BatiOffice 헤더에서 들어오는 페이지라 두 화면의 머리·발이 어긋나면 다른 사이트로 읽힌다.
 * 여기에는 이 페이지에만 있는 섹션(브랜드 스토리·지표·비전·가치)만 정의한다.
 *
 * 원본은 flow.bati.ai 의 React AboutPage 이고 그쪽은 다크 테마다. 색만 이 사이트의
 * 라이트 토큰으로 옮겼고 구조·문구·순서는 원본을 따른다.
 */

/* ── 공통 ───────────────────────────────────────────────────────────── */

.about-section { padding: 96px 0; }
.about-section-soft { background: var(--surface-soft); border-block: 1px solid var(--line); }

.about-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.about-head h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.25;
}
.about-head p { margin: 0; color: var(--muted); }

.about-pill {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(99, 52, 232, .08);
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.about-gradient {
  background: linear-gradient(96deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-card {
  height: 100%;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.about-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 54px rgba(28, 35, 67, .13);
}

.about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(99, 52, 232, .08);
  color: var(--purple);
}
.about-icon svg { width: 21px; height: 21px; }

/* ── 히어로 ─────────────────────────────────────────────────────────── */

.about-hero {
  position: relative;
  padding: 104px 0 92px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(99, 52, 232, .07) 0%, rgba(40, 125, 240, .04) 46%, var(--surface) 100%);
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -10%;
  height: 620px;
  background: radial-gradient(closest-side, rgba(99, 52, 232, .16), transparent 72%);
  pointer-events: none;
}
.about-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.about-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.08;
}
.about-hero p { margin: 0; color: var(--muted); font-size: 17px; }

/* ── 브랜드 스토리 ──────────────────────────────────────────────────── */

.about-brand-intro { max-width: 620px; margin: 0 auto 44px; text-align: center; color: var(--muted); }
.about-brand-intro b { color: var(--ink); font-weight: 800; }

.about-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.about-morpheme { display: flex; align-items: flex-start; gap: 18px; }
.about-morpheme-glyph {
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(140deg, var(--blue) 0%, var(--purple) 100%);
  box-shadow: 0 14px 32px rgba(99, 52, 232, .26);
}
.about-morpheme-glyph.is-i { background: linear-gradient(140deg, var(--purple) 0%, #a259ff 100%); }
.about-morpheme h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.about-morpheme h3 small { color: var(--muted-2); font-size: 13px; font-weight: 600; }
.about-morpheme p { margin: 0; color: var(--muted); font-size: 14px; }

.about-plus { margin: 22px 0; text-align: center; color: var(--purple); font-size: 26px; font-weight: 300; }

.about-formula {
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid rgba(99, 52, 232, .18);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(40, 125, 240, .07), rgba(99, 52, 232, .09));
  text-align: center;
}
.about-formula-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}
/* 색은 옆 로고 애니메이션의 bat/i 와 같다 — 같은 것을 두 번 말하고 있으므로
   같은 색이어야 읽는 사람이 연결한다. */
.about-formula-row b { font-weight: 800; }
.about-formula-row .fx-bat { color: #450cff; }
.about-formula-row .fx-i { color: #10b981; }
.about-formula-row .fx-result { color: var(--ink); }
.about-formula p { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }

/* ── 로고 애니메이션 (원본 AnimatedLogo 이식) ────────────────────────
 *
 * flow.bati.ai 의 React + framer-motion 컴포넌트를 CSS 로 그대로 옮겼다.
 * 장면·순서·타이밍·색이 전부 원본과 같다.
 *
 *   0.0s  "bat" 좌에서, "+" 팝, "i" 우에서 → 가운데로 모이며 사라짐
 *   2.2s  합쳐지는 순간 섬광 + 파문 3겹 (보라 → 자주 → 초록)
 *   2.3s  로고 등장 (오버슈트)
 *   2.5s  경로 그리기 — 그라디언트 스트로크 + 글로우
 *   4.0s  단색 채움, 뒤 글로우
 *   4.2s  반짝임 6개
 *   5.0s  마지막 shimmer
 *   6.0s  유지 → 7.5s 페이드 → 8.0s 반복
 *
 * **한 사이클은 8초이고 모든 요소가 같은 8초를 돈다.** 개별 요소는
 * animation-delay 로 자기 자리를 잡는다 — duration 이 같으므로 첫 사이클
 * 이후에도 위상이 어긋나지 않는다.
 *
 * 다만 **끝나고도 화면에 남는 것**(로고 컨테이너·글로우·채움)은 delay 를 쓸 수
 * 없다. 컨테이너의 8초 경계와 자기 8초 경계가 어긋나 다음 사이클 1단계에
 * 로고가 겹쳐 보인다. 그래서 그 셋만 8초 전체를 절대 퍼센트로 적었다.
 *
 * 라이브러리는 쓰지 않는다. 이 한 장면 때문에 framer-motion 을 들일 이유가 없고,
 * 정적 페이지에 React 런타임을 얹을 이유는 더 없다.
 */

.about-logo-stage {
  position: relative;
  width: min(288px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.about-logo-stage > * { position: absolute; inset: 0; }

/* ── 1단계: bat + i ── */

.alo-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.alo-text span { line-height: 1; will-change: transform, opacity; }
.alo-bat {
  font-size: 36px;
  font-weight: 800;
  color: #450cff;
  animation: alo-slide-left 8s ease-in-out infinite both;
}
.alo-plus {
  margin: 0 16px;
  font-size: 30px;
  font-weight: 300;
  color: #10b981;
  animation: alo-pop 8s ease-in-out .15s infinite both;
}
.alo-i {
  font-size: 36px;
  font-weight: 800;
  color: #10b981;
  animation: alo-slide-right 8s ease-in-out .3s infinite both;
}

@keyframes alo-slide-left {
  0%       { opacity: 0; transform: translateX(-40px); }
  7.8125%  { opacity: 1; transform: translateX(0); }
  23.4375% { opacity: 1; transform: translateX(0); }
  31.25%   { opacity: 0; transform: translateX(30px); }
  100%     { opacity: 0; transform: translateX(30px); }
}
@keyframes alo-pop {
  0%       { opacity: 0; transform: scale(0); }
  7.8125%  { opacity: 1; transform: scale(1.2); }
  23.4375% { opacity: 1; transform: scale(1); }
  31.25%   { opacity: 0; transform: scale(0); }
  100%     { opacity: 0; transform: scale(0); }
}
@keyframes alo-slide-right {
  0%       { opacity: 0; transform: translateX(40px); }
  7.8125%  { opacity: 1; transform: translateX(0); }
  23.4375% { opacity: 1; transform: translateX(0); }
  31.25%   { opacity: 0; transform: translateX(-30px); }
  100%     { opacity: 0; transform: translateX(-30px); }
}

/* ── 합쳐지는 순간: 섬광 + 파문 ── */

.alo-flash {
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: alo-flash 8s ease-out 2.2s infinite both;
}
.alo-flash i {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  filter: blur(32px);
  background: radial-gradient(circle, rgba(69, 12, 255, .5) 0%, rgba(69, 12, 255, .25) 40%, transparent 70%);
}
@keyframes alo-flash {
  0%     { opacity: 0; }
  3.125% { opacity: 1; }
  6.25%  { opacity: 0; }
  100%   { opacity: 0; }
}

.alo-ripple {
  display: grid;
  place-items: center;
  pointer-events: none;
}
.alo-ripple i {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.alo-ripple.r0 { color: #450cff; animation: alo-ripple-0 8s ease-out 2.2s  infinite both; }
.alo-ripple.r1 { color: #8b5cf6; animation: alo-ripple-1 8s ease-out 2.35s infinite both; }
.alo-ripple.r2 { color: #10b981; animation: alo-ripple-2 8s ease-out 2.5s  infinite both; }

@keyframes alo-ripple-0 {
  0%   { opacity: 0;  transform: scale(.3); }
  5%   { opacity: .6; transform: scale(1); }
  10%  { opacity: 0;  transform: scale(1.2); }
  100% { opacity: 0;  transform: scale(1.2); }
}
@keyframes alo-ripple-1 {
  0%   { opacity: 0;  transform: scale(.3); }
  5%   { opacity: .6; transform: scale(1.3); }
  10%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}
@keyframes alo-ripple-2 {
  0%   { opacity: 0;  transform: scale(.3); }
  5%   { opacity: .6; transform: scale(1.6); }
  10%  { opacity: 0;  transform: scale(1.8); }
  100% { opacity: 0;  transform: scale(1.8); }
}

/* ── 2단계: 로고 ── */

/* delay 를 쓰지 않는다(위 주석 참고) — 8초 전체를 절대 퍼센트로 적는다. */
.alo-logo { animation: alo-logo 8s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
@keyframes alo-logo {
  0%      { opacity: 0; transform: scale(.8); }
  28.75%  { opacity: 0; transform: scale(.8); }
  36.25%  { opacity: 1; transform: scale(1); }
  93.75%  { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1); }
}

.alo-logo-glow {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  filter: blur(32px);
  background: radial-gradient(circle, rgba(69, 12, 255, .19) 0%, transparent 70%);
  animation: alo-glow 8s ease-out infinite both;
}
@keyframes alo-glow {
  0%     { opacity: 0; }
  50%    { opacity: 0; }
  56.25% { opacity: .6; }
  62.5%  { opacity: .3; }
  100%   { opacity: .3; }
}

.alo-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 40px; }

.alo-stroke {
  fill: none;
  stroke: url(#aloDraw);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#aloGlow);
  stroke-dasharray: 1;
  animation: alo-draw 8s cubic-bezier(.4, 0, .2, 1) 2.5s infinite both;
}
@keyframes alo-draw {
  0%       { stroke-dashoffset: 1; opacity: 0; }
  2.25%    { opacity: 1; }
  18.75%   { stroke-dashoffset: 0; }
  19.125%  { opacity: 1; }
  22.5%    { stroke-dashoffset: 0; opacity: 0; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}

.alo-fill { fill: #450cff; animation: alo-fill 8s ease-out infinite both; }
@keyframes alo-fill {
  0%     { opacity: 0; }
  50%    { opacity: 0; }
  56.25% { opacity: 1; }
  100%   { opacity: 1; }
}

/* ── 반짝임 ── */

.alo-spark {
  position: absolute;
  inset: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation-name: alo-spark;
  animation-duration: 8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.alo-spark.odd  { background: radial-gradient(circle, #10b981 0%, transparent 70%); box-shadow: 0 0 12px 4px rgba(16, 185, 129, .38); }
.alo-spark.even { background: radial-gradient(circle, #450cff 0%, transparent 70%); box-shadow: 0 0 12px 4px rgba(69, 12, 255, .38); }
.alo-spark.s0 { left: 28%; top: 22%; animation-delay: 4.2s; }
.alo-spark.s1 { left: 72%; top: 18%; animation-delay: 4.32s; }
.alo-spark.s2 { left: 20%; top: 55%; animation-delay: 4.44s; }
.alo-spark.s3 { left: 80%; top: 50%; animation-delay: 4.56s; }
.alo-spark.s4 { left: 35%; top: 78%; animation-delay: 4.68s; }
.alo-spark.s5 { left: 65%; top: 82%; animation-delay: 4.8s; }
@keyframes alo-spark {
  0%   { opacity: 0; transform: scale(0); }
  5%   { opacity: 1; transform: scale(1); }
  10%  { opacity: 0; transform: scale(0); }
  100% { opacity: 0; transform: scale(0); }
}

/* ── 마지막 shimmer ── */

.alo-shimmer {
  inset: 40px;
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
}
.alo-shimmer i {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  animation: alo-shimmer 8s ease-in-out 5s infinite both;
}
@keyframes alo-shimmer {
  0%      { transform: translateX(-100%); opacity: 1; }
  10%     { transform: translateX(200%); opacity: 1; }
  10.01%  { opacity: 0; }
  100%    { transform: translateX(200%); opacity: 0; }
}

.about-logo-caption { margin: 26px 0 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ── 지표 ───────────────────────────────────────────────────────────── */

.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.about-stat { text-align: center; }
.about-stat-value {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.about-stat-label { margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ── 비전 ───────────────────────────────────────────────────────────── */

.about-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-vision h2 { margin: 0 0 18px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.035em; }
.about-vision p { margin: 0 0 16px; color: var(--muted); }
.about-vision p:last-child { margin-bottom: 0; }

.about-quote {
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(150deg, var(--surface) 0%, var(--surface-blue) 100%);
  box-shadow: var(--shadow-sm);
}
.about-quote blockquote { margin: 0 0 20px; color: var(--ink-2); font-size: 17px; line-height: 1.62; }
.about-quote-by { display: flex; align-items: center; gap: 12px; }
.about-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(140deg, var(--blue), var(--purple));
}
.about-quote-by div { flex: 1; }
.about-quote-name { font-size: 14px; font-weight: 800; }
.about-quote-role { color: var(--muted-2); font-size: 12px; }
.about-linkedin { padding: 7px; color: var(--muted-2); transition: color .2s ease; }
.about-linkedin:hover { color: var(--purple); }
.about-linkedin svg { width: 19px; height: 19px; }

/* ── 핵심 가치 ──────────────────────────────────────────────────────── */

.about-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 940px; margin: 0 auto; }
.about-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 22px; }
.about-grid-4 + .about-grid-3 { max-width: 900px; }

.about-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.about-card h3 .about-num { margin-right: 5px; color: var(--purple); }
.about-card p { margin: 0; color: var(--muted); font-size: 13.5px; }
.about-card-center { text-align: center; }

/* ── 채용 ───────────────────────────────────────────────────────────── */

.about-careers {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(99, 52, 232, .06) 52%, var(--surface) 100%);
}
.about-careers-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.about-careers h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 900;
  letter-spacing: -.045em;
}
.about-careers p { margin: 0 0 30px; color: var(--muted); font-size: 16px; }
.about-careers .btn svg { width: 18px; height: 18px; }

/* ── 반응형 ─────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .about-brand-grid, .about-vision { grid-template-columns: 1fr; gap: 44px; }
  .about-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-logo-stage { min-height: 260px; }
}

@media (max-width: 720px) {
  .about-section, .about-careers { padding: 68px 0; }
  .about-hero { padding: 76px 0 64px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .about-grid-3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .about-card:hover { transform: none; }

  /* 로고는 애니메이션의 **마지막 장면**에서 멈춘다. 끄기만 하면 첫 프레임(=아무것도
     안 보임)이 남아 빈 칸이 된다. 완성된 로고가 보이는 것이 이 그림의 요점이다. */
  .about-logo-stage :is(.alo-text, .alo-flash, .alo-ripple, .alo-spark, .alo-shimmer) { display: none; }
  .about-logo-stage :is(.alo-logo, .alo-logo-glow, .alo-stroke, .alo-fill) { animation: none; }
  .alo-logo { opacity: 1; transform: none; }
  .alo-logo-glow { opacity: .3; }
  .alo-stroke { opacity: 0; }
  .alo-fill { opacity: 1; }
}