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


/* =========================================================
   GLOBAL REVEAL STATES
========================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
}


/* =========================================================
   SPLIT TEXT
========================================================= */

[data-split] {
    overflow: hidden;
}

[data-split] .char {
    display: inline-block;
    will-change: transform, opacity;
}


/* =========================================================
   COMMON SECTION ENTRY
========================================================= */

.section-header,
.about-layout,
.services-list,
.portfolio-stage,
.contact-layout {
    will-change:
        transform,
        opacity,
        filter;
}


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

.hero-eyebrow,
.hero-description-wrap,
.hero-actions,
.hero-signature,
.hero-scroll,
.hero-corner,
.hero-visual {
    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   SERVICE ROWS
========================================================= */

.service-row {
    will-change:
        transform,
        opacity;
}


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

.project {
    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-content {
    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   MAGNETIC ELEMENTS
========================================================= */

.magnetic {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}


/* =========================================================
   BUTTON PRESS
========================================================= */

.button:active,
.project-button:active,
.sidebar-link:active {
    transform: scale(.96);
}


/* =========================================================
   HOVER FLOAT
========================================================= */

.hover-float {
    transition:
        transform .4s var(--ease);
}

.hover-float:hover {
    transform:
        translateY(-7px);
}


/* =========================================================
   GOLD GLINT
========================================================= */

.gold-glint {
    background:
        linear-gradient(
            90deg,
            #9a6e28,
            #f1d791,
            #b98732,
            #f1d791,
            #8e6426
        );

    background-size:
        200% auto;

    animation:
        goldGlint
        8s linear
        infinite;
}


@keyframes goldGlint {

    0% {
        background-position:
            -200% center;
    }

    100% {
        background-position:
            200% center;
    }

}


/* =========================================================
   TEXT SHIMMER
========================================================= */

.text-shimmer {
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 25%,
            var(--gold-light) 50%,
            #ffffff 75%,
            #ffffff 100%
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        textShimmer
        7s linear
        infinite;
}


@keyframes textShimmer {

    to {
        background-position:
            200% center;
    }

}


/* =========================================================
   LINE DRAW
========================================================= */

.line-draw {
    position: relative;
}


.line-draw::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

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

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


.line-draw:hover::after {
    width: 100%;
}


/* =========================================================
   FLOATING SOFT
========================================================= */

.floating-soft {
    animation:
        floatingSoft
        5s ease-in-out
        infinite;
}


@keyframes floatingSoft {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================================
   BLUR ENTRY UTILITY
========================================================= */

.blur-entry {
    opacity: 0;

    filter:
        blur(14px);

    transform:
        scale(.96);
}


.blur-entry.is-visible {
    opacity: 1;

    filter:
        blur(0);

    transform:
        scale(1);

    transition:
        opacity .9s ease,
        filter .9s ease,
        transform .9s var(--ease);
}


/* =========================================================
   LOADER EXIT
========================================================= */

.loader {
    transition:
        opacity .7s ease,
        visibility .7s ease;
}


.loader.is-complete {
    pointer-events: none;
}


.loader.is-complete
.loader-progress {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .4s ease,
        transform .55s var(--ease);
}


.loader.is-complete
.loader-mark {
    opacity: 0;

    transform:
        scale(1.2);

    filter:
        blur(10px);

    transition:
        opacity .55s ease,
        transform .7s var(--ease),
        filter .55s ease;
}


.loader.is-complete
.loader-glow {
    opacity: 0;

    transform:
        scale(1.8);

    transition:
        opacity .75s ease,
        transform .85s var(--ease);
}


/* =========================================================
   PROJECT MODAL
========================================================= */

.project-modal {
    transition:
        opacity .4s ease,
        visibility .4s ease;
}


.project-modal-backdrop {
    opacity: 0;

    transition:
        opacity .5s ease;
}


.project-modal-panel {
    opacity: 0;

    transform:
        translateY(45px)
        scale(.96);

    filter:
        blur(10px);

    transition:
        opacity .55s ease,
        transform .65s var(--ease),
        filter .55s ease;
}


.project-modal.is-open
.project-modal-backdrop {
    opacity: 1;
}


.project-modal.is-open
.project-modal-panel {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    transition-delay:
        .08s;
}


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

.mobile-menu {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}


.mobile-menu.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.mobile-menu nav a {
    opacity: 0;

    transform:
        translateY(25px);
}


.mobile-menu.is-open
nav a {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .5s ease,
        transform .6s var(--ease);
}


.mobile-menu.is-open
nav a:nth-child(1) {
    transition-delay:
        .05s;
}


.mobile-menu.is-open
nav a:nth-child(2) {
    transition-delay:
        .10s;
}


.mobile-menu.is-open
nav a:nth-child(3) {
    transition-delay:
        .15s;
}


.mobile-menu.is-open
nav a:nth-child(4) {
    transition-delay:
        .20s;
}


.mobile-menu.is-open
nav a:nth-child(5) {
    transition-delay:
        .25s;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button span {
    transition:
        transform .35s var(--ease),
        width .35s var(--ease),
        opacity .35s ease;
}


/* =========================================================
   SCROLLING STATES
========================================================= */

html.scrolling-down
.mobile-header {
    transform:
        translateY(-6px);

    transition:
        transform .35s var(--ease);
}


html.scrolling-up
.mobile-header {
    transform:
        translateY(0);

    transition:
        transform .35s var(--ease);
}


/* =========================================================
   PORTFOLIO SCAN
========================================================= */

.project-scan {
    will-change:
        left,
        opacity;
}


/* =========================================================
   SERVICE LIGHT
========================================================= */

.service-light {
    will-change:
        transform,
        opacity;
}


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

.hero-particle {
    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


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

.webgl-container,
.webgl-container canvas {
    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.hero-title-row,
.hero-visual,
.project,
.service-row,
.contact-content,
[data-reveal],
[data-split] .char {
    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


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

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

    [data-reveal],
    [data-split] .char,
    .hero-eyebrow,
    .hero-description-wrap,
    .hero-actions,
    .hero-signature,
    .hero-scroll,
    .hero-corner,
    .hero-visual,
    .section-header,
    .about-layout,
    .services-list,
    .portfolio-stage,
    .contact-layout,
    .service-row,
    .project,
    .contact-content,
    .project-modal-panel {
        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        transition: none !important;
    }


    .floating-soft,
    .gold-glint,
    .text-shimmer {
        animation: none !important;
    }

}