/* ===================== Base ===================== */
:root{
  --card-bg-light: rgba(255,255,255,.7);
  --card-bg-dark:  rgba(10,10,10,.7);
  --border-light:  rgba(0,0,0,.12);
  --border-dark:   rgba(255,255,255,.12);
  --shadow-smooth: 0 10px 30px -10px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif}

/* ================== Animations ================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseSlow{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes sheen{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes borderShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* ============== Helpers / Utilities ============= */
.fade-up{animation:fadeUp .5s ease both}
.float{animation:float 6s ease-in-out infinite}
.pulse-slow{animation:pulseSlow 4s ease-in-out infinite}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* ==== Commit badge (fits your gradient + glass style) ==== */
.commit-badge {
  position: absolute;
  z-index: 30;
  border-radius: 9999px;
  padding: .5rem .75rem;               /* px-3 py-2 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(214, 214, 214, 0.62);
  border: 1px solid rgba(0,0,0,.08);
  color: #0a0a0a;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.45);
  line-height: 1;
  will-change: transform;
}
.dark .commit-badge {
  background: rgba(12,12,14,.82);
  border-color: rgba(255,255,255,.10);
  color: #fafafa;
}

/* thin gradient edge */
.commit-badge::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,#6366f1,#d946ef,#f43f5e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35; pointer-events:none;
}

/* number + label */
.commit-badge__count { font-weight: 800; letter-spacing: -.015em; }
.commit-badge__label { font-weight: 600; opacity: .72; font-size: 11px; }

/* ===== Next-level purple commit chip ===== */
.commit-badge__chip{
  --p1: #8b5cf6;     /* indigo/purple */
  --p2: #ae3bbf;     /* fuchsia */
  --glow: 0 0 16px rgba(139,92,246,.55), 0 0 34px rgba(217,70,239,.35);
  position: relative;
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 9999px;
  background:
    radial-gradient(90% 90% at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 70% 70%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%),
    linear-gradient(135deg,var(--p1),var(--p2));
  box-shadow: var(--glow);
  isolation: isolate; /* contain blend effects */
}

/* conic shimmer + inner bloom + outer pulse */
@media (prefers-reduced-motion: no-preference){
  .commit-badge__chip::before,
  .commit-badge__chip::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  }
  /* outer pulse ring */
  .commit-badge__chip::after{
    box-shadow: 0 0 0 0 rgba(139,92,246,.45);
    animation: chipPulse 2.1s ease-out infinite;
    mix-blend-mode: screen;
  }
  /* inner rotating sheen */
  .commit-badge__chip::before{
    background:
      conic-gradient(from 0deg at 50% 50%,
        rgba(255,255,255,.0) 0deg,
        rgba(255,255,255,.22) 30deg,
        rgba(255,255,255,.0) 60deg,
        rgba(255,255,255,.0) 360deg);
    filter: blur(.6px) saturate(115%);
    animation: chipSpin 6.5s linear infinite;
    opacity:.9;
    mix-blend-mode: soft-light;
  }
  .commit-badge__chip{ animation: chipGlow 3.4s ease-in-out infinite; }
}

/* hover: quick pop without being obnoxious */
.commit-badge:hover .commit-badge__chip{
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 18px rgba(139,92,246,.6),
    0 0 40px rgba(217,70,239,.45);
}

/* dark tweak: slightly brighter glow */
.dark .commit-badge__chip{
  --glow: 0 0 18px rgba(139,92,246,.65), 0 0 42px rgba(217,70,239,.45);
}

/* ===== keyframes ===== */
@keyframes chipPulse{
  0%   { box-shadow: 0 0 0 0   rgba(139,92,246,.48); opacity:.95; }
  60%  { box-shadow: 0 0 0 14px rgba(139,92,246,0);  opacity:.55; }
  100% { box-shadow: 0 0 0 0   rgba(139,92,246,0);   opacity:.95; }
}
@keyframes chipSpin{
  from { transform: rotate(0turn); }
  to   { transform: rotate(1turn); }
}
@keyframes chipGlow{
  0%,100% { filter: brightness(1) saturate(1); }
  50%     { filter: brightness(1.12) saturate(1.1); }
}


/* Typewriter cursor */
@keyframes twBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.tw-cursor { display:inline-block; margin-left:2px; animation: twBlink 1s step-end infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tw-cursor { animation: none; opacity: 1; }
}
/* ---------- Boot overlay base (you already have these) ---------- */
#bootloader{
  opacity: 1;
  transition: opacity 2.0s ease, filter 1.8s ease;
  will-change: opacity, filter;
}
#bootloader.boot-hide{ opacity: 0; filter: blur(3px); }

/* Blur the site while booting (you already have this) */
.booting #app-root, .booting main, .booting header, .booting footer{
  filter: blur(6px) saturate(110%);
  pointer-events: none; user-select: none;
}

/* ---------- New: subtle background “nebula” drift behind the card ---------- */
#bootloader{
  /* soft grainy nebula using layered radial-gradients */
  --neb1: radial-gradient(1200px 800px at 20% 30%, rgba(236,72,153,.07), transparent 60%);
  --neb2: radial-gradient(900px 700px at 80% 70%, rgba(168,85,247,.06), transparent 55%);
  --neb3: radial-gradient(1000px 900px at 50% 50%, rgba(99,102,241,.05), transparent 60%);
  background-image: var(--neb1), var(--neb2), var(--neb3), rgba(0,0,0,.40);
  background-size: 120% 120%, 120% 120%, 120% 120%, auto;
  background-position: 50% 50%, 50% 50%, 50% 50%, 0 0;
  animation: bootNebula 22s ease-in-out infinite alternate;
  backdrop-filter: blur(8px);
}
@keyframes bootNebula{
  0%   { background-position: 48% 52%, 52% 48%, 50% 50%; }
  100% { background-position: 55% 45%, 45% 60%, 52% 48%; }
}

/* ---------- New: card border sweep + glow pulse ---------- */
.boot-card{
  position: relative; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 0 40px -10px rgba(236,72,153,.6);
}
.boot-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    conic-gradient(from 0deg,
      rgba(236,72,153,.0) 0deg, rgba(236,72,153,.5) 120deg,
      rgba(168,85,247,.4) 240deg, rgba(236,72,153,.0) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;             /* border thickness */
  animation: borderSweep 6.5s linear infinite;
  opacity:.75;
}
@keyframes borderSweep{ to { transform: rotate(360deg); } }

.boot-card::after{
  content:""; position:absolute; inset:-20%; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(236,72,153,.12), transparent 70%);
  filter: blur(20px);
  animation: cardGlow 3.6s ease-in-out infinite;
}
@keyframes cardGlow{
  0%,100% { opacity:.5; transform: scale(1); }
  50%     { opacity:.9; transform: scale(1.02); }
}

/* ---------- New: star specks float very slowly ---------- */
.boot-stars{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(255,255,255,.18), transparent),
    radial-gradient(1.7px 1.7px at 40% 70%, rgba(255,255,255,.22), transparent),
    radial-gradient(1.2px 1.2px at 70% 80%, rgba(255,255,255,.16), transparent);
  animation: starsDrift 40s linear infinite;
  filter: blur(.2px);
}
@keyframes starsDrift{
  0%   { transform: translate3d(0,0,0) scale(1); opacity:.7; }
  100% { transform: translate3d(-2%, -3%, 0) scale(1.02); opacity:.7; }
}

/* ---------- You already had the CRT scanline; keep it but make it smoother ---------- */
.boot-scan{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,0,128,.05) 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
  animation: bootScan 2.8s linear infinite;
}
@keyframes bootScan{
  0%   { transform: translateY(-8%); opacity:.15; }
  50%  { transform: translateY( 0%); opacity:.28; }
  100% { transform: translateY( 8%); opacity:.15; }
}

/* ---------- Cursor blink on the [RUN] line ---------- */
.boot-blink::after{
  content:"▌"; display:inline-block; margin-left:4px; color:#f472b6;
  animation: bootCursor 1s steps(1,end) infinite;
}
@keyframes bootCursor{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #bootloader, .boot-card::before, .boot-card::after, .boot-stars, .boot-scan { animation:none!important; }
}


/* =================== Components ================== */
.btn-outline{
  padding:.375rem .75rem;border-radius:.75rem;font-size:.875rem;
  border:1px solid var(--border-light);background:transparent;
  transition:background .2s ease,transform .12s ease;
}
.dark .btn-outline{border-color:var(--border-dark)}
.btn-outline:hover{background:rgba(0,0,0,.03)}
.dark .btn-outline:hover{background:rgba(255,255,255,.06)}

.btn-gradient{
  padding:.75rem 1.25rem;border-radius:.75rem;font-weight:600;font-size:.875rem;color:#fff;
  box-shadow:var(--shadow-smooth);
  background-image:linear-gradient(90deg,#6366f1,#a855f7,#f43f5e);
  transition:transform .15s ease,filter .3s ease;
}
.btn-gradient:hover{transform:scale(1.04)}
.btn-gradient.is-shiny{position:relative;overflow:hidden}
.btn-gradient.is-shiny::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  background-size:200% 100%;animation:sheen 1.8s linear infinite;mix-blend-mode:screen;
}

.input{
  padding:.5rem .75rem;border-radius:.75rem;border:1px solid var(--border-light);
  background:var(--card-bg-light);backdrop-filter:saturate(120%) blur(6px);
}
.dark .input{border-color:var(--border-dark);background:var(--card-bg-dark)}

.section-title{font-weight:800;font-size:clamp(1.875rem,2.5vw+ 1rem,2.25rem)}

.card{
  display:block;border-radius:1rem;padding:1.25rem;
  border:1px solid var(--border-light);
  background:var(--card-bg-light);backdrop-filter:saturate(120%) blur(6px);
}
.dark .card{border-color:var(--border-dark);background:var(--card-bg-dark)}

.hoverable{transition:transform .15s ease,box-shadow .2s ease}
.hoverable:hover{transform:translateY(-2px);box-shadow:var(--shadow-smooth)}

.chip{
  padding:.25rem .5rem;border-radius:.5rem;border:1px solid var(--border-light);
  background:#f5f5f5;font-size:.75rem;
}
.dark .chip{border-color:var(--border-dark);background:#111}

.stat{
  text-align:center;border-radius:.75rem;padding:1rem;
  border:1px solid var(--border-light);
  background:var(--card-bg-light);backdrop-filter:saturate(120%) blur(6px);
  transition:transform .15s ease;
}
.dark .stat{border-color:var(--border-dark);background:var(--card-bg-dark)}
.stat:hover{transform:scale(1.03)}
.stat-label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.dark .stat-label{color:#a3a3a3}
.stat-value{font-weight:600}

/* Gradient text + divider */
.gradient-text{-webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(90deg,#6366f1,#a855f7,#f43f5e)}
.divider{width:6rem;height:.25rem;border-radius:9999px;
  background-image:linear-gradient(90deg,#6366f1,#a855f7,#f43f5e);animation:pulseSlow 2.2s ease-in-out infinite}

/* ============== Avatar (gradient ring) ============== */
.ring-gradient{background:linear-gradient(90deg,#6366f1,#a855f7,#f43f5e)}
.ring-animated{background-size:200% 200%;animation:borderShift 10s linear infinite}

/* (legacy avatar style if needed) */
.avatar-ring{width:18rem;height:18rem;border-radius:9999px;overflow:hidden;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.2);background:linear-gradient(90deg,#6366f1,#a855f7,#f43f5e);padding:6px}
.avatar-ring>img{border-radius:9999px;background:#fff;width:100%;height:100%;object-fit:cover}

/* =========== Featured (gradient border only) =========== */
/* Outer anchor paints the border; inner .fc-inner is the card body */
.featured-card{
  position:relative;display:block;border-radius:1rem;padding:1px;
  background:linear-gradient(90deg,#6366f1,#a855f7,#f43f5e);
  transition:transform .15s ease,box-shadow .2s ease;
}
.featured-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-smooth)}
.featured-card .fc-inner{
  border-radius:inherit;padding:1.25rem;border:1px solid var(--border-light);
  background:var(--card-bg-light);backdrop-filter:saturate(120%) blur(6px);
}
.dark .featured-card .fc-inner{border-color:var(--border-dark);background:var(--card-bg-dark)}

/* =================== Layout =================== */
.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition:none !important}
}