/* ------------------------- Span Lines H4 -------------------------------------------------- */

.span-lines.animate .span-line {
   position: relative;
   display: inline-flex;
   overflow: hidden;
}

.span-lines.animate .span-line .span-line-inner {
   position: relative;
   display: block;
}

/* ------------------------- Arrow -------------------------------------------------- */

.arrow {
   position: relative;
   width: clamp(.9em, 1.1vw, 1.1em);
}

.arrow.big {
   position: relative;
   width: clamp(1.1em, 1.3vw, 1.25em);
}

.arrow svg {
   display: block;
   width: 100%;
}

/* ------------------------- PF -------------------------------------------------- */

.profile-picture {
   position: relative;
   display: inline-flex;
   border-radius: 50%;
   background: url("../images/favicon_img1.png") center center no-repeat;
   background-size: cover;
   width: clamp(4.5em, 6.5vw, 8em);
   height: clamp(4.5em, 6.5vw, 8em);
}


/* ------------------------- Pattern Dots -------------------------------------------------- */

.dots {
   top: 0;
   right: 0;
   height: 100%;
   width: 100%;
   pointer-events: none;
   background: url("../images/dotted.svg") bottom right;
   background-size: 1.25em 1.25em;
   position: absolute;
}

/* ------------------------- Rounded Div -------------------------------------------------- */

.rounded-div-wrap {
   width: 100%;
   top: 0;
   position: relative;
   height: 10vh;
   overflow: hidden;
}

.rounded-div {
   width: 150%;
   content: "";
   display: block;
   position: absolute;
   background: var(--color-white);
   height: 750%;
   left: 50%;
   border-radius: 50%;
   transform: translate(-50%, -86.666%);
   z-index: 1;
}

/* ------------------------- Default Header -------------------------------------------------- */

.default-header {
   padding-top: calc(var(--section-padding) * 1.33);
   padding-bottom: calc(var(--section-padding) * .66);
}

.default-header.theme-dark {
   background: var(--color-dark);
}

.default-header h1 span {
   display: block;
}

@media screen and (max-width: 720px){ 
   
   .default-header {
      padding-top: calc(var(--section-padding) * 1.95);
      padding-bottom: calc(var(--section-padding) * .75);
   }

   .default-header h1 span {
      display: unset;
   }
}

@media screen and (max-width: 460px){ 
   .default-header h1 {
      font-size: 10vw;
      font-size: calc(clamp(3.25em, 7vw, 8em) * .875);
   }
}

/* ------------------------- Skills Section -------------------------------------------------- */

.skills-hint {
   position: absolute;
   top: -2.5em;
   left: 0;
   font-size: 0.85em;
   color: var(--color-blue);
   font-weight: 300;
   white-space: nowrap;
   opacity: 0;
   transform: translateY(-5px);
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
   z-index: 10;
   animation: hintFloat 3s ease-in-out infinite;
   background: rgba(255, 255, 255, 0.95);
   padding: 0.5em 1em;
   border-radius: 20px;
   border: 1px solid rgba(69, 92, 233, 0.1);
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 20px rgba(69, 92, 233, 0.1);
}

.skills-hint.show {
   opacity: 1;
   transform: translateY(0);
}

@keyframes hintFloat {
   0%, 100% { 
       transform: translateY(0) scale(1); 
       box-shadow: 0 4px 20px rgba(69, 92, 233, 0.1);
   }
   50% { 
       transform: translateY(-3px) scale(1.02); 
       box-shadow: 0 8px 30px rgba(69, 92, 233, 0.15);
   }
}

.skills-section {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.skills-canvas-container {
   position: relative;
   width: 600px;
   height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(28, 29, 32, 0.04);
}

.skills-nav-controls {
   position: absolute;
   top: 50%;
   left: 20px;
   right: 20px;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   z-index: 20;
   pointer-events: none;
}

.skills-nav-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(28, 29, 32, 0.06);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: all;
   backdrop-filter: blur(15px);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   color: #1C1D20;
}

.skills-nav-btn:hover {
   background: var(--color-blue);
   color: white;
   transform: scale(1.1);
   box-shadow: 0 8px 30px rgba(69, 92, 233, 0.25);
   border-color: var(--color-blue);
}

.skills-nav-btn:active {
   transform: scale(0.95);
}

.skills-nav-btn svg {
   width: 16px;
   height: 16px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skills-canvas {
   position: relative;
   width: 500px;
   height: 500px;
   cursor: grab;
   transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.skills-canvas:active {
   cursor: grabbing;
}

.skill-item {
   position: absolute;
   top: 50%;
   left: 50%;
   transform-origin: 50% 50%;
   transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-sphere {
   position: relative;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: #ffffff;
   border: 1px solid rgba(28, 29, 32, 0.08);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   transform: translateZ(0);
}

.skill-sphere:hover {
   transform: scale(1.15) translateZ(0);
   background: var(--color-blue);
   color: white;
   box-shadow: 0 15px 40px rgba(69, 92, 233, 0.25);
   border-color: var(--color-blue);
}

.skill-sphere.dragging {
   transform: scale(1.1);
   z-index: 100;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   cursor: grabbing;
}

.skill-sphere.bouncing {
   animation: skillBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes skillBounce {
   0% { transform: scale(1.1); }
   30% { transform: scale(1.2); }
   60% { transform: scale(0.95); }
   100% { transform: scale(1); }
}

.skill-icon {
   font-size: 24px;
   margin-bottom: 5px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-sphere:hover .skill-icon {
   transform: scale(1.1);
}

.skill-name {
   font-size: 10px;
   font-weight: 450;
   text-align: center;
   line-height: 1.2;
   opacity: 0.85;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   letter-spacing: 0.01em;
}

.skill-sphere:hover .skill-name {
   opacity: 1;
   font-weight: 500;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
   .skills-canvas-container {
      width: 500px;
      height: 500px;
   }
   
   .skills-canvas {
      width: 400px;
      height: 400px;
   }
   
   .skill-sphere {
      width: 70px;
      height: 70px;
   }
   
   .skill-icon {
      font-size: 20px;
   }
   
   .skill-name {
      font-size: 9px;
   }
   
   .skills-nav-btn {
      width: 45px;
      height: 45px;
   }
   
   .skills-nav-controls {
      left: 15px;
      right: 15px;
   }
   
   .skills-hint {
      font-size: 0.75em;
   }
}

@media screen and (max-width: 540px) {
   .skills-canvas-container {
      width: 400px;
      height: 400px;
   }
   
   .skills-canvas {
      width: 320px;
      height: 320px;
   }
   
   .skill-sphere {
      width: 60px;
      height: 60px;
   }
   
   .skill-icon {
      font-size: 18px;
   }
   
   .skill-name {
      font-size: 8px;
   }
   
   .skills-nav-controls {
      left: 10px;
      right: 10px;
   }
   
   .skills-nav-btn {
      width: 40px;
      height: 40px;
   }
   
   .skills-nav-btn svg {
      width: 14px;
      height: 14px;
   }
   
   .skills-hint {
      font-size: 0.7em;
   }
}