@font-face {
	font-family: IRANSansDN;
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/eot/IRANSansDN.eot');
	src: url('../fonts/eot/IRANSansDN.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff/IRANSansDN.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansDN.ttf') format('truetype');
}
/* ===================================
   CSS Reset & Base Styles
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #f59e0b;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-white: #ffffff;
    --bg-light: #f8fafc;
    
    /* Navbar Heights */
    --navbar-height-initial: 90px;
    --navbar-height-scrolled: 70px;
    
    /* Spacing */
    --navbar-padding-x-initial: 40px;
    --navbar-padding-x-scrolled: 30px;
    
    /* Border Radius */
    --navbar-radius: 60px;
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body {
    font-family: IRANSansDN;
    background: #0f172a;
    overflow-x: hidden;
    cursor: none;
}

/* ===================================
   Custom Cursor
   =================================== */
#custom-cursor {
    width: 12px;
    height: 12px;
    background: var(--secondary-color);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transition: transform 0.15s ease, opacity 0.3s ease;
    opacity: 1;
    transform: translate(-50%, -50%);
}

#cursor-follower {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.15s ease-out;
    opacity: 1;
    transform: translate(-50%, -50%);
}


@media (max-width: 480px) {

    #custom-cursor{
        display: none;
    }
    
    #cursor-follower {
        display: none;
    }
}

body.cursor-hover #cursor-follower {
    width: 60px;
    height: 60px;
    border-color: rgba(245, 158, 11, 0.6);
}



/* ===================================
   Scroll Progress Bar
   =================================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    width: 0%;
    z-index: 10001;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px var(--primary-color);
}

/* ===================================
   Preloader Styles
   =================================== */
.preloader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
    animation: preloaderFadeIn 0.8s ease;
}

@keyframes preloaderFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Preloader Logo */
.preloader-logo {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-ring {
    position: absolute;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: rotateLogo 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.logo-ring:nth-child(1) {
    width: 120px;
    height: 120px;
    border-top-color: var(--primary-color);
    animation-duration: 2s;
}

.logo-ring:nth-child(2) {
    width: 90px;
    height: 90px;
    border-top-color: var(--secondary-color);
    animation-duration: 1.5s;
    animation-direction: reverse;
}

.logo-ring:nth-child(3) {
    width: 60px;
    height: 60px;
    border-top-color: rgba(255, 255, 255, 0.3);
    animation-duration: 1s;
}

@keyframes rotateLogo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.preloader-logo svg {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 10px var(--primary-color));
    animation: pulseStar 1.5s ease-in-out infinite;
}

@keyframes pulseStar {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Preloader Text */
.preloader-text {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 40px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.6));
    }
}

/* Progress Bar */
.preloader-progress {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 0 auto 15px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--primary-color);
    animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% {
        box-shadow: 0 0 10px var(--primary-color);
    }
    50% {
        box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
    }
}

/* Percentage Text */
.preloader-percentage {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
}

/* Disable scroll while preloader is active */
body.preloader-active {
    overflow: hidden;
}