/* ==========================================================================
   About Section — styles for aboutSection.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section title masks + particle layering
   (previously an inline <style> block)
   -------------------------------------------------------------------------- */
.leftmask   { transform: translateX(0); }
.rightmask  { transform: translateX(0); }
.topmask    { transform: translateY(0); }
.bottommask { transform: translateY(0); }

.sectionTitle { isolation: isolate; }

.particle-section {
  position: relative;
  overflow: hidden;
}
.particle-section > :not(.absolute) {
  z-index: 1;
  position: relative;
}

/* --------------------------------------------------------------------------
   Timeline stems (both Experience + Journey)
   -------------------------------------------------------------------------- */
#timeline-stem,
#exp-timeline-stem {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 15;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  will-change: height;
}

/* Initial geometry (was inline style="" on the elements) */
.exp-timeline-base,
.journey-timeline-base {
  top: 40px;
  height: calc(100% - 80px);
}

.exp-timeline-stem,
.journey-timeline-stem {
  height: 0%;
  top: 40px;
}

/* Stem tip glow */
#timeline-stem::after,
#exp-timeline-stem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 20px #000, 0 0 40px #000;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.dark #timeline-stem::after,
.dark #exp-timeline-stem::after {
  background: #e2e8f0;
  box-shadow: 0 0 20px #555, 0 0 40px #555;
}

@keyframes stemPulse {
  0%, 100% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.5);
    box-shadow: 0 0 30px #000, 0 0 60px #000;
  }
}

.stem-pulse::after {
  animation: stemPulse 1.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Timeline items + dots
   -------------------------------------------------------------------------- */
.timeline-item {
  position: relative;
  z-index: 20;
}

.timeline-item .w-10.h-10 {
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  will-change: box-shadow, transform;
}

.glow-intense { animation: glowPulse 1.5s ease-in-out infinite; }
.glow-medium  { animation: glowPulse 2s   ease-in-out infinite; }
.glow-soft    { animation: glowPulse 2.5s ease-in-out infinite; }

@keyframes glowPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* Dark mode stem shadow */
.dark #timeline-stem,
.dark #exp-timeline-stem {
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
}

/* Per-item glow colors (experience) */
#exp-timeline-items .timeline-item:nth-child(1) .w-10.h-10 { color: #000; }
#exp-timeline-items .timeline-item:nth-child(2) .w-10.h-10 { color: #333; }
#exp-timeline-items .timeline-item:nth-child(3) .w-10.h-10 { color: #555; }

/* Per-item glow colors (journey) */
#timeline-items .timeline-item:nth-child(1) .w-10.h-10 { color: #000; }
#timeline-items .timeline-item:nth-child(2) .w-10.h-10 { color: #222; }
#timeline-items .timeline-item:nth-child(3) .w-10.h-10 { color: #444; }
#timeline-items .timeline-item:nth-child(4) .w-10.h-10 { color: #333; }
#timeline-items .timeline-item:nth-child(5) .w-10.h-10 { color: #555; }
#timeline-items .timeline-item:nth-child(6) .w-10.h-10 { color: #777; }

/* --------------------------------------------------------------------------
   Tooltips — tech icons + timeline dots
   (replaces repeated Tailwind "group-hover/icon:flex ..." chains)
   -------------------------------------------------------------------------- */
.tech-tooltip,
.timeline-dot-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.25rem;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  background: #374151; /* gray-700 */
  color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
}

.group\/icon:hover .tech-tooltip,
.timeline-item .group:hover .timeline-dot-tooltip {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Smooth scrolling + custom scrollbar
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #333, #666);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #000, #444);
}

/* --------------------------------------------------------------------------
   Tab styles
   -------------------------------------------------------------------------- */
.tab-content {
  transition: opacity 0.3s ease;
}
.tab-content.active {
  display: block;
  opacity: 1;
}
.tab-content.hidden {
  display: none;
  opacity: 0;
}

.tab-button {
  transition: all 0.3s ease;
}
.tab-button i {
  transition: transform 0.3s ease;
}
.tab-button:hover i {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Profile image comparison slider
   -------------------------------------------------------------------------- */
.profile-compare {
  touch-action: none;
  user-select: none;
  --profile-reveal: 50%;
}

.profile-compare:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.35);
  outline-offset: 4px;
}
.dark .profile-compare:focus-visible {
  outline-color: rgba(255, 255, 255, 0.55);
}

.profile-compare__top {
  clip-path: inset(0 calc(100% - var(--profile-reveal)) 0 0);
}

.profile-compare__divider,
.profile-compare__handle {
  left: var(--profile-reveal);
  transform: translateX(-50%);
}

.profile-compare__handle {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-compare:hover .profile-compare__handle,
.profile-compare.is-dragging .profile-compare__handle {
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}

@keyframes profileComparePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.55);
  }
}

.profile-compare-pulse {
  animation: profileComparePulse 1s ease-in-out;
}