/* ============================================================
   styles.css — custom utilities & visual helpers
   Stack: Tailwind CDN + this minimal layer
   ============================================================ */

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   Smooth abstract placeholder pattern for project media
   Used when a project has no screenshot yet, so empty image
   slots stay calm and intentional instead of looking broken.
   ------------------------------------------------------------ */
.project-media {
  position: relative;
  overflow: hidden;
  background-color: #18181b; /* zinc-900 */
  /* Soft, smooth mesh of muted neutral + faint indigo, no hard edges */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.14), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(113, 113, 122, 0.18), transparent 40%),
    radial-gradient(circle at 70% 90%, rgba(99, 102, 241, 0.10), transparent 50%),
    radial-gradient(circle at 25% 85%, rgba(63, 63, 70, 0.55), transparent 55%),
    linear-gradient(135deg, #18181b 0%, #1c1c21 50%, #18181b 100%);
  background-size: 100% 100%;
}

/* Subtle grid overlay to keep the slot feeling "technical" not empty */
.project-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Central glyph / signal mark inside the placeholder */
.project-media::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(129, 140, 248, 0.25);
  border-radius: 9999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.18), transparent 70%);
  pointer-events: none;
}

/* Smooth border anti-aliasing for project media and modal slides */
.project-media,
#slider-track .slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  border-radius: 0.75rem;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ------------------------------------------------------------
   Reduced motion — disable all non-essential animation,
   transitions, and smooth scrolling (ui-guide.md §25)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .animate-ping {
    animation: none !important;
    opacity: 0.6;
  }
}

/* ------------------------------------------------------------
   Prevent accidental horizontal scrolling (ui-guide.md §29)
   ------------------------------------------------------------ */
img,
video,
iframe {
  max-width: 100%;
}

/* ------------------------------------------------------------
   Project Detail Modal
   ------------------------------------------------------------ */
#project-modal {
  transition: opacity 0.2s ease-out;
}

#project-modal:not(.hidden) {
  animation: modal-fade-in 0.2s ease-out;
}

#project-modal.closing {
  animation: modal-fade-out 0.15s ease-in forwards;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Slider slide images */
#slider-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Slider dot buttons */
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(113, 113, 122, 0.5);
  border: none;
  padding: 6px; /* touch target padding */
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.slider-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: inherit;
}

.slider-dot[aria-selected="true"]::after {
  background-color: rgba(129, 140, 248, 0.9);
}

.slider-dot:hover::after {
  background-color: rgba(165, 180, 252, 0.7);
}

.slider-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
  border-radius: 9999px;
}

/* Responsibility list items */
#modal-responsibilities-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #a1a1aa; /* zinc-400 */
}

#modal-responsibilities-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #52525b; /* zinc-600 */
}

/* Modal image error fallback */
#slider-track .slide-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #18181b;
}

/* ============================================================
   Custom Dark Scrollbar for Modal / Overflow Cards
   ============================================================ */
#modal-content::-webkit-scrollbar {
  width: 6px;
}

#modal-content::-webkit-scrollbar-track {
  background: #18181b; /* zinc-900 */
  border-radius: 0 0.75rem 0.75rem 0;
}

#modal-content::-webkit-scrollbar-thumb {
  background: #3f3f46; /* zinc-700 */
  border-radius: 9999px;
}

#modal-content::-webkit-scrollbar-thumb:hover {
  background: #52525b; /* zinc-600 */
}

/* Firefox Support */
#modal-content {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #18181b;
}

/* ============================================================
   Profile Picture in Hero Section
   ============================================================ */
#home img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#home img:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Subtle animation for the profile picture */
@keyframes profile-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

#home .relative {
  animation: profile-float 6s ease-in-out infinite;
}

/* Ensure the profile picture container has proper spacing on mobile */
@media (max-width: 1023px) {
  #home .flex-shrink-0 {
    margin-bottom: 1rem;
  }
}

/* Add a subtle ring effect on focus for accessibility */
#home img:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
  border-radius: 1rem;
}