@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-orange: #fd6f00;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.scroll-watcher {
  height: 10px;
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: var(--color-orange);
  width: 100%;
  scale: 0 1;
  -webkit-animation: scroll-watcher linear;
  animation-timeline: scroll();
  transform-origin: left;
}

.service,
.project {
  scale: 0.5;
  opacity: 0.1;
  -webkit-animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: 100px 400px;
}

@-webkit-keyframes scroll-watcher {
  to {
    scale: 1 1;
  }
}

@-webkit-keyframes fade-in {
  to {
    scale: 1;
    opacity: 1;
  }
}

.progress {
  -webkit-animation: progress linear forwards;
  animation-timeline: view();
  animation-range: 25px 150px;
}

@-webkit-keyframes progress {
  from {
    width: 0px;
  }
}

#back-to-top {
  opacity: 0;
  scale: 0;
  z-index: 1000;
  -webkit-animation: back-to-top linear forwards;
  animation-timeline: scroll();
  animation-range: 400px 550px;
}

@-webkit-keyframes back-to-top {
  to {
    opacity: 0.9;
    scale: 1;
  }
}

/* #header {
  -webkit-animation: stick-to-top linear forwards;
  animation-timeline: scroll();
  animation-range: 67px 100px;
}
@-webkit-keyframes stick-to-top {
  to {
    position: fixed;
    top: 0;
  }
} */

/* .img-container {
  position: relative;
  width: 538px;
  height: 617px;
} */

/* .top-half-circle {
  position: absolute;
  width: 538px;
  height: 269px;
  bottom: 269px;
  border: 10px solid var(--color-orange);
  border-bottom: 10px solid transparent;
  border-top-left-radius: 269px;
  border-top-right-radius: 269px;
  z-index: 0;
  -webkit-animation: top-half 1.5s ease-out;
} */

/* .top-half-circle img {
  position: absolute;
  bottom: -269px;
  z-index: +5;
} */

/* .bottom-half-circle {
  position: absolute;
  bottom: 0;
  width: 538px;
  height: 269px;
  border: 10px solid var(--color-orange);
  border-top: 10px solid transparent;
  border-bottom-left-radius: 269px;
  border-bottom-right-radius: 269px;
  overflow: hidden;
  z-index: 6;
  -webkit-animation: bottom-half 2s infinite linear;
} */

/* .bottom-half-circle img {
  position: absolute;
  bottom: 0px;
  z-index: 0;
} */

@-webkit-keyframes top-half {
  0% {
    bottom: -1000px;
  }
}
@-webkit-keyframes bottom-half {
  0% {
    transform: rotate(-6deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-6deg);
  }
}

.aboutme-image {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  -webkit-animation: 5s water linear infinite;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.aboutme-image::after,
.aboutme-image::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background-image: conic-gradient(
    from var(--angle),
    #ff0095,
    #fd6f00,
    #00ff99,
    #fd6f00,
    #006aff,
    #fd6f00,
    #ff0095
  );
  z-index: -1;
  padding: 3px;
  border-top-left-radius: 25%;
  border-top-right-radius: 25%;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-animation: 3s spin linear infinite;
}
.aboutme-image::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

.aboutme-image {
  width: 90%;
  height: 80%;
  border-radius: 50%;
  overflow: hidden;
}

@-webkit-keyframes spin {
  0% {
    --angle: 0deg;
    scale: 1;
  }
  50% {
    --angle: 180deg;
    scale: 1.1;
  }
  100% {
    --angle: 360deg;
    scale: 1;
  }
}

@-webkit-keyframes water {
  0% {
    border-radius: 25% 46% 25% 25% / 25% 50% 25% 25%;
  }
  25% {
    border-radius: 59% 33% 56% 25% / 55% 38% 26% 25%;
  }
  40% {
    border-radius: 53% 41% 63% 25% / 46% 53% 36% 25%;
  }
  60% {
    border-radius: 41% 40% 66% 25% / 38% 47% 47% 34%;
  }
  75% {
    border-radius: 35% 33% 61% 28% / 25% 59% 30% 68%;
  }
  100% {
    border-radius: 25% 46% 25% 25% / 25% 50% 25% 25%;
  }
}

.project-image:hover {
  scale: 1.05;
  z-index: 10000;
  cursor: zoom-in;
}

.svg-hover {
  transition: all ease-in-out 123ms;
  -webkit-transition: -webkit-filter 123ms ease-in-out;
  scale: 1;
}
.svg-hover:hover {
  scale: 1.05;
  filter: brightness(0) saturate(100%) invert(46%) sepia(59%) saturate(3359%)
    hue-rotate(6deg) brightness(103%) contrast(104%);
  transition: all ease-in-out 123ms;
  -webkit-transition: -webkit-filter 123ms ease-in-out;
}

.burger-menu {
  filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(0%)
    hue-rotate(115deg) brightness(108%) contrast(108%);
}

.mobile-menu {
  opacity: 0.95;
  transition: all ease-in-out 0.5s;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.testimonial{
  transition: all ease-in-out 0.5s;
}