/* =============================================================
   scroll-effects.css  —  Masked Reveal + Color Transition
   Không ảnh hưởng styles hiện tại, chỉ thêm hiệu ứng mới
   ============================================================= */

/* ------------------------------------------------------------------
   1. MASKED IMAGE REVEAL  (data-reveal="image")
   Clip-path wipe từ dưới lên, giống imai88.jp
   Áp dụng cho: project-card, service card, ảnh section
   ------------------------------------------------------------------ */
[data-reveal="image"] {
    /* clip-path: inset(100% 0 0 0); Removed to ensure visibility if JS fails */
    transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: clip-path;
}

[data-reveal="image"].is-revealed {
    clip-path: inset(0% 0 0 0);
}

/* ------------------------------------------------------------------
   2. FADE + SLIDE-UP REVEAL  (data-reveal="text")
   Opacity + translateY, dùng cho headings & đoạn văn
   ------------------------------------------------------------------ */
[data-reveal="text"] {
    /* opacity: 0; transform: translateY(32px); Removed to ensure visibility */
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal="text"].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------------
   3. FADE + SCALE REVEAL  (data-reveal="card")
   Scale nhẹ từ 0.94 → 1, tốt cho service cards
   ------------------------------------------------------------------ */
[data-reveal="card"] {
    /* opacity: 0; transform: scale(0.94) translateY(20px); Removed to ensure visibility */
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal="card"].is-revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ------------------------------------------------------------------
   4. STAGGER DELAY — dùng data-reveal-delay="N" (ms)
   JS sẽ set style delay từ attribute
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   5. REDUCED MOTION — tắt animation nếu user prefer
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    [data-reveal="image"],
    [data-reveal="text"],
    [data-reveal="card"] {
        clip-path: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------------
   6. COLOR TRANSITION — Header dark mode
   Khi ở section tối (panel--dark), header chuyển sang dark theme
   ------------------------------------------------------------------ */
.site-header {
    transition:
        background 0.55s ease,
        border-color 0.55s ease,
        color 0.55s ease;
}

.site-header.header--dark {
    background: rgba(6, 19, 13, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
}

.site-header.header--dark .brand {
    color: rgba(255, 255, 255, 0.92);
}

.site-header.header--dark .btn--ghost {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.28);
}

.site-header.header--dark .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

/* Dot nav cũng thích nghi màu khi ở dark section */
.dot-nav.nav--dark .dot-nav__item {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.dot-nav.nav--dark .dot-nav__item.is-active {
    background: #ffffff;
    border-color: #ffffff;
}