/* ================================================== */
/* ! 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-cg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

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

.hero .section { position: relative; }

/* ================================================== */
/* FOUNDATIONAL ASCENT */
/* ================================================== */

.foundational-ascent .grid { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.foundational-ascent .article {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.foundational-ascent .article:hover .img { transform: scale(1.05); }

.foundational-ascent .article .img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: -1;
    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);
}

.foundational-ascent .article .indicator {
    background-color: var(--color-surface-alt);
    backdrop-filter: blur(4px);
}

/* ================================================== */
/* FEATURED */
/* ================================================== */

.featured .body { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.featured .project {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.featured .project:hover .img { transform: scale(1.05); }

.featured .project .img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: -1;
    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);
    opacity: 0.8;
}

/* ================================================== */
/* AUTOBIOGRAPHY */
/* ================================================== */

.autobiography .top-row .para {
    max-width: 500px;
    text-wrap: balance;
}

.autobiography .body { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.autobiography .body .article {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.autobiography .body .article:hover .img { transform: scale(1.05); }

.autobiography .body .article .img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: -1;
    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);
    opacity: 0.8;
}