/* Da der Shader die gesamte Arbeit für das Rad übernimmt,
  ist die CSS-Datei extrem schlank, modern und sauber.
*/

body {
    background-color: #050505;
    width: 100%;
}

/* Versteckte bzw. angepasste Scrollbar für den inneren Container */
#scroll-container::-webkit-scrollbar {
    width: 6px;
}
#scroll-container::-webkit-scrollbar-track {
    background: transparent; 
}
#scroll-container::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.2); 
    border-radius: 10px;
}
#scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.5); 
}

/* Subtile Fade In Animation für den initialen Load */
.custom-fade-in-up {
    animation: customFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}
.custom-delay-100 { animation-delay: 100ms; }
.custom-delay-200 { animation-delay: 200ms; }
.custom-delay-300 { animation-delay: 300ms; }

@keyframes customFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

//* ==========================================
   INTER FONTS
   ========================================== */

/* inter-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/inter-v20-latin-300.woff2') format('woff2'); 
}

/* inter-regular (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/inter-v20-latin-regular.woff2') format('woff2'); 
}

/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/inter-v20-latin-500.woff2') format('woff2'); 
}

/* inter-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/inter-v20-latin-600.woff2') format('woff2'); 
}

/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/inter-v20-latin-700.woff2') format('woff2'); 
}

/* ==========================================
   PLAYFAIR DISPLAY FONTS
   ========================================== */

/* playfair-display-regular (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); 
}

/* playfair-display-italic (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); 
}

/* playfair-display-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/playfair-display-v40-latin-500.woff2') format('woff2'); 
}

/* playfair-display-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  src: url('./fonts/playfair-display-v40-latin-500italic.woff2') format('woff2'); 
}

/* playfair-display-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/playfair-display-v40-latin-600.woff2') format('woff2'); 
}

/* playfair-display-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  src: url('./fonts/playfair-display-v40-latin-600italic.woff2') format('woff2'); 
}

/* playfair-display-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/playfair-display-v40-latin-700.woff2') format('woff2'); 
}

/* playfair-display-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/playfair-display-v40-latin-700italic.woff2') format('woff2'); 
}

/* ==========================================
   LORA FONTS
   ========================================== */

/* lora-regular (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/lora-v37-latin-regular.woff2') format('woff2'); 
}

/* lora-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/lora-v37-latin-700.woff2') format('woff2'); 
}

/* ==========================================
   NOTO SANS FONTS
   ========================================== */

/* noto-sans-regular (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); 
}

/* noto-sans-italic (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/noto-sans-v42-latin-italic.woff2') format('woff2'); 
}

/* noto-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/noto-sans-v42-latin-700.woff2') format('woff2'); 
}

/* noto-sans-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/noto-sans-v42-latin-700italic.woff2') format('woff2'); 
}