/* ================================
1. ROOT VARIABLES
================================ */
:root{
  --bg:#ffffff;
  --text:#111827;
  --card:#ffffff;
  --shadow:rgba(0,0,0,.08);
  --base:#3b82f6;
}

#bio[data-tone="dark"] {
  --bg: #121212;
  --card: #1e1e1f;
  --text: #f1f1f1;
  --muted: #aaa;
  --shadow: rgba(0, 0, 0, 0.5);
  --desktop-frame-color: color-mix(in srgb, var(--base) 18%, black);
}

#bio[data-tone="light"] {
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #111;
  --light: #f1f1f1;
  --muted: #777;
  --shadow: rgba(0, 0, 0, 0.08);
  --desktop-frame-color: color-mix(in srgb, var(--base) 12%, white);
}

/* ================================
2. BASE / GLOBAL
================================ */
.card{
transition:transform .2s ease;
}
.card:active{
transform:scale(.97)!important;
}
/* ================================
3. LAYOUT
================================ */
.scroll-container{
display:flex;
overflow-x:auto;
padding:10px 50%;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
}
.scroll-container::-webkit-scrollbar{
display:none;
}
.list{
position:relative;
min-height:220px;
overflow:hidden;
}

/* ================================
4. COMPONENTS
================================ */
/* Scroll item */
.scroll-item{
flex:0 0 auto;
min-width:120px;
scroll-snap-align:center;
transition:.35s cubic-bezier(.22,1,.36,1);
transform:scale(.85);
opacity:.5;
}
.scroll-item .card,
.scroll-item .ratio{
overflow:hidden;
border-radius:16px;
}
/* Ratio custom */
.ratio-9x16{
--bs-aspect-ratio:177.78%;
}
/* List item */
.list .list-item{
    position:absolute;
   width:100%;
transition:
transform .35s cubic-bezier(.22,1,.36,1),
opacity .35s cubic-bezier(.22,1,.36,1);
transform:scale(.85);
opacity:.4;
}

.list-item img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:14px;
}

.list-item .text-truncate {
    max-width:180px;
}

@media (min-width: 576px) {
    .list-item .text-truncate {
        max-width:480px;
    }
}

.avatar-shell {
    min-height: 40px;
    margin-bottom: 1rem;
    display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  object-fit:cover;
}

/* ================================
5. STATES / MODIFIERS
================================ */
/* Active scroll */
.scroll-item.active{
transform:scale(1);
opacity:1;
}

/* ================================
UNIVERSAL TONE
================================ */

/* LIGHT (default aman) */
#bio[data-tone="light"]{
  --bg:#ffffff;
  --text:#111827;
  --card:#ffffff;
  --shadow:rgba(0,0,0,.08);
}

/* DARK */
#bio[data-tone="dark"]{
  --bg:#0b0b0b;
  --text:#f9fafb;
  --card:#1e1e1f;
  --shadow:rgba(0,0,0,.4);
}

/* Mode color */
#bio[data-mode="recruit"]{
--base:#ff3b3b;
}

#bio[data-mode="product"]{
--base:#22c55e;
}

#bio[data-mode="story"]{
--base:#a855f7;
}

#bio[data-mode="personal"]{
  --base:#3b82f6;
}

#bio[data-mode="personal"][data-theme="blue"] {
  --base: #3b82f6;
}

#bio[data-mode="personal"][data-theme="black"] {
  --base: #000;
}

#bio[data-mode="personal"][data-theme="pink"] {
  --base: #ec4899;
}

#bio[data-mode="personal"][data-theme="white"] {
  --base: #fff;
}

#bio{
  background:var(--bg);
  color:var(--text);
}

#bio[data-tone="dark"] .btn-outline-dark {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--text);
  --bs-btn-hover-bg: var(--base);
}

/* ================================
6. ANIMATIONS
================================ */
.bento-flyout{
animation:flyOutUp .35s cubic-bezier(.22,1,.36,1) forwards;
}
.bento-flyin{
animation:flyInUp .35s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes flyOutUp{
from{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
to{
opacity:0;
transform:translateY(-18px) scale(.96);
filter:blur(4px);
}
}
@keyframes flyInUp{
from{
opacity:0;
transform:translateY(28px) scale(.96);
filter:blur(6px);
}
to{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}
.bento-overlay {

    -webkit-mask: radial-gradient(
        91.26% 100% at 0% 50%,
        rgb(0, 0, 0) 50%,
        rgba(0, 0, 0, 0.99) 54.68%,
        rgba(0, 0, 0, 0.97) 58.79%,
        rgba(0, 0, 0, 0.94) 62.4%,
        rgba(0, 0, 0, 0.9) 65.61%,
        rgba(0, 0, 0, 0.85) 68.52%,
        rgba(0, 0, 0, 0.79) 71.2%,
        rgba(0, 0, 0, 0.72) 73.75%,
        rgba(0, 0, 0, 0.65) 76.25%,
        rgba(0, 0, 0, 0.57) 78.8%,
        rgba(0, 0, 0, 0.48) 81.48%,
        rgba(0, 0, 0, 0.39) 84.39%,
        rgba(0, 0, 0, 0.3) 87.6%,
        rgba(0, 0, 0, 0.2) 91.21%,
        rgba(0, 0, 0, 0.1) 95.32%,
        rgba(0, 0, 0, 0) 100%
    );

    mask: radial-gradient(
        91.26% 100% at 0% 50%,
        rgb(0, 0, 0) 50%,
        rgba(0, 0, 0, 0.99) 54.68%,
        rgba(0, 0, 0, 0.97) 58.79%,
        rgba(0, 0, 0, 0.94) 62.4%,
        rgba(0, 0, 0, 0.9) 65.61%,
        rgba(0, 0, 0, 0.85) 68.52%,
        rgba(0, 0, 0, 0.79) 71.2%,
        rgba(0, 0, 0, 0.72) 73.75%,
        rgba(0, 0, 0, 0.65) 76.25%,
        rgba(0, 0, 0, 0.57) 78.8%,
        rgba(0, 0, 0, 0.48) 81.48%,
        rgba(0, 0, 0, 0.39) 84.39%,
        rgba(0, 0, 0, 0.3) 87.6%,
        rgba(0, 0, 0, 0.2) 91.21%,
        rgba(0, 0, 0, 0.1) 95.32%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cta-title{
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
}
.cta-primary{
border-radius: 14px;
font-weight: 600;
padding: 12px;
}
.cta-secondary{
text-decoration: none;
}
.cta-desc{
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.3px;
margin-bottom: 0;
}
.bg-gradient{
   overflow: hidden;
   background: #0b0b0b;
}
.bg-gradient::before{
content:"";
position:absolute;
inset:0;
background: var(--base);
opacity: 0.25;
pointer-events:none;
}
/* ================================
7. SKELETON
================================ */