/* =========================================================
   SERKAN ŞİMŞEK // DIGITAL EXPERIENCE
   ABOUT / MANIFESTO
   FINAL
========================================================= */

.about {
    position: relative;
    padding: 160px 0 170px;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND
========================================================= */

.about::before {
    content: "";

    position: absolute;

    left: 8%;
    top: 50%;

    width: 920px;
    height: 920px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 154, 61, .06),
            transparent 70%
        );

    filter:
        blur(110px);

    pointer-events: none;
}


.about::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .05),
            transparent
        );
}


/* =========================================================
   LAYOUT
========================================================= */

.about-layout {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(320px, .78fr)
        minmax(0, 1.22fr);

    align-items: center;

    gap:
        clamp(
            60px,
            8vw,
            140px
        );
}


/* =========================================================
   SYMBOL AREA
========================================================= */

.about-symbol {
    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;
    justify-content: center;

    perspective: 1200px;
}


/* =========================================================
   SYMBOL BACKLIGHT
========================================================= */

.about-symbol::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 154, 61, .12),
            transparent 70%
        );

    filter:
        blur(75px);

    animation:
        aboutGlow
        5.5s ease-in-out
        infinite;
}


@keyframes aboutGlow {

    0%,
    100% {
        transform:
            scale(.9);

        opacity:
            .48;
    }

    50% {
        transform:
            scale(1.1);

        opacity:
            1;
    }

}


/* =========================================================
   OUTER ORBIT
========================================================= */

.about-symbol-orbit {
    position: absolute;

    width: 390px;
    height: 390px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 50%;

    transform:
        rotateX(68deg)
        rotateZ(14deg);

    box-shadow:
        inset 0 0 50px
        rgba(199, 154, 61, .025);

    animation:
        aboutOrbitSpin
        28s linear
        infinite;
}


.about-symbol-orbit::before {
    content: "";

    position: absolute;

    inset: 45px;

    border:
        1px dashed
        rgba(199, 154, 61, .15);

    border-radius: 50%;
}


.about-symbol-orbit::after {
    content: "";

    position: absolute;

    left: 50%;
    top: -5px;

    width: 10px;
    height: 10px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 20px
        rgba(199, 154, 61, .75);
}


@keyframes aboutOrbitSpin {

    from {
        transform:
            rotateX(68deg)
            rotateZ(14deg);
    }

    to {
        transform:
            rotateX(68deg)
            rotateZ(374deg);
    }

}


/* =========================================================
   INNER CORE
========================================================= */

.about-symbol-core {
    position: relative;

    width: 230px;
    height: 230px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(199, 154, 61, .22);

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, .05),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(20, 20, 20, .96),
            rgba(7, 7, 7, .96)
        );

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .55),

        inset 0 1px 0
        rgba(255, 255, 255, .05),

        0 0 50px
        rgba(199, 154, 61, .05);

    overflow: hidden;

    transform:
        rotate(-4deg);

    transition:
        transform .6s var(--ease),
        border-color .5s ease,
        box-shadow .5s ease;
}


.about-symbol:hover
.about-symbol-core {
    transform:
        rotate(0deg)
        scale(1.04);

    border-color:
        rgba(199, 154, 61, .4);

    box-shadow:
        0 45px 130px
        rgba(0, 0, 0, .62),

        inset 0 1px 0
        rgba(255, 255, 255, .06),

        0 0 80px
        rgba(199, 154, 61, .09);
}


/* =========================================================
   CORE GOLD VEINS
========================================================= */

.about-symbol-core::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .38;

    background:
        linear-gradient(
            128deg,
            transparent 22%,
            rgba(199, 154, 61, .18) 23%,
            transparent 25%
        ),
        linear-gradient(
            60deg,
            transparent 55%,
            rgba(199, 154, 61, .12) 56%,
            transparent 58%
        ),
        linear-gradient(
            150deg,
            transparent 70%,
            rgba(239, 208, 139, .08) 71%,
            transparent 73%
        );
}


/* =========================================================
   CORE LIGHT SWEEP
========================================================= */

.about-symbol-core::after {
    content: "";

    position: absolute;

    left: -50%;
    top: -50%;

    width: 50%;
    height: 200%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .10),
            transparent
        );

    animation:
        aboutCoreSweep
        7s ease-in-out
        infinite;
}


@keyframes aboutCoreSweep {

    0%,
    70% {
        left:
            -50%;
    }

    100% {
        left:
            150%;
    }

}


/* =========================================================
   1998
========================================================= */

.about-symbol-core span {
    position: relative;

    z-index: 3;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 72px;

    font-weight: 800;

    letter-spacing:
        -4px;

    background:
        linear-gradient(
            90deg,
            #8c6224,
            #efd187,
            #bd8b34,
            #f0d38c,
            #865d21
        );

    background-size:
        220% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        aboutYearShimmer
        7s linear
        infinite;
}


@keyframes aboutYearShimmer {

    from {
        background-position:
            0 center;
    }

    to {
        background-position:
            220% center;
    }

}


/* =========================================================
   CONTENT
========================================================= */

.about-content {
    position: relative;

    z-index: 4;
}


.about-content::before {
    content: "";

    position: absolute;

    left: -45px;
    top: 7%;

    width: 1px;
    height: 80%;

    opacity: .16;

    background:
        linear-gradient(
            transparent,
            var(--gold),
            transparent
        );
}


/* =========================================================
   OVERLINE
========================================================= */

.about-overline {
    margin-bottom: 24px;

    color:
        var(--gold);

    font-family:
        "Outfit",
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing:
        4px;
}


/* =========================================================
   TITLE
========================================================= */

.about-title {
    max-width: 1000px;

    margin-bottom: 42px;

    font-family:
        "Outfit",
        sans-serif;

    font-size:
        clamp(
            54px,
            6vw,
            108px
        );

    font-weight: 700;

    line-height: .95;

    letter-spacing:
        clamp(
            -6px,
            -.3vw,
            -3px
        );

    color:
        #e8e8e8;
}


.about-title em {
    font-style: normal;

    background:
        linear-gradient(
            90deg,
            #8f6526,
            #efd28c,
            #bb8932,
            #f0d18a,
            #825b22
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        aboutTitleGold
        8s linear
        infinite;
}


@keyframes aboutTitleGold {

    from {
        background-position:
            0 center;
    }

    to {
        background-position:
            200% center;
    }

}


/* =========================================================
   COPY
========================================================= */

.about-copy {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 40px;

    max-width: 900px;

    margin-bottom: 50px;
}


.about-copy p {
    margin: 0;

    color:
        #8c8c8c;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   META
========================================================= */

.about-meta {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.about-meta-item {
    position: relative;

    min-height: 110px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        24px 22px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .018);

    overflow: hidden;

    transition:
        transform .4s var(--ease),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


.about-meta-item::before {
    content: "";

    position: absolute;

    right: -40px;
    top: -40px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        rgba(199, 154, 61, .05);

    filter:
        blur(35px);

    opacity: 0;

    transition:
        opacity .4s ease;
}


.about-meta-item::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

    transition:
        width .5s var(--ease);
}


.about-meta-item:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(199, 154, 61, .18);

    background:
        rgba(199, 154, 61, .025);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .28);
}


.about-meta-item:hover::before {
    opacity: 1;
}


.about-meta-item:hover::after {
    width: 100%;
}


.about-meta-item span {
    position: relative;

    z-index: 2;

    margin-bottom: 8px;

    color:
        #545454;

    font-size: 8px;

    font-weight: 600;

    letter-spacing:
        2.5px;
}


.about-meta-item strong {
    position: relative;

    z-index: 2;

    color:
        #d7d7d7;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 18px;

    font-weight: 500;
}


/* =========================================================
   LAPTOP
========================================================= */

@media
(max-width: 1250px) {

    .about-layout {
        grid-template-columns:
            minmax(280px, .7fr)
            minmax(0, 1.3fr);

        gap: 70px;
    }

    .about-symbol {
        min-height: 460px;
    }

    .about-symbol-core {
        width: 200px;
        height: 200px;
    }

    .about-symbol-core span {
        font-size: 62px;
    }

    .about-symbol-orbit {
        width: 340px;
        height: 340px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 900px) {

    .about {
        padding:
            110px 0 120px;
    }

    .about-layout {
        grid-template-columns:
            1fr;

        gap: 45px;
    }

    .about-symbol {
        min-height: 340px;
    }

    .about-symbol-core {
        width: 180px;
        height: 180px;
    }

    .about-symbol-core span {
        font-size: 54px;
    }

    .about-symbol-orbit {
        width: 300px;
        height: 300px;
    }

    .about-copy {
        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .about-content::before {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 700px) {

    .about {
        padding:
            90px 0 100px;
    }

    .about-symbol {
        min-height: 290px;
    }

    .about-symbol-core {
        width: 150px;
        height: 150px;

        border-radius: 26px;
    }

    .about-symbol-core span {
        font-size: 46px;
    }

    .about-symbol-orbit {
        width: 250px;
        height: 250px;
    }

    .about-title {
        margin-bottom: 28px;

        font-size:
            clamp(
                44px,
                14vw,
                72px
            );

        line-height: .94;

        letter-spacing: -3px;
    }

    .about-overline {
        font-size: 8px;

        letter-spacing: 2.7px;
    }

    .about-copy p {
        font-size: 14px;

        line-height: 1.75;
    }

    .about-meta {
        grid-template-columns:
            1fr;
    }

    .about-meta-item {
        min-height: 90px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .about-symbol::before,
    .about-symbol-orbit,
    .about-symbol-core::after,
    .about-symbol-core span,
    .about-title em {
        animation: none !important;
    }

}