/* ================================================== */
/* ! ANIMATIONS */
/* ================================================== */

.section {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    will-change: opacity, transform;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .section,
    .section.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ================================================== */
/* HERO */
/* ================================================== */

.hero {
    background-image: url('/assets/images/hero-projects.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero .darken {
    position: absolute;
    inset: 0;
    background-color: var(--color-surface-main);
}

/* ================================================== */
/* INFORMATION */
/* ================================================== */

.information .para { max-width: 568px; }

/* ================================================== */
/* CATEGORY FILTER */
/* ================================================== */

.category-filter .filter {
    transition:
        background-color 0.3s,
        color 0.3s;
}

/* ================================================== */
/* PROJECTS LIST */
/* ================================================== */

.projects-list .grid { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.projects-list .project {
    position: relative;
    overflow: hidden;
    transition:
        opacity 0.5s,
        visibility 0.5s;
}

.projects-list .project.hidden {
    opacity: 0;
    visibility: hidden;
}

.projects-list .project .img { transition: transform 2s linear(0, 0.0135, 0.0506, 0.1068, 0.1774, 0.2584, 0.346, 0.4368, 0.528, 0.6171, 0.7021, 0.7815, 0.854, 0.9189, 0.9756, 1.0239, 1.064, 1.0961, 1.1205, 1.138, 1.149, 1.1544, 1.1549, 1.1513, 1.1443, 1.1346, 1.1229, 1.1099, 1.096, 1.0818, 1.0678, 1.0542, 1.0413, 1.0294, 1.0186, 1.009, 1.0007, 0.9937, 0.988, 0.9835, 0.9801, 0.9778, 0.9764, 0.9759, 0.9761, 0.9769, 0.9781, 0.9798, 0.9817, 0.9838, 0.986, 0.9882, 0.9903, 0.9924, 0.9943, 0.9961, 0.9977, 0.9991, 1.0003, 1.0014, 1.0022, 1.0028, 1.0032, 1.0035, 1.0037, 1.0037, 1.0037, 1.0035, 1.0033, 1.003, 1.0027, 1.0024, 1.002, 1.0017, 1.0014, 1.0011, 1.0008, 1.0005, 1.0003, 1.0001, 0.9999, 0.9997, 0.9996, 0.9995, 0.9995, 0.9994, 0.9994, 0.9994, 0.9994, 0.9995, 0.9995, 0.9995, 0.9996, 0.9997, 0.9997, 0.9998, 0.9998, 0.9999, 0.9999, 0.9999, 1); }
.projects-list .project:hover .img { transform: scale(1.05); }

.projects-list .project .content {
    position: absolute;
    inset: 16px;
}

.projects-list .project .content .tag {
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var(--color-text-main);
}