* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100svh;
  font-family: var(--font);
  overflow-x: hidden;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* dark overlay */
.bg-low {
  position: absolute;
  inset: 0;
  background-color: var(--low);
  z-index: 3;
  pointer-events: none;
}

/* blurred full background */
.bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  filter: blur(30px);
  transform: scale(1.08);
  z-index: 1;
}

/* circle image in center */
.crl {
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  clip-path: circle(66vmin at center);
  z-index: 2;
}

/* circle border + small lines */
.crl-ui {
  position: absolute;
  width: var(--crl-size);
  height: var(--crl-size);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ui-color);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}

/* small outer tick lines */
.crl-ui::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;

  background: repeating-conic-gradient(
    from 0deg,
    var(--ui-color) 0deg 1.5deg,
    transparent 1deg 6deg
  );

  /* IMPORTANT: hard donut cut */
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 65%,
    black 60% 75%,
    transparent 75% 100%
  );

  mask: radial-gradient(
    circle,
    transparent 0 70%,
    black 60% 75%,
    transparent 75% 100%
  );

  will-change: transform;
  /* animation: spin 230s linear infinite; */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* inner thin border */
.crl-ui::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

.crl-blr{
  position: absolute;
  width: var(--crl-size);
  height: var(--crl-size);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;

  z-index: 4;
  transition: opacity 0.4s ease;
}

/* profile */
.profile {
  position: absolute;
  left: 1%;
  top: 10px;
  width: 340px;
  height: 120px;
  padding: 15px 20px;
  background: var(--bg-card-left);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 4;
  border: 2px solid white;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}

.profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-card-left);
  border-radius: 10px;
  z-index: -1;
  pointer-events: none;
}

.profile:hover::before {
    background: var(--bg-card-left-hover);
}

.profile-pic {
  width: 70px;
  height: 70px;
  background-color: var(--sec-bg);
  border-radius: 10px;
  object-fit: cover;
}

.profile-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.profile-text h1 {
  font-size: 25px;
  color: var(--text);
}

.profile-text p {
  margin-top: 2px;
  font-size: 17px;
  color: var(--text);
}

/*aboutme*/
.aboutme {
    position: absolute;
    bottom: 0;
    width: 390px;
    height: 100px;
    background: white; /* this becomes the border */
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    overflow: hidden;
    text-decoration: none;
    z-index: 4;
    cursor: pointer;
    isolation: isolate;
}

/* inside background */
.aboutme::before {
    content: "";
    position: absolute;
    inset: 2px; /* border thickness */
    background: var(--bg-card-left);
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    z-index: -1;
}

.aboutme:hover::before {
    background: var(--bg-card-left-hover);
}

.aboutme h1{
    position: relative;
    left: 40px;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.aboutme:hover h1{
    transform:  translateX(10px);
    text-shadow: 0 0 10px rgba(32, 38, 122, 0.8);
}

/*project*/
.btnproject{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: white;
    color: var(--text);
    width: 390px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    text-decoration: none;
    z-index: 4;
    cursor: pointer;
    isolation: isolate;
}

/* inside background */
.btnproject::before {
    content: "";
    position: absolute;
    inset: 2px; /* border thickness */
    background: var(--bg-card-right);
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%);
    z-index: -1;
}

.btnproject:hover::before {
    background: var(--bg-card-left-hover);
}

.btnproject h1{
    position: relative;
    text-align: right;
    left: 140px;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.btnproject:hover h1{
    transform: translate(-10px, -5px);
    text-shadow: 0 0 10px rgba(32, 38, 122, 0.8);
}

.sosial{
    z-index: 4;
    position: relative;
    display: flex;
    top: 20px;
    left: 50px;
    gap: 20px
}

.imgsos{
    width: 70px;
    height: 80px;
}

.imgsos a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    width: 70px;
    height: 80px;

    text-decoration: none;
    transition: transform 0.2s ease;
}

.imgsos:hover a {
    transform: translate(5px, 5px);
}

.imgsos img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.line{
    position: absolute;
    width: 60px;
    height: 40px;
    background-color: white;
    clip-path: polygon(31% 0, 0 0, 0 100%, 0 40%);
}

.profile,
.sosial,
.imgsld,
.btnproject,
.aboutme {
    transition: opacity 0.3s ease, transform 0.3s ease;
}