@charset "utf-8";
/* =====================================================================
   FASEECOM — effects.css  (추가 효과 전용 / 기존 스타일 보강용)
   기존 main CSS 아래에 link 로 불러오세요.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. 전역 / 성능 베이스
   --------------------------------------------------------------------- */
:root {
    --fx-accent: #6633ee;
    --fx-accent-soft: rgba(102, 51, 238, .55);
}
/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------
   1. 글자 단위 등장 (split text) — 히어로 타이틀
   --------------------------------------------------------------------- */
.fx-char {
    display:inline-block;
    opacity:0;
    transform:translateY(0.9em) rotate(6deg);
    transition:opacity .6s cubic-bezier(.2,.8,.2,1),
               transform .6s cubic-bezier(.2,.8,.2,1);
    will-change:opacity, transform;
}
.fx-char.on { opacity:1; transform:translateY(0) rotate(0); }
.fx-space { display:inline-block; width:.32em; }

/* 히어로 텍스트 자체에도 등장 후 미세 부유 */
.hero-text.fx-floaty { animation:fxHeroFloat 7s ease-in-out 1.4s infinite; }
@keyframes fxHeroFloat {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-10px); }
}

/* 히어로 하단 스크롤 인디케이터 */
.fx-scroll-cue {
    position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
    z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px;
    opacity:0; animation:fxCueIn 1s ease 1.8s forwards;
}
.fx-scroll-cue .label {
    font-size:11px; letter-spacing:.32em; text-transform:uppercase;
    color:rgba(255,255,255,.7); font-weight:700;
}
.fx-scroll-cue .mouse {
    width:24px; height:38px; border:2px solid rgba(255,255,255,.55);
    border-radius:14px; position:relative;
}
.fx-scroll-cue .mouse::after {
    content:''; position:absolute; left:50%; top:7px; transform:translateX(-50%);
    width:4px; height:8px; border-radius:3px; background:#fff;
    animation:fxWheel 1.8s ease-in-out infinite;
}
@keyframes fxWheel { 0%{opacity:0; top:7px;} 30%{opacity:1;} 70%{opacity:1; top:18px;} 100%{opacity:0; top:18px;} }
@keyframes fxCueIn { to { opacity:1; } }

/* ---------------------------------------------------------------------
   2. 커스텀 커서 (데스크탑 전용)
   --------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine) {
    .fx-cursor, .fx-cursor-dot {
        position:fixed; top:0; left:0; pointer-events:none; z-index:99999;
        border-radius:50%; transform:translate(-50%,-50%);
        mix-blend-mode:difference;
    }
    .fx-cursor {
        width:36px; height:36px; border:1.5px solid #fff;
        transition:width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
    }
    .fx-cursor-dot { width:6px; height:6px; background:#fff; }
    .fx-cursor.is-hover { width:64px; height:64px; background:rgba(255,255,255,.12); border-color:transparent; }
    .fx-cursor.is-down  { width:26px; height:26px; }
    body.fx-cursor-ready, body.fx-cursor-ready * { cursor:none !important; }
}

/* ---------------------------------------------------------------------
   3. 마우스 추적 스포트라이트 (about / contact 등 어두운 섹션)
   --------------------------------------------------------------------- */
.fx-spotlight { position:relative; isolation:isolate; }
.fx-spotlight::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
              var(--fx-accent-soft), transparent 60%);
    opacity:0; transition:opacity .5s ease;
}
.fx-spotlight:hover::before { opacity:.4; }
.fx-spotlight > * { position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   4. 카드 3D 틸트 (service / portfolio / news 아이템)
   --------------------------------------------------------------------- */
.fx-tilt {
    transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);
    transition:transform .25s ease;
    transform-style:preserve-3d;
}
.fx-tilt.is-tilting { transition:transform .05s linear; }
/* 카드 위 글레어 */
.fx-tilt .fx-glare {
    position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,.18), transparent 55%);
    opacity:0; transition:opacity .3s ease; z-index:6; mix-blend-mode:screen;
}
.fx-tilt.is-tilting .fx-glare { opacity:1; }

/* 서비스 카드 상단 액센트 라인 */
.service-card.fx-edge::before {
    content:''; position:absolute; left:0; top:0; height:3px; width:0;
    background:linear-gradient(90deg, var(--fx-accent), #b18cff);
    transition:width .5s cubic-bezier(.2,.8,.2,1); z-index:7;
}
.service-card.fx-edge:hover::before { width:100%; }

/* ---------------------------------------------------------------------
   5. 마그네틱 버튼
   --------------------------------------------------------------------- */
.fx-magnetic { transition:transform .25s cubic-bezier(.2,.8,.2,1); will-change:transform; }
/* 버튼 채움 스윕 */
.btn-contact.fx-sweep, .btn-submit.fx-sweep, .about-link.fx-sweep { position:relative; overflow:hidden; z-index:0; }
.btn-contact.fx-sweep::before, .btn-submit.fx-sweep::before {
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(120deg, var(--fx-accent), #8a5bff);
    transform:translateX(-101%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.btn-contact.fx-sweep:hover::before, .btn-submit.fx-sweep:hover::before { transform:translateX(0); }

/* ---------------------------------------------------------------------
   6. 섹션 타이틀 그라데이션 + 라인 드로우
   --------------------------------------------------------------------- */
.sec-title.fx-grad {
    background:linear-gradient(100deg,#ffffff 0%,#cdbcff 45%,#7a52ff 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    background-size:200% auto;
}
.sec-head.fx-line { position:relative; }
.sec-head.fx-line::after {
    content:''; position:absolute; left:0; bottom:-14px; height:3px; width:0;
    background:linear-gradient(90deg,var(--fx-accent),transparent);
    transition:width 1s cubic-bezier(.2,.8,.2,1) .2s;
}
.sec-head.fx-line.on::after { width:140px; }

/* ---------------------------------------------------------------------
   7. 카운트업 (history 연도 / 임의 숫자) — 강조 펄스
   --------------------------------------------------------------------- */
.history-timeline .dot { transition:transform .35s ease, box-shadow .35s ease; }
.history-timeline li.fx-active .dot {
    transform:scale(1.5);
    box-shadow:0 0 0 6px var(--fx-accent-soft), 0 0 20px var(--fx-accent);
    background:var(--fx-accent);
}
.history-timeline li.fx-active .year { color:var(--fx-accent); }
.history-timeline li { transition:opacity .4s ease; }

/* 진행선 채우기 (기본선과 동일한 --tl-line 위치 변수 사용) */
.history-timeline ul{ --tl-line:114px; }
/* 기본 세로선(style.css ul::before)도 같은 변수에 맞춰 두 선을 항상 일치시킴 */
.history-timeline ul::before { left:var(--tl-line); }
.history-timeline ul::after {
    content:''; position:absolute; left:var(--tl-line); top:18px;
    width:2px; margin-left:-1px; height:0; background:#b18cff; z-index:0;
    border-radius:2px;
    transition:height 1.4s ease;
    pointer-events:none;
}
.history-timeline.on ul::after { height:calc(100% - 36px); }
/* dot 과 텍스트는 진행선보다 위에 (겹침 방지) */
.history-timeline .dot{ z-index:2; }
.history-timeline .year,
.history-timeline .desc{ position:relative; z-index:2; }
/* 반응형 위치(변수)를 effects.css 자체에 내장 — 로드 순서와 무관하게 두 선이 항상 dot 중심에 위치 */
@media (max-width:1200px){
    #history .history-timeline ul,
    .history-timeline ul{ --tl-line:103px; }
}
@media (max-width:768px){
    #history .history-timeline ul,
    .history-timeline ul{ --tl-line:79px; }
}

/* ---------------------------------------------------------------------
   8. 고객사 로고 — 그레이스케일 → 컬러 + 떠오름
   --------------------------------------------------------------------- */
.c-logo img { filter:grayscale(1) brightness(1.4); transition:filter .4s ease, transform .4s ease, opacity .4s ease; }
.c-logo:hover img { filter:grayscale(0) brightness(1); transform:translateY(-6px) scale(1.05); }

/* ---------------------------------------------------------------------
   9. 패럴랙스 (about 비주얼, history 이미지)
   --------------------------------------------------------------------- */
.fx-parallax { will-change:transform; transition:transform .15s linear; }

/* ---------------------------------------------------------------------
   10. 탭 전환 부드러운 글로우 + 활성 인디케이터
   --------------------------------------------------------------------- */
.tab-btn.fx-tab { position:relative; overflow:hidden; }
.tab-btn.fx-tab.active { box-shadow:0 8px 24px rgba(102,51,238,.4); }
.tab-panel.active.fx-stagger > * { animation:fxCardIn .6s cubic-bezier(.2,.8,.2,1) both; }
.tab-panel.active.fx-stagger > *:nth-child(1){animation-delay:.05s}
.tab-panel.active.fx-stagger > *:nth-child(2){animation-delay:.12s}
.tab-panel.active.fx-stagger > *:nth-child(3){animation-delay:.19s}
.tab-panel.active.fx-stagger > *:nth-child(4){animation-delay:.26s}
.tab-panel.active.fx-stagger > *:nth-child(5){animation-delay:.33s}
.tab-panel.active.fx-stagger > *:nth-child(6){animation-delay:.40s}
.tab-panel.active.fx-stagger > *:nth-child(7){animation-delay:.47s}
.tab-panel.active.fx-stagger > *:nth-child(8){animation-delay:.54s}
@keyframes fxCardIn { from{opacity:0; transform:translateY(28px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }

/* ---------------------------------------------------------------------
   11. 스크롤 진행 바 (상단 고정)
   --------------------------------------------------------------------- */
.fx-progress-bar {
    position:fixed; left:0; top:0; height:3px; width:0%; z-index:1001;
    background:linear-gradient(90deg,var(--fx-accent),#b18cff);
    box-shadow:0 0 10px var(--fx-accent-soft);
    transition:width .1s linear;
}

/* ---------------------------------------------------------------------
   12. 기술 섹션 아이콘 부드러운 부유
   --------------------------------------------------------------------- */
.tech-item .tech-icon { animation:fxIconFloat 6s ease-in-out infinite; }
.tech-item:nth-child(2) .tech-icon { animation-delay:-1.5s; }
.tech-item:nth-child(3) .tech-icon { animation-delay:-3s; }
.tech-item:nth-child(4) .tech-icon { animation-delay:-4.5s; }
@keyframes fxIconFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

/* 기술 항목 hover 시 좌측 강조 바 */
.tech-item { position:relative; }
.tech-item::after {
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:0; background:var(--fx-accent); transition:height .4s ease;
}
.tech-item:hover::after { height:60%; }

/* ---------------------------------------------------------------------
   13. 부유하는 배경 오브 (전역 무드)
   --------------------------------------------------------------------- */
.fx-orbs { position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.fx-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.22; }
.fx-orb.o1 { width:480px; height:480px; background:#6633ee; top:-120px; left:-120px; animation:fxOrb1 26s ease-in-out infinite; }
.fx-orb.o2 { width:420px; height:420px; background:#3a1f9e; bottom:-100px; right:-100px; animation:fxOrb2 32s ease-in-out infinite; }
@keyframes fxOrb1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(120px,80px);} }
@keyframes fxOrb2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-100px,-90px);} }