/* ============================================
   Premium Effects — Active Theory inspired
   Custom cursor · text reveals · mesh background
   magnetic buttons · noise · cinematic typography
   ============================================ */

/* Use Space Grotesk — modern architectural type */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hide the system cursor on devices that hover */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], .nav-link, .skill-card, .project-card, .pub-card, .timeline-card, .hero-socials a, .footer-right a { cursor: none; }
  /* Keep native cursor on text inputs so users can see where they're typing */
  input, textarea, select { cursor: text; }
}

/* ---------- Custom cursor ---------- */
.cursor-wrap {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  z-index: 9998; pointer-events: none; mix-blend-mode: difference;
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9998; mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: #fff;
  transition: width .25s var(--ease-out-quart), height .25s var(--ease-out-quart);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.55);
  transition: width .35s var(--ease-out-quart), height .35s var(--ease-out-quart),
              background .25s, border-color .25s;
}
.cursor-ring.hover {
  width: 70px; height: 70px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.95);
}
.cursor-ring.click {
  width: 28px; height: 28px;
}
.cursor-ring.text {
  width: 4px; height: 32px;
  border-radius: 2px;
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* Hide legacy bg-decoration in favor of mesh */
.bg-decoration { display: none !important; }

/* ---------- Mesh / Aurora background ---------- */
.mesh-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden;
}
.mesh-bg::before {
  content: ''; position: absolute; inset: -50%;
  background:
    radial-gradient(at 20% 10%, rgba(99,102,241,.45) 0, transparent 45%),
    radial-gradient(at 80% 20%, rgba(6,182,212,.40) 0, transparent 45%),
    radial-gradient(at 30% 90%, rgba(236,72,153,.35) 0, transparent 45%),
    radial-gradient(at 90% 80%, rgba(139,92,246,.40) 0, transparent 45%);
  filter: blur(60px) saturate(160%);
  opacity: .8;
  animation: mesh 20s ease-in-out infinite alternate;
}
[data-theme="light"] .mesh-bg::before {
  background:
    radial-gradient(at 20% 10%, rgba(99,102,241,.22) 0, transparent 45%),
    radial-gradient(at 80% 20%, rgba(6,182,212,.20) 0, transparent 45%),
    radial-gradient(at 30% 90%, rgba(236,72,153,.18) 0, transparent 45%),
    radial-gradient(at 90% 80%, rgba(139,92,246,.20) 0, transparent 45%);
  opacity: 1;
}
@keyframes mesh {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-3%, 3%) rotate(180deg); }
  100% { transform: translate(3%, -3%) rotate(360deg); }
}

/* Noise overlay (grain) */
.noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation: noiseShift 0.5s steps(2) infinite;
}
@keyframes noiseShift {
  0% { transform: translate(0,0); }
  50% { transform: translate(-2%, 2%); }
  100% { transform: translate(2%, -2%); }
}

/* Mouse spotlight */
.spotlight {
  position: fixed; top: 0; left: 0;
  width: 600px; height: 600px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(99,102,241,.18), transparent 60%);
  transform: translate(-50%, -50%);
  z-index: -1; will-change: transform;
  filter: blur(40px);
  transition: opacity .4s;
}
[data-theme="light"] .spotlight {
  background: radial-gradient(circle, rgba(99,102,241,.10), transparent 60%);
}

/* ---------- Typography upgrade ---------- */
body { font-family: var(--font-display); font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on; }

.section-title, .hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .95;
}
.hero-title {
  font-size: clamp(3.2rem, 9vw, 8rem) !important;
  font-weight: 500 !important;
}
.section-title { font-size: clamp(2.5rem, 7vw, 5.5rem) !important; }

.gradient-text {
  background: linear-gradient(120deg, #fff 0%, #818cf8 40%, #06b6d4 70%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 200%;
  animation: shimmer 8s ease infinite;
}
[data-theme="light"] .gradient-text {
  background: linear-gradient(120deg, #0f172a 0%, #6366f1 40%, #06b6d4 70%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes shimmer {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Italic serif accent for select keywords */
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ---------- Character split reveal ---------- */
.split-line {
  display: inline-block; overflow: hidden; vertical-align: top;
}
.split-line .word {
  display: inline-block; transform: translateY(105%);
  transition: transform .9s var(--ease-out-expo);
}
.split-line.in .word { transform: translateY(0); }
.split-line .word + .word { margin-left: .25em; }
.split-line .word:nth-child(2) { transition-delay: .06s; }
.split-line .word:nth-child(3) { transition-delay: .12s; }
.split-line .word:nth-child(4) { transition-delay: .18s; }
.split-line .word:nth-child(5) { transition-delay: .24s; }
.split-line .word:nth-child(6) { transition-delay: .30s; }
.split-line .word:nth-child(7) { transition-delay: .36s; }
.split-line .word:nth-child(8) { transition-delay: .42s; }

/* Letter-by-letter reveal for hero name */
.split-chars {
  display: inline-block; overflow: visible;
}
.split-chars .ch {
  display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-30deg);
  transition: opacity .8s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.split-chars.in .ch { opacity: 1; transform: translateY(0) rotateX(0); }

/* ---------- Magnetic buttons ---------- */
.magnetic { position: relative; display: inline-flex; }
.magnetic > * { transition: transform .3s var(--ease-out-quart); }

/* ---------- Big section hover image ---------- */
.hero-actions .btn { position: relative; overflow: hidden; }
.btn-primary {
  background: #fff !important;
  color: #0a0e1a !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,255,255,.25) !important; }
[data-theme="light"] .btn-primary {
  background: #0a0e1a !important; color: #fff !important;
}
[data-theme="light"] .btn-primary:hover { box-shadow: 0 18px 40px rgba(15,23,42,.25) !important; }

.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--text) !important;
}
.btn-ghost:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.4) !important; }
[data-theme="light"] .btn-ghost { border-color: rgba(15,23,42,.18) !important; }
[data-theme="light"] .btn-ghost:hover { background: rgba(15,23,42,.04) !important; border-color: rgba(15,23,42,.4) !important; }

/* ---------- Profile card refinement ---------- */
.profile-frame {
  border-radius: 30px !important;
  border: none !important;
  aspect-ratio: 4/5;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.profile-frame img {
  filter: grayscale(.1) contrast(1.05);
  transition: filter .8s var(--ease-out-quart), transform 1.2s var(--ease-out-quart);
}
.profile-card:hover .profile-frame img {
  filter: grayscale(0) contrast(1.1);
  transform: scale(1.05);
}
.profile-glow { display: none !important; }

/* ---------- Section transitions ---------- */
.section-tag {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: .5rem !important;
  position: relative; padding-left: 28px !important;
}
.section-tag::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px; background: currentColor; opacity: .5;
}

/* ---------- Marquee bigger ---------- */
.marquee {
  margin-top: 6rem !important;
  padding: 2.5rem 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
[data-theme="light"] .marquee {
  border-top: 1px solid rgba(15,23,42,.08) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
.marquee-track {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 300 !important;
  letter-spacing: -.02em;
}
.marquee-track span { padding: 0 .8rem; }
.marquee-track span:nth-child(odd) {
  color: var(--text);
}
.marquee-track span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--text);
}

/* ---------- Project cards image-free hover ---------- */
.project-card { transition: all .5s var(--ease-out-quart) !important; }
.project-card:hover {
  background: rgba(255,255,255,.04) !important;
}

/* ---------- Timeline refresh ---------- */
.timeline-card { transition: all .5s var(--ease-out-quart); }
.timeline-card:hover { background: rgba(255,255,255,.05) !important; }

/* ---------- Number counters big ---------- */
.stat-number, .stat-suffix {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: 4.5rem !important;
  letter-spacing: -.05em !important;
}
.stat-card { padding: 2.5rem 1.5rem !important; }

/* ---------- Page transition overlay ---------- */
.page-transition {
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0e1a;
  transform: translateY(100%);
  transition: transform 1.2s var(--ease-out-expo);
  pointer-events: none;
}
.page-transition.active { transform: translateY(0); }
.page-transition.exit {
  transform: translateY(0);
  animation: pageOut 1.2s var(--ease-out-expo) forwards;
}
@keyframes pageOut { to { transform: translateY(-100%); } }

/* ---------- Reveal-on-scroll variant: clip ---------- */
.clip-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo);
}
.clip-reveal.in, .clip-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Mask-image fade-in section borders ---------- */
.section + .section::before {
  content: ''; display: block;
  width: 60%; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .15;
}

/* ---------- Logo/Brand refinement ---------- */
.logo-mark {
  border-radius: 8px !important;
  background: #fff !important;
  color: #0a0e1a !important;
  font-family: var(--font-display);
  letter-spacing: -.03em;
  box-shadow: none !important;
}
[data-theme="light"] .logo-mark { background: #0a0e1a !important; color: #fff !important; }

/* ---------- Nav refinement ---------- */
.nav { border-bottom: none !important; }
.nav.scrolled { background: rgba(10,14,26,.6) !important; backdrop-filter: blur(30px); }
[data-theme="light"] .nav.scrolled { background: rgba(255,255,255,.65) !important; }

.nav-link {
  font-family: var(--font-display);
  font-size: .85rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 400 !important;
}

.nav-btn { border-radius: 99px !important; }
.cv-builder-btn {
  background: #fff !important; color: #0a0e1a !important;
}
[data-theme="light"] .cv-builder-btn { background: #0a0e1a !important; color: #fff !important; }
.cv-builder-btn:hover { transform: translateY(-2px) scale(1.02); }

/* ---------- Hero refinement ---------- */
.hero {
  padding: 12rem 0 6rem !important;
  position: relative;
}
.hero-badge { font-family: var(--font-display); letter-spacing: .04em; }
.hero-subtitle {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}
.hero-desc {
  font-size: 1.15rem !important; max-width: 540px !important;
  font-weight: 300; line-height: 1.6;
}

/* ---------- Stats numbers --- larger ---------- */
.about-stats { gap: 1rem !important; }

/* ---------- Skill bar slimmer & elegant ---------- */
.skill-bar { height: 2px !important; background: rgba(255,255,255,.08) !important; }
[data-theme="light"] .skill-bar { background: rgba(15,23,42,.08) !important; }
.skill-bar span { background: var(--text) !important; }

/* ---------- Cards rounded more (modern) ---------- */
.skill-card, .project-card, .pub-card, .timeline-card, .edu-card, .stat-card, .lang-card, .info-item {
  border-radius: 20px !important;
}

/* ---------- Footer refinement ---------- */
.footer { border-top: 1px solid rgba(255,255,255,.08) !important; }
[data-theme="light"] .footer { border-top: 1px solid rgba(15,23,42,.08) !important; }

/* ---------- Selection ---------- */
::selection { background: #fff; color: #0a0e1a; }
[data-theme="light"] ::selection { background: #0a0e1a; color: #fff; }

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); }

/* ---------- Hide system cursor on touch only ---------- */
@media (hover: none) {
  body { cursor: auto; }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .cursor-dot, .cursor-ring, .mesh-bg, .noise, .spotlight { display: none !important; }
  body { cursor: auto !important; }
}