/*
 * Google Fonts Import
 * Font Family: Inter
 * Weights: 100 to 900
 * Usage: Global font for the application
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
 * Global Styles
 * Sets the default font family for the entire document
 */
body {
  font-family: 'Inter', sans-serif;
}

/*
 * Typewriter Effect Cursor Animation
 * Used in: Home Section (#home)
 * Element: #typewriter-cursor
 * Description: Creates a blinking cursor effect for the typewriter animation
 */
#typewriter-cursor {
  animation: blink 0.75s step-end infinite;
}

@keyframes blink {
  from,
  to {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

/*
 * Tech Stack Infinite Scroll Animation
 * Used in: Tech Stack Section (#tech-stack)
 * Elements: .animate-scroll-left, .animate-scroll-right
 * Description: Creates a continuous scrolling carousel effect for technology icons
 * Note: Uses translateX to move the container. The container must have duplicated content for seamless looping.
 */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-scroll-left {
  animation: scroll-left 30s linear infinite;
  width: max-content;
}

.animate-scroll-right {
  animation: scroll-right 30s linear infinite;
  width: max-content;
}

/*
 * Scroll Reveal Animation (Fade In)
 * Used in: All major sections (Portfolio, About, etc.)
 * Class: .fade-in-section
 * Description: Initial state for elements that should fade in when scrolled into view.
 * Toggled by: Intersection Observer in scroll-animation.js
 */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/*
 * Visible state for Scroll Reveal
 * Added when element enters viewport
 */
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*
 * Accessibility: Reduced Motion
 * Disables transitions for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  .fade-in-section {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/*
 * Project Media Frame
 * Used in: Portfolio section (project cards)
 * Class: .project-media
 * Description: Rounded, fixed-ratio stage that holds one or more project
 * screenshots stacked on top of each other. The ratio is set per card with a
 * Tailwind aspect utility so the artwork is shown whole, without cropping.
 */
.project-media {
  position: relative;
}

/*
 * Individual screenshot inside a project media frame.
 * All slides overlap; only the one carrying .is-active is opaque, so swapping
 * the class produces a cross-fade.
 * Rotated by: project-slideshow.js
 */
.project-media__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

.project-media__slide.is-active {
  opacity: 1;
}

/*
 * Accessibility: Reduced Motion
 * Slides swap instantly; project-slideshow.js also stops auto-rotating.
 */
@media (prefers-reduced-motion: reduce) {
  .project-media__slide {
    transition: none;
  }
}