/* ══════════════════════════════════════════════
   CNS Sub-Page Animations
   순수 CSS + 바닐라 JS 기반 동적 효과
   ══════════════════════════════════════════════ */

/* ══ 스크롤 프로그레스 바 ══ */
.scroll-progress{
  position:fixed;top:68px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--g),var(--g4));
  z-index:450;pointer-events:none;transition:width .05s linear;
}

/* ══ 히어로 텍스트 진입 애니메이션 ══ */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.sub-hero .sub-ey{
  opacity:0;animation:heroFadeUp .8s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.sub-hero .sub-h1{
  opacity:0;animation:heroFadeUp .8s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.sub-hero .sub-h1 strong{
  opacity:0;animation:heroFadeUp .8s cubic-bezier(.16,1,.3,1) .45s forwards;
}
.sub-hero .sub-lead{
  opacity:0;animation:heroFadeUp .7s cubic-bezier(.16,1,.3,1) .55s forwards;
}

/* ══ 스크롤 진입 효과 (5종) ══ */

/* 1. 기본 페이드업 */
.reveal-up,
.reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),
             transform .7s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.reveal-up.is-visible,
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* 2. 3D 카드 회전 진입 */
.reveal-card{
  opacity:0;transform:perspective(800px) rotateX(8deg) translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),
             transform .8s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.reveal-card.is-visible{opacity:1;transform:perspective(800px) rotateX(0) translateY(0)}

/* 3. 이미지 클립패스 확대 */
.reveal-image{
  opacity:0;clip-path:inset(8%);transform:scale(1.06);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--d,0s),
             clip-path .9s cubic-bezier(.16,1,.3,1) var(--d,0s),
             transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.reveal-image.is-visible{opacity:1;clip-path:inset(0);transform:scale(1)}

/* 4. 좌측 슬라이드 */
.reveal-left{
  opacity:0;transform:translateX(-32px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),
             transform .7s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.reveal-left.is-visible{opacity:1;transform:translateX(0)}

/* 5. 가벼운 슬라이드업 */
.reveal-slide-up{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease var(--d,0s),
             transform .5s ease var(--d,0s);
}
.reveal-slide-up.is-visible{opacity:1;transform:translateY(0)}

/* ══ 호버 효과: 카드 ══ */
.sub-card,
.loc-card,
.csc-card,
.partner-item,
.perf-partner,
.proj-card,
.rec-card{
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             box-shadow .35s cubic-bezier(.16,1,.3,1),
             border-color .25s ease;
}
.sub-card:hover,
.loc-card:hover,
.csc-card:hover,
.partner-item:hover,
.perf-partner:hover,
.rec-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(42,115,109,.1);
}

/* ══ 호버 효과: 행 (공지, 자료실) ══ */
.notice-row,
.dl-row,
.pr-row{
  transition:transform .25s ease,background .15s ease;
}
.notice-row:hover,
.dl-row:hover{
  transform:translateX(4px);
}

/* ══ 호버 효과: 버튼 ══ */
.sub-btn{
  position:relative;overflow:hidden;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.sub-btn:hover{transform:scale(1.03)}
.sub-btn:active{transform:scale(0.97)}

/* 리플 효과 */
.sub-btn::before{
  content:'';position:absolute;
  width:200%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.25);
  left:var(--rx,50%);top:var(--ry,50%);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s ease,opacity .4s ease;
  opacity:0;pointer-events:none;
}
.sub-btn.ripple::before{
  transform:translate(-50%,-50%) scale(1);opacity:1;
}

/* ══ 호버 효과: 이미지 줌 ══ */
.tp-visual img,
.gb-img-wrap img,
.proj-thumb img{
  transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.tp-visual:hover img,
.gb-img-wrap:hover img{
  transform:scale(1.05);filter:brightness(.95);
}

/* ══ 호버 효과: 링크 밑줄 슬라이드 ══ */
.fn a{
  position:relative;
}
.fn a::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1px;background:rgba(255,255,255,.4);
  transition:width .3s ease;
}
.fn a:hover::after{width:100%}

/* ══ 탭 버튼 호버 ══ */
.tab-btn,.filter-btn,.nf-btn{
  transition:all .2s ease,transform .15s ease;
}
.tab-btn:hover,.filter-btn:hover,.nf-btn:hover{
  transform:translateY(-1px);
}

/* ══ 숫자 카운팅 대상 ══ */
[data-count]{
  font-variant-numeric:tabular-nums;
}

/* ══ 카드 틸트 (JS에서 transform 적용) ══ */
.tilt-card{
  transition:transform .15s ease;
  transform-style:preserve-3d;
}

/* ══ 모바일: 호버/틸트 비활성화 ══ */
@media(max-width:768px){
  .scroll-progress{top:56px}
  .reveal-card{transform:translateY(28px)}
  .reveal-card.is-visible{transform:translateY(0)}
  .sub-card:hover,.loc-card:hover,.csc-card:hover,
  .partner-item:hover,.perf-partner:hover,.rec-card:hover{
    transform:none;box-shadow:none;
  }
  .notice-row:hover,.dl-row:hover{transform:none}
  .sub-btn:hover{transform:none}
  .tilt-card{transform:none!important}
}

/* ══ 접근성: 모션 감소 ══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .scroll-progress{display:none}
  .reveal-up,.reveal,.reveal-card,.reveal-image,.reveal-left,.reveal-slide-up{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
}