/* Bio-only stylesheet (legacy portfolio CSS removed) */

/* ========== Tokens (One Piece-inspired, symbolic only) ========== */
:root{
  --bg: #0b0d10;                 /* charcoal */
  --bg-2: #0f1216;               /* graphite */
  --card: rgba(18, 20, 24, 0.92);
  --border: rgba(255,255,255,0.08);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);

  --pirate-red: #8d1b24;         /* deep red (sparingly) */
  --pirate-red-soft: rgba(141,27,36,0.20);
  --gold: #caa35a;               /* muted gold */
  --gold-soft: rgba(202,163,90,0.18);

  --ring: rgba(141,27,36,0.28);
  --shadow: 0 22px 70px rgba(0,0,0,0.55);
  --radius: 18px;

  --ff: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Smooth scrolling only */
html{ scroll-behavior: smooth; }

/* Background texture hint (parchment/wood at ~2–3% opacity, CSS-only) */
body{
  margin:0;
  font-family: var(--ff);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(202,163,90,0.04), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(141,27,36,0.04), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 10px),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

/* ========== Reset ========== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--ff);
  color: var(--text);
}
a{ color: inherit; text-decoration:none; }
a:visited{ color: inherit; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; }

/* ========== Layout ========== */
main{ padding: 24px 16px 56px; }
.bio-shell{ max-width: 720px; margin: 0 auto; }

/* Reused */
.content-card{
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 30px rgba(0,0,0,0.28);
}
.separator{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,27,36,0.55), transparent);
  margin: 14px 0;
}

/* Type */
.name{ margin: 14px 0 6px; font-size: 24px; font-weight: 650; position: relative; }
.name::after{
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(141,27,36,0.85), transparent);
  box-shadow: 0 0 18px rgba(141,27,36,0.18);
}
.h3{ font-size: 17px; }

/* ========== Profile ========== */
.bio-profile{
  text-align:center;
  padding: 24px 18px 18px;
  position: relative;
}
.bio-avatar{
  display:inline-flex;
  overflow:hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.bio-avatar img{ width: 96px; height: 96px; object-fit: cover; border-radius: 999px; }

/* Social */
.social-list{
  display:flex;
  justify-content:center;
  gap: 12px;
  padding:0;
  margin: 12px 0 0;
  flex-wrap: wrap;
}
.social-link{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.social-link:hover,
.social-link:focus-visible{
  color: rgba(255,255,255,0.92);
  border-color: rgba(141,27,36,0.35);
  box-shadow:
    0 16px 52px rgba(0,0,0,0.45),
    0 0 0 1px rgba(141,27,36,0.18),
    0 0 22px rgba(141,27,36,0.14);
}

/* Share button (top-right) */
.bio-share-btn{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  color: var(--gold);
  background: rgba(202,163,90,0.08);
  box-shadow: inset 0 0 0 1px rgba(202,163,90,0.22);
}
.bio-share-btn:hover{
  background: rgba(0,0,0,0.30);
  box-shadow: 0 14px 44px rgba(245,193,108,0.16), inset 0 0 0 1px rgba(245,193,108,0.38);
}
.bio-share-btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

/* ========== Pill links ========== */
.bio-pill-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 12px;
}
.bio-pill{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bio-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(245,193,108,0.22);
}
.bio-pill:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}
.bio-pill__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(245,193,108,0.08);
  box-shadow: inset 0 0 0 1px rgba(245,193,108,0.18);
  flex: 0 0 auto;
  color: var(--gold);
}
.bio-pill__icon svg{ width: 22px; height: 22px; }
.bio-pill__text{ text-align:left; min-width:0; }
.bio-pill__title{ display:block; }
.bio-pill__desc{ display:block; margin-top: 2px; font-size: 13px; color: rgba(245,193,108,0.65); }

/* ========== Post widget (under Case Studies) ========== */
.bio-post{
  display:block;
  min-height: 170px;
  padding: 22px 20px;
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bio-post::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bio-post-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
}
.bio-post::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.72));
}
.bio-post__content{ position: relative; z-index: 1; display:block; }
.bio-post__title{ display:block; }
.bio-post__body{ margin: 10px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.80); line-height: 1.4; }
.bio-post__actions{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bio-post__btn{
  display:inline-flex;
  align-items:center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bio-post__btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 44px rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(245,193,108,0.20);
}
.bio-post__btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
.bio-post__btn--primary{
  color: var(--gold);
  background: rgba(202,163,90,0.10);
  box-shadow: inset 0 0 0 1px rgba(202,163,90,0.22);
}
.bio-post:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(245,193,108,0.18);
}
.bio-post:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

/* ========== Spotify card (kept green) ========== */
.spotify-card{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background:
    radial-gradient(900px circle at 0% 0%, rgba(29,185,84,0.18), rgba(0,0,0,0) 62%),
    radial-gradient(700px circle at 100% 0%, rgba(29,185,84,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(10,18,13,1), rgba(6,10,8,1));
  color:#fff;
  border: 1px solid rgba(29,185,84,0.16);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.spotify-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 26px rgba(29,185,84,0.10);
}
.spotify-icon svg{ width: 42px; height: 42px; }
.spotify-text .label{ font-size: 13px; opacity: .85; display:block; }
.spotify-text strong{ font-size: 20px; letter-spacing: .2px; }
.spotify-cta{ margin-left:auto; font-weight: 600; color: rgba(29,185,84,0.85); }

/* ========== Share modal ========== */
.bio-modal[hidden]{ display:none !important; }
.bio-modal{
  position: fixed;
  inset: 0;
  padding: 18px;
  background: rgba(0,0,0,0.55);
  display:grid;
  place-items:center;
  z-index: 9999;
}
.bio-modal__dialog{
  width: min(560px, 100%);
  padding: 18px;
}
.bio-modal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.form-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(245,193,108,0.18);
  background: rgba(255,255,255,0.03);
  color: var(--gold);
  cursor: pointer;
}
.form-btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}
.bio-modal__links{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 560px){
  .bio-modal__links{ grid-template-columns: 1fr 1fr; }
}
.bio-share-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--gold);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(245,193,108,0.18);
}
.bio-share-link:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

/* =========================================
   BIO PAGE UI FIXES (bullets, modal, outer box)
   ========================================= */
.bio-page .bio-shell{
  /* big outer container (wider only) */
  max-width: 1040px;

  /* more space at "header" + "footer" inside the outer box */
  padding-top: 34px;    /* was 22px via padding shorthand */
  padding-bottom: 38px; /* was 26px via padding shorthand */
  margin: 18px auto 0;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* Keep inner feel "small" like earlier */
.bio-page{
  font-size: 15px; /* slightly smaller overall */
}

/* NEW: constrain all direct children back to the old content width */
.bio-page .bio-shell > *{
  width: 100%;
  max-width: 720px;      /* keeps inner cards/sections same size as earlier */
  margin-left: auto;
  margin-right: auto;
}

/* Remove dots/bullets before social + pills (your issue) */
.bio-page .social-list,
.bio-page .bio-pill-list{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.bio-page .social-item,
.bio-page .bio-pill-list > li{
  list-style: none !important;
}

/* Make share popup NOT transparent (dialog should be a solid box) */
.bio-page .bio-modal{
  background: rgba(0,0,0,0.82); /* overlay can stay; dialog should be solid */
}

/* If dialog uses .content-card::before glass layer, force it solid */
.bio-page .bio-modal__dialog{
  background: rgba(14,16,20,0.98) !important;
  border: 1px solid rgba(141,27,36,0.18);
}
.bio-page .bio-modal__dialog.content-card::before{
  background: rgba(14,16,20,0.98) !important;
  opacity: 1 !important;
}

/* Optional: tighten the profile card so structure feels “boxed” */
.bio-page .bio-profile.content-card{
  border-radius: 22px;
}

/* Optional: keep share links boxed + readable */
.bio-page .bio-share-link{
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
}

/* Smaller icon buttons */
.bio-page .social-link{
  width: 40px;   /* was 44px */
  height: 40px;  /* was 44px */
  border-radius: 12px; /* was 14px */
}

.bio-page .bio-share-btn{
  width: 40px;   /* was 44px */
  height: 40px;  /* was 44px */
}

/* Slightly tighter cards */
.bio-page .bio-profile{ padding: 20px 16px 16px; } /* was 24px 18px 18px */

.bio-page .bio-pill{ padding: 14px 14px; }         /* was 16px 16px */
.bio-page .bio-pill__icon{
  width: 42px;   /* was 46px */
  height: 42px;  /* was 46px */
}
.bio-page .bio-pill__desc{ font-size: 12.5px; }    /* was 13px */

/* Spotify card slightly smaller */
.bio-page .spotify-card{ padding: 18px 20px; }     /* was 20px 24px */
.bio-page .spotify-icon svg{ width: 38px; height: 38px; } /* was 42px */
.bio-page .spotify-text strong{ font-size: 18px; } /* was 20px */

/* Mobile: soften paddings + improve readability */
@media (max-width: 520px){
  main{ padding: 18px 12px 44px; }

  .bio-page .bio-shell{
    /* On very small screens the “outer box” + inner cards can feel like a double border.
       Keep layout simple: let the cards be the main containers. */
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 10px;
    border-radius: 0;
  }

  .bio-page .bio-shell > *{ max-width: 100%; }

  .bio-post{
    min-height: 0;
    padding: 18px 16px;
  }
  .bio-post__title{ font-size: 16px; line-height: 1.25; }
  .bio-post__body{ font-size: 13px; line-height: 1.55; }
  .bio-post__actions{ gap: 8px; }
  .bio-post__btn{ height: 34px; padding: 0 10px; font-size: 12.5px; }
}

/* CTA section: single card now */
.bio-cta{
  display: block; /* was grid */
}

/* REMOVE/disable contact card styles (no longer used) */
/*
.contact-card{ ... }
.contact-card:hover{ ... }
.contact-card__icon{ ... }
.contact-card__icon svg{ ... }
.contact-card__text{ ... }
.contact-card__title{ ... }
.contact-card__desc{ ... }
.contact-card__cta{ ... }
*/

/*-----------------------------------*\
  #CELEBRATION POPUP
\*-----------------------------------*/
#celebration-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

#celebration-root .celebration-popup-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
#celebration-root .celebration-popup-overlay.show { opacity: 1; }

#celebration-root .celebration-popup {
  pointer-events: auto;
  margin-top: 14px;
  width: min(560px, calc(100% - 28px));
  border-radius: 18px;
  padding: 18px 18px 16px;

  background: rgba(18, 18, 18, 0.78);
  border: 1px solid rgba(245, 193, 108, 0.20);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.60), 0 0 28px rgba(245,193,108,0.12);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
#celebration-root .celebration-popup-overlay.show .celebration-popup {
  transform: translateY(0) scale(1);
  opacity: 0.94;
}

#celebration-root .celebration-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;

  color: var(--gold);
  background: rgba(245, 193, 108, 0.08);
  border: 1px solid rgba(245, 193, 108, 0.14);
}
#celebration-root .celebration-popup__title {
  margin: 0;
  padding-right: 44px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--gold);
}
#celebration-root .celebration-popup__subtext {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}

/* Theme rings */
#celebration-root .celebration-popup-overlay[data-theme="new-year"] .celebration-popup {
  background:
    linear-gradient(135deg, rgba(18,18,18,0.82), rgba(18,18,18,0.70)) padding-box,
    linear-gradient(90deg, rgba(245,193,108,0.55), rgba(58,233,205,0.28), rgba(255,92,120,0.22)) border-box;
  border: 1px solid transparent;
}
#celebration-root .celebration-popup-overlay[data-theme="christmas"] .celebration-popup {
  background:
    linear-gradient(135deg, rgba(18,18,18,0.82), rgba(18,18,18,0.70)) padding-box,
    linear-gradient(90deg, rgba(245,193,108,0.50), rgba(40,175,86,0.26), rgba(220,64,64,0.22)) border-box;
  border: 1px solid transparent;
}
#celebration-root .celebration-popup-overlay[data-theme="diwali"] .celebration-popup {
  background:
    linear-gradient(135deg, rgba(18,18,18,0.82), rgba(18,18,18,0.70)) padding-box,
    linear-gradient(90deg, rgba(245,193,108,0.55), rgba(255,138,64,0.26), rgba(230,70,70,0.18)) border-box;
  border: 1px solid transparent;
}
#celebration-root .celebration-popup-overlay[data-theme="holi"] .celebration-popup {
  background:
    linear-gradient(135deg, rgba(18,18,18,0.82), rgba(18,18,18,0.70)) padding-box,
    linear-gradient(90deg, rgba(245,193,108,0.52), rgba(255,120,170,0.24), rgba(70,210,140,0.18)) border-box;
  border: 1px solid transparent;
}
#celebration-root .celebration-popup-overlay[data-theme="republic-day"] .celebration-popup {
  background:
    linear-gradient(135deg, rgba(18,18,18,0.82), rgba(18,18,18,0.70)) padding-box,
    linear-gradient(90deg, rgba(245,193,108,0.50), rgba(255,145,72,0.22), rgba(80,200,120,0.18)) border-box;
  border: 1px solid transparent;
}

/* Effects (kept minimal) */
#celebration-root .celebration-effect { position:absolute; inset:0; pointer-events:none; opacity:0; }
#celebration-root .celebration-popup-overlay.show .celebration-effect { opacity: 1; }
@media (max-width: 900px){ #celebration-root .celebration-effect{ display:none; } }

#celebration-root .celebration-effect::before,
#celebration-root .celebration-effect::after{
  content:"";
  position:absolute;
  top:-14px;
  left:50%;
  border-radius:999px;
  transform: translateX(-50%);
}
#celebration-root .celebration-popup-overlay[data-effect="confetti"] .celebration-effect::before{
  width:3px; height:3px; background: rgba(245,193,108,0.85);
  box-shadow: -260px 0 rgba(245,193,108,0.55), 260px -20px rgba(245,193,108,0.45);
  animation: celebration-fall-soft 3s ease-out 0.05s infinite;
}
#celebration-root .celebration-popup-overlay[data-effect="snow"] .celebration-effect::before{
  width:3px; height:3px; background: rgba(255,255,255,0.28);
  box-shadow: -250px 0 rgba(255,255,255,0.22), 230px -10px rgba(255,255,255,0.20);
  animation: celebration-snow-drift 3.2s ease-out 0.1s infinite;
}
#celebration-root .celebration-popup-overlay[data-effect="sparkles"] .celebration-effect::before{
  width:3px; height:3px; background: rgba(245,193,108,0.6);
  box-shadow: -250px 0 rgba(245,193,108,0.45), 230px -10px rgba(255,138,64,0.22);
  filter: drop-shadow(0 0 10px rgba(245,193,108,0.18));
  animation: celebration-fall-soft 3.0s ease-out 0.08s infinite;
}
#celebration-root .celebration-popup-overlay[data-effect="colors"] .celebration-effect::before{
  width:4px; height:4px; background: rgba(245,193,108,0.28);
  box-shadow: -250px 0 rgba(255,120,170,0.20), 230px -10px rgba(245,193,108,0.12);
  animation: celebration-float-soft 3.2s ease-out 0.1s infinite;
}
#celebration-root .celebration-popup-overlay[data-effect="tricolor"] .celebration-effect::before{
  width:3px; height:3px; background: rgba(245,193,108,0.18);
  box-shadow: -250px 0 rgba(255,145,72,0.18), 230px -10px rgba(80,200,120,0.10);
  animation: celebration-fall-soft 3.0s ease-out 0.1s infinite;
}

@keyframes celebration-fall-soft{
  0%{ transform: translateX(-50%) translateY(0); opacity: 0.55; }
  100%{ transform: translateX(-50%) translateY(170px); opacity: 0; }
}
@keyframes celebration-snow-drift{
  0%{ transform: translateX(-50%) translateY(0) translateX(0); opacity: 0.45; }
  100%{ transform: translateX(-50%) translateY(170px) translateX(10px); opacity: 0; }
}
@keyframes celebration-float-soft{
  0%{ transform: translateX(-50%) translateY(0); opacity: 0.40; }
  100%{ transform: translateX(-50%) translateY(150px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #celebration-root .celebration-popup,
  #celebration-root .celebration-popup-overlay{ transition:none; transform:none; }
  #celebration-root .celebration-effect::before,
  #celebration-root .celebration-effect::after{ animation:none !important; }
}