/* myinva animated design cards — shared by /home and /our-work
   Save as: static/css/work-cards.css  (load it AFTER styles.css) */

.template-grid.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 28px;
}

/* Card */
.template-grid .work-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
    will-change: transform;
}
/* gradient accent bar that sweeps in on hover */
.template-grid .work-card::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
    background: linear-gradient(90deg, #7d2ae8, #00c4cc);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s ease;
}
.template-grid .work-card:hover,
.template-grid .work-card:focus-within {
    transform: translateY(-10px);
    border-color: rgba(125, 42, 232, .35);
    box-shadow: 0 22px 50px rgba(125, 42, 232, .22);
}
.template-grid .work-card:hover::before,
.template-grid .work-card:focus-within::before { transform: scaleX(1); }
.template-grid .work-card:active { transform: translateY(-4px) scale(.985); }

/* Photo */
.template-grid .work-card .template-thumb { position: relative; overflow: hidden; }
.template-grid .work-card .template-thumb img {
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.template-grid .work-card:hover .template-thumb img { transform: scale(1.08); }
/* soft dark fade at the bottom */
.template-grid .work-card .template-thumb::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(15, 20, 28, .45), transparent 55%);
    opacity: 0; transition: opacity .4s ease;
}
.template-grid .work-card:hover .template-thumb::before { opacity: 1; }
/* diagonal light sweep */
.template-grid .work-card .template-thumb::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .9s ease;
}
.template-grid .work-card:hover .template-thumb::after { transform: translateX(120%); }

/* Number badge */
.work-num {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #fff;
    background: rgba(15, 20, 28, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Button */
.template-grid .work-card .template-info { padding: 16px; }
.template-grid .work-card .btn .arrow { display: inline-block; margin-left: 6px; transition: transform .3s ease; }
.template-grid .work-card:hover .btn .arrow,
.template-grid .work-card .btn:focus-visible .arrow { transform: translateX(6px); }

/* Entrance animation (cards fade and rise one after another as they scroll into view) */
.js .template-grid .work-card:not(.in) { opacity: 0; }
.template-grid .work-card.in {
    animation: work-rise .8s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: var(--d, 0ms);
}
@keyframes work-rise {
    from { opacity: 0; transform: translateY(40px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
    .template-grid.work-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .template-grid .work-card .template-info { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .template-grid .work-card,
    .template-grid .work-card .template-thumb img,
    .template-grid .work-card .template-thumb::before,
    .template-grid .work-card .template-thumb::after,
    .template-grid .work-card::before,
    .template-grid .work-card .btn .arrow { transition: none; }
    .template-grid .work-card.in { animation: none; }
    .js .template-grid .work-card:not(.in) { opacity: 1; }
    .template-grid .work-card:hover { transform: none; }
    .template-grid .work-card:hover .template-thumb img { transform: none; }
}