/* ===================================================================
   Mahedi Hassan — shared site stylesheet
   =================================================================== */
:root{
  --bg:#0a0c13;
  --bg-soft:#10131c;
  --card:#161a26;
  --card-2:#1b202e;
  --line:#242938;
  --ink:#f4f5f9;
  --ink-dim:#9aa0b4;
  --accent:#2fd1c0;
  --accent-2:#f2b134;
  --brand-1:#f5a324;
  --brand-2:#e8242a;
  --brand-grad:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --brand-mid:#ee6327;
  --maxw:1280px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body::before{
  content:''; position:fixed; top:0; left:0; right:0; height:3px; z-index:300;
  background:var(--brand-grad);
}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter', sans-serif; font-weight:300; line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.disp{ font-family:'Poppins', sans-serif; font-weight:700; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
::selection{ background:var(--accent); color:#0a0c13; }
.kicker{ font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; display:block; font-family:'Poppins',sans-serif; }

/* ---------- Header (always transparent, no icons) ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 48px; background:linear-gradient(to bottom, rgba(10,12,19,0.6) 0%, rgba(10,12,19,0.25) 65%, transparent 100%);
  transition:padding .3s ease;
}
header.scrolled{ padding:20px 48px; background:linear-gradient(to bottom, rgba(10,12,19,0.85) 0%, rgba(10,12,19,0.55) 75%, transparent 100%); }
.logo{ display:flex; align-items:center; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5)); transition:filter .25s ease; }
.logo:hover{ filter:drop-shadow(0 2px 14px rgba(232,36,42,0.45)); }
.logo-img{ height:32px; width:auto; display:block; }
nav{ display:flex; gap:28px; }
nav a{ font-size:0.88rem; font-weight:500; color:var(--ink-dim); transition:color .25s ease; text-shadow:0 2px 10px rgba(0,0,0,0.5); white-space:nowrap; }
nav a:hover, nav a.active{ color:var(--ink); }
.head-right{ display:flex; align-items:center; gap:16px; }
.search-pill{
  display:flex; align-items:center; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:10px 18px; width:190px;
  backdrop-filter:blur(6px);
}
.search-pill input{ background:none; border:none; outline:none; color:var(--ink); font-size:0.84rem; width:100%; }
.search-pill input::placeholder{ color:var(--ink-dim); }
.menu-toggle{ display:none; background:none; border:none; color:var(--ink); font-size:0.86rem; font-weight:500; letter-spacing:0.04em; text-shadow:0 2px 10px rgba(0,0,0,0.5); }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; height:100vh; min-height:560px; display:flex; align-items:center; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; background-size:cover; background-position:center; }
.hero-slide.active{ opacity:1; }
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,12,19,0.62) 8%, rgba(10,12,19,0.42) 40%, rgba(10,12,19,0.08) 68%, rgba(10,12,19,0.45) 100%),
    linear-gradient(to top, rgba(10,12,19,0.65) 0%, rgba(10,12,19,0) 26%);
}
.hero-content{ position:relative; z-index:5; padding:140px 40px 60px; width:100%; }
.hero-content h1, .hero-content p, .hero-meta{ text-shadow:0 2px 14px rgba(0,0,0,0.65); }
.hero-meta{ display:flex; gap:14px; align-items:center; font-size:0.78rem; color:var(--ink-dim); margin-bottom:14px; flex-wrap:wrap; }
.hero-meta .pipe{ color:var(--line); }
.hero-meta .badge{ color:var(--accent-2); font-weight:600; }
.hero-content h1{ font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.06; max-width:560px; margin-bottom:16px; }
.hero-content p{ color:var(--ink-dim); max-width:400px; margin-bottom:24px; font-size:0.88rem; }
.hero-btns{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn-solid{
  display:inline-flex; align-items:center; gap:10px; background:var(--brand-grad); color:#fff;
  padding:12px 24px; border-radius:8px; font-weight:600; font-size:0.8rem; letter-spacing:0.02em;
  border:none; transition:transform .25s ease, box-shadow .25s ease;
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(232,36,42,0.32); }
.btn-outline{
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); color:var(--ink);
  padding:12px 22px; border-radius:8px; font-weight:500; font-size:0.8rem; background:rgba(255,255,255,0.03);
  transition:border-color .25s ease;
}
.btn-outline:hover{ border-color:var(--ink-dim); }

.hero-controls{ position:absolute; right:40px; bottom:52px; z-index:6; display:flex; align-items:flex-end; gap:18px; }
.hero-arrows{ display:flex; gap:12px; margin-bottom:6px; }
.arrow-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:all .25s ease;
}
.arrow-btn:hover{ background:var(--brand-grad); color:#fff; border-color:transparent; }

.poster-strip{ display:none; gap:12px; align-items:flex-end; }
.poster-mini{
  width:74px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; border:2px solid transparent;
  background-size:cover; background-position:center; cursor:pointer; opacity:0.55; transform:translateY(6px);
  transition:all .3s ease; box-shadow:0 12px 26px rgba(0,0,0,0.45);
}
.poster-mini.active{ opacity:1; transform:translateY(0) scale(1.12); border-color:var(--accent); }
.poster-mini:hover{ opacity:1; transform:translateY(0); }

/* ---------- Page hero (about / career / contact / gallery) ---------- */
.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:flex-end; overflow:hidden;
  background-size:cover; background-position:center; padding:150px 0 56px;
}
.page-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,19,0.32) 0%, rgba(10,12,19,0.48) 55%, var(--bg) 100%);
}
.page-hero-content{ position:relative; z-index:2; width:100%; }
.breadcrumb{ font-size:0.78rem; color:var(--ink-dim); margin-bottom:16px; }
.breadcrumb a{ color:var(--ink-dim); }
.breadcrumb a:hover{ color:var(--brand-mid); }
.page-hero h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); margin-bottom:14px; }
.page-hero p{ color:var(--ink-dim); max-width:520px; font-size:1rem; }

/* ---------- Platforms / Where to Listen ---------- */
.platforms{ padding:32px 0; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.platforms-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.platforms-label{ font-family:'Poppins',sans-serif; font-size:0.82rem; font-weight:600; color:var(--ink-dim); white-space:nowrap; }
.plat-grid{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; flex:1; }
.plat-chip{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--line); border-radius:9px; padding:7px 12px 7px 8px;
  transition:transform .25s ease, border-color .25s ease; white-space:nowrap;
}
.plat-chip::before{ content:''; position:absolute; inset:0; background:var(--brand); opacity:0; transition:opacity .25s ease; }
.plat-chip:hover{ transform:translateY(-2px); border-color:var(--brand); }
.plat-chip:hover::before{ opacity:0.12; }
.plat-chip .ic{ width:19px; height:19px; border-radius:5px; overflow:hidden; flex-shrink:0; position:relative; z-index:1; }
.plat-chip .ic svg{ width:100%; height:100%; display:block; }
.plat-chip .nm{ font-family:'Poppins',sans-serif; font-size:0.76rem; font-weight:600; position:relative; z-index:1; }

/* ---------- Section shell ---------- */
section{ padding:90px 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; flex-wrap:wrap; gap:18px; }
.sec-head h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); }
.tabs{ display:flex; gap:24px; flex-wrap:wrap; }
.tab{ font-size:0.85rem; color:var(--ink-dim); font-weight:500; cursor:pointer; padding-bottom:4px; border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none; font-family:'Inter',sans-serif; }
.tab.active{ color:var(--brand-mid); border-color:var(--brand-mid); }
.view-all{ font-size:0.8rem; color:var(--ink-dim); display:flex; align-items:center; gap:6px; }
.view-all:hover{ color:var(--brand-mid); }
.carousel-nav{ display:flex; gap:10px; }
.carousel-nav button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.carousel-nav button:hover{ background:var(--brand-grad); color:#fff; border-color:transparent; }

/* ---------- Song carousel ---------- */
.song-row{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:8px; scrollbar-width:none; }
.song-row::-webkit-scrollbar{ display:none; }
.song-card{ flex:0 0 180px; }
.song-cover{
  aspect-ratio:2/3; border-radius:12px; overflow:hidden; position:relative; background-size:cover; background-position:center;
  margin-bottom:12px; box-shadow:0 14px 30px rgba(0,0,0,0.35);
}
.song-cover .badge-tag{
  position:absolute; top:10px; left:10px; background:rgba(10,12,19,0.75); color:var(--accent-2);
  font-size:0.62rem; font-weight:700; letter-spacing:0.06em; padding:4px 9px; border-radius:5px; text-transform:uppercase;
}
.song-cover .play-ov{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,12,19,0.35);
  opacity:0; transition:opacity .25s ease;
}
.song-card:hover .play-ov{ opacity:1; }
.play-circle{ width:46px; height:46px; border-radius:50%; background:var(--brand-grad); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(232,36,42,0.4); transition:transform .3s ease, box-shadow .3s ease; }
.play-circle::after{ content:''; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid #fff; margin-left:3px; }
.song-card:hover .play-circle{ transform:scale(1.08); box-shadow:0 10px 26px rgba(232,36,42,0.55); }
.song-meta{ font-size:0.74rem; color:var(--ink-dim); margin-bottom:4px; }
.song-title{ font-size:0.95rem; font-weight:600; font-family:'Poppins',sans-serif; }

/* ---------- Latest grid ---------- */
.grid-9{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:20px; }
.grid-9 .song-card{ flex:none; }
.grid-9 .hide-extra{ display:none; }
.grid-9.expanded .hide-extra{ display:block; }
.more-wrap{ text-align:center; margin-top:36px; }
.more-btn{ background:none; border:1px solid var(--line); color:var(--ink); padding:13px 34px; border-radius:8px; font-size:0.85rem; transition:all .25s ease; }
.more-btn:hover{ border-color:var(--brand-mid); color:var(--brand-mid); }

/* ---------- About teaser (home, unique style) ---------- */
.about-teaser{
  position:relative; overflow:hidden; padding:120px 0;
  background:radial-gradient(ellipse at 15% 20%, rgba(47,209,192,0.10), transparent 55%),
             radial-gradient(ellipse at 85% 80%, rgba(242,177,52,0.08), transparent 50%),
             var(--bg-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.marquee{ position:absolute; top:14%; left:0; right:0; overflow:hidden; white-space:nowrap; pointer-events:none; z-index:0; }
.marquee-track{
  display:inline-block; font-family:'Poppins',sans-serif; font-weight:800; font-size:7rem; letter-spacing:0.02em;
  color:transparent; -webkit-text-stroke:1px rgba(244,245,249,0.08); text-stroke:1px rgba(244,245,249,0.08);
  animation:marquee 34s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.teaser-inner{ position:relative; z-index:1; display:grid; grid-template-columns:0.55fr 1fr; gap:70px; align-items:center; }
.teaser-portrait-wrap{ position:relative; width:min(320px, 100%); aspect-ratio:1/1; margin:0 auto; }
.teaser-ring{
  position:absolute; inset:-14px; border-radius:50%; border:1.5px dashed rgba(47,209,192,0.5);
  animation:spin 26s linear infinite;
}
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.teaser-portrait{
  width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center;
  border:3px solid var(--bg-soft); box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px var(--line);
}
.teaser-badge{
  position:absolute; bottom:6%; right:2%; background:var(--accent); color:#06120f; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:0.72rem; padding:9px 14px; border-radius:999px; box-shadow:0 10px 24px rgba(47,209,192,0.35);
}
.teaser-text .teaser-quote{
  font-family:'Poppins',sans-serif; font-style:italic; font-weight:500; font-size:clamp(1.3rem, 2.6vw, 1.8rem);
  line-height:1.5; margin-bottom:28px;
}
.teaser-text .teaser-sub{ color:var(--ink-dim); font-size:0.95rem; max-width:480px; margin-bottom:32px; }

/* ---------- Career ---------- */
.career{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.career-layout{ display:grid; grid-template-columns:1.1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.career-feature{ position:relative; min-height:460px; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:36px; }
.career-feature::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,19,0.92), rgba(10,12,19,0.15)); }
.career-feature-content{ position:relative; z-index:2; }
.career-feature .proj-tag{ margin-bottom:10px; }
.career-feature h3{ font-size:1.6rem; margin-bottom:10px; }
.career-feature p{ color:var(--ink-dim); font-size:0.9rem; max-width:400px; }
.career-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.career-cell{ position:relative; min-height:229px; background:var(--card); background-size:cover; background-position:center; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; }
.career-cell::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,19,0.9), rgba(10,12,19,0.1)); }
.career-cell-content{ position:relative; z-index:2; }
.proj-tag{ font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-2); font-weight:700; }
.career-cell h4{ font-family:'Poppins',sans-serif; font-size:1rem; font-weight:600; margin-top:6px; }

/* ---------- Career page: filterable grid ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.proj-card{
  position:relative; min-height:260px; border-radius:14px; overflow:hidden; background-size:cover; background-position:center;
  padding:24px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line);
  transition:transform .3s ease;
}
.proj-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,19,0.94), rgba(10,12,19,0.15)); }
.proj-card:hover{ transform:translateY(-5px); }
.proj-card-content{ position:relative; z-index:2; }
.proj-card h4{ font-family:'Poppins',sans-serif; font-size:1.08rem; font-weight:600; margin-top:8px; margin-bottom:6px; }
.proj-card p{ color:var(--ink-dim); font-size:0.83rem; }
.proj-card.hide-cat, .blog-card.hide-cat, .song-card.hide-cat{ display:none; }

/* ---------- Blog grid ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.blog-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .25s ease, border-color .25s ease; }
.blog-card:hover{ transform:translateY(-4px); border-color:var(--brand-mid); }
.blog-thumb{ aspect-ratio:16/10; background-size:cover; background-position:center; }
.blog-body{ padding:22px; }
.blog-cat{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:10px; display:block; }
.blog-body h3{ font-size:1.02rem; margin-bottom:10px; line-height:1.35; }
.blog-body p{ color:var(--ink-dim); font-size:0.85rem; margin-bottom:14px; }
.blog-date{ font-size:0.76rem; color:var(--ink-dim); }

/* ---------- About (shared basic grid, used on about.html intro) ---------- */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
.about-portrait{ aspect-ratio:4/5; border-radius:16px; overflow:hidden; border:1px solid var(--line); background-size:cover; background-position:center; position:relative; }
.about-portrait .cap{ position:absolute; bottom:16px; left:16px; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:rgba(10,12,19,0.55); padding:6px 12px; border-radius:6px; }

/* ---------- Round rotating portrait slider (About Me) ---------- */
.portrait-orbit{ position:relative; width:100%; max-width:380px; aspect-ratio:1/1; margin:0 auto; }
.orbit-ring{
  position:absolute; inset:-12px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--brand-1), var(--accent-2) 25%, var(--accent) 50%, var(--brand-2) 75%, var(--brand-1) 100%);
  animation:orbitSpin 9s linear infinite;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter:blur(0.2px);
}
.orbit-ring::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 24px 2px rgba(47,209,192,0.35);
}
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.portrait-orbit:hover .orbit-ring{ animation-duration:3s; }
.orbit-photos{ position:absolute; inset:0; border-radius:50%; overflow:hidden; border:5px solid var(--bg); box-shadow:0 24px 55px rgba(0,0,0,0.55); background:var(--card); }
.orbit-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.1); transition:opacity 1.1s ease, transform 7s ease; }
.orbit-slide.active{ opacity:1; transform:scale(1); z-index:1; }
.orbit-photos .cap{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:rgba(10,12,19,0.55); padding:6px 14px; border-radius:20px; white-space:nowrap; }
.orbit-dots{ position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); display:flex; gap:9px; }
.orbit-dots .dot{ width:7px; height:7px; border-radius:50%; background:var(--line); border:none; padding:0; cursor:pointer; transition:background .3s ease, transform .3s ease; }
.orbit-dots .dot.active{ background:var(--accent); transform:scale(1.35); }
.orbit-dots .dot:hover{ background:var(--accent-2); }

.about-text p{ color:var(--ink-dim); margin-bottom:18px; max-width:580px; }
.about-text p:first-of-type{ color:var(--ink); font-size:1.1rem; font-family:'Poppins',sans-serif; font-weight:500; }
.profile-name{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:4px; }
.profile-role{ display:block; color:var(--accent-2); font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem; letter-spacing:0.02em; margin-bottom:22px; }

/* ---------- Membership credential card ---------- */
.membership-card{ display:flex; align-items:center; gap:26px; padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--card); max-width:720px; }
.membership-ic{ width:60px; height:60px; border-radius:50%; background:var(--brand-grad); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.membership-ic svg{ width:28px; height:28px; }
.membership-card h4{ font-size:1.05rem; margin-bottom:6px; }
.membership-card p{ color:var(--ink-dim); font-size:0.87rem; }
.stat-row{ display:flex; gap:40px; margin-top:34px; flex-wrap:wrap; }
.stat-row div strong{ display:block; font-family:'Poppins',sans-serif; font-size:1.8rem; color:var(--accent); }
.stat-row div span{ font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- About page: four crafts + timeline + values ---------- */
.craft-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.craft-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 24px; transition:transform .3s ease, border-color .3s ease; }
.craft-card:hover{ transform:translateY(-5px); border-color:var(--brand-mid); }
.craft-num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:0.75rem; color:var(--accent); margin-bottom:16px; }
.craft-card h3{ font-size:1.05rem; margin-bottom:10px; }
.craft-card p{ color:var(--ink-dim); font-size:0.85rem; }

.timeline{ position:relative; padding-left:36px; border-left:1px solid var(--line); }
.tl-item{ position:relative; padding-bottom:44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-42px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 0 4px var(--bg-soft); }
.tl-dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--accent); opacity:0; animation:tlPulse 2.6s ease-out infinite; }
.tl-item:nth-child(2) .tl-dot::after{ animation-delay:.4s; }
.tl-item:nth-child(3) .tl-dot::after{ animation-delay:.8s; }
.tl-item:nth-child(4) .tl-dot::after{ animation-delay:1.2s; }
.tl-item:nth-child(5) .tl-dot::after{ animation-delay:1.6s; }
.tl-item:nth-child(6) .tl-dot::after{ animation-delay:2s; }
@keyframes tlPulse{ 0%{ transform:scale(0.6); opacity:0.55; } 100%{ transform:scale(1.6); opacity:0; } }
.tl-year{ font-family:'Poppins',sans-serif; color:var(--accent); font-weight:700; font-size:0.85rem; margin-bottom:6px; display:block; }
.tl-item h4{ font-size:1.05rem; margin-bottom:6px; }
.tl-item p{ color:var(--ink-dim); font-size:0.88rem; max-width:560px; }

.values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.value-card{ padding:26px; border:1px solid var(--line); border-radius:14px; background:var(--bg-soft); }
.value-card h4{ font-size:1rem; margin-bottom:8px; }
.value-card p{ color:var(--ink-dim); font-size:0.85rem; }

/* ---------- Hobbies / interests grid ---------- */
.hobby-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
.hobby-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:30px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card); transition:transform .3s ease, border-color .3s ease; }
.hobby-card:hover{ transform:translateY(-5px); border-color:var(--brand-mid); }
.hobby-ic{ width:52px; height:52px; border-radius:50%; background:var(--brand-grad); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hobby-ic svg{ width:24px; height:24px; }
.hobby-card h4{ font-size:0.92rem; }
.hobby-card span{ font-size:0.78rem; color:var(--ink-dim); line-height:1.45; }

.cta-band{
  border-radius:18px; padding:56px 48px; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 30% 30%, rgba(47,209,192,0.14), transparent 55%),
             radial-gradient(ellipse at 75% 70%, rgba(242,177,52,0.10), transparent 50%), var(--card);
  border:1px solid var(--line);
}
.cta-band h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); margin-bottom:14px; }
.cta-band p{ color:var(--ink-dim); max-width:520px; margin:0 auto 28px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact h2{ font-size:clamp(2rem, 4vw, 2.8rem); max-width:520px; }
.contact > p{ color:var(--ink-dim); margin-top:18px; max-width:440px; }
.contact-links{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.contact-links a{ font-size:0.98rem; padding:10px 0; border-bottom:1px solid var(--line); display:inline-flex; justify-content:space-between; width:100%; max-width:400px; color:var(--ink-dim); transition:color .25s ease, border-color .25s ease; }
.contact-links a:hover{ color:var(--brand-mid); border-color:var(--brand-mid); }
form{ display:flex; flex-direction:column; gap:18px; background:var(--card); border:1px solid var(--line); padding:32px; border-radius:14px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); }
.field input, .field textarea{ background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-family:'Inter', sans-serif; font-size:0.94rem; padding:12px 14px; outline:none; transition:border-color .25s ease; }
.field input:focus, .field textarea:focus{ border-color:var(--brand-mid); }
.field textarea{ resize:vertical; min-height:90px; }
.submit-btn{ align-self:flex-start; background:var(--brand-grad); border:none; color:#fff; padding:14px 32px; border-radius:8px; font-size:0.85rem; font-weight:600; transition:transform .25s ease, box-shadow .25s ease; }
.submit-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(232,36,42,0.32); }
.form-note{ font-size:0.78rem; color:var(--ink-dim); }

.avail-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:56px; }
.avail-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; }
.avail-card h4{ font-size:0.98rem; margin-bottom:8px; }
.avail-card p{ color:var(--ink-dim); font-size:0.84rem; }

/* ---------- Gallery ---------- */
.gallery-filters{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.gallery-masonry{ column-count:4; column-gap:16px; }
.gallery-item{
  break-inside:avoid; margin-bottom:16px; position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); cursor:pointer; opacity:1; transform:translateY(16px); transition:transform .6s ease;
}
.gallery-item.in-view{ opacity:1; transform:translateY(0); }
.gallery-item img{ width:100%; display:block; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .gi-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
  background:linear-gradient(to top, rgba(10,12,19,0.88) 0%, rgba(10,12,19,0.05) 55%, transparent 100%);
  opacity:0; transition:opacity .3s ease;
}
.gallery-item:hover .gi-overlay{ opacity:1; }
.gallery-item .gi-cat{ font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:4px; }
.gallery-item .gi-title{ font-family:'Poppins',sans-serif; font-size:0.92rem; font-weight:600; }
.gallery-item.gi-hidden{ display:none; }

.gallery-lightbox{
  position:fixed; inset:0; background:rgba(6,7,11,0.94); z-index:300; display:none; align-items:center; justify-content:center; padding:40px;
  backdrop-filter:blur(4px);
}
.gallery-lightbox.open{ display:flex; }
.gallery-lightbox img{ max-width:min(760px,90vw); max-height:80vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.6); margin:0 auto; }
.gallery-lightbox .gl-caption{ text-align:center; margin-top:20px; }
.gallery-lightbox .gl-caption .gi-cat{ font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.gallery-lightbox .gl-caption h3{ font-size:1.2rem; margin-top:6px; }
.gallery-close{ position:absolute; top:32px; right:40px; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim); cursor:pointer; }
.gallery-close:hover{ color:var(--brand-mid); }
.gallery-nav-btn{
  position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,0.06); color:var(--ink); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; z-index:301; transition:all .2s ease;
}
.gallery-nav-btn:hover{ background:var(--brand-grad); color:#fff; }
#glPrev{ left:32px; } #glNext{ right:32px; }

/* ---------- Where to Listen popup (used on pages without the full inline strip) ---------- */
.btn-solid[type="button"]{ cursor:pointer; font-family:inherit; }
.page-hero-content .btn-solid[type="button"]{ margin-top:22px; }
.listen-modal{
  position:fixed; inset:0; background:rgba(6,7,11,0.86); z-index:300; display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(6px);
}
.listen-modal.open{ display:flex; }
.listen-modal-card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:36px 32px; max-width:420px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.listen-modal-card h3{ font-size:1.3rem; margin-bottom:6px; }
.listen-modal-card p{ color:var(--ink-dim); font-size:0.85rem; margin-bottom:22px; }
.listen-modal-close{
  position:absolute; top:20px; right:22px; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-dim); cursor:pointer;
}
.listen-modal-close:hover{ color:var(--brand-mid); }
.listen-modal .plat-grid{ flex-direction:column; align-items:stretch; gap:10px; }
.listen-modal .plat-chip{ width:100%; padding:12px 16px; }
.listen-modal .plat-chip .ic{ width:24px; height:24px; }
.listen-modal .plat-chip .nm{ font-size:0.88rem; }
@media (max-width:560px){
  .listen-modal-card{ padding:28px 22px; }
}

/* ---------- Song video popup (click a song cover that has a YouTube link) ---------- */
.song-card[data-youtube]{ cursor:pointer; }
.video-modal{
  position:fixed; inset:0; background:rgba(6,7,11,0.94); z-index:320; display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(4px);
}
.video-modal.open{ display:flex; }
.video-modal-inner{ position:relative; width:100%; max-width:900px; }
.video-modal-frame{ position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.6); }
.video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal-close{
  position:absolute; top:-34px; right:0; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-dim); cursor:pointer;
}
.video-modal-close:hover{ color:var(--brand-mid); }
@media (max-width:560px){
  .video-modal-close{ top:-30px; }
}

/* ---------- Footer ---------- */
footer{ background:var(--bg-soft); }
.foot-main{ padding-top:52px; padding-bottom:26px; position:relative; }
.foot-main::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand-grad); }
.foot-top{
  display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr 0.95fr; gap:32px;
  margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid var(--line);
}
.foot-logo-img{ height:28px; width:auto; display:block; margin-bottom:14px; }
.foot-col{ min-width:0; }
.foot-col p{ color:var(--ink-dim); font-size:0.83rem; max-width:280px; }
.foot-links h5{ font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px; font-family:'Poppins',sans-serif; }
.foot-links a{ display:block; font-size:0.85rem; color:var(--ink); margin-bottom:10px; opacity:0.8; }
.foot-links a:hover{ color:var(--brand-mid); opacity:1; }
.foot-contact-col{ min-width:0; }
.foot-contact-col h5{ font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px; font-family:'Poppins',sans-serif; }
.foot-contact-line{ display:flex; align-items:flex-start; gap:8px; font-size:0.83rem; color:var(--ink); opacity:0.85; margin-bottom:11px; min-width:0; }
.foot-contact-line svg{ width:14px; height:14px; flex-shrink:0; color:var(--accent); margin-top:2px; }
.foot-contact-line a{ color:var(--ink); overflow-wrap:anywhere; }
.foot-contact-line a:hover{ color:var(--brand-mid); }
.foot-contact-btn{ margin-top:8px; padding:10px 18px; font-size:0.78rem; width:fit-content; }
.socials, .foot-socials{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.social-ic{ width:30px; height:30px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 0 0 1px var(--line); flex-shrink:0; }
.social-ic:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.35); }
.social-ic svg{ width:100%; height:100%; display:block; }
.listen-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.listen-badge{ display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:7px; padding:7px 13px 7px 8px; font-size:0.76rem; color:var(--ink); transition:border-color .25s ease; white-space:nowrap; }
.listen-badge:hover{ border-color:var(--ink-dim); }
.listen-badge svg{ width:16px; height:16px; border-radius:4px; flex-shrink:0; }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.76rem; color:var(--ink-dim); }
.foot-bottom .foot-made{ opacity:0.75; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  nav, .search-pill{ display:none; }
  .menu-toggle{ display:block; }
  .about-grid, .contact-grid, .teaser-inner{ grid-template-columns:1fr; gap:40px; }
  .teaser-portrait-wrap{ order:-1; }
  .career-layout{ grid-template-columns:1fr; }
  .career-feature{ min-height:300px; }
  .blog-grid, .proj-grid, .craft-grid, .values-grid, .avail-grid{ grid-template-columns:1fr 1fr; }
  .hobby-grid{ grid-template-columns:repeat(3, 1fr); }
  .poster-strip{ display:none; }
  .gallery-masonry{ column-count:3; }
  .marquee-track{ font-size:5rem; }
  .foot-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width: 640px){
  .wrap{ padding:0 22px; }
  header{ padding:16px 22px; }
  .hero{ height:auto; min-height:600px; }
  .hero-slide{ background-position:center top; }
  .hero-slide::after{
    background:
      linear-gradient(180deg, rgba(10,12,19,0.15) 0%, rgba(10,12,19,0.35) 55%, rgba(10,12,19,0.92) 100%);
  }
  .hero-content{ padding:120px 22px 44px; }
  .hero-content h1{ max-width:100%; }
  .hero-content p{ max-width:100%; }
  .hero-controls{ right:22px; bottom:26px; }
  .page-hero{ padding:130px 0 40px; }
  .career-grid, .blog-grid, .proj-grid, .craft-grid, .values-grid, .avail-grid{ grid-template-columns:1fr; }
  .hobby-grid{ grid-template-columns:1fr 1fr; }
  .foot-main{ padding-top:44px; }
  .foot-logo-img{ margin-top:6px; }
  .foot-top{ grid-template-columns:1fr; row-gap:32px; }
  .platforms{ padding:26px 0; }
  .platforms-row{ flex-direction:column; align-items:flex-start; gap:14px; }
  .plat-grid{
    flex-wrap:nowrap; overflow-x:auto; gap:10px; width:100%;
    scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;
    padding:2px 22px 10px; margin:0 -22px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .plat-grid::-webkit-scrollbar{ display:none; }
  .plat-chip{ flex:0 0 auto; scroll-snap-align:start; padding:9px 16px 9px 10px; }
  .plat-chip .ic{ width:22px; height:22px; }
  .plat-chip .nm{ font-size:0.78rem; }
  .gallery-masonry{ column-count:2; }
  .marquee-track{ font-size:3.2rem; }
  .cta-band{ padding:40px 24px; }
  .membership-card{ flex-direction:column; text-align:center; padding:26px; }
  .gallery-nav-btn{ width:38px; height:38px; font-size:1rem; }
  #glPrev{ left:12px; } #glNext{ right:12px; }
}

/* ===================================================================
   Scroll reveal & motion
   -------------------------------------------------------------------
   IMPORTANT: these elements are ALWAYS fully opaque/visible by default
   (opacity:1). The scroll-triggered JS only nudges them a few pixels
   into their final position — it never controls whether content is
   visible. This way, even if the reveal script fails to run for any
   reason, nothing on the page ever disappears; at worst you just don't
   see the small slide-in motion.
   =================================================================== */
.reveal{
  opacity:1; transform:translateY(16px);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view{ transform:translateY(0); }

.reveal-left{
  opacity:1; transform:translateX(-24px);
  transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.reveal-left.in-view{ transform:translateX(0); }

.reveal-right{
  opacity:1; transform:translateX(24px);
  transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.reveal-right.in-view{ transform:translateX(0); }

.reveal-stagger > *{
  opacity:1; transform:translateY(14px);
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.in-view > *{ transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.06s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.1s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.14s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.18s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.22s; }
.reveal-stagger.in-view > *:nth-child(7){ transition-delay:.26s; }
.reveal-stagger.in-view > *:nth-child(8){ transition-delay:.3s; }
.reveal-stagger.in-view > *:nth-child(n+9){ transition-delay:.34s; }

/* Hero entrance — pure CSS, plays automatically on load (no JS dependency,
   so the title can never get stuck hidden). JS only adds a quick opacity
   crossfade on top of this when the slide changes. */
.hero-content .hero-meta, .hero-content h1, .hero-content p, .hero-content .hero-btns{
  opacity:0;
  animation:heroPartIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-content .hero-meta{ animation-delay:.1s; }
.hero-content h1{ animation-delay:.22s; }
.hero-content p{ animation-delay:.34s; }
.hero-content .hero-btns{ animation-delay:.46s; }
@keyframes heroPartIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

.hero-controls{
  opacity:0; transform:translateY(16px);
  animation:heroControlsIn .8s cubic-bezier(.22,1,.36,1) .6s forwards;
}
@keyframes heroControlsIn{ to{ opacity:1; transform:translateY(0); } }

/* Song card hover polish */
.song-cover{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.song-card:hover .song-cover{ transform:translateY(-6px) scale(1.035); box-shadow:0 20px 44px rgba(0,0,0,0.5); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right, .reveal-stagger > *,
  .hero-content .hero-meta, .hero-content h1, .hero-content p, .hero-content .hero-btns,
  .hero-controls{
    transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;
  }
  .song-card:hover .song-cover{ transform:none; }
}

/* Blog post detail page */
.post-hero-thumb{ width:100%; height:340px; background-size:cover; background-position:center; border-radius:14px; margin-bottom:36px; }
.post-body{ max-width:720px; margin:0 auto; }
.post-body .blog-cat{ display:inline-block; margin-bottom:14px; }
.post-body h1{ font-size:2.2rem; margin-bottom:10px; }
.post-meta-line{ color:var(--ink-dim); font-size:0.85rem; margin-bottom:32px; }
.post-prose p{ color:var(--ink-dim); font-size:1rem; line-height:1.85; margin-bottom:22px; }
.post-back{ display:inline-block; margin-bottom:28px; color:var(--ink-dim); font-size:0.88rem; }
.post-back:hover{ color:var(--ink); }