/* ============================================================
   PREMIUM UPGRADE LAYER — Pratyush Biswas Portfolio
   Link this AFTER style.css on every page:
   <link rel="stylesheet" href="premium-upgrade.css">
   Pure additive/override — does not require HTML changes.
   ============================================================ */

/* Richer accent gradient + refined palette depth */
:root{
  --grad-primary:linear-gradient(135deg,#4f8ef7 0%,#a78bfa 55%,#f472b6 100%);
  --grad-subtle:linear-gradient(135deg,rgba(79,142,247,.12),rgba(167,139,250,.12));
  --shadow-soft:0 8px 30px rgba(0,0,0,.35);
  --shadow-glow:0 0 40px rgba(79,142,247,.18);
}

/* Sharper, more premium typography rhythm */
h1,h2,h3{letter-spacing:-0.02em}
h1{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text}

/* Buttons: gradient fill + lift-on-hover instead of flat accent */
.btn,button[class*="btn"],a[class*="btn"]{
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.btn:hover,button[class*="btn"]:hover,a[class*="btn"]:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-glow);
}
.btn-primary,.primary-btn,a.btn.primary{
  background:var(--grad-primary)!important;
  border:none!important;
}

/* Cards: crisper glass, subtle border glow on hover */
.card,[class*="card"]{
  transition:transform .3s cubic-bezier(.2,.8,.2,1),
             border-color .3s ease,
             box-shadow .3s ease;
}
.card:hover,[class*="card"]:hover{
  transform:translateY(-6px);
  border-color:rgba(167,139,250,.4)!important;
  box-shadow:var(--shadow-soft),var(--shadow-glow);
}

/* Section labels — small caps eyebrow style for premium feel */
.section-label,.eyebrow,.tag-label{
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--grad-subtle);
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.25);
  display:inline-block;
}

/* Custom cursor glow that follows pointer (desktop only) */
@media (hover:hover) and (pointer:fine){
  .cursor-glow{
    position:fixed;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(79,142,247,.10),transparent 70%);
    pointer-events:none;z-index:1;transform:translate(-50%,-50%);
    transition:opacity .3s ease;will-change:transform;
  }
}

/* Nav: add a bottom gradient hairline instead of flat border */
.navbar{
  border-bottom:none!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 1px 0 rgba(79,142,247,.15);
}

/* Images: subtle grain-free premium framing */
.about-photo-wrap img,img[class*="photo"],img[class*="cert"]{
  border-radius:16px;
  box-shadow:var(--shadow-soft);
  transition:transform .4s ease;
}
.about-photo-wrap img:hover{transform:scale(1.02)}

/* Scrollbar — thin, on-brand */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(167,139,250,.3);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,.5)}

/* Focus states — accessible + on-brand (important for premium polish) */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px;
}

/* Selection color */
::selection{background:rgba(167,139,250,.35);color:#fff}