/* ============================================
   CASE CARD EFFECTS
   Combines MouseTrack (3D Tilt) and Nitro (Glow)
   ============================================ */

/* 1. CONTAINER & PERSPECTIVE */
.case-card-container {
    position: relative;
    width: 100%;
    /* height: 100%; */
    perspective: 800px;
    /* Essential for 3D effect */
    cursor: default;
    /* Prevent 'grab' cursor from container inheritance */
}

/* 2. THE CARD (Nitro + 3D Target) */
article.case-card {
    position: relative;
    /* Default is relative, needed for z-index */
    /* Nitro Base Styles */
    background: rgba(255, 255, 255, 0.4);
    /* Fallback */
    /* Gradient background from Nitro/Shining */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;

    /* 3D Transitions */
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    /* Fast transform for track, slow for shadow */
    transform-style: preserve-3d;
    z-index: 20;
    /* Base level */
    /* height: 100%; */
    display: flex;
    /* Ensure it behaves as a flex container like before */
    flex-direction: column;
    pointer-events: none;
    /* Let mouse pass through to grid (z-10) */
}

/* Nitro Hover Glow */
/* Nitro Hover Glow */
.case-card-container:hover article.case-card {
    box-shadow: 0px 0px 30px 1px rgba(99, 102, 241, 0.3);
    /* Brand color glow */
    border-color: rgba(255, 255, 255, 0.8);
}

/* 3. MOUSE TRACKER GRID */
.mouse-tracker-grid {
    position: absolute;
    inset: 0;
    z-index: 10;
    /* Above the card base */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    /* height: 100%; */
}

/* Grid Cells */
.tr-1 {
    grid-area: 1 / 1 / 2 / 2;
}

.tr-2 {
    grid-area: 1 / 2 / 2 / 3;
}

.tr-3 {
    grid-area: 1 / 3 / 2 / 4;
}

.tr-4 {
    grid-area: 1 / 4 / 2 / 5;
}

.tr-5 {
    grid-area: 1 / 5 / 2 / 6;
}

.tr-6 {
    grid-area: 2 / 1 / 3 / 2;
}

.tr-7 {
    grid-area: 2 / 2 / 3 / 3;
}

.tr-8 {
    grid-area: 2 / 3 / 3 / 4;
}

.tr-9 {
    grid-area: 2 / 4 / 3 / 5;
}

.tr-10 {
    grid-area: 2 / 5 / 3 / 6;
}

.tr-11 {
    grid-area: 3 / 1 / 4 / 2;
}

.tr-12 {
    grid-area: 3 / 2 / 4 / 3;
}

.tr-13 {
    grid-area: 3 / 3 / 4 / 4;
}

.tr-14 {
    grid-area: 3 / 4 / 4 / 5;
}

.tr-15 {
    grid-area: 3 / 5 / 4 / 6;
}

.tr-16 {
    grid-area: 4 / 1 / 5 / 2;
}

.tr-17 {
    grid-area: 4 / 2 / 5 / 3;
}

.tr-18 {
    grid-area: 4 / 3 / 5 / 4;
}

.tr-19 {
    grid-area: 4 / 4 / 5 / 5;
}

.tr-20 {
    grid-area: 4 / 5 / 5 / 6;
}

.tr-21 {
    grid-area: 5 / 1 / 6 / 2;
}

.tr-22 {
    grid-area: 5 / 2 / 6 / 3;
}

.tr-23 {
    grid-area: 5 / 3 / 6 / 4;
}

.tr-24 {
    grid-area: 5 / 4 / 6 / 5;
}

.tr-25 {
    grid-area: 5 / 5 / 6 / 6;
}

/* Transform Logic - Affects Sibling Card */
/* Note: We use ease-out for smoother "follow" feel */

.tr-1:hover~article.case-card {
    transform: rotateX(10deg) rotateY(-10deg);
}

.tr-2:hover~article.case-card {
    transform: rotateX(10deg) rotateY(-5deg);
}

.tr-3:hover~article.case-card {
    transform: rotateX(10deg) rotateY(0deg);
}

.tr-4:hover~article.case-card {
    transform: rotateX(10deg) rotateY(5deg);
}

.tr-5:hover~article.case-card {
    transform: rotateX(10deg) rotateY(10deg);
}

.tr-6:hover~article.case-card {
    transform: rotateX(5deg) rotateY(-10deg);
}

.tr-7:hover~article.case-card {
    transform: rotateX(5deg) rotateY(-5deg);
}

.tr-8:hover~article.case-card {
    transform: rotateX(5deg) rotateY(0deg);
}

.tr-9:hover~article.case-card {
    transform: rotateX(5deg) rotateY(5deg);
}

.tr-10:hover~article.case-card {
    transform: rotateX(5deg) rotateY(10deg);
}

.tr-11:hover~article.case-card {
    transform: rotateX(0deg) rotateY(-10deg);
}

.tr-12:hover~article.case-card {
    transform: rotateX(0deg) rotateY(-5deg);
}

.tr-13:hover~article.case-card {
    transform: rotateX(0deg) rotateY(0deg);
}

.tr-14:hover~article.case-card {
    transform: rotateX(0deg) rotateY(5deg);
}

.tr-15:hover~article.case-card {
    transform: rotateX(0deg) rotateY(10deg);
}

.tr-16:hover~article.case-card {
    transform: rotateX(-5deg) rotateY(-10deg);
}

.tr-17:hover~article.case-card {
    transform: rotateX(-5deg) rotateY(-5deg);
}

.tr-18:hover~article.case-card {
    transform: rotateX(-5deg) rotateY(0deg);
}

.tr-19:hover~article.case-card {
    transform: rotateX(-5deg) rotateY(5deg);
}

.tr-20:hover~article.case-card {
    transform: rotateX(-5deg) rotateY(10deg);
}

.tr-21:hover~article.case-card {
    transform: rotateX(-10deg) rotateY(-10deg);
}

.tr-22:hover~article.case-card {
    transform: rotateX(-10deg) rotateY(-5deg);
}

.tr-23:hover~article.case-card {
    transform: rotateX(-10deg) rotateY(0deg);
}

.tr-24:hover~article.case-card {
    transform: rotateX(-10deg) rotateY(5deg);
}

.tr-25:hover~article.case-card {
    transform: rotateX(-10deg) rotateY(10deg);
}

/* 4. INTERACTIVITY FIX */
/* Elements inside the card that need to be clickable must be above the grid */
/* We'll use a utility class or target specific elements */

article.case-card button,
article.case-card a,
article.case-card input,
article.case-card .clickable-area,
article.case-card .drag-handle {
    position: relative;
    z-index: 20;
    /* Above the grid (z-10) */
    pointer-events: auto;
    /* Re-enable clicks for these elements */
}

/* Ensure tooltips or popovers are also above */
article.case-card .tooltip {
    z-index: 30;
}