@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-Thin.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-Light.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-Light.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-Regular.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-SemiBold.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-SemiBold.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-Bold.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-Bold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-ExtraBold.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-ExtraBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/woff2/YekanBakh-Black.woff2') format('woff2'),
       url('../assets/fonts/woff/YekanBakh-Black.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'YekanBakh';
    font-weight: 400;
    height: 100vh;


    background-color: #0b0c28;
    background-image: 
        radial-gradient(circle, #0b0c28 0%, #000000 100%),  
        radial-gradient(white 1px, transparent 1px),         
        radial-gradient(white 1px, transparent 1px);         
    background-size: 
        100% 100%,     
        50px 50px,     
        100px 100px;    
    background-repeat: repeat;
    background-attachment: fixed;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, #7683a83d 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
    animation: twinkle 60s linear infinite;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(135, 252, 196, 0.15), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(40, 193, 245, 0.1), transparent 60%);
    z-index: 1;
    pointer-events: none;
}

@keyframes twinkle {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-400px, -200px); }
    100% { transform: translate(0, 0); }
}


@keyframes scrollLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .scroll-track {
      animation: scrollLeft 20s linear infinite;
    }


@layer utilities {
  @keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .before\:animate-spin-slow::before {
    animation: spin-slow 4s linear infinite;
  }
}