/* style.css – FINAL: Matches index.php EXACTLY */
/* Tailwind CDN + Custom Overrides */

/* ============================================= */
/* 1. GLOBAL RESET & SCROLL BEHAVIOR             */
/* ============================================= */
* { 
  scroll-behavior: auto !important; 
}
html { 
  scroll-snap-type: y mandatory; 
  overflow-y: scroll; 
}
body { 
  overflow-x: hidden; 
  background: #000; 
  color: white; 
  font-family: 'Inter', sans-serif; 
}

/* ============================================= */
/* 2. ANIMATIONS                                 */
/* ============================================= */
@keyframes float { 
  0%,100%{transform:translateY(0) translateX(0)} 
  33%{transform:translateY(-20px) translateX(10px)} 
  66%{transform:translateY(-10px) translateX(-10px)} 
}
@keyframes glow { 
  0%,100%{opacity:.3} 
  50%{opacity:.6} 
}
@keyframes drawLine { 
  to { transform: translateX(-50%) scaleY(1); } 
}
@keyframes floatText { 
  0%,100%{transform:translateY(20px)} 
  50%{transform:translateY(0)} 
}

/* ============================================= */
/* 3. FLOATING PARTICLES                         */
/* ============================================= */
.particle { 
  position: absolute; 
  border-radius: 50%; 
  background: radial-gradient(circle, rgba(168,85,247,.8), transparent); 
  animation: float 20s infinite ease-in-out; 
  pointer-events: none; 
}

/* ============================================= */
/* 4. CURSOR GLOW                                */
/* ============================================= */
#cursorGlow { 
  position: fixed; 
  width: 600px; 
  height: 600px; 
  border-radius: 50%; 
  background: radial-gradient(circle, rgba(168,85,247,.15), transparent 70%); 
  pointer-events: none; 
  z-index: 0; 
  transition: opacity .3s; 
  will-change: transform; 
}

/* ============================================= */
/* 5. GRADIENT TEXT                              */
/* ============================================= */
.gradient-text { 
  background-clip: text; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0 0 20px rgba(168,85,247,.5)) brightness(1.1); 
  animation: glow 3s ease-in-out infinite; 
}

/* ============================================= */
/* 6. GLASS EFFECT                               */
/* ============================================= */
.glass { 
  background: rgba(17,24,39,.4); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  border: 1px solid rgba(255,255,255,.1); 
}

/* ============================================= */
/* 7. 3D CARD TILT                               */
/* ============================================= */
.card-3d { 
  transition: all .4s cubic-bezier(.165,.84,.44,1); 
  transform-style: preserve-3d; 
}

/* ============================================= */
/* 8. NEON BORDERS                               */
/* ============================================= */
.neon-border { 
  position: relative; 
  border: 2px solid transparent; 
  background: linear-gradient(#18181b,#18181b) padding-box, 
              linear-gradient(135deg,#a855f7,#06b6d4) border-box; 
}
.neon-border:hover { 
  box-shadow: 0 0 30px rgba(168,85,247,.6), 0 0 60px rgba(6,182,212,.4); 
}

.neon-border-img { 
  border: 2px solid transparent; 
  background: linear-gradient(135deg,#a855f7,#06b6d4) border-box; 
  background-clip: border-box; 
  -webkit-background-clip: border-box; 
}
.neon-border-img:hover { 
  box-shadow: 0 0 30px rgba(168,85,247,.6), 0 0 60px rgba(6,182,212,.4); 
}

/* ============================================= */
/* 9. PROGRESS BAR                               */
/* ============================================= */
.progress-bar { 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 3px; 
  background: linear-gradient(to right,#a855f7,#06b6d4); 
  z-index: 9999; 
  transform-origin: left; 
  transition: transform .1s ease-out; 
}

/* ============================================= */
/* 10. TIMELINE LINE                             */
/* ============================================= */
.timeline-container::before { 
  content: ''; 
  position: absolute; 
  left: 50%; 
  top: 0; 
  width: 4px; 
  height: 100%; 
  background: linear-gradient(to bottom,#a855f7,#06b6d4); 
  transform: translateX(-50%) scaleY(0); 
  transform-origin: top; 
  z-index: 0; 
  box-shadow: 0 0 20px rgba(168,85,247,.5); 
  animation: drawLine 2s ease-out forwards; 
}

.timeline-container {
    position: relative;
    padding-top: 72px;
}

@media (max-width:767px) { 
  .timeline-container::before { left: 24px; } 
}

/* ============================================= */
/* 11. TIMELINE DOT (EMOJI)                      */
/* ============================================= */
.timeline-dot { 
  position: absolute; 
  left: 50%; 
  top: 56px; 
  transform: translateX(-50%); 
  z-index: 2; 
  background: linear-gradient(135deg,#a855f7,#06b6d4); 
  border-radius: 9999px; 
  width: 40px; 
  height: 40px; 
  border: 4px solid #18181b; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.5rem; 
  box-shadow: 0 0 0 4px #312e81, 0 0 30px rgba(168,85,247,.6); 
  transition: all .3s ease; 
}
.timeline-dot:hover { 
  transform: translateX(-50%) scale(1.3); 
  box-shadow: 0 0 0 6px #312e81, 0 0 50px rgba(168,85,247,.8); 
}

/* ============================================= */
/* 12. FADE-IN ON SCROLL                         */
/* ============================================= */
.fade-in { 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity .6s ease-out, transform .6s ease-out; 
}
.fade-in.visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* ============================================= */
/* 13. HERO SECTION                              */
/* ============================================= */
.hero-bg { 
  position: absolute; 
  inset: 0; 
  background: url('wp-content/uploads/2025/10/space-bg.jpg') center/cover no-repeat; 
  transform: translateZ(-1px) scale(1.5); 
  z-index: -1; 
  opacity: .7; 
}
.hero-content { 
  animation: floatText 6s ease-in-out infinite; 
}

/* ============================================= */
/* 14. MOBILE TYPOGRAPHY                         */
/* ============================================= */
@media (max-width:640px) { 
  h1 { font-size: 2.5rem !important; line-height: 1.2; } 
}

/* ============================================= */
/* 15. TIMELINE IMAGE CARD & IMG (CRITICAL)      */
/* ============================================= */
.timeline-img-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.timeline-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

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

/* ============================================= */
/* 16. EXPANDABLE CONTENT                        */
/* ============================================= */
.timeline-expandable {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .7s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
.timeline-expandable.expanded {
    max-height: 1600px;
    opacity: 1;
}

#timelineContainer ul.space-y-2 li {
  position: relative;
  padding-left: 1.5rem;
  list-style: none;
}
#timelineContainer ul.space-y-2 li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #06b6d4; /* text-cyan-400 */
  font-weight: bold;
}


/* ============================================= */
/* 17. MOBILE LAYOUT FIXES                       */
/* ============================================= */
@media (max-width:767px) {
    .timeline-item {
        flex-direction: column !important;
    }
    .timeline-item.md\:flex-row-reverse {
        flex-direction: column !important;
    }
    .timeline-item > div:first-child { /* Text side */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .timeline-item > div:last-child { /* Image side */
        padding-left: 6rem !important;
        padding-right: 0 !important;
        justify-content: flex-start !important;
        margin-top: 2rem;
    }
    .timeline-dot { 
        left: 8px; 
        transform: translateX(0); 
    }
    .timeline-dot:hover { 
        transform: scale(1.3); 
    }
}