/* ==========================================================================
   Portfolio Showcase — Custom Styles
   ========================================================================== */

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --------------------------------------------------------------------------
   1. Hero Grid Overlay Pattern
   -------------------------------------------------------------------------- */
.hero-grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* --------------------------------------------------------------------------
   2. Pipeline SVG Animation (Hero)
   -------------------------------------------------------------------------- */

/* Animated stroke for pipeline connector lines */
.pipeline-line {
  stroke-dasharray: 8 4;
  stroke-dashoffset: 0;
  animation: dash-flow 3s linear infinite;
}

@keyframes dash-flow {
  to {
    stroke-dashoffset: -24;
  }
}

/* Pipeline node entrance — scale-up fade-in with stagger support */
.pipeline-node {
  opacity: 0;
  transform: scale(0.5);
  animation: node-appear 0.6s ease forwards;
}

.pipeline-node:nth-child(1) { animation-delay: 0s; }
.pipeline-node:nth-child(2) { animation-delay: 0.15s; }
.pipeline-node:nth-child(3) { animation-delay: 0.3s; }
.pipeline-node:nth-child(4) { animation-delay: 0.45s; }
.pipeline-node:nth-child(5) { animation-delay: 0.6s; }
.pipeline-node:nth-child(6) { animation-delay: 0.75s; }

@keyframes node-appear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   3. Project Card Styles
   -------------------------------------------------------------------------- */
.project-card {
  background-color: #ffffff;
  border-radius: 0.75rem;          /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
  border: 1px solid rgba(226, 232, 240, 0.6);    /* border-slate-200/60 */
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  border-color: #99f6e4; /* border-teal-200 */
}

.project-card.expanded {
  grid-column: 1 / -1; /* col-span-full */
}

/* Expandable content area within cards */
.card-expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms ease;
}

.card-expand-content.open {
  max-height: 600px;
}

/* --------------------------------------------------------------------------
   4. Mini Pipeline Bar (inside cards)
   -------------------------------------------------------------------------- */
.mini-pipeline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.mini-pipeline-stage {
  height: 0.5rem;    /* h-2 */
  border-radius: 9999px; /* rounded-full */
  flex: 1;
  transition: opacity 200ms ease;
}

/* Stage-specific colors */
.mini-pipeline-stage.download    { background-color: #38bdf8; } /* bg-sky-400 */
.mini-pipeline-stage.preprocess  { background-color: #fbbf24; } /* bg-amber-400 */
.mini-pipeline-stage.analyze     { background-color: #34d399; } /* bg-emerald-400 */
.mini-pipeline-stage.visualize   { background-color: #c084fc; } /* bg-purple-400 */
.mini-pipeline-stage.llm         { background-color: #2dd4bf; } /* bg-teal-400 */
.mini-pipeline-stage.pdf         { background-color: #fb7185; } /* bg-rose-400 */

/* --------------------------------------------------------------------------
   5. Filter Pill Styles
   -------------------------------------------------------------------------- */
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;       /* py-1 px-3 */
  border-radius: 9999px;          /* rounded-full */
  font-size: 0.875rem;            /* text-sm */
  line-height: 1.25rem;
  border: 1px solid #e2e8f0;      /* border-slate-200 */
  cursor: pointer;
  transition: background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease;
  user-select: none;
  background-color: transparent;
  color: #475569;                  /* text-slate-600 */
}

.filter-pill:hover {
  border-color: #5eead4;          /* border-teal-300 */
  background-color: #f0fdfa;      /* bg-teal-50 */
}

.filter-pill.active {
  background-color: #14b8a6;      /* bg-teal-500 */
  color: #ffffff;                  /* text-white */
  border-color: #14b8a6;          /* border-teal-500 */
}

/* --------------------------------------------------------------------------
   6. Stats Counter Animation
   -------------------------------------------------------------------------- */
.stat-card {
  background-color: #ffffff;
  border-radius: 0.75rem;         /* rounded-xl */
  padding: 1.5rem;                /* p-6 */
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
  border: 1px solid #e2e8f0;      /* border-slate-200 */
}

.stat-number {
  font-size: 2.25rem;             /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700;               /* font-bold */
  color: #0f172a;                  /* text-navy / slate-900 */
  font-variant-numeric: tabular-nums;
}

.stat-number.counted {
  animation: count-pop 0.4s ease;
}

@keyframes count-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   7. Staggered Fade-Up Entrance
   -------------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

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

/* --------------------------------------------------------------------------
   8. Tech Explainer Tab Styles
   -------------------------------------------------------------------------- */
.tech-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;                  /* text-slate-500 */
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
  background: none;
  outline: none;
}

.tech-tab:hover {
  color: #0f172a;                  /* text-slate-900 */
}

.tech-tab.active {
  color: #0f172a;
  border-bottom-color: #14b8a6;   /* border-teal-500 */
}

.tech-panel {
  opacity: 0;
  transition: opacity 300ms ease;
  display: none;
}

.tech-panel.active {
  opacity: 1;
  display: block;
}

/* --------------------------------------------------------------------------
   9. Domain Card Styles
   -------------------------------------------------------------------------- */
.domain-card {
  border-radius: 0.75rem;         /* rounded-xl */
  padding: 1.5rem;                /* p-6 */
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  border-left: 4px solid currentColor;
  background-color: #ffffff;
}

.domain-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
  transform: translateY(-2px);
}

/* Domain-specific accent colors via border-left */
.domain-card.geospatial  { border-left-color: #38bdf8; } /* sky-400 */
.domain-card.environment { border-left-color: #34d399; } /* emerald-400 */
.domain-card.ai-ml       { border-left-color: #c084fc; } /* purple-400 */
.domain-card.data-eng    { border-left-color: #fbbf24; } /* amber-400 */
.domain-card.web         { border-left-color: #2dd4bf; } /* teal-400 */
.domain-card.reporting   { border-left-color: #fb7185; } /* rose-400 */

/* --------------------------------------------------------------------------
   10. Scroll Indicator Bounce
   -------------------------------------------------------------------------- */
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.scroll-indicator {
  animation: bounce-slow 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   11. Smooth Scrollbar
   -------------------------------------------------------------------------- */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #14b8a6 #f1f5f9; /* teal-500 thumb, slate-100 track */
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;            /* slate-100 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: #14b8a6;      /* teal-500 */
  border-radius: 4px;
  border: 2px solid #f1f5f9;      /* slate-100 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #0d9488;      /* teal-600 */
}

/* --------------------------------------------------------------------------
   12. Reduced Motion Preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. Pipeline Architecture Diagram Styles
   -------------------------------------------------------------------------- */
.arch-node {
  border-radius: 0.5rem;          /* rounded-lg */
  padding: 1rem;                  /* p-4 */
  border: 2px solid #e2e8f0;      /* border-slate-200 */
  transition: transform 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
  background-color: #ffffff;
}

.arch-node:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
}

/* SVG connector lines in architecture diagram */
.arch-connector {
  stroke: #94a3b8;                /* slate-400 */
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 3;
  stroke-dashoffset: 0;
  animation: dash-flow 3s linear infinite;
}

/* --------------------------------------------------------------------------
   14. Section Heading Styles
   -------------------------------------------------------------------------- */
.section-heading {
  font-size: 1.875rem;            /* text-3xl */
  line-height: 2.25rem;
  font-weight: 700;               /* font-bold */
  color: #0f172a;                  /* text-slate-900 */
}

@media (min-width: 768px) {
  .section-heading {
    font-size: 2.25rem;           /* md:text-4xl */
    line-height: 2.5rem;
  }
}

.section-subheading {
  font-size: 1.125rem;            /* text-lg */
  line-height: 1.75rem;
  color: #64748b;                  /* text-slate-500 */
  margin-top: 0.5rem;             /* mt-2 */
}

/* --------------------------------------------------------------------------
   15. Navigation Styles
   -------------------------------------------------------------------------- */
.nav-link {
  font-size: 0.875rem;            /* text-sm */
  line-height: 1.25rem;
  color: #cbd5e1;                  /* text-slate-300 */
  transition: color 200ms ease;
  text-decoration: none;
}

.nav-link:hover {
  color: #ffffff;                  /* hover:text-white */
}

.nav-link.active {
  color: #2dd4bf;                  /* text-teal-400 */
}

/* --------------------------------------------------------------------------
   16. Showcase Gallery Styles
   -------------------------------------------------------------------------- */

/* Gallery image card hover glow */
.gallery-card {
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(13, 148, 136, 0.15),
              0 8px 10px -6px rgba(13, 148, 136, 0.1);
}

/* Lightbox image scale entrance */
.lightbox-image {
  animation: lightbox-zoom 0.3s ease forwards;
}

@keyframes lightbox-zoom {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   17. Report Excerpt Card Styles
   -------------------------------------------------------------------------- */

/* Blockquote accent border */
.report-excerpt-quote {
  border-left: 3px solid currentColor;
  padding-left: 0.75rem;
  font-style: italic;
}

/* Stat callout pulse on hover */
.report-stat-callout {
  transition: transform 200ms ease;
}

.report-stat-callout:hover {
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   18. Project Card Thumbnail
   -------------------------------------------------------------------------- */

/* Smooth image load with object-cover */
.project-card img {
  transition: transform 400ms ease;
}

.project-card:hover img {
  transform: scale(1.05);
}