* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* text-secelction color */
::selection{
  background-color: #8509cd;
  color: #ffffff;
}
html{
scroll-behavior: smooth;
}

:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-primary-100: hsl(205, 15%, 58%);
  --clr-primary-400: hsl(216, 33%, 3%);
  --clr-primary-800: hwb(0 100% 0%);
  --clr-primary-900: hsl(0, 0%, 8%);
}

body {
  font-family: "Rubik", sans-serif;
  background-color: #191a1a;
  color: #fff;
  overflow-x: hidden;
  width: 100vw;
  background-image: url(../img/grid.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

/* IMPROVED NAVBAR UNDERLINE ANIMATION */
.nav li a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.3s;
}

.nav li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #60a5fa; /* Tailwind blue-400 */
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(.4,0,.2,1);
}

.nav li a:hover,
.nav li a:focus {
  color: #60a5fa;
}

.nav li a:hover::after,
.nav li a:focus::after {
  width: 100%;
}

.monochrome {
  filter: grayscale(100%); /* converts element to black & white */ 
}

nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #f0eaea;
  height: 3px;
  border-radius: 0;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
  transition: all 100s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
nav.fill ul li a:hover {
  color: red;
  z-index: 1;
}
nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 5s forwards;
  -webkit-animation: fill 5s forwards;
  -moz-animation: fill 5s forwards;
  opacity: 1;
}

/* Keyframes */
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}

#cursorbg {
  display: none;
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1.5px solid #ffffff; /* White ring */
  border-radius: 50%; /* Perfect circle */
  background: transparent; /* No fill */
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); /* Subtle glow */
  pointer-events: none; /* Prevent cursor interference */
  z-index: 1000;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* svg styles */
/* make sure our hidden SVG isn’t visible or affecting layout */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* apply our clip-path to a container around the img */
.clipped-image {
  display: inline-block; /* shrinkwrap to the image */
  clip-path: url(#clip-squiggle); /* reference the SVG clipPath ID */
  -webkit-clip-path: url(#clip-squiggle);
}

/* Optional: image hover effect */
.clipped-image {
  display: block;
  width: 570px; /* adjust as needed */
  height: 500px;
  transition: transform 0.3s;
}
.hero-section {
  object-fit: cover; /* cover, contain, or fill */
  /* transform: translate(-30%, -60%); */
  /* top: 40%; */
  /* left: 60%; */
  /* position: absolute; */
  filter: grayscale(1.5);
}

.about-image {
  width: 400px;
  height: auto;
}

.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in,
    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out,
    transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Typewriter effect 1 */
@keyframes typing {
  0.0000%,
  27.3488% {
    content: "";
  }
  1.1395%,
  26.2093% {
    content: "d";
  }
  2.2791%,
  25.0698% {
    content: "de";
  }
  3.4186%,
  23.9302% {
    content: "dev";
  }
  4.5581%,
  22.7907% {
    content: "deve";
  }
  5.6977%,
  21.6512% {
    content: "devel";
  }
  6.8372%,
  20.5116% {
    content: "develo";
  }
  7.9767%,
  19.3721% {
    content: "develop";
  }
  9.1163%,
  18.2326% {
    content: "develope";
  }
  10.2558%,
  17.0930% {
    content: "developer";
  }

  30.7674%,
  51.2791% {
    content: "";
  }
  31.9070%,
  50.1395% {
    content: "w";
  }
  33.0465%,
  49.0000% {
    content: "wr";
  }
  34.1860%,
  47.8605% {
    content: "wri";
  }
  35.3256%,
  46.7209% {
    content: "writ";
  }
  36.4651%,
  45.5814% {
    content: "write";
  }
  37.6047%,
  44.4419% {
    content: "writer";
  }

  54.6977%,
  75.2093% {
    content: "";
  }
  55.8372%,
  74.0698% {
    content: "r";
  }
  56.9767%,
  72.9302% {
    content: "re";
  }
  58.1163%,
  71.7907% {
    content: "rea";
  }
  59.2558%,
  70.6512% {
    content: "read";
  }
  60.3953%,
  69.5116% {
    content: "reade";
  }
  61.5349%,
  68.3721% {
    content: "reader";
  }

  78.6279%,
  96.8605% {
    content: "";
  }
  79.7674%,
  95.7209% {
    content: "c";
  }
  80.9070%,
  94.5814% {
    content: "cr";
  }
  82.0465%,
  93.4419% {
    content: "cre";
  }
  83.1860%,
  92.3023% {
    content: "crea";
  }
  84.3256%,
  91.1628% {
    content: "creat";
  }
  85.4651%,
  90.0233% {
    content: "creati";
  }
  86.6047%,
  88.8837% {
    content: "creativ";
  }
  87.7442%,
  87.7442% {
    content: "creative";
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 13.5s infinite;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

.typewriter.nocaret::after {
  border-right: 0;
}

@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }

  @keyframes sequencePopup {
    0%,
    100% {
      content: "developer";
    }
    25% {
      content: "writer";
    }
    50% {
      content: "reader";
    }
    75% {
      content: "human";
    }
  }

  .typewriter::before {
    content: "developer";
    animation: sequencePopup 12s linear infinite;
  }
}

.tech-stack {
  display: grid;
  place-content: center;
  font-family: system-ui;
  font-size: 1.125rem;
}
.scroller {
  max-width: 80vw;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */


.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem;
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}

/* From Uiverse.io by adamgiebl */
/* .container {
    width: 100%;
    height: 100%;
    --color: rgba(114, 114, 114, 0.3);
    background-color: #191a1a;
    background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
        linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
    background-size: 55px 55px;
  } */

@keyframes fadeInUpModal {
  from { opacity: 0; transform: translateY(40px);}
  to { opacity: 1; transform: translateY(0);}
}
.animate-fadeInUp {
  animation: fadeInUpModal 0.4s cubic-bezier(.4,0,.2,1) both;
}