/* ============================================
   周斌 · 作品集 — SKILLS & FOOTER & TOP
   ============================================ */
#skills .section-header{text-align:center}
#skills .section-title::after{left:50%;transform:translateX(-50%)}

.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.skill-card{
  padding:1.5rem;border-radius:16px;border:1px solid var(--border);
  transition:transform .5s cubic-bezier(.23,1,.32,1),border-color .35s ease,box-shadow .35s ease;
  transform-style:preserve-3d;perspective:1000px;position:relative;overflow:hidden;
  background:var(--card-bg);backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  will-change:transform
}
.skill-card:hover{border-color:rgba(var(--accent-rgb),.2);box-shadow:var(--card-hover-shadow)}
.skill-card::before{
  content:'';position:absolute;top:var(--gy,50%);left:var(--gx,50%);
  width:200px;height:200px;transform:translate(-50%,-50%) scale(.8);
  background:radial-gradient(circle,var(--accent-light-06),transparent 70%);
  opacity:0;transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;z-index:1;border-radius:50%
}
.skill-card:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.skill-header{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;position:relative;z-index:2}
.skill-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s ease;position:relative;z-index:2;font-size:1.1rem}
.skill-card:hover .skill-icon{transform:scale(1.05)}
.skill-icon-ae{background:rgba(150,60,255,.08);color:#963cff}
.skill-icon-pr{background:rgba(150,60,255,.08);color:#963cff}
.skill-icon-dr{background:rgba(225,231,95,.08);color:#e1e75f}
.skill-icon-fcp{background:rgba(248,72,56,.08);color:#f84838}
.skill-icon-c4d{background:rgba(0,200,255,.08);color:#00c8ff}
.skill-icon-blender{background:rgba(255,114,33,.08);color:#ff7021}
.skill-icon-ps{background:rgba(45,134,255,.08);color:#2d86ff}
.skill-icon-ai{background:rgba(228,133,0,.08);color:#e48500}
.skill-icon-ai-video{background:rgba(228,133,0,.08);color:#e48500}
.skill-icon-fusion{background:rgba(243,246,59,.08);color:#f3f63b}
.skill-icon-camera{background:rgba(228,133,0,.08);color:#e48500}
.skill-icon-figma{background:rgba(162,89,255,.08);color:#a259ff}
.dark-mode .skill-card[data-skill="ai-video"] .skill-logo{filter:brightness(0) invert(1)}
.skill-name{font-size:.92rem;font-weight:600;color:var(--text);position:relative;z-index:2;transition:color .3s ease}

.skill-logo{width:34px;height:34px;display:block;object-fit:contain;filter:drop-shadow(0 0 2px rgba(0,0,0,.1))}
.skill-card[data-skill="fcp"] .skill-logo{width:40px;height:40px}
.skill-card[data-skill="dr"] .skill-logo,.skill-card[data-skill="fusion"] .skill-logo{width:36px;height:36px}
.skill-card[data-skill="figma"] .skill-logo{width:28px;height:28px}

.skill-bar-track{
  width:100%;height:6px;background:var(--skill-bar-track-bg);border-radius:10px;
  overflow:hidden;position:relative;z-index:2
}
.skill-bar-fill{
  height:100%;border-radius:10px;width:0;
  transition:width 1.2s cubic-bezier(.25,.46,.45,.94);position:relative
}
.skill-bar-track::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.03) 50%,transparent 100%);
  background-size:200% 100%;animation:ts 3s ease-in-out infinite;
  pointer-events:none;border-radius:10px
}
@keyframes ts{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skill-bar-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.06) 50%,transparent 100%);
  background-size:200% 100%;animation:bs 2.5s ease-in-out infinite;
  pointer-events:none;border-radius:10px
}
@keyframes bs{0%{background-position:200% 0}100%{background-position:-200% 0}}
.bar-pink{background:linear-gradient(90deg,#963cff,#b66aff)}
.bar-blue{background:linear-gradient(90deg,#00a3ff,#40bcff)}
.bar-blue2{background:linear-gradient(90deg,#2d86ff,#5ba3ff)}
.bar-gold{background:linear-gradient(90deg,#fca311,#ffd166)}
.bar-gold2{background:linear-gradient(90deg,#ff9f00,#ffc34d)}
.bar-orange{background:linear-gradient(90deg,#ff6a00,#ff8c38)}
.bar-orange2{background:linear-gradient(90deg,#ff6a00,#ff9f43)}
.bar-green{background:linear-gradient(90deg,#00c896,#30d9b0)}
.bar-purple{background:linear-gradient(90deg,#a259ff,#c084ff)}

.skill-percent{
  text-align:right;font-size:.82rem;font-weight:600;color:var(--text-lighter);
  margin-top:.5rem;transition:color .3s ease;position:relative;z-index:2
}
.skill-card:hover .skill-percent{color:var(--skill-hover-color)}

/* Back to Top */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .35s ease;cursor:pointer
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top .btn-circle{
  width:48px;height:48px;border-radius:50%;background:var(--accent);border:none;
  color:#fff;cursor:pointer;transition:all .3s ease;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 15px var(--back-to-top-shadow);
  font-size:.85rem;font-weight:800;position:relative
}
.back-to-top .btn-circle .label{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%
}
.back-to-top .btn-circle .label .pct-text{display:inline}
.back-to-top .btn-circle .label .arrow-icon{display:none}
.back-to-top .btn-circle:hover{transform:translateY(-3px);box-shadow:0 8px 25px var(--back-to-top-hover-shadow);background:var(--accent-hover)}
.back-to-top .btn-circle:hover .label .pct-text{display:none}
.back-to-top .btn-circle:hover .label .arrow-icon{display:inline;font-size:1.1rem}

/* Footer */
.footer{text-align:center;padding:4rem 2rem 3rem;border-top:1px solid var(--footer-border);margin-top:5rem;transition:border-color .3s ease}
.footer-social{display:flex;justify-content:center;gap:1rem;margin-bottom:1.2rem}
.footer-social a{
  color:var(--text-light);font-size:1.1rem;transition:all .3s ease;
  width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;text-decoration:none
}
.footer-social a:hover{color:var(--accent);background:var(--accent-light-08);transform:translateY(-2px)}
.footer p{color:var(--text-light);font-size:.78rem;letter-spacing:.5px;transition:color .3s ease}
.footer a{color:var(--text-light);text-decoration:none}

.portfolio-item:last-child:nth-child(-n+9):not(:only-child) ~ .show-more-wrap { display:none }

/* Show More Wrap with gradient overlay */
.show-more-wrap{text-align:center;margin-top:2rem;position:relative;z-index:10;display:flex;justify-content:center;width:100%;padding:1rem 0}
.show-more-wrap::before{
  content:'';position:absolute;bottom:100%;left:0;right:0;height:120px;
  background:linear-gradient(to bottom,transparent 0%,var(--bg) 100%);
  pointer-events:none;z-index:1
}
.show-more-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 2.4rem;border-radius:25px;
  background:var(--showmore-bg);backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--showmore-border);color:var(--accent);
  font-size:.9rem;font-weight:600;cursor:pointer;
  font-family:inherit;letter-spacing:.5px;transition:all .3s ease
}
.show-more-btn:hover{border-color:var(--accent);color:#fff;background:var(--accent);transform:translateY(-3px);box-shadow:0 4px 20px rgba(var(--accent-rgb),.25)}
.show-more-btn i{font-size:.8rem;transition:transform .3s ease}
.show-more-btn.expanded i{transform:rotate(180deg)}

@media(max-width:768px){
  .skills-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .skill-card{padding:1.2rem}
  .back-to-top{bottom:1.2rem;right:1.2rem}
  .back-to-top .btn-circle{width:42px;height:42px;font-size:.8rem}
}
@media(max-width:480px){.skills-grid{grid-template-columns:1fr}}