/* =========================================================
   SERKAN ŞİMŞEK // DIGITAL EXPERIENCE
   HERO
   FINAL
========================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 70px 0 50px;
}


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

.hero-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}


/* =========================================================
   GRID
========================================================= */

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 92px 92px;

    mask-image:
        radial-gradient(
            circle at 70% 50%,
            black 15%,
            transparent 75%
        );
}


/* =========================================================
   SCANLINE
========================================================= */

.hero-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: -10%;
    height: 160px;
    opacity: .18;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(199, 154, 61, .14),
            transparent
        );

    filter: blur(14px);

    animation:
        heroScan
        10s linear
        infinite;
}


@keyframes heroScan {

    0% {
        transform: translateY(-20vh);
    }

    100% {
        transform: translateY(130vh);
    }

}


/* =========================================================
   SPOTLIGHT
========================================================= */

.hero-spotlight {
    position: absolute;
    width: 1100px;
    height: 1100px;
    right: -180px;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 154, 61, .10) 0%,
            rgba(199, 154, 61, .045) 30%,
            transparent 70%
        );

    filter: blur(100px);

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


@keyframes heroSpotlight {

    0%,
    100% {
        opacity: .65;

        transform:
            translateY(-50%)
            scale(.92);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-50%)
            scale(1.06);
    }

}


/* =========================================================
   VERTICAL LINES
========================================================= */

.hero-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


.hero-lines span {
    position: absolute;
    top: -100%;
    width: 1px;
    height: 100%;
    opacity: .20;

    background:
        linear-gradient(
            transparent,
            rgba(199, 154, 61, .34),
            transparent
        );

    animation:
        heroLineMove
        12s linear
        infinite;
}


.hero-lines span:nth-child(1) {
    left: 23%;
    animation-delay: 0s;
}


.hero-lines span:nth-child(2) {
    left: 45%;
    animation-delay: 2.5s;
}


.hero-lines span:nth-child(3) {
    left: 69%;
    animation-delay: 5s;
}


.hero-lines span:nth-child(4) {
    left: 88%;
    animation-delay: 7.5s;
}


@keyframes heroLineMove {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    15% {
        opacity: .2;
    }

    70% {
        opacity: .12;
    }

    100% {
        transform: translateY(220%);
        opacity: 0;
    }

}


/* =========================================================
   ORBITS
========================================================= */

.hero-orbit {
    position: absolute;
    right: -150px;
    top: 50%;

    border-radius: 50%;

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

    transform:
        translateY(-50%);

    animation:
        orbitSpin
        linear
        infinite;
}


.hero-orbit::before {
    content: "";

    position: absolute;
    left: 50%;
    top: -4px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        var(--gold);

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


.hero-orbit-one {
    width: 840px;
    height: 840px;
    animation-duration: 45s;
}


.hero-orbit-two {
    width: 690px;
    height: 690px;
    animation-duration: 34s;
    animation-direction: reverse;
}


.hero-orbit-three {
    width: 530px;
    height: 530px;
    animation-duration: 27s;
}


@keyframes orbitSpin {

    from {
        transform:
            translateY(-50%)
            rotate(0deg);
    }

    to {
        transform:
            translateY(-50%)
            rotate(360deg);
    }

}


/* =========================================================
   PARTICLES
========================================================= */

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


.hero-particle {
    position: absolute;

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 12px
        rgba(199, 154, 61, .65);

    animation:
        heroParticleFloat
        linear
        infinite;

    will-change:
        transform,
        opacity;
}


@keyframes heroParticleFloat {

    0% {
        transform:
            translate3d(
                var(--pointer-x, 0px),
                calc(
                    110vh +
                    var(--pointer-y, 0px)
                ),
                0
            )
            scale(.3);

        opacity: 0;
    }

    12% {
        opacity: .28;
    }

    50% {
        transform:
            translate3d(
                calc(
                    var(--particle-drift, 20px) +
                    var(--pointer-x, 0px)
                ),
                calc(
                    45vh +
                    var(--pointer-y, 0px)
                ),
                0
            )
            scale(.75);

        opacity: .32;
    }

    88% {
        opacity: .18;
    }

    100% {
        transform:
            translate3d(
                calc(
                    var(--particle-drift, 20px) * 1.4 +
                    var(--pointer-x, 0px)
                ),
                calc(
                    -15vh +
                    var(--pointer-y, 0px)
                ),
                0
            )
            scale(1.1);

        opacity: 0;
    }

}


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

.hero-container {
    position: relative;
    z-index: 5;

    width:
        min(
            calc(100% - 210px),
            1580px
        );

    margin-left: auto;
    margin-right: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(520px, .95fr);

    align-items: center;

    gap:
        clamp(
            30px,
            5vw,
            90px
        );
}


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

.hero-content {
    position: relative;
    z-index: 10;

    padding-left:
        clamp(
            20px,
            2vw,
            50px
        );
}


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

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

    position: absolute;
    left: -50px;
    top: 2%;

    width: 1px;
    height: 78%;

    opacity: .16;

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


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 32px;

    color: #787878;

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

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.hero-eyebrow-line {
    width: 55px;
    height: 1px;

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


.hero-eyebrow-year {
    margin-left: 3px;
    color: var(--gold-light);
}


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

.hero-title {
    margin: 0;

    max-width: 850px;

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

    text-transform: uppercase;

    line-height: .84;

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

    overflow: visible;
}


.hero-title-row {
    display: block;
    overflow: hidden;
    padding: 6px 0;
}


.hero-title-word {
    display: inline-block;

    font-size:
        clamp(
            72px,
            7.25vw,
            146px
        );

    font-weight: 800;

    color: #f2f2f2;

    will-change:
        transform,
        opacity;
}


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

.hero-title-outline {
    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, .52);
}


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

.hero-title-gold {
    position: relative;

    background:
        linear-gradient(
            90deg,
            #8d6324 0%,
            #f0d38c 30%,
            #c39339 60%,
            #f0d38c 82%,
            #7d5721 100%
        );

    background-size:
        220% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        heroGoldText
        9s linear
        infinite;
}


@keyframes heroGoldText {

    from {
        background-position:
            0% center;
    }

    to {
        background-position:
            220% center;
    }

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description-wrap {
    max-width: 640px;
    margin-top: 36px;
}


.hero-description {
    margin-bottom: 14px;

    color: #a4a4a4;

    font-size:
        clamp(
            16px,
            1.2vw,
            19px
        );

    line-height: 1.85;
}


.hero-description strong {
    color: #efefef;
    font-weight: 600;
}


.hero-description-secondary {
    margin-bottom: 0;

    color: #626262;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


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

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}


/* =========================================================
   SIGNATURE
========================================================= */

.hero-signature {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 30px;

    color: #666;

    font-size: 11px;

    letter-spacing: 1px;
}


.hero-signature-dot {
    position: relative;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--gold-light);

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


.hero-signature-dot::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 22px;
    height: 22px;

    transform:
        translate(-50%, -50%);

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

    border-radius: 50%;

    animation:
        signaturePulse
        2.8s ease-out
        infinite;
}


@keyframes signaturePulse {

    from {
        transform:
            translate(-50%, -50%)
            scale(.3);

        opacity: .75;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.5);

        opacity: 0;
    }

}


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

.hero-visual {
    position: relative;

    min-height:
        min(
            780px,
            80vh
        );

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

    isolation: isolate;

    perspective: 1400px;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   OBJECT AURA
========================================================= */

.object-aura {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}


.object-aura-one {
    width: 620px;
    height: 620px;

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

    filter: blur(60px);

    animation:
        auraPulse
        6s ease-in-out
        infinite;
}


.object-aura-two {
    width: 420px;
    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .055),
            transparent 65%
        );

    filter: blur(42px);

    animation:
        auraPulse
        5s 1s ease-in-out
        infinite reverse;
}


@keyframes auraPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

}


/* =========================================================
   WEBGL
========================================================= */

.webgl-container {
    position: absolute;
    inset: 0;

    z-index: 8;

    display: flex;

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

    pointer-events: auto;
}


.webgl-container canvas {
    width: 100% !important;
    height: 100% !important;

    display: block;

    outline: 0;
}


/* =========================================================
   CSS FALLBACK CUBE
========================================================= */

.cube-fallback {
    position: relative;
    z-index: 5;

    width: 270px;
    height: 270px;

    transform-style: preserve-3d;

    transform:
        rotateX(-18deg)
        rotateY(35deg)
        rotateZ(-4deg);

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


.cube-fallback-face {
    position: absolute;
    inset: 0;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, .07),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #171717,
            #050505 55%,
            #131313
        );

    box-shadow:
        inset 0 0 50px
        rgba(255, 255, 255, .025),

        inset 0 0 70px
        rgba(199, 154, 61, .03);
}


.cube-fallback-face::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .35;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(199, 154, 61, .15) 21%,
            transparent 23%
        ),
        linear-gradient(
            68deg,
            transparent 42%,
            rgba(199, 154, 61, .1) 43%,
            transparent 45%
        ),
        linear-gradient(
            155deg,
            transparent 65%,
            rgba(199, 154, 61, .12) 66%,
            transparent 68%
        );
}


.face-front {
    transform:
        translateZ(135px);
}


.face-right {
    transform:
        rotateY(90deg)
        translateZ(135px);
}


.face-top {
    transform:
        rotateX(90deg)
        translateZ(135px);
}


/* =========================================================
   GOLD CORE FALLBACK
========================================================= */

.cube-gold-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 170px;
    height: 170px;

    transform:
        translate(-50%, -50%)
        translateZ(70px);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(240, 208, 139, .17),
            rgba(199, 154, 61, .08) 35%,
            transparent 70%
        );

    filter: blur(25px);

    animation:
        cubeCorePulse
        3.8s ease-in-out
        infinite;
}


@keyframes fallbackCubeFloat {

    0%,
    100% {
        transform:
            rotateX(-18deg)
            rotateY(35deg)
            rotateZ(-4deg)
            translateY(0);
    }

    50% {
        transform:
            rotateX(-14deg)
            rotateY(43deg)
            rotateZ(2deg)
            translateY(-20px);
    }

}


@keyframes cubeCorePulse {

    0%,
    100% {
        opacity: .6;

        transform:
            translate(-50%, -50%)
            translateZ(70px)
            scale(.85);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            translateZ(70px)
            scale(1.1);
    }

}


/* =========================================================
   OBJECT RINGS
========================================================= */

.object-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 3;

    border-radius: 50%;

    transform-style: preserve-3d;

    pointer-events: none;
}


.object-ring-one {
    width: 470px;
    height: 470px;

    margin:
        -235px 0 0 -235px;

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

    transform:
        rotateX(71deg)
        rotateZ(15deg);

    animation:
        objectRingOne
        22s linear
        infinite;
}


.object-ring-two {
    width: 390px;
    height: 390px;

    margin:
        -195px 0 0 -195px;

    border:
        1px dashed
        rgba(255, 255, 255, .09);

    transform:
        rotateX(65deg)
        rotateZ(-35deg);

    animation:
        objectRingTwo
        16s linear
        infinite;
}


.object-ring-one::before,
.object-ring-two::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -4px;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--gold-light);

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


@keyframes objectRingOne {

    from {
        transform:
            rotateX(71deg)
            rotateZ(15deg);
    }

    to {
        transform:
            rotateX(71deg)
            rotateZ(375deg);
    }

}


@keyframes objectRingTwo {

    from {
        transform:
            rotateX(65deg)
            rotateZ(-35deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(-395deg);
    }

}


/* =========================================================
   OBJECT CAPTION
========================================================= */

.object-caption {
    position: absolute;

    right: 0;
    bottom: 12%;

    display: flex;
    gap: 22px;
    align-items: center;

    color: #555;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;
}


.object-caption span:first-child {
    color: var(--gold);
}


.object-caption::before {
    content: "";

    width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199, 154, 61, .45)
        );
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 27px;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 13px;

    transform:
        translateX(-50%);

    color: #515151;
}


.hero-scroll-text {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: 4px;
}


.hero-scroll-line {
    position: relative;

    width: 1px;
    height: 42px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .08);
}


.hero-scroll-line i {
    position: absolute;

    left: 0;
    top: -100%;

    width: 100%;
    height: 100%;

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

    animation:
        scrollLine
        2.1s ease-in-out
        infinite;
}


@keyframes scrollLine {

    0% {
        top: -100%;
    }

    70% {
        top: 100%;
    }

    100% {
        top: 100%;
    }

}


/* =========================================================
   CORNERS
========================================================= */

.hero-corner {
    position: absolute;

    bottom: 32px;

    z-index: 7;

    color: #393939;

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

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 3px;
}


.hero-corner-left {
    left: 165px;
}


.hero-corner-right {
    right: 38px;
}


/* =========================================================
   BOTTOM FADE
========================================================= */

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 170px;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(5, 5, 5, .95)
        );
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media
(min-width: 1800px) {

    .hero-container {
        grid-template-columns:
            1.05fr .95fr;
    }

    .hero-content {
        padding-left: 60px;
    }

    .cube-fallback {
        width: 310px;
        height: 310px;
    }

    .face-front {
        transform:
            translateZ(155px);
    }

    .face-right {
        transform:
            rotateY(90deg)
            translateZ(155px);
    }

    .face-top {
        transform:
            rotateX(90deg)
            translateZ(155px);
    }

}


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

@media
(max-width: 1450px) {

    .hero-container {
        width:
            calc(100% - 170px);

        grid-template-columns:
            1.08fr .92fr;
    }

    .hero-title-word {
        font-size:
            clamp(
                64px,
                7vw,
                110px
            );
    }

    .hero-visual {
        min-height: 660px;
    }

    .cube-fallback {
        width: 230px;
        height: 230px;
    }

    .face-front {
        transform:
            translateZ(115px);
    }

    .face-right {
        transform:
            rotateY(90deg)
            translateZ(115px);
    }

    .face-top {
        transform:
            rotateX(90deg)
            translateZ(115px);
    }

}


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

@media
(max-width: 1100px) {

    .hero {
        min-height: auto;

        padding:
            150px 0 100px;
    }

    .hero-container {
        width:
            calc(100% - 90px);

        grid-template-columns:
            1fr;

        gap: 10px;
    }

    .hero-content {
        padding-left: 0;
    }

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

    .hero-visual {
        min-height: 620px;
    }

    .hero-corner-left {
        left: 45px;
    }

}


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

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

    .hero-scanline,
    .hero-spotlight,
    .hero-lines span,
    .hero-orbit,
    .hero-title-gold,
    .hero-signature-dot::after,
    .object-aura,
    .cube-fallback,
    .cube-gold-core,
    .object-ring,
    .hero-scroll-line i {
        animation: none !important;
    }

}