/* Animations, transitions, scrollbars, keyframes, effects */

/* Fade in, slide, and other keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes aboutFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes scrollSkills {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Animation assignments */
.centered-header {
    animation: fadeInUp 1.1s cubic-bezier(.23,1.01,.32,1) forwards;
}
.about-section {
    animation: slideInLeft 1.1s cubic-bezier(.23,1.01,.32,1) 0.5s forwards;
}
.about-bg {
    animation: aboutFadeIn 1.2s cubic-bezier(.23,1.01,.32,1) 0.5s forwards;
}
.about-me-slide {
    animation: aboutFadeIn 1.2s cubic-bezier(.23,1.01,.32,1) 0.5s forwards;
}
.about-bg-text {
    transition: opacity 0.7s cubic-bezier(.23,1.01,.32,1), transform 0.7s cubic-bezier(.23,1.01,.32,1);
}
#skills-carousel {
    animation: scrollSkills 18s linear infinite;
}
#typewriter::after {
    content: '|';
    animation: blink 1s steps(1) infinite;
    color: #4a4a4a;
    margin-left: 2px;
}

/* Project swipe mask effect */
.project-line::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0; right: 0;
    background: #23272f;
    z-index: 2;
    transform: translateX(0%);
    transition: transform 0.8s cubic-bezier(.23,1.01,.32,1);
}
.project-swipe-mask.revealed .project-line::before {
    transform: translateX(-101%);
}

/* Scrollbar styles (Webkit & Firefox) */
::-webkit-scrollbar {
  width: 12px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #b3e0ff 0%, #4fc3f7 100%);
  border-radius: 8px;
  min-height: 40px;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #81d4fa 0%, #0288d1 100%);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  height: 0;
  width: 0;
}
/* For Firefox: thin scrollbar, custom color */
* {
    scrollbar-width: thin;
    scrollbar-color: #b3c0d1 #ffffff;
}