/* Icon Folder adapted to BJcode's native HTML/CSS/JS and blue palette. */
.page-resume .skill-folders { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:28px; padding:8px 0 0; }
.page-resume .skill-folder { --folder-spread:48px; position:relative; isolation:isolate; display:block; width:100%; min-width:0; height:300px; padding:0; border:0; background:transparent; color:#052659; font:inherit; text-align:right; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.skill-folder__back { position:absolute; inset:28px 0 0; border:1px solid #7da0ca80; border-radius:24px; background:linear-gradient(145deg,#7da0ca66,#c1e8ff80); clip-path:polygon(0 9%,57% 9%,65% 0,94% 0,100% 6%,100% 100%,0 100%); box-shadow:inset 0 1px 0 #ffffffaa; }
.skill-folder__icons { position:absolute; inset:0; direction:ltr; z-index:1; pointer-events:none; }
.skill-folder__tile { position:absolute; left:50%; top:45px; width:66px; height:66px; margin-left:-33px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(145deg,#052659,#5483b3); color:#c1e8ff; border:1px solid #c1e8ff; box-shadow:0 12px 25px #02102428; transform:translate(calc(var(--tile-offset)*var(--folder-spread)),calc(var(--tile-offset)*var(--tile-offset)*7px)) rotate(calc(var(--tile-offset)*10deg)); }
.skill-folder__mark { display:grid; place-items:center; width:100%; height:100%; font:800 22px/1 system-ui,sans-serif; letter-spacing:-1px; }
.skill-folder__mark svg { width:72%; height:72%; }
.skill-folder__tile--css,.skill-folder__tile--dj { background:linear-gradient(135deg,#5483b3,#052659); }
.skill-folder__tile--js,.skill-folder__tile--sql { background:linear-gradient(135deg,#c1e8ff,#7da0ca); color:#052659; }
.skill-folder__tooltip { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:#052659; color:#c1e8ff; padding:5px 9px; border-radius:12px; white-space:nowrap; font:600 11px/1.4 system-ui,sans-serif; opacity:0; }
.skill-folder__front { display:block; position:absolute; z-index:2; inset:auto 0 0; min-height:190px; padding:40px 18px 16px; border:1px solid #ffffffcc; border-radius:22px; background:linear-gradient(150deg,#c1e8fff0,#eff8ffed); box-shadow:0 12px 28px #05265916,inset 0 1px 0 #fff; clip-path:polygon(0 0,38% 0,47% 12%,100% 12%,100% 100%,0 100%); }
@supports (backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px)) {
 .skill-folder__front { background:linear-gradient(150deg,#c1e8ff99,#eff8ff80); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); }
}
.skill-folder__title { display:block; margin-bottom:12px; font-size:19px; line-height:1.6; font-weight:750; color:#052659; }
.skill-folder__tags { display:flex; flex-wrap:wrap; gap:6px; direction:ltr; justify-content:flex-end; }
.skill-folder__tags > span { display:block; border:1px solid #7da0ca; background:#eff8ffe6; color:#052659; border-radius:20px; padding:4px 8px; font:600 11px/1.5 system-ui,sans-serif; }
.skill-folder__hint { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; color:#052659; font-size:10px; line-height:1.6; }
.page-resume .skill-folder:focus-visible { outline:3px solid #052659; outline-offset:6px; border-radius:24px; }
.skill-folder.is-open { z-index:3; }
.skill-folder.is-open .skill-folder__tile { transform:translate(calc(var(--tile-offset)*var(--folder-spread)*1.12),calc(var(--tile-offset)*var(--tile-offset)*7px - 26px)) rotate(calc(var(--tile-offset)*12deg)); }
.skill-folder.is-open .skill-folder__front { transform:translateY(7px); }
@media(hover:hover) and (pointer:fine) {
 .skill-folder.is-open .skill-folder__tile { pointer-events:auto; }
 .skill-folder__tile:hover { z-index:4; }
 .skill-folder__tile:hover .skill-folder__mark { transform:translateY(-12px) scale(1.06); }
 .skill-folder__tile:hover .skill-folder__tooltip { opacity:1; }
}
@media(min-width:768px) and (max-width:1100px) { .page-resume .skill-folders { grid-template-columns:1fr; } .page-resume .skill-folder { max-width:420px; justify-self:center; --folder-spread:62px; } }
@media(max-width:767px) { .page-resume .skill-folders { grid-template-columns:1fr; gap:32px; } .page-resume .skill-folder { max-width:380px; justify-self:center; --folder-spread:58px; } }
@media(max-width:359px) { .page-resume .skill-folder { --folder-spread:47px; } }
@media(prefers-reduced-motion:no-preference) {
 .skill-folder__tile { transition:transform .65s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--tile-order)*35ms); }
 .skill-folder__front { transition:transform .65s cubic-bezier(.2,.8,.2,1); }
 .skill-folder__mark { transition:transform .35s ease; }
 .skill-folder__tooltip { transition:opacity .2s ease; }
 .skill-folder.is-revealed { animation:skill-folder-appear .7s cubic-bezier(.2,.8,.2,1) both; }
 @keyframes skill-folder-appear { from { opacity:.3; transform:translateY(18px); } to { opacity:1; transform:none; } }
}