/* =============================================
   ANALOGFILM — 갤러리 카드 모션 (/work/ 전용, gallery.html에서만 로드)
   FloatingCardGallery 효과 이식: 3D 마우스 틸트 · 호버 부상/글로우/빛샘 · 순차 등장 · 이미지 줌 · 먼지 파티클
   효과만 담당한다. 레이아웃·색·글꼴·마크업은 gallery.html / style.css 그대로.
   동작은 assets/gallery-fx.js, 첫 그림 전 숨김 클래스(html.afx)는 gallery.html <head> 인라인 스크립트.
   ============================================= */

/* ── 카드 전환: 등장(opacity·transform) / 부상(translate·scale) / 글로우(box-shadow)
   스프링 = framer-motion 기본 spring(stiffness 100, damping 10) 근사 ── */
.project-card {
  transition-property: opacity, transform, translate, scale, box-shadow;
  transition-duration: .6s, 1.25s, 1.25s, 1.25s, .4s;
  transition-timing-function: ease-out, cubic-bezier(.34,1.56,.64,1), cubic-bezier(.34,1.56,.64,1), cubic-bezier(.34,1.56,.64,1), ease;
  transition-delay: var(--afx-d, 0s), var(--afx-d, 0s), 0s, 0s, 0s;
}
@supports (transition-timing-function: linear(0, 1)) {
  .project-card {
    transition-timing-function: ease-out,
      linear(0,0.0533,0.1865,0.3626,0.5514,0.73,0.8834,1.0036,1.0882,1.139,1.161,1.1602,1.1435,1.1173,1.0869,1.0567,1.0296,1.0075,0.9911,0.9804,0.9748,0.9734,0.9751,0.9788,0.9836,0.9886,0.9933,0.9973,1.0004,1.0025,1.0038,1.0043,1.0042,1.0038,1.003,1.0022,1),
      linear(0,0.0533,0.1865,0.3626,0.5514,0.73,0.8834,1.0036,1.0882,1.139,1.161,1.1602,1.1435,1.1173,1.0869,1.0567,1.0296,1.0075,0.9911,0.9804,0.9748,0.9734,0.9751,0.9788,0.9836,0.9886,0.9933,0.9973,1.0004,1.0025,1.0038,1.0043,1.0042,1.0038,1.003,1.0022,1),
      linear(0,0.0533,0.1865,0.3626,0.5514,0.73,0.8834,1.0036,1.0882,1.139,1.161,1.1602,1.1435,1.1173,1.0869,1.0567,1.0296,1.0075,0.9911,0.9804,0.9748,0.9734,0.9751,0.9788,0.9836,0.9886,0.9933,0.9973,1.0004,1.0025,1.0038,1.0043,1.0042,1.0038,1.003,1.0022,1),
      ease;
  }
}

/* ── 순차 등장: 아래에서 50px 떠오르며 페이드 (html.afx일 때만 숨김 → JS가 .afx-in을 붙임) ── */
@media screen { .afx .project-card:not(.afx-in) { opacity: 0; transform: translateY(50px); } }

/* ── 이미지 줌: 호버 시 1.1배, 700ms ease-out (흑백 전환 대신 컬러 유지) ── */
.project-card img { transition: transform .7s cubic-bezier(0,0,.2,1), filter .5s; }
.project-card:hover img { transform: scale(1.1); filter: none; }

/* ── 3D 틸트 (JS가 마우스 기기에서만 html.afx-tilt를 붙이고 그리드 transform을 매 프레임 갱신) ── */
.afx-tilt .gallery-main { overflow: hidden; overflow: clip; }   /* 기울어진 그리드가 페이지 높이·가로 스크롤을 늘리지 않게 */
.afx-tilt .project-grid { transform-style: preserve-3d; transform-origin: 0 0; }

/* ── 호버: 부상 · 글로우 · 빛샘 (마우스 있는 기기만 — 터치에서 호버가 들러붙지 않게) ── */
@media (hover: hover) and (pointer: fine) {
  .project-card { isolation: isolate; }
  .project-card:hover,
  .project-card:focus-visible {
    box-shadow: 0 0 40px 2px rgba(187,94,51,.45), 0 25px 50px -12px rgba(20,32,31,.45);
    transition-duration: .6s, 1.25s, .2s, .2s, .4s;
    transition-timing-function: ease-out, cubic-bezier(.34,1.56,.64,1), ease-out, ease-out, ease;
  }
  .afx-tilt .project-card:hover,
  .afx-tilt .project-card:focus-visible { translate: 0 0 10px; scale: 1.03; }

  /* 빛샘: 오른쪽 위 모서리의 번진 웜톤 원 (원본의 floating blur blob) */
  .project-card::before {
    content: ''; position: absolute; z-index: 1; top: -16px; right: -16px; width: 96px; height: 96px;
    border-radius: 50%; background: linear-gradient(90deg, #BB5E33, #E9A15A); filter: blur(24px);
    mix-blend-mode: screen; opacity: 0; pointer-events: none; transition: opacity .4s ease;
  }
  .project-card:hover::before,
  .project-card:focus-visible::before { opacity: .5; }

  /* 테두리 광: 왼쪽 위에서 오른쪽 아래로 사라지는 2px 액센트 그라디언트 */
  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .project-card::after {
      content: ''; position: absolute; z-index: 2; inset: 0; padding: 2px; pointer-events: none;
      background: linear-gradient(135deg, rgba(187,94,51,.9), transparent 80%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      opacity: 0; transition: opacity .4s ease;
    }
    .project-card:hover::after,
    .project-card:focus-visible::after { opacity: .6; }
  }
}

/* ── 먼지 파티클: 화면 뒤에서 천천히 떠오르는 작은 점 20개 (JS가 body 끝에 추가) ── */
.afx-dust { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.afx-dust i {
  position: absolute; display: block; border-radius: 50%; background: rgba(20,32,31,.12);
  opacity: 0; animation: afx-float 25s linear infinite;
}
@keyframes afx-float {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate3d(14px, -14vh, 0); }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, -28vh, 0); opacity: 0; }
}

/* ── 움직임 줄이기 설정: 등장·부상·틸트·파티클 이동 없음 (글로우만) ── */
@media (prefers-reduced-motion: reduce) {
  .project-card { transition-property: box-shadow; transition-duration: .4s; }
  .project-card img { transition: none; }
  .project-card:hover img { transform: none; }
  .afx-dust i { animation: none; opacity: 1; }
}

/* ── 인쇄: 기울기·파티클 없이 ── */
@media print {
  .project-grid { transform: none !important; }
  .afx-dust { display: none; }
}