/* =============================================
   PORTFOLIO - CUSTOM STYLES
   File: css/style.css
   Purpose: All custom styles (Tailwind handles utilities)
   ============================================= */

html {
  scroll-behavior: smooth;
}

/* ---------- Floating animation (hero avatar) ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* ---------- Glass card ---------- */
.glass-card {
  background: rgba(18, 33, 49, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(134, 149, 133, 0.2);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}
.glass-card:hover {
  border-color: rgba(75, 226, 119, 0.5);
  box-shadow:
    0 10px 40px rgba(75, 226, 119, 0.15),
    inset 0 0 10px rgba(255, 255, 255, 0.05);
}

/* ---------- Typing cursor ---------- */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  from, to { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---------- Entrance animations (hero section) ---------- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.entrance-anim {
  opacity: 0;
  animation: fadeSlideUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* ---------- Scroll reveal ---------- */
.reveal-item, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-item { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.9); }

.reveal-item.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ---------- Enhanced Hover & Click ---------- */
.nav-link {
  position: relative;
  display: inline-block;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: theme('colors.primary');
  transition: width 0.3s ease-in-out;
}
.nav-link:hover::after {
  width: 100%;
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-anim 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.glow-btn:hover {
  box-shadow: 0 0 25px rgba(75, 226, 119, 0.4);
}

/* ---------- 3D tilt card ---------- */
.tilt-card {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.1s ease-out, box-shadow 0.3s ease-out;
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar        { width: 8px; }
::-webkit-scrollbar-track  { background: #051424; }
::-webkit-scrollbar-thumb  { background: #1c2b3c; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #273647; }

/* ---------- Reduced motion (accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .entrance-anim,
  .reveal-item, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .bg-mesh { display: none; }
}

/* ---------- Mobile Menu ---------- */
#mobile-menu {
  transition: opacity 0.3s ease;
  display: none;
}
#mobile-menu.open {
  display: flex;
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 767px) {

  /* Hero: shrink the big display heading */
  h1.font-display-lg {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.15;
  }

  /* Hide avatar on very small screens to avoid clutter */
  #hero-visual-area {
    display: none;
  }

  /* Hero section min-height reduced on mobile */
  #hero {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Experience timeline: move line to the left and keep cards full-width */
  #experience .absolute.left-1\/2 {
    left: 16px;
    transform: none;
  }

  /* Milestone layout: stack vertically, left-aligned */
  .milestone {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 2.5rem;
  }

  /* Hide the "reverse" flex on mobile — always left aligned */
  .milestone.md\:flex-row-reverse {
    flex-direction: column !important;
  }

  /* Milestone text alignment always left on mobile */
  .milestone > div:first-child {
    text-align: left !important;
  }

  /* Milestone icon: position to the left edge */
  .milestone > div:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
  }

  /* Credentials: single column on mobile */
  #credentials-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Marquee: slightly smaller text on mobile */
  .marquee-content {
    font-size: 0.875rem;
    gap: 1.5rem;
  }

  /* Contact modal: use full screen on mobile */
  #contact-modal {
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Nav name: truncate if too long */
  nav .text-headline-md {
    font-size: 1rem;
  }
}

/* ---------- Custom Cursor ---------- */
/* Native cursor stays visible — the trail/dot are additive overlay effects */
.cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 2px solid rgba(75, 226, 119, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  mix-blend-mode: screen;
}
.splash-particle {
  position: fixed;
  width: 4px; height: 4px;
  background-color: theme('colors.primary');
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: splash-anim 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes splash-anim {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ---------- Infinite Marquee ---------- */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  position: relative;
  width: 100%;
  padding: 1rem 0;
  background: theme('colors.surface-container-low');
  border-top: 1px solid rgba(134, 149, 133, 0.2);
  border-bottom: 1px solid rgba(134, 149, 133, 0.2);
}
.marquee-content {
  display: flex;
  animation: marquee 20s linear infinite;
  gap: 3rem;
  padding-left: 3rem;
}
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Magnetic Menu ---------- */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}