/* ============================================================
   FLOW 모션·질감 레이어 (서브페이지 확산용) — 라이트 기조 유지
   - body.flow-motion 옵트인. flow-motion.js 가 fm-ready 부여 후 활성.
   - 규칙: 랜딩급 다크 배경 크로스페이드 없음(라이트+특정 다크밴드만), 그린 최소, AI티 없음.
   - 캡처(html.shot)·reduced-motion 폴백 완비. JS 미실행 시 블러/모션 미적용(정적).
   ============================================================ */

/* ---- 라이트 톤온톤 + 서브틀 도트 그리드 + 필름 그레인(FLOW 시그니처, 정밀 뉘앙스) ----
   도트=최상층(잉크 4.5%·26px 격자), 톤온톤=하층. 솔리드 배경 섹션·카드가 위를 덮으므로 베이스 캔버스에만 보임 */
body.flow-motion {
  background-image:
    radial-gradient(rgba(16, 20, 19, .045) 1px, transparent 1.4px),
    radial-gradient(150% 120% at 18% -6%, #ffffff 0%, #f5f7f6 70%, #eef1ef 100%);
  background-size: 26px 26px, auto;
}
/* 틴트 섹션(bg-2 솔리드)에도 도트 병행 — background-color는 style.css 유지 */
body.flow-motion .sec-tint {
  background-image: radial-gradient(rgba(16, 20, 19, .055) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.flow-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 1; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.68'/%3E%3C/svg%3E"); }
html.shot .flow-grain { display: none; }

/* ---- 히어로 배경 패럴랙스(스크롤 지연) — JS가 --plxY 갱신, 정적시 확대만.
   data-plx phero(esg·products·rnd)는 AP.plx가 소유 → 제외(이중 transform 충돌 방지) ---- */
body.flow-motion .phero-bg:not([data-plx]) { inset: -7% 0; transform: translate3d(0, var(--plxY, 0px), 0) scale(1.07); will-change: transform; }
html.shot body.flow-motion .phero-bg:not([data-plx]) { transform: scale(1.07); }

/* ---- 스크롤 힌트(랜딩 .hero-line 계승) — 서브 히어로 우하단 얇은 라인(Scroll Hint, 전 페이지 일관) ---- */
body.flow-motion .phero { position: relative; }
body.flow-motion .phero::after {
  content: ""; position: absolute; right: 40px; bottom: 0; width: 1px; height: 60px; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .55));
}
@media (max-width: 768px) { body.flow-motion .phero::after { right: 20px; height: 44px; } }

/* ---- 비전 매니페스토: 대형 선언 ---- */
body.flow-motion .vision-state { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.3; letter-spacing: -.025em; max-width: 20ch; }

/* ---- 연혁 블러 포커스(FLOW #history 이식, tl2 적응) ----
   JS가 각 .tl2-group에 --foc(0~1) 세팅 + 최근접에 .hl. fm-ready 전에는 정적(블러 없음) */
body.flow-motion.fm-ready .tl2-group {
  filter: blur(calc((1 - var(--foc, 1)) * 3.1px));
  opacity: calc(.36 + var(--foc, 1) * .64);
  transition: filter .55s var(--ease), opacity .55s var(--ease), transform .6s var(--ease);
  will-change: filter, opacity;
}
/* 연도: 기본=아웃라인 고스트, .hl=잉크+살짝 확대 (about .cur 기본 규칙을 flow-motion이 인계) */
body.flow-motion.fm-ready .tl2-year,
body.flow-motion.fm-ready .tl2-group.cur .tl2-year {
  color: transparent; -webkit-text-stroke: 1.4px var(--ink-soft);
  transform: scale(calc(1 + var(--foc, 0) * .045)); transform-origin: left center;
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease), transform .5s var(--ease);
}
body.flow-motion.fm-ready .tl2-group.hl .tl2-year { color: var(--ink); -webkit-text-stroke: 0; }
/* 항목 세로선: 포커스 그룹만 그린 액센트(집중 신호 — 그린 최소 준수) */
body.flow-motion.fm-ready .tl2-group .tl2-items::before { transition: transform 1s var(--ease) .25s, background-color .5s var(--ease), opacity .5s var(--ease); }
body.flow-motion.fm-ready .tl2-group.hl .tl2-items::before { background: var(--accent); opacity: .85; }

/* ---- 폴백: 캡처·reduced-motion = 전부 선명·잉크·정적 ---- */
html.shot body.flow-motion .tl2-group,
body.flow-motion.fm-reduced .tl2-group { filter: none !important; opacity: 1 !important; }
html.shot body.flow-motion .tl2-year,
body.flow-motion.fm-reduced .tl2-year { color: var(--ink) !important; -webkit-text-stroke: 0 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.flow-motion .phero-bg:not([data-plx]) { transform: scale(1.07); }
  body.flow-motion.fm-ready .tl2-group { filter: none; opacity: 1; }
  body.flow-motion.fm-ready .tl2-year { color: var(--ink); -webkit-text-stroke: 0; transform: none; }
}