@import "tailwindcss";

@font-face {
  font-family: 'fellix';
  src: url(./assets/font/fellix.woff2);
}
@font-face {
  font-family: 'raleway';
  src: url(./assets/font/Raleway-SemiBold.ttf);
}
@font-face {
  font-family: 'glonto';
  src: url(./assets/font/Glonto-Regular.otf);
}
@font-face {
  font-family: 'orange';
  src: url(./assets/font/orange.otf);
}
@font-face {
  font-family: 'obito';
  src: url(./assets/font/Orbito.otf);
}
@font-face {
  font-family: 'riope';
  src: url(./assets/font/Riope.ttf);
}
@font-face {
  font-family: 'klimisk';
  src: url(./assets/font/Klomisk.otf);
}
@font-face {
  font-family: 'dmsans';
  src: url(./assets/font/DMSans-VariableFont_opsz\,wght.ttf);
}
@font-face {
  font-family: 'urbanist';
  src: url(./assets/font/Urbanist-VariableFont_wght.ttf);
}

@layer utilities {
  .font-fellix {
    font-family: 'fellix';
  }
  .font-raleway{
    font-family: 'raleway';
  }
  .font-glonto{
    font-family: 'glonto';
  }
  .font-obito{
    font-family: 'obito';
  }
  .font-riope{
    font-family: 'riope';
  }
  .font-orange{
    font-family: 'orange';
  }
  .font-klimisk{
    font-family: 'klimisk';
  }
  .font-urbanist{
    font-family: 'urbanist';
  }
  .font-dmsans{
    font-family: 'dmsans';
  }
}

@keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .animate-scroll {
            animation: scroll 20s linear infinite;
        }

        .logo-container:hover .animate-scroll {
            animation-play-state: paused;
        }

        /* Logo color transitions */
        .logo-item {
            mix-blend-mode: difference;
        }
        
        .logo-text {
            color: white;
        }

        /* Curved shape for black background */
        .curved-black {
            clip-path: polygon(0 0, 60% 0, 53% 100%, 0% 100%);
        }


        /* From Uiverse.io by cssbuttons-io */ 
.all-btn {
  --color: #ffffff;
  font-family: inherit;
  display: inline-block;
  width: 12em;
  height: 2.6em;
  line-height: 2.5em;
  margin: 20px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--color);
  transition: color 0.5s;
  z-index: 1;
  font-size: 17px;
  border-radius: 1px;
  font-weight: 500;
  color: var(--color);
}
.all-btn2 {
  --color: #ffffff;
  display: inline-block;
  margin:20px 5px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.5s;
  z-index: 1;
  color: var(--color);
}

.all-btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  height: 150px;
  width: 270px;
  border-radius: 50%;
}
.all-btn2:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  height: 150px;
  width: 270px;
  border-radius: 50%;
}

.all-btn:hover {
  color: #000000;
}
.all-btn2:hover {
  color: #000000;
}
.all-btn:before {
  top: 100%;
  left: 100%;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.all-btn2:before {
  top: 100%;
  left: 100%;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.all-btn:hover:before {
  top: -30px;
  left: -30px;
}
.all-btn2:hover:before {
  top: -30px;
  left: -30px;
}


.all-btn:active:before {
  background: #ffffff;
  transition: background 0s;
}


.navbar {
    background: transparent;
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
}

/* Scrolled state with blur */
.navbar.scrolled-up {
    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.navbar.scrolled-up .navbar-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.split-text {
  display: inline-flex;
}

.letter {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.letter span {
  display: block;
}
.bottom {
  position: absolute;
  top: 100%;
  left: 0;
  
}

.fade-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}