@import '_variables';

/* =============== ACCESSIBILITY =============== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =============== STATIC GRID BACKGROUND =============== */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient($grid-dark 0.1em, transparent 0.1em), linear-gradient(90deg, $grid-dark 0.1em, transparent 0.1em);
  background-size: 3em 3em;
}

/* =============== BASIC STYLES =============== */
body {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  background: $bg-dark;
  color: $text-dark;
  margin: 0;
  padding: 0;
  transition: all $transition-duration ease;
  overflow-y: scroll;
  overflow-x: hidden;

  &.light-mode {
    background: $bg-light;
    color: $text-light;

    &::before {
      background-image: linear-gradient($grid-light 0.1em, transparent 0.1em), linear-gradient(90deg, $grid-light 0.1em, transparent 0.1em);
    }

    #theme-toggle {
      background: $bg-dark;
      color: $btn-text;
    }
  }
}

.main-container {
  width: 90%;
  max-width: 30rem;
  margin: 10rem auto;
  position: relative;
  z-index: 1;
}

:focus-visible {
  outline-offset: 4px;
}

/* =============== SCROLLBAR =============== */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: $bg-light;
}

::-webkit-scrollbar-thumb {
  background-color: $scrollbar-thumb;
}

/* =============== ICON STYLES =============== */
.icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.icon-small {
  width: 20px;
  height: 20px;
}

.icon-large {
  width: 28px;
  height: 28px;
}

/* =============== BIO SECTION =============== */
.blob-center {
  @include flex-center;
  margin-bottom: $spacing-large;
}

.head-section{
  overflow: hidden;
}

.blob-wrapper {
  width: 160px;
  height: 160px;
  border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  overflow: hidden;
  animation: blobAnim 10s ease-in-out infinite alternate;
  box-shadow: 0 4px 20px $shadow-dark;
}

.blob-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

@keyframes blobAnim {
  0%, 100% {
    border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  }
  25% {
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 40% 60% 60% 40% / 50% 50% 40% 60%;
  }
  75% {
    border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;
  }
}

/* =============== DARK MODE TOGGLE =============== */
#dark-mode-toggle {
  display: flex;
  justify-content: flex-end;
  padding: $spacing-medium $spacing-medium * 1.1 0 $spacing-large;
}

#theme-toggle {
  background: $bg-light;
  color: $text-light;
  border: none;
  padding: 0.8rem $spacing-medium;
  border-radius: 50%;
  cursor: pointer;
  transition: all $transition-duration ease;
  font-size: 1rem;
  @include flex-center;
}

.hidden {
  display: none;
}
