/* ============================================
   0xbartita.com — Custom Effects
   ============================================ */

/* ---- Core Keyframes ---- */
@keyframes spinRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes pulseBadge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.5); } 50% { box-shadow: 0 0 20px 5px rgba(var(--danger-rgb), 0.3); } }

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(40px, -30px) rotate(2deg); }
  50% { transform: translate(-20px, 20px) rotate(-1deg); }
  75% { transform: translate(30px, 10px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes revealLine {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.6; }
}

.typed-cursor { color: var(--cyan); font-weight: 100; animation: blink 0.7s infinite; }

/* ---- Reading Progress ---- */
.reading-progress {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: var(--gradient);
  width: 0%; z-index: 10001;
  transition: width 0.1s;
}

/* ============================================
   Ambient Noise — Floating Gradient Blobs
   These drift slowly behind content
   ============================================ */
.section { overflow: hidden; }

.hero::before {
  content: '';
  position: absolute;
  top: 10%; left: -5%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  background: conic-gradient(from 180deg, rgba(var(--magenta-rgb), 0.06), rgba(var(--cyan-rgb), 0.04), rgba(var(--purple-rgb), 0.05), rgba(var(--magenta-rgb), 0.06));
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: drift 25s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 5%; right: -8%;
  width: 40vw; height: 40vw;
  max-width: 500px; max-height: 500px;
  background: conic-gradient(from 0deg, rgba(var(--cyan-rgb), 0.05), rgba(var(--magenta-rgb), 0.03), rgba(var(--cyan-rgb), 0.05));
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: drift 20s ease-in-out infinite reverse;
}

/* Subtle blobs on alternating sections */
.experience::after,
.certifications::after,
.cve-discoveries::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none; z-index: 0;
}
.experience::after { top: -50px; right: -80px; background: rgba(var(--magenta-rgb), 0.035); }
.certifications::after { bottom: -50px; left: -80px; background: rgba(var(--cyan-rgb), 0.03); }
.cve-discoveries::after { top: 30%; right: -60px; background: rgba(var(--danger-rgb), 0.025); }

/* ============================================
   Hero Photo — Triple Ring + Glow
   ============================================ */
.hero-photo-wrapper::before {
  content: '';
  position: absolute; inset: -25px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--magenta), var(--cyan), var(--purple), var(--magenta));
  opacity: 0.2;
  filter: blur(15px);
  z-index: 0;
  animation: breathe 5s ease-in-out infinite;
}

/* ============================================
   Card Hover — Border Trace Animation
   A gradient line traces the card border on hover
   ============================================ */
.project-card,
.pub-card,
.cert-card-v2,
.cve-card-item,
.about-stat {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Diagonal sweep on hover */
.project-card::before,
.pub-card::before,
.cert-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(var(--cyan-rgb), 0.04) 50%,
    transparent 70%
  );
  transition: left 0.6s ease;
  z-index: 0;
  pointer-events: none;
}
.project-card:hover::before,
.pub-card:hover::before,
.cert-card-v2:hover::before {
  left: 100%;
}

/* ============================================
   Buttons — Magnetic Ripple
   ============================================ */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(var(--tint-rgb), 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.btn-primary:hover::before {
  width: 300px; height: 300px;
}

/* ============================================
   Nav Link — Underline grows from center
   ============================================ */
.nav-link::after {
  content: '';
  position: absolute; bottom: 0;
  left: 50%; width: 0; height: 2px;
  background: var(--gradient);
  transition: width 0.3s, left 0.3s;
}
.nav-link:hover::after, .nav-link.active::after {
  width: 100%; left: 0;
}

/* ============================================
   Section Title — Gradient Underline Reveal
   ============================================ */
.section-title {
  position: relative;
  display: inline-block;
  width: 100%;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px; height: 3px;
  background: var(--gradient);
  margin: 0.75rem auto 0;
  border-radius: 2px;
  transition: width 0.5s;
}
.section-title:hover::after {
  width: 120px;
}

/* ============================================
   Skill Tags — Glitch on Hover
   ============================================ */
.skill-tag {
  transition: all 0.25s;
  position: relative;
}
.skill-tag:hover {
  background: rgba(var(--cyan-rgb), 0.1);
  box-shadow: 0 0 12px var(--glow-cyan);
  transform: translateY(-2px);
  letter-spacing: 1.5px;
}

/* ============================================
   Platform Badges — Fill from left
   ============================================ */
.platform-badge {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.platform-badge::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 100%;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.08), rgba(var(--magenta-rgb), 0.06));
  transition: width 0.4s;
  z-index: -1;
  border-radius: inherit;
}
.platform-badge:hover::after { width: 100%; }

/* ============================================
   Experience Card — Glow Line
   ============================================ */
.experience-card::before {
  box-shadow: 0 0 20px var(--glow-magenta), 0 0 40px rgba(var(--magenta-rgb), 0.1);
}
.exp-timeline-dot {
  animation: pulseRing 3s ease-in-out infinite;
}

/* ============================================
   Stats — Number glow on hover
   ============================================ */
.about-stat:hover .about-stat-number {
  filter: brightness(1.4) drop-shadow(0 0 8px var(--glow-cyan));
  transition: filter 0.3s;
}

/* ============================================
   Social Icons — Pop + Glow
   ============================================ */
.hero-socials a, .footer-icons a {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.hero-socials a:hover, .footer-icons a:hover {
  transform: translateY(-5px) scale(1.1);
}

/* ============================================
   HOF Items — Left accent on hover
   ============================================ */
.hof-item {
  transition: all 0.3s;
  padding-left: 0;
  border-left: 3px solid transparent;
}
.hof-item:hover {
  padding-left: 1rem;
  border-left-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.02);
}

/* ============================================
   Contact Form Inputs — Bottom border morph
   ============================================ */
.form-group input:focus,
.form-group textarea:focus {
  border-color: transparent;
  border-bottom-color: var(--cyan);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 0 0 var(--cyan), 0 0 20px var(--glow-cyan);
}

/* ============================================
   Terminal Window — Subtle breathe
   ============================================ */
.terminal-window {
  transition: box-shadow 0.5s;
}
.terminal-window:hover {
  box-shadow: 0 0 30px rgba(var(--cyan-rgb), 0.08), 0 0 60px rgba(var(--magenta-rgb), 0.04);
}

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--magenta), var(--cyan));
  border-radius: 3px;
}

/* ============================================
   Selection Color
   ============================================ */
::selection {
  background: rgba(var(--magenta-rgb), 0.3);
  color: #fff;
}

/* ============================================
   Smooth Page Load
   ============================================ */
main {
  animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}