/* Persian Font Faces */
@font-face {
    font-family: 'Vazirmatn';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* RTL Styles */
body {
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
}

/* Portfolio Item Animations */
.portfolio-item {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.5s ease-out;
}

.portfolio-item.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.portfolio-header {
    opacity: 0;
    transition: opacity 0.7s ease-out;
}

.portfolio-header.animate-in {
    opacity: 1;
}

.portfolio-header h2 {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.5s ease-out;
    transition-delay: 0.1s;
}

.portfolio-header p {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.5s ease-out;
    transition-delay: 0.2s;
}

.portfolio-header.animate-in h2,
.portfolio-header.animate-in p {
    opacity: 1;
    transform: translateX(0);
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
    overflow: hidden;
    --c-0: hsla(217.59493670886076, 100%, 30%, 1);
    --x-0: 93%;
    --y-0: 63%;
    --x-1: 33%;
    --y-1: -7%;
    --c-1: hsla(0, 0%, 0%, 1);
    --c-2: hsla(0, 0%, 0%, 1);
    --y-2: 7%;
    --x-2: 84%;
    --c-3: hsla(0, 0%, 0%, 1);
    --x-3: 14%;
    --y-3: 5%;
    --y-4: 96%;
    --x-4: 7%;
    --c-4: hsla(0, 0%, 0%, 1);
    --c-5: hsla(0, 0%, 0%, 1);
    --x-5: 93%;
    --y-5: 90%;
    --x-6: 3%;
    --y-6: 61%;
    --c-6: hsla(279.7894736842105, 67%, 27%, 1);
    --x-7: 94%;
    --y-7: 59%;
    --c-7: hsla(279.7894736842105, 67%, 27%, 1);
    --y-8: 63%;
    --x-8: 48%;
    --c-8: hsla(217.68844221105527, 100%, 39%, 1);
    --y-9: 78%;
    --c-9: hsla(217.59493670886076, 100%, 30%, 1);
    --x-9: 96%;
    background-color: hsla(262, 82%, 3%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)), radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)), radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)), radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
    animation: hero-gradient-animation 15s linear infinite alternate-reverse;
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
}

/* CSS Properties for gradient animation */
@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217.59493670886076, 100%, 30%, 1)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 38.584065253664996%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 33%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -7%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.10878124098502%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 14%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(279.7894736842105, 67%, 27%, 1)
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 39.67138181429644%
}

@property --x-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 94%
}

@property --s-start-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.58090142552271%
}

@property --y-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 59%
}

@property --c-7 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(279.7894736842105, 67%, 27%, 1)
}

@property --y-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

@property --s-start-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 34.815367581495366%
}

@property --x-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 48%
}

@property --c-8 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217.68844221105527, 100%, 39%, 1)
}

@property --y-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%
}

@property --c-9 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217.59493670886076, 100%, 30%, 1)
}

@property --x-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%
}

@property --s-start-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.77166380372925%
}

/* Loading screen animations */
@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(217.59493670886076, 100%, 30%, 1);
        --x-0: 93%;
        --s-start-0: 8.392121895570533%;
        --s-end-0: 38.584065253664996%;
        --y-0: 63%;
        --x-1: 33%;
        --y-1: -7%;
        --s-start-1: 8.392121895570533%;
        --s-end-1: 22.10878124098502%;
        --c-1: hsla(0, 0%, 0%, 1);
        --s-start-2: 8.392121895570533%;
        --s-end-2: 22.558651527792346%;
        --c-2: hsla(0, 0%, 0%, 1);
        --y-2: 7%;
        --x-2: 84%;
        --c-3: hsla(0, 0%, 0%, 1);
        --s-start-3: 8.392121895570533%;
        --s-end-3: 22.558651527792346%;
        --x-3: 14%;
        --y-3: 5%;
        --y-4: 96%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 22.558651527792346%;
        --x-4: 7%;
        --c-4: hsla(0, 0%, 0%, 1);
        --s-start-5: 8.392121895570533%;
        --s-end-5: 22.558651527792346%;
        --c-5: hsla(0, 0%, 0%, 1);
        --x-5: 93%;
        --y-5: 90%;
        --x-6: 3%;
        --y-6: 61%;
        --c-6: hsla(279.7894736842105, 67%, 27%, 1);
        --s-start-6: 8.392121895570533%;
        --s-end-6: 39.67138181429644%;
        --x-7: 94%;
        --s-start-7: 8.392121895570533%;
        --s-end-7: 49.58090142552271%;
        --y-7: 59%;
        --c-7: hsla(279.7894736842105, 67%, 27%, 1);
        --y-8: 63%;
        --s-start-8: 8.392121895570533%;
        --s-end-8: 34.815367581495366%;
        --x-8: 48%;
        --c-8: hsla(217.68844221105527, 100%, 39%, 1);
        --y-9: 78%;
        --c-9: hsla(217.59493670886076, 100%, 30%, 1);
        --x-9: 96%;
        --s-start-9: 8.392121895570533%;
        --s-end-9: 31.77166380372925%;
    }

    50% {
        --c-0: hsla(217.59493670886076, 100%, 30%, 1);
        --x-0: 2%;
        --s-start-0: 12.892043731642234%;
        --s-end-0: 42.94837818044209%;
        --y-0: 59%;
        --x-1: 42%;
        --y-1: 10%;
        --s-start-1: 8.392121895570533%;
        --s-end-1: 41.69445156991687%;
        --c-1: hsla(0, 0%, 0%, 1);
        --s-start-2: 8.392121895570533%;
        --s-end-2: 20.488815899465003%;
        --c-2: hsla(0, 0%, 0%, 1);
        --y-2: 29%;
        --x-2: 75%;
        --c-3: hsla(0, 0%, 0%, 1);
        --s-start-3: 8.392121895570533%;
        --s-end-3: 30.099844327777923%;
        --x-3: 5%;
        --y-3: 16%;
        --y-4: 91%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 24.59566937006635%;
        --x-4: 36%;
        --c-4: hsla(0, 0%, 0%, 1);
        --s-start-5: 8.392121895570533%;
        --s-end-5: 24.59566937006635%;
        --c-5: hsla(0, 0%, 0%, 1);
        --x-5: 70%;
        --y-5: 91%;
        --x-6: 54%;
        --y-6: 73%;
        --c-6: hsla(279.7894736842105, 67%, 27%, 1);
        --s-start-6: 9%;
        --s-end-6: 26.825849058644888%;
        --x-7: 57%;
        --s-start-7: 9%;
        --s-end-7: 49.05074977970796%;
        --y-7: 76%;
        --c-7: hsla(279.7894736842105, 67%, 27%, 1);
        --y-8: 53%;
        --s-start-8: 9%;
        --s-end-8: 26.166345747226664%;
        --x-8: 11%;
        --c-8: hsla(217.68844221105527, 100%, 39%, 1);
        --y-9: 70%;
        --c-9: hsla(217.59493670886076, 100%, 30%, 1);
        --x-9: 70%;
        --s-start-9: 9%;
        --s-end-9: 22.152460022684956%;
    }

    100% {
        --x-1: 76%;
        --y-1: -3%;
        --s-start-1: 8.392121895570533%;
        --s-end-1: 59.32232816638693%;
        --c-1: hsla(0, 0%, 0%, 1);
        --s-start-2: 8.392121895570533%;
        --s-end-2: 28.52989037790774%;
        --c-2: hsla(0, 0%, 0%, 1);
        --y-2: 18%;
        --x-2: 97%;
        --c-3: hsla(0, 0%, 0%, 1);
        --s-start-3: 8.392121895570533%;
        --s-end-3: 28.52989037790774%;
        --x-3: 42%;
        --y-3: 18%;
        --y-4: 95%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 28.52989037790774%;
        --x-4: 66%;
        --c-4: hsla(0, 0%, 0%, 1);
        --s-start-5: 8.392121895570533%;
        --s-end-5: 28.52989037790774%;
        --c-5: hsla(0, 0%, 0%, 1);
        --x-5: 46%;
        --y-5: 92%;
        --x-6: 102%;
        --y-6: 16%;
        --c-6: hsla(279.7894736842105, 67%, 27%, 1);
        --s-start-6: 24.72064437400016%;
        --s-end-6: 47.490620328604024%;
        --x-7: 22%;
        --s-start-7: 10.200720718860145%;
        --s-end-7: 50.46456494288142%;
        --y-7: 52%;
        --c-7: hsla(279.7894736842105, 67%, 27%, 1);
        --y-9: 51%;
        --c-9: hsla(217.5, 100%, 31%, 1);
        --x-9: 97%;
        --s-start-9: 6.294132688184733%;
        --s-end-9: 20.79106730744014%;
    }
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
    color: white;
    position: relative;
    z-index: 10;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: loading-spin 1s linear infinite;
    margin: 0 auto 24px;
}

.loading-text {
    font-size: 1.2rem;
    font-weight: 500;
    opacity: 0.9;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
}

@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Hero entrance animations */
@keyframes heroTitleEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroSubtitleEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroCTAEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroImageEntrance {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes scrollIndicatorEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blobContainerEntrance {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Hero animation states */
.hero-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

.hero-content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.hero-content h1 {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 1.2s ease-out, transform 1s ease-out;
    animation: heroTitleEntrance 1.2s ease-out forwards;
    animation-play-state: paused;
}

.hero-content.animate-in h1 {
    animation-play-state: running;
    animation-delay: 0.3s;
}

.hero-content p {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
    animation: heroSubtitleEntrance 1s ease-out forwards;
    animation-play-state: paused;
}

.hero-content.animate-in p {
    animation-play-state: running;
    animation-delay: 0.6s;
}

.hero-cta {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
    animation: heroCTAEntrance 0.8s ease-out forwards;
    animation-play-state: paused;
}

.hero-content.animate-in .hero-cta {
    animation-play-state: running;
    animation-delay: 0.9s;
}

.hero-image {
    opacity: 0;
    transform: translateX(50px) scale(0.9);
    transition: opacity 1.2s ease-out, transform 1s ease-out;
    animation: heroImageEntrance 1.2s ease-out forwards;
    animation-play-state: paused;
}

.hero-image.animate-in {
    animation-play-state: running;
    animation-delay: 0.4s;
}

.scroll-indicator {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.6s ease-out;
    animation: scrollIndicatorEntrance 0.8s ease-out forwards;
    animation-play-state: paused;
}

.scroll-indicator.animate-in {
    animation-play-state: running;
    animation-delay: 1.2s;
}

/* Blob animations entrance */
.blob-container {
    opacity: 0;
    transition: opacity 1.5s ease-out;
    animation: blobContainerEntrance 1.5s ease-out forwards;
    animation-play-state: paused;
}

.blob-container.animate-in {
    animation-play-state: running;
    animation-delay: 0.2s;
}