/* ============================================================
   SEcMS Blog — animations.css (2026-07-01)
   스크롤 리브일 · 카드 셔인 · 부유 · 시머
   출처: SEcMS 블로그 모바일 최적화.zip 이식 + 정적 블로그 적용
   ============================================================ */

/* ---------- 키프레임 ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes sheenSweep {
  0%        { transform: translateX(-120%) skewX(-18deg); }
  60%, 100% { transform: translateX(320%)  skewX(-18deg); }
}
@keyframes gradShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes pulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .85; }
}

/* ---------- 스크롤 리브일 ---------- */
/* JS (reveal.js)가 IntersectionObserver 로 .in 을 토글 */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* 그리드 내 스태거: JS가 style="--i:N" 설정 */
.reveal[style*="--i"] {
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* 안전장치: JS 없어도 content 항상 보임 */
.reveal.shown {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ---------- 카드 셔인 스윕 (호버) ---------- */
/* ::after 는 CSS counter 번호에 사용 중 → ::before 로 */
.post-thumb::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 2;
}
.post-item:hover .post-thumb::before {
  animation: sheenSweep 1.1s ease;
}

/* ---------- 브랜드 로고 부유 ---------- */
.nav-logo:hover .brand-icon {
  animation: floatY 2.2s ease-in-out infinite;
}

/* ---------- 스켈레톤 로딩 시머 ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft, #1c2128);
  border-radius: var(--radius, 12px);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(230,237,243,.08), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}