/* ============================
   Theme glow palette
============================ */
:root{
  --g1: rgba(99,102,241,.55);   /* indigo-500  */
  --g2: rgba(59,130,246,.55);   /* blue-500    */
  --g3: rgba(16,185,129,.45);   /* emerald-500 */
}

/* ============================
   Avatar (PNG, no box)
============================ */
.avatar-img{
  border-radius:24px;
  transition: transform .3s ease, filter .3s ease;
  filter: drop-shadow(0 10px 24px rgba(2,6,23,.15));
}
.avatar-img:hover{ transform:scale(1.015) }

/* ============================
   Shimmer (utility)
============================ */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.shimmer{
  background-image:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(0,0,0,0.08) 20%,rgba(255,255,255,0) 40%);
  background-size:200% 100%; animation:shimmer 2s infinite;
}

/* ============================
   Pills / tags
============================ */
.pill{
  border:1px solid rgba(148,163,184,.5);
  background:#f8fafc;
  padding:.25rem .75rem;
  border-radius:9999px;
  font-size:.75rem
}
.dark .pill{ border-color:#475569; background:#334155; color:#e2e8f0 }

/* ============================
   Reveal on scroll
============================ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.reveal.visible, .reveal.is-visible{ opacity:1; transform:translateY(0) }

/* ============================
   Glow cards
============================ */
.glow-card{
  position:relative; border-radius:24px; overflow:hidden;
  background:#ffffff; border:1px solid rgba(148,163,184,.25);
  transition:transform .25s ease, box-shadow .3s ease, background-color .2s ease;
}
.dark .glow-card{ background:rgba(30,41,59,.7) }
.glow-card::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0;
  background:conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), var(--g1));
  filter:blur(18px); opacity:0; transition:opacity .35s ease;
}
.glow-card:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 0 20px rgba(99,102,241,.18) }
.glow-card:hover::before{ opacity:.6 }
.glow-card>*{ position:relative; z-index:1 }

/* ============================
   Glow buttons
============================ */
.glow-btn{
  position:relative; isolation:isolate;
  transition:transform .18s ease, box-shadow .28s ease, background-color .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}
.glow-btn:hover{ transform:translateY(-1px) }
.glow-btn::after{
  content:""; position:absolute; inset:-4px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), var(--g1));
  filter:blur(14px); opacity:0; transition:opacity .28s ease;
}
.glow-btn:hover::after{ opacity:.72 }

/* ============================
   Glow underline links
============================ */
.glow-link{ position:relative; display:inline-block }
.glow-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  filter:blur(1px); opacity:0; transition:opacity .25s ease;
}
.glow-link:hover::after{ opacity:1 }

/* ============================
   Sticky header halo
============================ */
.header-glow{ position:sticky; top:0; isolation:isolate }
.header-glow::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:-24px; width:min(1100px,92vw); height:80px; border-radius:28px;
  background:radial-gradient(60% 120% at 50% 50%,
    rgba(99,102,241,.22),
    rgba(59,130,246,.18) 35%,
    rgba(16,185,129,.14) 60%,
    rgba(0,0,0,0) 75%);
  filter:blur(18px); opacity:.55; pointer-events:none; z-index:-1;
}
.header-glow.is-scrolled{ box-shadow:0 10px 30px rgba(2,6,23,.08) }
.header-glow.is-scrolled::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-22px; width:min(900px,95vw); height:44px; border-radius:9999px;
  background:radial-gradient(60% 100% at 50% 0%,
    rgba(99,102,241,.20),
    rgba(59,130,246,.16) 40%,
    rgba(16,185,129,.12) 65%,
    rgba(0,0,0,0) 75%);
  filter:blur(18px); opacity:.9; pointer-events:none; z-index:-1;
}

/* ============================
   Footer heart
============================ */
.heart{ color:#ef4444 } .dark .heart{ color:#f87171 }

/* ============================
   Social links (icons + arrow)
============================ */
.social-links .icon-brand { width: 20px; height: 20px; }
.social-links .behance-badge { line-height: 1; }

/* Sleek external arrow (no box) */
.social-links .icon-ext{
  width:16px; height:16px; margin-left:2px; opacity:.6;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .2s ease;
}
.social-links .social:hover .icon-ext{
  transform: translate(2px, -2px);
  opacity:1;
}

/* Dribbble PNG as mask icon (auto color & hover) */
.icon-mask-dribbble{
  width: 20px;
  height: 20px;
  display: inline-block;
  background: currentColor;                 /* inherits current text color */
  -webkit-mask: url("assets/icons/dribbble.png") no-repeat center / contain;
          mask: url("assets/icons/dribbble.png") no-repeat center / contain;
  opacity: .9;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .2s ease;
}
.social:hover .icon-mask-dribbble{
  opacity: 1;
  transform: translateY(0);
}