/* Base styles */
:root {
    --primary-color: #000000;
    --secondary-color: #FFFFFF;
    --accent-color: ;
}

/* Strict no-scrollbar rules */
* {
    -ms-overflow-style: none !important;
    /* IE and Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

*::-webkit-scrollbar {
    display: none !important;
    /* Chrome, Safari and Opera */
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Fraunces, Inter, system-ui, sans-serif;
}

body {
    font-family: Inter, Inter, system-ui, sans-serif;
}

/* Interactive elements */
.interactive-element {
    transition: all 0.3s ease;
}

.interactive-element:hover {
    transform: translateY(-2px);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

[data-section-id] {
    display: none;
}

[data-section-id]:first-child {
    display: block;
}


/* From Uiverse.io by niat786 */ 
.button {
  -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
  clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
  overflow: hidden;
}

button:hover {
  cursor: pointer;
  transition: all .3s ease-in;
}


/* spotlight */ 

  @keyframes flicker {
    0%   { opacity: 0.2; }
    10%  { opacity: 0.4; }
    20%  { opacity: 0.1; }
    30%  { opacity: 0.35; }
    40%  { opacity: 0.15; }
    50%  { opacity: 0.3; }
    60%  { opacity: 0.25; }
    70%  { opacity: 0.4; }
    80%  { opacity: 0.2; }
    90%  { opacity: 0.3; }
    100% { opacity: 0.2; }
  }

  .flicker {
    animation: flicker 1.5s infinite;
  }

  .group:hover .flicker {
    animation: none !important;
    opacity: 1 !important;
  }