/* ==========================================================================
   Alien-tech aesthetic override layer for Mohammad Khalilzadeh's al-folio site
   --------------------------------------------------------------------------
   Goals:
   - Preserve al-folio's academic layout and readability.
   - Add motion, glow, glassmorphism, and futuristic micro-interactions.
   - Respect light/dark mode via CSS variables and data-theme attributes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens
   -------------------------------------------------------------------------- */
:root {
  --at-accent: #00f0ff;
  --at-accent-secondary: #7d2ae8;
  --at-accent-tertiary: #00ff9d;
  --at-glow: rgba(0, 240, 255, 0.35);
  --at-glow-secondary: rgba(125, 42, 232, 0.35);
  --at-glass-bg: rgba(255, 255, 255, 0.06);
  --at-glass-border: rgba(255, 255, 255, 0.12);
  --at-transition: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="dark"] {
  --at-accent: #00f0ff;
  --at-accent-secondary: #a855f7;
  --at-accent-tertiary: #34d399;
  --at-glow: rgba(0, 240, 255, 0.45);
  --at-glow-secondary: rgba(168, 85, 247, 0.45);
  --at-glass-bg: rgba(0, 0, 0, 0.28);
  --at-glass-border: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   2. Animated cosmic background
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 25%, rgba(0, 240, 255, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(125, 42, 232, 0.10) 0%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(0, 255, 157, 0.08) 0%, transparent 35%),
    linear-gradient(135deg, var(--global-bg-color) 0%, #f0f4f8 100%);
  background-size: 200% 200%;
  animation: aurora-move 18s ease-in-out infinite alternate;
  pointer-events: none;
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(circle at 15% 25%, var(--at-glow) 0%, transparent 35%),
    radial-gradient(circle at 85% 10%, var(--at-glow-secondary) 0%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(0, 255, 157, 0.15) 0%, transparent 35%),
    linear-gradient(135deg, var(--global-bg-color) 0%, #0a0f1a 100%);
}

@keyframes aurora-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Subtle scanline overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 240, 255, 0.02) 3px,
    transparent 4px
  );
  pointer-events: none;
  opacity: 0.25;
}

[data-theme="dark"] body::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 240, 255, 0.03) 3px,
    transparent 4px
  );
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   3. Particle canvas background
   -------------------------------------------------------------------------- */
#at-particle-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   4. Typography & headings
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h6,
.post-title {
  position: relative;
  letter-spacing: -0.015em;
}

h1::after,
.post-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 0.35em;
  background: linear-gradient(90deg, var(--at-accent), var(--at-accent-secondary));
  border-radius: 2px;
  animation: shimmer 3s linear infinite;
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

a {
  transition: color var(--at-transition), text-shadow var(--at-transition);
}

a:hover {
  color: var(--at-accent);
  text-shadow: 0 0 8px var(--at-glow);
}

/* --------------------------------------------------------------------------
   5. Glassmorphism cards (projects, publications, news)
   -------------------------------------------------------------------------- */
.card,
.project-card,
.publication,
.news-item,
.post-preview,
.repository-card {
  background: var(--at-glass-bg) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--at-glass-border) !important;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform var(--at-transition), box-shadow var(--at-transition), border-color var(--at-transition);
}

.card:hover,
.project-card:hover,
.publication:hover,
.news-item:hover,
.post-preview:hover,
.repository-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px var(--at-glow);
  border-color: rgba(0, 240, 255, 0.35) !important;
}

/* Project card image glow */
.project-card .card-img-top,
.publication .preview {
  transition: filter var(--at-transition), transform var(--at-transition);
}

.project-card:hover .card-img-top,
.publication:hover .preview {
  filter: brightness(1.08) saturate(1.15);
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.navbar {
  background: var(--at-glass-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--at-glass-border);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

.navbar .nav-link {
  position: relative;
  overflow: hidden;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--at-accent), var(--at-accent-secondary));
  transition: width var(--at-transition), left var(--at-transition);
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
  left: 0;
}

/* --------------------------------------------------------------------------
   7. Buttons & badges
   -------------------------------------------------------------------------- */
.btn,
button,
.z-depth-0 {
  transition: transform var(--at-transition), box-shadow var(--at-transition), background-color var(--at-transition);
}

.btn:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--at-glow);
}

.badge {
  background: linear-gradient(135deg, var(--at-accent), var(--at-accent-secondary));
  color: #fff;
  box-shadow: 0 2px 10px var(--at-glow);
}

/* --------------------------------------------------------------------------
   8. Profile image
   -------------------------------------------------------------------------- */
.profile img {
  border-radius: 16px;
  border: 2px solid transparent;
  background: linear-gradient(var(--global-bg-color), var(--global-bg-color)) padding-box,
              linear-gradient(135deg, var(--at-accent), var(--at-accent-secondary), var(--at-accent-tertiary)) border-box;
  box-shadow: 0 8px 30px var(--at-glow);
  transition: transform var(--at-transition), box-shadow var(--at-transition);
}

.profile img:hover {
  transform: scale(1.03) rotate(1deg);
  box-shadow: 0 12px 40px var(--at-glow-secondary);
}

/* --------------------------------------------------------------------------
   9. Scroll reveal helpers
   -------------------------------------------------------------------------- */
.at-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.at-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   10. Typewriter cursor
   -------------------------------------------------------------------------- */
.at-typewriter::after {
  content: "|";
  display: inline;
  color: var(--at-accent);
  animation: blink 1s step-start infinite;
  margin-left: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   11. Skill constellation / orbiting tags
   -------------------------------------------------------------------------- */
.at-skill-orbit {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.at-skill-orbit span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--at-glass-bg);
  border: 1px solid var(--at-glass-border);
  color: var(--global-text-color);
  transition: transform var(--at-transition), box-shadow var(--at-transition), border-color var(--at-transition);
  animation: float-in 0.6s ease-out both;
}

.at-skill-orbit span:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px var(--at-glow);
  border-color: var(--at-accent);
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--at-glass-border);
  background: var(--at-glass-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   13. Floating decorative orbs
   -------------------------------------------------------------------------- */
.at-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
  animation: orb-float 10s ease-in-out infinite alternate;
}

.at-orb--1 {
  width: 280px;
  height: 280px;
  top: 10%;
  left: -80px;
  background: var(--at-accent);
  animation-delay: 0s;
}

.at-orb--2 {
  width: 220px;
  height: 220px;
  bottom: 10%;
  right: -60px;
  background: var(--at-accent-secondary);
  animation-delay: -4s;
}

@keyframes orb-float {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-30px) scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   14. Reduced motion respect
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #at-particle-canvas,
  .at-orb {
    display: none;
  }
}