/* =========================================================
   about.css — 회사소개($pageKey='about') 전용 스타일
   about 페이지에서만 자동 로드.

   섹션
     1) .about-hero      풀스크린 영상 + 로고 (+ 첫 스크롤 1회 스냅)
     2) .about-intro     회사 소개
     3) .about-milestone "Since 2003" pin 고정 + 좌→우 투명도 채움
     4) .about-gallery   2행 마퀴

   공통 노이즈(.about-grain)는 배경 위·콘텐츠 아래에 깔린다.
   인터랙션 JS = assets/js/pages/about.js
   ========================================================= */

.about-page {
  position: relative;
  background-color: #061430;
  color: var(--white);
  /* overflow:clip → 버블 레이어가 핀 상쇄 transform 으로 아래로 삐져나가도
     문서 높이를 늘리지 않게 잘라낸다(하단 빈 여백 방지). 고정(fixed) 핀은
     비변형 조상에 클립되지 않으므로 영향 없음. */
  overflow: clip;
}

/* ── 공통 노이즈 그레인 ───────────────────────────────────
   화면 고정. 다크 섹션 위에서만 보이도록 overlay 블렌드 사용
   (흰 헤더/푸터 위에서는 거의 드러나지 않음). 살짝 떨려 필름 그레인 느낌. */
.about-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: aboutGrain 0.7s steps(5) infinite;
}

@keyframes aboutGrain {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-6%, 4%);
  }

  40% {
    transform: translate(4%, -5%);
  }

  60% {
    transform: translate(-3%, 6%);
  }

  80% {
    transform: translate(5%, 3%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ── 떠오르는 버블 ────────────────────────────────────────
   페이지 전체 높이를 덮는 absolute 레이어(=.about-page 와 함께 스크롤).
   각 버블은 "페이지 최하단 → 최상단"을 이동한다. 이동거리(--rise)는
   페이지 높이(핀 스페이서 포함)라 about.js 가 측정해 주입한다.
   버블 요소·개수도 about.js 가 페이지 높이에 비례해 랜덤 생성. */
.about-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 섹션 콘텐츠 뒤로(섹션 z-index:1 보다 아래). 히어로는 z-index 가 없어
     DOM 순서상 영상 위·로고 뒤에 그려진다. */
  pointer-events: none;
  overflow: hidden;
}

.about-bubble {
  position: absolute;
  bottom: 0;
  /* 페이지 최하단에서 출발 */
  left: var(--x);
  /* --bubble-scale: 화면 크기에 따른 축소 배율(기본 1, 모바일에서 축소) */
  width: calc(var(--size) * var(--bubble-scale, 1));
  height: calc(var(--size) * var(--bubble-scale, 1));
  border-radius: 50%;
  /* Figma 'bubble' ellipse 스타일: 속이 은은히 채워지고 가장자리로 부드럽게 번지는
     소프트 글로우(+살짝 밝은 림). 얇은 테두리만 보이지 않게 중심도 채운다. */
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(255, 255, 255, 0.32) 70%,
      rgba(255, 255, 255, 0.08) 88%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  filter: blur(calc(var(--blur, 2px) * var(--bubble-scale, 1)));
  will-change: transform, opacity;
  animation: aboutBubbleRise var(--dur) linear var(--delay) infinite;
}

/* 모바일(≤768px): 버블 크기·blur 축소 (--bubble-scale 은 자식에게 상속) */
@media (max-width: 768px) {
  .about-bubbles {
    --bubble-scale: 0.5;
  }
}

@keyframes aboutBubbleRise {

  /* 페이지 최하단에서 스폰 */
  0% {
    transform: translate3d(0, 0, 0) scale(0.85);
    opacity: 0;
  }

  /* 하단에서 빠르게 나타나 */
  5% {
    opacity: var(--maxop);
  }

  /* 이동 내내 농도 유지 — 히어로(최상단) 포함 모든 구간에 고르게 보이도록 */
  94% {
    opacity: var(--maxop);
  }

  /* 페이지 최상단에 닿기 전 완전히 사라진다 (--rise = 페이지 높이) */
  100% {
    transform: translate3d(var(--drift), calc(var(--rise, 100vh) * -1), 0) scale(1);
    opacity: 0;
  }
}

/* =========================================================
   1) Hero — 풀스크린 영상
   ========================================================= */
.about-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #061430;
}

.about-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 영상 위 가독성용 비네팅 + 하단을 인트로(#061430)로 페이드해 섹션 경계를 잇는다 */
.about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 20, 48, 0.25) 0%,
      transparent 22%,
      transparent 52%,
      rgba(6, 20, 48, 0.85) 86%,
      #061430 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 45%, rgba(6, 20, 48, 0.45) 100%);
}

.about-hero__logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  width: min(86vw, 460px);
  text-align: center;
}

.about-hero__logo img {
  width: clamp(220px, 30vw, 413px);
  height: auto;
  /* "밑에서 위로 차오르게" 진입 */
  animation: aboutLogoRise 1.2s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.about-hero__tagline {
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking);
  color: var(--white);
  animation: aboutLogoFade 0.9s 0.9s ease-out both;
}

@keyframes aboutLogoRise {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes aboutLogoFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aboutScrollLine {
  0% {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }

  40% {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) scaleY(1);
    opacity: 0;
  }
}

/* =========================================================
   2) Intro — 회사 소개
   ========================================================= */
.about-intro {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 11vw, 160px) 0 clamp(96px, 13vw, 200px);
  overflow: hidden;
}

/* 청록 라디얼 글로우 — 배경에서 분리한 absolute 레이어.
   Figma 'Background Section'의 라디얼 3개를 행렬값에서 변환해 동일하게 재현.
   - 우측 글로우(거의 수직, ~9°)는 레이어 background 의 라디얼로 처리
   - 좌측·좌하단 글로우는 시안에서 "기울어진 타원"이라 CSS 라디얼로는 회전 불가 →
     회전 가능한 가상요소(::before/::after)로 만들어 transform: rotate() 적용
   색상은 시안 그대로: 청록 rgba(29,235,249) → 네이비 투명 다중 스톱.
   펄스는 부모 opacity 라 가상요소까지 함께 적용된다. */
.about-intro__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 우측 세로 글로우 (center 90% 58%, opacity 0.12) */
  background: radial-gradient(15% 39% at 90% 58%,
      rgba(29, 235, 249, 0.12) 0%,
      rgba(23, 181, 199, 0.09) 25%,
      rgba(17, 127, 148, 0.06) 50%,
      rgba(12, 74, 98, 0.03) 75%,
      rgba(6, 20, 48, 0) 100%);
  animation: aboutGlowPulse 6s ease-in-out infinite;
}

/* 좌측 강한 글로우 — 기울어진 타원 (center 6% 36%, 장축 66°, opacity 0.20) */
.about-intro__glow::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 36%;
  width: 24.6vw;
  /* 단축 지름 472px@1920 */
  height: 50.9vw;
  /* 장축 지름 978px@1920 (세로) */
  transform: translate(-50%, -50%) rotate(-24deg);
  /* 장축 90°→66° */
  background: radial-gradient(50% 50% at 50% 50%,
      rgba(29, 235, 249, 0.20) 0%,
      rgba(23, 181, 199, 0.15) 25%,
      rgba(17, 127, 148, 0.10) 50%,
      rgba(12, 74, 98, 0.05) 75%,
      rgba(6, 20, 48, 0) 100%);
}

/* 좌하단 글로우 — 기울어진 타원 (center 29% 81%, 장축 -30°, opacity 0.12) */
.about-intro__glow::after {
  content: "";
  position: absolute;
  left: 29%;
  top: 81%;
  width: 47.6vw;
  /* 장축 지름 913px@1920 (가로) */
  height: 22.9vw;
  /* 단축 지름 439px@1920 */
  transform: translate(-50%, -50%) rotate(-30deg);
  /* 장축 0°→-30° */
  background: radial-gradient(50% 50% at 50% 50%,
      rgba(29, 235, 249, 0.12) 0%,
      rgba(23, 181, 199, 0.09) 25%,
      rgba(17, 127, 148, 0.06) 50%,
      rgba(12, 74, 98, 0.03) 75%,
      rgba(6, 20, 48, 0) 100%);
}

@keyframes aboutGlowPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.about-intro__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-3xl);
  margin: 0 auto;
  padding: 0 clamp(20px, 20px, 160px);
}

.about-intro__head {
  margin-bottom: clamp(40px, 4.4vw, 64px);
}

.about-intro__title {
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking);
  color: var(--white);
}

.about-intro__subtitle {
  margin-top: var(--space-xs);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking);
  color: var(--gray-50);
}

.about-intro__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 72px);
}

.about-intro__photo {
  overflow: hidden;
}

.about-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro__photo--consult {
  flex: 0 0 auto;
  width: clamp(240px, 33vw, 524px);
  aspect-ratio: 524 / 600;
}

.about-intro__col {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7.5vw, 120px);
  min-width: 0;
  flex: 1 1 auto;
  max-width: 794px;
}

.about-intro__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tracking);
  color: var(--gray-200);
}

.about-intro__desc .is-strong {
  font-weight: 600;
  color: var(--white);
}

.about-intro__photo--booth {
  width: 100%;
  aspect-ratio: 742 / 506;
}

/* =========================================================
   3) Milestone — "Since 2003" pin + 좌→우 투명도 채움
   ========================================================= */
.about-milestone {
  position: relative;
  /* z-index:0 → 버블(z-index:0)이 DOM 순서상 밀스톤 배경 위로 올라온다
     (히어로와 동일 패턴). 텍스트(.about-milestone__text z-index:1)는 버블 위. */
  z-index: 0;
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(46, 149, 156, 0.10) 0%, transparent 70%),
    #061430;
}

.about-milestone__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url("../../images/about/bg-milestone.png") center / cover no-repeat;
}

.about-milestone__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
  padding: 0 var(--gutter);
  will-change: transform;
}

.about-milestone__text h2 {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking);
}

.about-milestone__text p {
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--tracking);
}

/* 채움 텍스트 — 기본은 흰색(가독성 폴백).
   JS(GSAP)가 동작할 때만 .is-fx 가 붙어 좌→우 그라데이션 클립으로 전환된다. */
.about-fill {
  --fill: 0;
  color: var(--white);
}

.about-milestone.is-fx .about-fill {
  color: transparent;
  /* 소프트 밴드(4%)만큼 이동 범위를 넓혀(-4% ~ 104%) 양 끝에서 완전히 빠져나가게.
     --fill:0 → 흰색이 화면 밖 좌측, --fill:1 → 흰색이 끝까지 100% 채움. */
  background-image: linear-gradient(90deg,
      #fff calc(var(--fill) * 104% - 4%),
      rgba(255, 255, 255, 0.12) calc(var(--fill) * 104%));
  -webkit-background-clip: text;
  background-clip: text;
}

/* =========================================================
   4) Gallery — 2행 마퀴 (milestone 핀 무대 하단 레이어)
   - 핀 안에서 하단 밖(translateY 100%)에 대기하다가 JS 타임라인으로 올라온다.
   - 폴백(GSAP 미동작): translate 없이 그대로 하단에 노출.
   ========================================================= */
.about-gallery {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* 배경 투명(딥네이비는 .about-page 가 담당) → 뒤의 버블이 비쳐 보이도록.
     청록 글로우만 유지. */
  background: radial-gradient(60% 60% at 50% 100%, rgba(46, 149, 156, 0.12) 0%, transparent 70%);
  will-change: transform;
}

/* 핀 무대에서는 이미지가 텍스트 공간을 침범하지 않도록 살짝 작게 */
.about-milestone .about-marquee__item {
  width: clamp(140px, 18vw, 240px);
}

.about-marquee {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 16px);
}

.about-marquee__row {
  overflow: hidden;
}

.about-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 16px);
  width: max-content;
  will-change: transform;
}

/* JS 미동작 시(폴백) 살짝 들여서 잘림 표시 */
.about-marquee__row[data-marquee="ltr"] .about-marquee__track {
  transform: translateX(-12%);
}

.about-marquee__item {
  flex: 0 0 auto;
  width: clamp(160px, 22vw, 320px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.about-marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   반응형 — 모바일/태블릿
   ========================================================= */
@media (max-width: 1024px) {
  .about-intro__body {
    flex-direction: column;
    gap: clamp(24px, 5vw, 40px);
  }

  .about-intro__photo--consult {
    width: 100%;
    aspect-ratio: 16 / 11;
  }

  .about-intro__col {
    max-width: none;
    width: 100%;
    gap: clamp(24px, 6vw, 40px);
  }
}

/* =========================================================
   접근성 — 모션 최소화
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

  .about-grain,
  .about-intro__glow,
  .about-hero__logo img,
  .about-hero__tagline,
  .about-hero__scroll::after {
    animation: none;
  }
}