/* ================================================================
   transitions.css — Hunters  /  페이지 전환 애니메이션
================================================================ */

/* ── 페이지 진입 ──────────────────────────────────────────────── */
.page { position: relative; }

.page.active {
    animation: pageIn .22s ease-out both;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ── 탑바 활성 밑줄 — 중앙에서 펼쳐짐 ───────────────────────── */
.topbar-nav a.active::after {
    transform-origin: center;
    animation: underIn .18s ease-out both;
}

@keyframes underIn {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   이미지 로딩 skeleton + fade-in
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 로딩 중 : skeleton 배경 표시 */
.cgc-imgwrap,
.char-image-wrap,
.feed-image-wrap {
    background: var(--bg2);
    position: relative;
    overflow: hidden;
}

/* skeleton shimmer 레이어 */
.cgc-imgwrap::after,
.char-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.04) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* 이미지 로드 전: 투명 / 로드 후: 페이드인 */
.cgc-imgwrap img,
.char-detail-image,
.feed-image {
    opacity: 0;
    transition: opacity .3s ease;
    position: relative;
    z-index: 1;
}
.cgc-imgwrap img.img-loaded,
.char-detail-image.img-loaded,
.feed-image.img-loaded {
    opacity: 1;
}

/* skeleton shimmer 숨김 (이미지 로드 완료 시 부모 ::after 제거) */
.cgc-imgwrap:has(img.img-loaded)::after,
.char-image-wrap:has(img.img-loaded)::after {
    display: none;
}