/* ============================================================================
   일잘러 AI — 움직임(애니메이션) 전용 스타일
   ----------------------------------------------------------------------------
   ★ 중요한 규칙 ★
   숨김 상태(opacity:0)는 반드시 .js-ready 가 붙었을 때만 적용합니다.
   그래야 자바스크립트가 실패해도 글씨가 안 보이는 사고가 나지 않습니다.
   ============================================================================ */

/* ══ 1. 시작 상태 (자바스크립트가 켜졌을 때만) ═════════════════════════════ */

/* 화면에 들어오면 자바스크립트가 .is-in 을 붙여 줍니다.
   움직임 자체는 CSS 가 처리하므로 애니메이션 라이브러리와 무관하게 동작합니다. */
:root { --reveal-ease: cubic-bezier(.16, 1, .3, 1); }

.js-ready [data-fade] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s var(--reveal-ease);
}
.js-ready [data-fade].is-in { opacity: 1; transform: none; }

.js-ready [data-card] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .85s ease, transform .85s var(--reveal-ease);
}
.js-ready [data-card].is-in { opacity: 1; transform: none; }

.js-ready [data-team] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s var(--reveal-ease);
}
.js-ready [data-team].is-in { opacity: 1; transform: none; }

.js-ready [data-out] {
  opacity: 0;
  transform: translateX(34px);
  transition: opacity .8s ease, transform .8s var(--reveal-ease);
}
.js-ready [data-out].is-in { opacity: 1; transform: none; }

/* 제목 줄 밀어 올리기
   ─ 글자를 한 자씩 쪼개면 그라데이션 글씨가 깨지므로,
     줄 전체를 창(mask) 안에 넣고 아래에서 밀어 올립니다. */
.js-ready .reveal-mask {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding-bottom: .12em;      /* ㅗ, ㅜ 같은 아래 획이 잘리지 않게 */
  margin-bottom: -.12em;
}
.js-ready .reveal-inner {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s var(--reveal-ease);
  will-change: transform;
}
.js-ready .reveal-mask.is-in .reveal-inner { transform: translateY(0); }
/* 히어로처럼 줄바꿈이 필요한 곳은 블록으로 */
.js-ready .hero__title .reveal-mask,
.js-ready .cta__title .reveal-mask,
.js-ready .solution__text .h2 .reveal-mask { display: block; }

/* 로더 글자 */
.js-ready .loader__word { opacity: 0; transform: translateY(18px); }

/* 문제 제기 섹션: 문장을 겹쳐 놓고 하나씩 보여 줍니다 */
.js-ready .problem__lines { min-height: clamp(120px, 18vw, 220px); }
.js-ready .problem__line {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(30px);
}
.js-ready .problem__line.is-on { opacity: 1; transform: none; }

/* 비교 막대 — 너비는 그대로 두고 좌우로 눌러 놓았다가 펴 줍니다 */
.js-ready .bar i { transform: scaleX(0); }


/* ══ 2. 계속 반복되는 움직임 ══════════════════════════════════════════════ */

/* 흐르는 글자 띠 */
.marquee__track { animation: marquee 34s linear infinite; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* 배경 네온 덩어리 — CSS 의 translate 속성을 씁니다.
   (GSAP 이 마우스를 따라 transform 을 건드려도 서로 충돌하지 않습니다) */
.blob--1 { animation: float1 20s ease-in-out infinite; }
.blob--2 { animation: float2 26s ease-in-out infinite; }
.blob--3 { animation: float3 32s ease-in-out infinite; }

@keyframes float1 {
  0%, 100% { translate: 0 0;        scale: 1; }
  50%      { translate: 6vw 5vh;    scale: 1.14; }
}
@keyframes float2 {
  0%, 100% { translate: 0 0;        scale: 1.06; }
  50%      { translate: -7vw -6vh;  scale: .92; }
}
@keyframes float3 {
  0%, 100% { translate: 0 0;        scale: .95; }
  50%      { translate: -5vw 7vh;   scale: 1.2; }
}

/* 로고 옆 네모 반짝임 */
.nav__mark { animation: pulse 3.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 18px -2px rgba(124, 92, 255, .85); }
  50%      { box-shadow: 0 0 30px 2px rgba(34, 211, 238, .85); }
}

/* 스크롤 안내 점 */
.hero__scroll span { animation: scrolldot 1.9s ease-in-out infinite; }
@keyframes scrolldot {
  0%       { transform: translateY(0);    opacity: 0; }
  25%      { opacity: 1; }
  75%      { transform: translateY(16px); opacity: 0; }
  100%     { transform: translateY(16px); opacity: 0; }
}

/* 채팅 '생각 중' 점 세 개 */
.chat__think i { animation: think 1.25s ease-in-out infinite; }
.chat__think i:nth-child(2) { animation-delay: .16s; }
.chat__think i:nth-child(3) { animation-delay: .32s; }
@keyframes think {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* 채팅 입력창의 깜빡이는 커서 */
#chatCaret::after {
  content: '';
  display: inline-block;
  width: 2px; height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--n2);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 요금 카드 테두리 빛 */
.price__card::after {
  content: '';
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: var(--grad-3);
  filter: blur(22px);
  opacity: .32;
  animation: glow 5s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { opacity: .22; }
  50%      { opacity: .45; }
}

/* 말풍선이 나타날 때 */
.chat__ask, .chat__reply, .chat__think {
  animation: pop .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}


/* ══ 3. 마우스 커서 (PC 에서만) ═══════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .js-ready .cursor,
  .js-ready .cursor-ring { display: block; }

  /* 커서를 쓰는 동안 기본 화살표는 숨깁니다 */
  .js-ready.has-cursor,
  .js-ready.has-cursor * { cursor: none !important; }

  /* ── 모달이 열려 있을 때는 예외 ────────────────────────────────────────
     <dialog>.showModal() 은 top layer 에 그려집니다. top layer 는 z-index 와
     무관하게 항상 맨 위라, 커스텀 커서(z-index:9999)가 모달 뒤에 가려집니다.
     기본 커서까지 none 이면 입력칸에서 커서가 아예 보이지 않게 되므로,
     모달이 열린 동안에는 커스텀 커서를 숨기고 기본 커서를 되살립니다. */
  .js-ready.has-cursor.is-modal,
  .js-ready.has-cursor.is-modal * { cursor: auto !important; }

  .js-ready.has-cursor.is-modal input,
  .js-ready.has-cursor.is-modal textarea { cursor: text !important; }

  .js-ready.has-cursor.is-modal a,
  .js-ready.has-cursor.is-modal button,
  .js-ready.has-cursor.is-modal label,
  .js-ready.has-cursor.is-modal summary { cursor: pointer !important; }

  .is-modal .cursor,
  .is-modal .cursor-ring { display: none !important; }

  .cursor-ring {
    transition: width .3s var(--ease), height .3s var(--ease),
                background-color .3s, border-color .3s;
  }
  .cursor-ring.is-hover {
    width: 62px; height: 62px;
    background: rgba(34, 211, 238, .12);
    border-color: rgba(34, 211, 238, .6);
  }
}


/* ══ 4. 자바스크립트가 실패했을 때 — 전부 보이게 되돌립니다 ═══════════════ */
.no-anim [data-fade],
.no-anim [data-card],
.no-anim [data-team],
.no-anim [data-out],
.no-anim .reveal-inner,
.no-anim .bar i {
  opacity: 1 !important;
  transform: none !important;
}
.no-anim .reveal-mask { overflow: visible; }
.no-anim .loader__word { opacity: 1 !important; transform: none !important; }
.no-anim .problem__line { position: static !important; opacity: 1 !important; transform: none !important; }
.no-anim .problem__lines { min-height: 0; }
.no-anim .loader { display: none; }


/* ══ 5. '움직임 줄이기'를 켠 분들을 위해 ══════════════════════════════════ */
/* ══ 히어로 오른쪽 시각 요소 ══════════════════════════════════════════════
   전부 CSS 애니메이션입니다. GSAP 이 못 뜨는 상황(.no-anim)에서도 그대로 돕니다.
   SVG 요소의 transform-box 기본값은 view-box 라, transform-origin 에
   viewBox 좌표(200px 200px = 원의 중심)를 그대로 적어 흔들림 없이 회전시킵니다. */

/* 궤도 링 — 속도와 방향을 다르게 해 겹쳐 보이게 합니다 */
.hv__ring      { transform-origin: 200px 200px; }
.hv__ring--1   { animation: hvSpin 30s linear infinite; }
.hv__ring--2   { animation: hvSpin 22s linear infinite reverse; }
.hv__ring--3   { animation: hvSpin 44s linear infinite; }
@keyframes hvSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 코어 숨쉬기 */
.hv__orb  { transform-origin: 200px 200px; animation: hvBreath 5s ease-in-out infinite; }
.hv__halo { transform-origin: 200px 200px; animation: hvHalo   7s ease-in-out infinite; }
@keyframes hvBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes hvHalo   { 0%, 100% { transform: scale(1);   opacity: .85; }
                      50%      { transform: scale(1.07); opacity: 1; } }

/* 코어 안 스파크 — 천천히 돌며 반짝입니다 */
.hv__spark { transform-origin: 200px 192px; animation: hvSpark 9s ease-in-out infinite; }
@keyframes hvSpark {
  0%, 100% { transform: rotate(0deg)   scale(1);    opacity: .92; }
  50%      { transform: rotate(180deg) scale(1.14); opacity: 1; }
}

/* 코어에서 업무로 흘러가는 점선 */
.hv__wire { stroke-dasharray: 5 9; animation: hvFlow 2.4s linear infinite; }
.hv__wire:nth-child(2) { animation-delay: -.6s; }
.hv__wire:nth-child(3) { animation-delay: -1.2s; }
.hv__wire:nth-child(4) { animation-delay: -1.8s; }
@keyframes hvFlow { to { stroke-dashoffset: -14; } }

/* 업무 칩 — 서로 다른 위상으로 천천히 떠다닙니다 */
.hv__task { animation: hvFloat 6.5s ease-in-out infinite; }
.hv__task--2 { animation-delay: -1.1s; }
.hv__task--3 { animation-delay: -2.2s; }
.hv__task--4 { animation-delay: -3.3s; }
.hv__task--5 { animation-delay: -4.4s; }
.hv__task--6 { animation-delay: -5.5s; }
@keyframes hvFloat {
  0%, 100% { translate: -50% -50%; }
  50%      { translate: -50% calc(-50% - 8px); }
}

/* 완료 체크가 순서대로 켜졌다 꺼집니다 */
.hv__ok { animation: hvOk 8s ease-in-out infinite; }
.hv__task--1 .hv__ok { animation-delay: .5s; }
.hv__task--2 .hv__ok { animation-delay: 1.8s; }
.hv__task--3 .hv__ok { animation-delay: 3.1s; }
.hv__task--4 .hv__ok { animation-delay: 4.4s; }
.hv__task--5 .hv__ok { animation-delay: 5.7s; }
.hv__task--6 .hv__ok { animation-delay: 7.0s; }
@keyframes hvOk {
  0%        { opacity: 0; scale: .4; }
  5%        { opacity: 1; scale: 1.18; }
  9%, 72%   { opacity: 1; scale: 1; }
  82%, 100% { opacity: 0; scale: .4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-fade], [data-card], [data-team], [data-out], .reveal-inner, .bar i {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-mask { overflow: visible !important; }
  .problem__line { position: static !important; opacity: 1 !important; transform: none !important; }
  .problem__lines { min-height: 0 !important; }
  .loader { display: none !important; }
  .cursor, .cursor-ring { display: none !important; }
  .js-ready.has-cursor, .js-ready.has-cursor * { cursor: auto !important; }
}

/* ══ 상단 '상담 신청' 버튼 ════════════════════════════════════════════════ */
/* 상담 가능 표시등 */
.btn--nav .btn__dot { animation: navDot 2.4s ease-in-out infinite; }
@keyframes navDot {
  0%, 100% { opacity: 1;  box-shadow: 0 0 10px var(--n2); }
  50%      { opacity: .45; box-shadow: 0 0 4px var(--n2); }
}

/* 몇 초에 한 번 빛이 훑고 지나갑니다 */
.btn--nav::after { animation: navShine 5s ease-in-out infinite; }
@keyframes navShine {
  0%, 64%   { transform: translateX(-180%) skewX(-18deg); }
  86%, 100% { transform: translateX(360%)  skewX(-18deg); }
}