@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Scroll Bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #2563eb;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1d4ed8;
}

/* Animations using standard CSS classes controlled by IntersectionObserver */

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-y-10 {
    transform: translateY(2rem);
}

.-translate-x-10 {
    transform: translateX(-2rem);
}

.translate-x-10 {
    transform: translateX(2rem);
}

.translate-x-0 {
    transform: translateX(0);
}

/* Base animation classes */
.observe-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.observe-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

.observe-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.observe-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.observe-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.observe-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered children animation base */
.observe-stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.observe-stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Delays for staggered effect */
.observe-stagger-children.visible > *:nth-child(1) { transition-delay: 0.1s; }
.observe-stagger-children.visible > *:nth-child(2) { transition-delay: 0.2s; }
.observe-stagger-children.visible > *:nth-child(3) { transition-delay: 0.3s; }
.observe-stagger-children.visible > *:nth-child(4) { transition-delay: 0.4s; }
.observe-stagger-children.visible > *:nth-child(5) { transition-delay: 0.5s; }
.observe-stagger-children.visible > *:nth-child(6) { transition-delay: 0.6s; }
.observe-stagger-children.visible > *:nth-child(7) { transition-delay: 0.7s; }
.observe-stagger-children.visible > *:nth-child(8) { transition-delay: 0.8s; }

/* Custom delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-500 { transition-delay: 0.5s; }

/* Landing Page Animations */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing Effect */
.typing-effect {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
  
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #3b82f6; } /* Blue-500 */
}

/* Mobile Menu Transition */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
}

/* Modal Transitions */
#project-modal.open {
    display: flex;
    opacity: 1;
}

#project-modal.open #project-modal-content {
    transform: scale(1);
}