/* ═══════════════════════════════════════════════════════════════
   RHD STUDIO — Portfolio Cover Effects (Swapped Themes)
   covers.css  |  v1.2 Optimized (Hardware Accelerated)

   Strategy
   ─────────
   Covers are supplied as pure B&W (grayscale) artwork.

   ▸ LIGHT MODE (Now has Glowing Blueprint / X-ray screen blend)
     filter: grayscale(100%)  +  mix-blend-mode: screen
     → White lines glow directly over the light card.

   ▸ DARK MODE (Now has Ink-on-Paper multiply blend)
     filter: grayscale(100%) invert(1)  +  mix-blend-mode: multiply
     → White areas turn black and merge smoothly into the dark card.

   Layering (z-index)
   ──────────────────
     .thumb-content    z: 0  (empty fallback)
     .thumb-cover-img  z: 1  (the artwork)
     .thumb-vignette   z: 2  (edge darkness)
     .thumb-gradient   z: 3  (bottom fade)
     .thumb-shine      z: 4  (shimmer sweep)
   ═══════════════════════════════════════════════════════════════ */

/* ── عزل عمليات الدمج اللوني داخل مساحة الكارت فقط لمنع الوميض والتهنيج أثناء التمرير ── */
.portfolio-thumb {
    isolation: isolate; 
}

/* ── 1.  BASE IMAGE (Hardware Accelerated) ───────────────────── */
.thumb-cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Force true grayscale regardless of source */
    filter: grayscale(100%) contrast(1.05);

    /* تهيئة تسريع العتاد عبر كرت الشاشة لمنع استهلاك المعالج الرئيسي */
    will-change: transform, opacity, filter;
    transform: translateZ(0); 
    backface-visibility: hidden;
    perspective: 1000px;

    transition:
        transform 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.40s ease,
        opacity 0.30s ease;
}


/* ── 2.  LIGHT MODE (تم قلبها لتأخذ تأثير الخطوط البيضاء المتوهجة المضيئة) ── */
[data-theme="light"] .thumb-cover-img {
    filter: grayscale(100%) contrast(1.40) brightness(1.15);
    mix-blend-mode: screen;
    opacity: 0.65;
}

[data-theme="light"] .portfolio-card:hover .thumb-cover-img {
    filter: grayscale(100%) contrast(1.60) brightness(1.35);
    opacity: 0.90;
    transform: scale(1.05);
}


/* ── 3.  DARK MODE (تم قلبها لتأخذ تأثير الرسم بالحبر الداكن المنسجم مع الخلفية) ── */
[data-theme="dark"] .thumb-cover-img {
    filter: grayscale(100%) invert(1) contrast(1.35) brightness(0.95);
    mix-blend-mode: multiply;
    /* invert white-on-black to black-on-white, then white dissolves */
    opacity: 0.85;
}

[data-theme="dark"] .portfolio-card:hover .thumb-cover-img {
    filter: grayscale(85%) invert(1) contrast(1.50) brightness(0.90);
    opacity: 1;
    transform: scale(1.05);
}


/* ── 4.  VIGNETTE OVERLAY ────────────────────────────────────── */
.thumb-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: radial-gradient(ellipse at 50% 50%,
            transparent 40%,
            rgba(0, 0, 0, 0.32) 100%);
    opacity: 0.65;
    transition: opacity 0.5s ease;
}

[data-theme="light"] .thumb-vignette {
    background: radial-gradient(ellipse at 50% 50%,
            transparent 48%,
            rgba(0, 0, 0, 0.18) 100%);
    opacity: 0.50;
}

.portfolio-card:hover .thumb-vignette {
    opacity: 0.20;
}


/* ── 5.  GRADIENT FADE — BOTTOM ──────────────────────────────── */
.thumb-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(to top,
            var(--card-bg) 0%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.portfolio-card:hover .thumb-gradient {
    opacity: 0.55;
}


/* ── 6.  SHIMMER SWEEP ───────────────────────────────────────── */
.thumb-shine {
    position: absolute;
    top: 0;
    left: -110%;
    width: 55%;
    height: 100%;
    z-index: 4;
    pointer-events: none;

    background: linear-gradient(108deg,
            transparent 30%,
            rgba(255, 255, 255, 0.06) 50%,
            transparent 70%);
    transform: skewX(-10deg);
    opacity: 0;
}

.portfolio-card:hover .thumb-shine {
    animation: rhd-cover-shine 0.70s ease-out forwards;
}

@keyframes rhd-cover-shine {
    0% {
        left: -110%;
        opacity: 1;
    }

    100% {
        left: 130%;
        opacity: 1;
    }
}


/* ── 7.  BORDER GLOW ON HOVER ────────────────────────────────── */
[data-theme="dark"] .portfolio-card:hover .portfolio-thumb {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 12px 36px rgba(0, 0, 0, 0.50);
}

[data-theme="light"] .portfolio-card:hover .portfolio-thumb {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.10),
        0 8px 28px rgba(0, 0, 0, 0.08);
}


/* ── 8.  EMPTY STATE (no cover image) ───────────────────────── */

/* Dotted blueprint-style designer grid placeholder */
.portfolio-thumb .thumb-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--text-light);
    letter-spacing: 1px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Blueprint grid background */
    background-color: var(--card-bg);
    background-image: 
        radial-gradient(var(--border-color) 1.2px, transparent 0),
        radial-gradient(var(--border-color) 1.2px, transparent 0);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* Make it active/visible when .no-cover is present */
.portfolio-thumb.no-cover .thumb-content {
    opacity: 1;
    pointer-events: auto;
}

/* Hover effect on empty grid state */
.portfolio-card:hover .portfolio-thumb.no-cover .thumb-content {
    color: var(--text-color);
    background-color: var(--accent-hover);
    transform: scale(1.02);
}

/* Hide interactive overlays when there is no cover to keep the blueprint grid pure and clean */
.portfolio-thumb.no-cover .thumb-vignette,
.portfolio-thumb.no-cover .thumb-gradient,
.portfolio-thumb.no-cover .thumb-shine {
    display: none !important;
}


/* ── 9.  REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .thumb-cover-img,
    .thumb-vignette,
    .thumb-gradient,
    .thumb-shine {
        transition: none;
        animation: none;
    }
}