/* 作品图片统一按上传原图 750 × 1624 竖版比例展示，避免被裁切 */

/* 首页大屏主视觉：两张图也按 750×1624 竖版比例显示 */
.hero-visual{
  height:auto;
  min-height:620px;
}
.hero-card{
  height:auto;
  padding:10px;
}
.hero-card::before{
  content:"";
  display:block;
  aspect-ratio:750 / 1624;
}
.hero-card img{
  position:absolute;
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  object-fit:contain;
  background:#0d0e14;
}
.card-main{
  width:min(48%,300px);
  top:2%;
  left:22%;
}
.card-back{
  width:min(41%,255px);
  top:22%;
  right:5%;
}

@media(min-width:1001px){
  .hero{
    padding-bottom:120px;
  }
  .hero-visual{
    min-height:520px;
    transform:scale(.9);
    transform-origin:center right;
  }
  .orbit-a{
    width:440px;
    height:440px;
    left:9%;
  }
  .orbit-b{
    width:330px;
    height:330px;
    left:18%;
  }
  .float-label{
    bottom:18px;
    left:-22px;
  }
}

/* 首页热门作品 + 作品展示页：统一竖版比例 */
.display-panel{
  display:grid;
  grid-template-columns:1fr 1fr repeat(5,auto);
  gap:14px;
  align-items:center;
  margin-bottom:26px;
  padding:18px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.display-panel label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#dfe0ea;
  font-size:13px;
  white-space:nowrap;
}
.display-panel select{
  min-width:138px;
  background:#0c0d12;
  color:#fff;
  border:1px solid var(--line);
  padding:10px 12px;
  outline:none;
}
.display-toggle{
  appearance:none;
  width:42px;
  height:24px;
  border-radius:999px;
  background:#333640;
  position:relative;
  cursor:pointer;
  transition:.25s;
}
.display-toggle::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  top:3px;
  left:3px;
  border-radius:50%;
  background:#979aa5;
  transition:.25s;
}
.display-toggle:checked{
  background:#1688ff;
}
.display-toggle:checked::after{
  left:21px;
  background:#fff;
}
.gallery-grid[data-layout="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-grid[data-layout="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-grid[data-layout="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery-section.hide-name .work-title,
.gallery-section.hide-desc .work-desc,
.gallery-section.hide-category .work-category,
.gallery-section.hide-stars .work-stars,
.gallery-section.hide-date .work-date{
  display:none;
}
.works-section .work-grid,
.gallery-grid{
  gap:42px 22px;
}
.works-section .work-grid,
.gallery-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.works-section .work-card,
.works-section .work-card:nth-child(even),
.gallery-grid .work-card,
.gallery-grid .work-card:nth-child(even),
.gallery-grid .work-card:nth-child(3n+2){
  margin-top:0;
}
.works-section .work-grid{
  align-items:start;
}
.works-section .work-card:nth-child(4n+1){
  margin-top:0;
}
.works-section .work-card:nth-child(4n+2){
  margin-top:52px;
}
.works-section .work-card:nth-child(4n+3){
  margin-top:18px;
}
.works-section .work-card:nth-child(4n){
  margin-top:86px;
}
.works-section .work-media,
.gallery-grid .work-media{
  aspect-ratio:750 / 1624;
  background:#0d0e14;
}
.works-section .work-media img,
.works-section .work-media video,
.gallery-grid .work-media img,
.gallery-grid .work-media video{
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.work-media,
.lightbox-content{
  user-select:none;
  -webkit-touch-callout:none;
}
.work-media::before,
.lightbox-content::before{
  content:"版权所有 · 侵权必究";
  position:absolute;
  right:10px;
  bottom:10px;
  transform:none;
  z-index:3;
  pointer-events:none;
  color:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(1px);
  padding:5px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  border-radius:3px;
}
.lightbox-content{
  position:relative;
}
.lightbox-content::before{
  right:14px;
  bottom:14px;
  font-size:12px;
  padding:6px 10px;
  color:rgba(255,255,255,.64);
  z-index:4;
}
.work-stars{
  margin-top:8px;
  color:#ffd76b;
  font-size:13px;
  letter-spacing:2px;
  text-shadow:0 0 14px rgba(255,215,107,.35);
}
.work-desc{
  margin-top:9px!important;
  max-width:100%;
  color:#b9bac6!important;
  font-size:12px!important;
  line-height:1.7;
  letter-spacing:0!important;
}
.work-date{
  display:block;
  margin-top:9px;
  color:#6f7280;
  font-size:10px;
  letter-spacing:1px;
}

/* 礼物素材库样式 */
.gift-filter-panel{
  background:#3f3f55;
  border-radius:12px;
  padding:22px 28px;
  margin-bottom:26px;
}
.filter-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px 34px;
  min-height:48px;
  color:#fff;
}
.filter-row strong{
  width:60px;
  font-size:17px;
}
.filter-row button{
  min-width:72px;
  border:0;
  background:transparent;
  color:#fff;
  font-weight:700;
  font-size:15px;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}
.filter-row button.active{
  background:#ff5a1f;
}
.compact-display{
  margin-bottom:26px;
}
.gift-grid{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:18px!important;
}
.gift-card{
  margin-top:0!important;
  position:relative;
  aspect-ratio:750 / 1624;
  display:flex;
  flex-direction:column;
  background:#3f3f55;
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.gift-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,91,31,.45);
}
.gift-card .gift-media{
  aspect-ratio:1 / 1!important;
  flex:0 0 auto;
  border-radius:8px;
  border:1px solid rgba(255,91,31,.45);
  background:#2d2e3f;
}
.gift-icon,
.hover-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .25s,transform .35s;
}
.gift-icon{
  z-index:1;
}
.hover-video,
.hover-image{
  z-index:20;
  opacity:0;
  background:#111;
  border-radius:10px;
}
.gift-card:hover .hover-video.is-ready,
.gift-card:focus-within .hover-video.is-ready{
  opacity:1;
}
.gift-card:hover .hover-image,
.gift-card:focus-within .hover-image{
  opacity:1;
}
.gift-card:hover .gift-icon{
  opacity:1;
}
.gift-info{
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding:10px 4px 4px;
}
.gift-info h3{
  margin:0 0 7px;
  font-size:16px;
  color:#fff;
}
.gift-info .work-category{
  color:#c9cad8;
  font-size:12px;
  margin:0 0 8px;
  letter-spacing:0;
}
.gift-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  color:#cfd2e6;
  font-size:11px;
}
.gift-stats .work-stars{
  margin:0;
  font-size:11px;
  letter-spacing:0;
}
.gift-info .work-date{
  margin-top:8px;
}
.full-card-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.gallery-grid[data-layout="6"]{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.gallery-grid[data-layout="8"]{grid-template-columns:repeat(8,minmax(0,1fr))!important}

@media(max-width:1100px){
  .display-panel{
    grid-template-columns:1fr 1fr;
  }
  .works-section .work-grid,
  .gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .gift-grid,.gallery-grid[data-layout="8"]{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  .works-section .work-card:nth-child(3n+1){
    margin-top:0;
  }
  .works-section .work-card:nth-child(3n+2){
    margin-top:42px;
  }
  .works-section .work-card:nth-child(3n){
    margin-top:16px;
  }
}
@media(max-width:760px){
  .display-panel{
    grid-template-columns:1fr;
    padding:14px;
  }
  .display-panel label{
    width:100%;
  }
  .display-panel select{
    min-width:160px;
  }
  .hero-visual{
    min-height:500px;
  }
  .works-section .work-grid,
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 12px;
  }
  .gift-grid,.gallery-grid[data-layout="8"],.gallery-grid[data-layout="6"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .works-section .work-card,
  .works-section .work-card:nth-child(4n+1),
  .works-section .work-card:nth-child(4n+2),
  .works-section .work-card:nth-child(4n+3),
  .works-section .work-card:nth-child(4n),
  .works-section .work-card:nth-child(3n+1),
  .works-section .work-card:nth-child(3n+2),
  .works-section .work-card:nth-child(3n){
    margin-top:0;
  }
  .works-section .work-meta,
  .gallery-grid .work-meta{
    padding-top:12px;
  }
  .works-section .work-meta h3,
  .gallery-grid .work-meta h3{
    font-size:15px;
  }
  .works-section .work-meta>span,
  .gallery-grid .work-meta>span{
    display:none;
  }
}
@media(max-width:520px){
  .hero-visual{
    min-height:420px;
  }
  .card-main{
    width:72%;
    left:2%;
  }
  .card-back{
    width:58%;
    right:-10%;
  }
}

/* 2026 premium dark redesign: 素材库视觉升级，不改变原有功能 */
.gift-library-section{
  max-width:1600px;
  position:relative;
}
.gift-library-section::before{
  content:"";
  position:absolute;
  inset:-70px 10px auto;
  height:360px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%,rgba(126,92,255,.24),transparent 34%),
    radial-gradient(circle at 82% 8%,rgba(42,221,255,.18),transparent 32%),
    radial-gradient(circle at 58% 45%,rgba(255,91,199,.12),transparent 34%);
  filter:blur(12px);
  opacity:.9;
  z-index:-1;
}
.gift-library-section .section-title{
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  padding:28px 30px;
  margin-bottom:22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    radial-gradient(circle at 90% 20%,rgba(99,84,255,.22),transparent 32%);
  box-shadow:0 24px 80px rgba(0,0,0,.26);
  backdrop-filter:blur(18px);
}
.gift-library-section .section-title h2{
  margin:8px 0 0;
  letter-spacing:-1.5px;
}
.gift-library-section .section-title p{
  max-width:560px;
  color:#aeb2c7;
  line-height:1.8;
}
.gift-filter-panel{
  position:relative;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(135deg,rgba(20,22,34,.92),rgba(18,18,29,.72)),
    radial-gradient(circle at 18% 20%,rgba(255,91,31,.18),transparent 28%);
  box-shadow:0 18px 60px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px 26px;
  overflow:hidden;
}
.gift-filter-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  transform:translateX(-100%);
  animation:panelSheen 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes panelSheen{
  0%,55%{transform:translateX(-100%)}
  75%,100%{transform:translateX(100%)}
}
.filter-row{
  gap:12px 16px;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.filter-row:last-child{
  border-bottom:0;
}
.filter-row strong{
  width:64px;
  color:#fff;
  font-size:15px;
  letter-spacing:1px;
  text-shadow:0 0 18px rgba(255,255,255,.24);
}
.filter-row button{
  min-width:auto;
  padding:9px 17px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d9dcf0;
  font-size:13px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.filter-row button:hover{
  color:#fff;
  border-color:rgba(96,222,255,.42);
  background:rgba(96,222,255,.08);
}
.filter-row button.active{
  color:#11131b;
  background:linear-gradient(135deg,#6ff1ff,#a783ff 52%,#ff7bdc);
  border-color:transparent;
  box-shadow:0 8px 26px rgba(113,129,255,.32);
}
.display-panel.compact-display{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(9,10,16,.72);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  padding:16px 18px;
}
.display-panel.compact-display label{
  color:#cfd3e9;
  font-size:12px;
}
.display-panel.compact-display select{
  border-radius:12px;
  background:#11131d;
  border-color:rgba(255,255,255,.12);
}
.gift-grid{
  gap:20px!important;
  align-items:start;
}
.gift-card{
  isolation:isolate;
  border-radius:22px;
  padding:10px;
  background:
    linear-gradient(180deg,rgba(76,76,105,.92),rgba(43,43,66,.96)),
    radial-gradient(circle at 50% 0,rgba(137,104,255,.18),transparent 36%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 45px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .32s,border-color .32s,box-shadow .32s,filter .32s;
}
.gift-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(145deg,rgba(111,241,255,.65),rgba(167,131,255,.18),rgba(255,123,220,.58));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.35;
  pointer-events:none;
  z-index:1;
}
.gift-card::after{
  content:"";
  position:absolute;
  inset:auto 14px 12px;
  height:90px;
  background:radial-gradient(ellipse at center,rgba(116,98,255,.2),transparent 68%);
  filter:blur(16px);
  z-index:-1;
}
.gift-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(115,232,255,.46);
  box-shadow:0 26px 78px rgba(0,0,0,.48),0 0 36px rgba(115,232,255,.14),inset 0 1px 0 rgba(255,255,255,.13);
}
.gift-card .gift-media{
  width:82%;
  margin:8px auto 0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.08)),
    #202236;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.gift-card .gift-media::before{
  border-radius:18px;
  right:7px;
  bottom:7px;
  font-size:8px;
  opacity:.72;
}
.gift-icon{
  border-radius:18px;
}
.view-icon{
  right:9px;
  bottom:9px;
  width:30px;
  height:30px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,8,14,.62);
}
.gift-info{
  padding:10px 5px 4px;
  justify-content:flex-start;
}
.gift-info h3{
  font-size:clamp(13px,1vw,18px);
  font-weight:800;
  letter-spacing:.5px;
  margin:2px 0 7px;
  text-shadow:0 6px 18px rgba(0,0,0,.35);
}
.gift-info .work-category{
  align-self:center;
  max-width:100%;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  color:#d9ddf6;
  font-size:10px;
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gift-info .work-desc{
  margin:2px 0 7px!important;
  color:#aeb3cb!important;
  font-size:10px!important;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.gift-stats{
  margin-top:auto;
  gap:6px;
}
.gift-stats .work-views{
  padding:4px 7px;
  border-radius:999px;
  color:#d8e7ff;
  background:rgba(0,0,0,.16);
}
.gift-stats .work-stars{
  color:#ffd76b;
  text-shadow:0 0 16px rgba(255,215,107,.4);
}
.gift-info .work-date{
  margin-top:5px;
  color:#8288a3;
}
.full-card-video,
.demo-motion{
  border-radius:22px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.gift-card:hover .gift-info,
.gift-card:focus-within .gift-info,
.gift-card:hover .gift-media,
.gift-card:focus-within .gift-media{
  opacity:0;
  transition:opacity .18s;
}
.gift-card:hover .view-icon,
.gift-card:focus-within .view-icon{
  opacity:0;
}
@media(min-width:1200px){
  .gift-grid .gift-card:nth-child(8n+2),
  .gift-grid .gift-card:nth-child(8n+6){
    transform:translateY(16px);
  }
  .gift-grid .gift-card:nth-child(8n+4){
    transform:translateY(30px);
  }
  .gift-grid .gift-card:nth-child(8n+2):hover,
  .gift-grid .gift-card:nth-child(8n+6):hover{
    transform:translateY(8px) scale(1.015);
  }
  .gift-grid .gift-card:nth-child(8n+4):hover{
    transform:translateY(22px) scale(1.015);
  }
}

/* polish pass: 整齐排列 + 顶部轮播 + 搜索 + 导航防溢出 */
.site-header{
  width:min(100%,1600px);
  max-width:1600px;
  padding-left:clamp(18px,4vw,54px);
  padding-right:clamp(18px,4vw,54px);
}
.brand{
  min-width:max-content;
}
.nav{
  gap:clamp(14px,1.8vw,30px);
}
.nav a{
  font-size:14px;
}
.library-hero{
  width:min(100% - 48px,1600px);
  min-height:360px;
  margin:54px auto 28px;
  padding:38px;
  display:grid;
  grid-template-columns:minmax(420px,.86fr) 1fr;
  gap:34px;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(32,34,51,.92),rgba(13,16,25,.78)),
    radial-gradient(circle at 82% 18%,rgba(60,210,255,.22),transparent 32%),
    radial-gradient(circle at 38% 78%,rgba(255,86,200,.16),transparent 30%);
  box-shadow:0 28px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.library-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.055) 48%,transparent 55%);
  animation:panelSheen 8s ease-in-out infinite;
  pointer-events:none;
}
.library-hero-copy{
  position:relative;
  z-index:2;
}
.library-hero .eyebrow{
  font-size:13px;
}
.library-hero h1{
  margin:16px 0 16px;
  font-size:clamp(42px,4.6vw,82px);
  line-height:1.04;
  letter-spacing:-3px;
}
.library-hero h1 span{
  color:#77e9ff;
}
.library-hero p{
  max-width:650px;
  margin:0 0 26px;
  color:#c0c5da;
  font-size:19px;
  line-height:1.9;
}
.library-search{
  width:min(100%,520px);
  height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(5,7,12,.45);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.library-search i{
  color:#74e9ff;
  font-style:normal;
  font-size:22px;
}
.library-search input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:15px;
}
.library-search input::placeholder{
  color:#8d93ab;
}
.library-slider{
  position:relative;
  z-index:2;
  min-height:270px;
}
.library-slide{
  position:absolute;
  width:180px;
  aspect-ratio:750/1624;
  padding:8px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,12,20,.58);
  box-shadow:0 26px 70px rgba(0,0,0,.42);
  overflow:hidden;
}
.library-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:17px;
}
.library-slide span{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:8px 10px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.library-slide.s1{
  right:36%;
  top:6px;
  transform:rotate(-7deg);
  animation:slideFloatA 5s ease-in-out infinite;
}
.library-slide.s2{
  right:16%;
  top:34px;
  transform:scale(1.08);
  z-index:3;
  animation:slideFloatB 5.8s ease-in-out infinite;
}
.library-slide.s3{
  right:0;
  top:2px;
  transform:rotate(8deg);
  opacity:.82;
  animation:slideFloatC 6.2s ease-in-out infinite;
}
@keyframes slideFloatA{50%{transform:translateY(-8px) rotate(-5deg)}}
@keyframes slideFloatB{50%{transform:translateY(10px) scale(1.08)}}
@keyframes slideFloatC{50%{transform:translateY(-5px) rotate(6deg)}}
.gift-library-section .section-title{
  display:none;
}
.preview-note{
  display:none!important;
}
.gift-filter-panel{
  margin-top:0;
}
.filter-row strong{
  font-size:18px;
}
.filter-row button{
  font-size:15px;
}
.display-panel.compact-display{
  grid-template-columns:auto minmax(160px,220px) auto minmax(180px,240px) repeat(5,auto);
}
.gift-grid .gift-card,
.gift-grid .gift-card:nth-child(n),
.gift-grid .gift-card:nth-child(n):hover{
  transform:none;
}
.gift-grid .gift-card:hover{
  transform:translateY(-6px) scale(1.01);
}
@media(max-width:1100px){
  .library-hero{
    grid-template-columns:1fr;
  }
  .library-slider{
    min-height:300px;
  }
  .library-slide.s1{left:8%;right:auto}
  .library-slide.s2{left:36%;right:auto}
  .library-slide.s3{right:8%}
  .display-panel.compact-display{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:760px){
  .library-hero{
    width:min(100% - 28px,1600px);
    margin-top:28px;
    padding:24px;
    border-radius:24px;
  }
  .library-hero h1{
    font-size:38px;
    letter-spacing:-1.5px;
  }
  .library-hero p{
    font-size:15px;
  }
  .library-slider{
    min-height:230px;
  }
  .library-slide{
    width:130px;
  }
}

/* large banner carousel style: 首页和素材库统一顶部大轮播 */
.showcase-carousel{
  width:min(100% - 48px,1760px);
  min-height:540px;
  margin:34px auto 36px;
  padding:58px 58px 86px;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:0 0 34px 34px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg,rgba(8,18,22,.98),rgba(11,50,43,.9) 42%,rgba(20,58,44,.82)),
    radial-gradient(circle at 68% 45%,rgba(40,255,142,.34),transparent 34%),
    radial-gradient(circle at 24% 12%,rgba(255,224,91,.18),transparent 26%);
  box-shadow:0 36px 110px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);
}
.showcase-carousel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:120px 120px;
  mask-image:linear-gradient(90deg,#000,transparent 78%);
  pointer-events:none;
}
.showcase-carousel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:130px;
  background:linear-gradient(180deg,transparent,rgba(4,6,11,.88));
  pointer-events:none;
}
.showcase-copy{
  position:relative;
  z-index:3;
}
.showcase-copy .eyebrow{
  font-size:15px;
  color:#d9ffe9;
}
.showcase-copy h1{
  margin:20px 0 18px;
  max-width:760px;
  font-size:clamp(52px,5.6vw,108px);
  line-height:1.02;
  letter-spacing:-5px;
  text-shadow:0 14px 42px rgba(0,0,0,.42);
}
.showcase-copy p{
  max-width:650px;
  margin:0;
  color:#cbd6d0;
  font-size:21px;
  line-height:1.9;
}
.showcase-actions{
  margin-top:34px;
  display:flex;
  gap:18px;
  align-items:center;
}
.showcase-art{
  position:relative;
  z-index:2;
  height:430px;
}
.banner-slide{
  position:absolute;
  inset:0;
  display:block;
  padding:58px 58px 86px;
  opacity:0;
  transform:translateX(28px);
  animation:wholeBanner 50s infinite;
}
.banner-slide.bs1{animation-delay:0s}
.banner-slide.bs2{animation-delay:10s}
.banner-slide.bs3{animation-delay:20s}
.banner-slide.bs4{animation-delay:30s}
.banner-slide.bs5{animation-delay:40s}
@keyframes wholeBanner{
  0%{opacity:0;transform:translateX(28px)}
  3%{opacity:1;transform:none}
  18%{opacity:1;transform:none}
  21%,100%{opacity:0;transform:translateX(-28px)}
}
.showcase-art::before{
  content:"";
  position:absolute;
  width:620px;
  height:260px;
  right:0;
  top:80px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(71,255,157,.55),rgba(50,180,255,.12) 48%,transparent 70%);
  filter:blur(8px);
}
.showcase-main-img,
.showcase-side-img{
  position:absolute;
  object-fit:cover;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 88px rgba(0,0,0,.45);
  background:#10141d;
}
.banner-frame{
  position:absolute;
  inset:0;
  z-index:0;
}
.banner-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  border:0;
  box-shadow:none;
  background:#10141d;
}
.banner-frame span{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:3;
  max-width:70%;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.banner-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2) 45%,rgba(0,0,0,.08));
  pointer-events:none;
}
.banner-slide .showcase-copy{
  max-width:780px;
  position:absolute;
  left:58px;
  top:50%;
  transform:translateY(-50%);
}
.banner-slide .showcase-art{
  position:absolute;
  inset:0;
  height:auto;
}
.banner-dots{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:86px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
}
.banner-dots i{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.36);
  box-shadow:0 0 14px rgba(255,255,255,.2);
  animation:dotActive 50s infinite;
}
.banner-dots i:nth-child(1){animation-delay:0s}
.banner-dots i:nth-child(2){animation-delay:10s}
.banner-dots i:nth-child(3){animation-delay:20s}
.banner-dots i:nth-child(4){animation-delay:30s}
.banner-dots i:nth-child(5){animation-delay:40s}
@keyframes dotActive{
  0%,21%,100%{width:10px;background:rgba(255,255,255,.36)}
  3%,18%{width:34px;background:#6fefff}
}
.showcase-main-img{
  width:min(42vw,520px);
  height:390px;
  right:9%;
  bottom:0;
  z-index:3;
  animation:heroFloat 5.8s ease-in-out infinite;
}
.showcase-side-img.a{
  width:min(25vw,310px);
  height:310px;
  right:43%;
  bottom:22px;
  transform:rotate(-7deg);
  opacity:.88;
}
.showcase-side-img.b{
  width:min(23vw,280px);
  height:340px;
  right:0;
  bottom:8px;
  transform:rotate(7deg);
  opacity:.86;
}
@keyframes heroFloat{50%{transform:translateY(-10px)}}
.showcase-tabs{
  position:absolute;
  z-index:4;
  left:34px;
  right:34px;
  bottom:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,3vw,56px);
  padding:16px 18px;
  color:#eef8ff;
  font-size:16px;
  font-weight:700;
  background:linear-gradient(90deg,rgba(3,6,11,.58),rgba(3,6,11,.18),rgba(3,6,11,.58));
  backdrop-filter:blur(12px);
}
.showcase-tabs span{
  white-space:nowrap;
  opacity:.9;
}
.showcase-tabs span::before{
  content:"◆";
  margin-right:8px;
  color:#62dfff;
  font-size:11px;
}
.hero-search{
  position:absolute;
  z-index:5;
  top:32px;
  right:36px;
  width:min(360px,32vw);
}
.library-hero{
  width:min(100% - 48px,1760px);
  min-height:540px;
  margin-top:34px;
  padding:58px 58px 86px;
  grid-template-columns:minmax(520px,.72fr) 1fr;
}
.library-hero .library-slider,
.library-hero .library-slide{
  display:none;
}
.library-hero .showcase-copy h1{
  font-size:clamp(52px,5.4vw,96px);
}
.library-hero .showcase-copy p{
  font-size:21px;
}
.gift-library-section{
  padding-top:18px;
}
.gift-grid .gift-card,
.gift-grid .gift-card:nth-child(8n+2),
.gift-grid .gift-card:nth-child(8n+4),
.gift-grid .gift-card:nth-child(8n+6){
  transform:none!important;
}
.gift-grid .gift-card:hover,
.gift-grid .gift-card:nth-child(8n+2):hover,
.gift-grid .gift-card:nth-child(8n+4):hover,
.gift-grid .gift-card:nth-child(8n+6):hover{
  transform:translateY(-6px) scale(1.01)!important;
}
@media(max-width:1100px){
  .showcase-carousel,.library-hero{
    min-height:auto;
    padding:38px 30px 92px;
  }
  .banner-slide{
    grid-template-columns:1fr;
    padding:38px 30px 92px;
  }
  .showcase-copy h1{
    font-size:48px;
    letter-spacing:-2px;
  }
  .showcase-copy p,.library-hero .showcase-copy p{
    font-size:17px;
  }
  .showcase-art{
    height:340px;
  }
  .showcase-main-img{
    width:52%;
    height:310px;
    right:22%;
  }
  .showcase-side-img.a{
    width:32%;
    height:240px;
    right:58%;
  }
  .showcase-side-img.b{
    width:30%;
    height:260px;
  }
  .hero-search{
    position:relative;
    top:auto;
    right:auto;
    width:min(100%,420px);
    margin-top:24px;
  }
  .showcase-tabs{
    overflow:auto;
    justify-content:flex-start;
  }
}
@media(max-width:760px){
  .showcase-carousel,.library-hero{
    width:min(100% - 24px,1760px);
    margin-top:18px;
    padding:28px 22px 84px;
    border-radius:24px;
  }
  .banner-slide{
    padding:28px 22px 84px;
  }
  .showcase-copy h1,.library-hero .showcase-copy h1{
    font-size:36px;
    letter-spacing:-1.5px;
  }
  .showcase-art{
    height:260px;
  }
  .showcase-main-img{
    height:235px;
    width:62%;
    right:16%;
  }
  .showcase-side-img.a,.showcase-side-img.b{
    height:190px;
  }
  .showcase-tabs{
    left:14px;
    right:14px;
    bottom:14px;
    font-size:13px;
  }
}

/* latest fixes: Banner整图、卡片图放大、圆角更小、内容与Banner对齐 */
.section.gallery-section,
.gift-library-section{
  max-width:1760px!important;
}
.gift-card{
  border-radius:14px!important;
}
.gift-card::before{
  border-radius:14px!important;
}
.gift-card .gift-media{
  width:92%!important;
  margin:6px auto 0!important;
  border-radius:12px!important;
}
.gift-card .gift-media::before,
.gift-icon{
  border-radius:12px!important;
}
.full-card-video,
.demo-motion{
  border-radius:14px!important;
}
.showcase-carousel{
  border-radius:0 0 24px 24px!important;
}
.banner-slide .showcase-copy{
  z-index:3;
}
.banner-slide .showcase-art,
.banner-slide .banner-frame{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.banner-slide .banner-frame img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* 2026-06-27 final card display: 展示图铺满整张 750×1624 卡片，信息叠加在底部蒙版 */
.gift-grid .gift-card,
.work-grid .gift-card{
  position:relative!important;
  overflow:hidden!important;
  aspect-ratio:750/1624!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 50% 30%, rgba(114,95,255,.22), transparent 44%),
    linear-gradient(180deg, rgba(80,80,114,.96), rgba(35,35,58,.98))!important;
}
.gift-card .gift-media{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:inherit!important;
  overflow:hidden!important;
  opacity:1!important;
  box-shadow:none!important;
  background:#11131f!important;
}
.gift-card .gift-media::before{
  display:none!important;
}
.gift-card .gift-media img,
.gift-card .gift-icon,
.gift-card .video-poster{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  border-radius:inherit!important;
  transform:none;
  transition:transform .34s ease, filter .34s ease;
}
.gift-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,7,14,.03) 0%, rgba(5,7,14,.08) 40%, rgba(5,7,14,.58) 72%, rgba(5,7,14,.90) 100%),
    radial-gradient(circle at 50% 92%, rgba(137,102,255,.32), transparent 42%);
  opacity:1!important;
}
.gift-card .gift-info{
  position:absolute!important;
  inset:auto 0 0 0!important;
  z-index:6!important;
  min-height:auto!important;
  padding:58% 13px 15px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  text-align:center!important;
  color:#fff!important;
  opacity:1!important;
  background:linear-gradient(180deg, transparent 0%, rgba(7,9,18,.38) 36%, rgba(7,9,18,.86) 100%);
  transition:opacity .2s ease;
}
.gift-card .work-title{
  margin:0 0 8px!important;
  color:#fff!important;
  font-size:clamp(18px,1.18vw,26px)!important;
  line-height:1.16!important;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.gift-card .work-category{
  display:inline-flex!important;
  justify-content:center;
  align-items:center;
  width:auto!important;
  margin:0 0 10px!important;
  padding:6px 12px!important;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:rgba(255,255,255,.9)!important;
  font-size:12px!important;
  line-height:1!important;
  backdrop-filter:blur(10px);
}
.gift-card .work-desc{
  max-width:92%;
  margin:0 auto 10px!important;
  color:rgba(255,255,255,.78)!important;
  font-size:12px!important;
  line-height:1.45!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.gift-card .gift-stats{
  display:flex!important;
  justify-content:center;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:auto!important;
  font-size:12px!important;
}
.gift-card .work-views{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(8,10,18,.50);
  color:#fff!important;
  backdrop-filter:blur(8px);
}
.gift-card .work-stars{
  color:#ffd75a!important;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
  letter-spacing:1px;
}
.gift-card .work-date{
  margin-top:8px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:12px!important;
}
.gift-card:hover .gift-info,
.gift-card:focus-within .gift-info,
.gift-card:hover .gift-media,
.gift-card:focus-within .gift-media{
  opacity:1!important;
}
.gift-card[data-type="image"] .hover-image{
  display:none!important;
}
.gift-card[data-type="image"]:hover .gift-media img,
.gift-card[data-type="image"]:focus-within .gift-media img{
  transform:scale(1.045);
  filter:saturate(1.08) contrast(1.03);
}
.gift-card[data-type="video"]:hover .gift-info,
.gift-card[data-type="video"]:focus-within .gift-info,
.gift-card[data-type="video"]:hover .gift-media,
.gift-card[data-type="video"]:focus-within .gift-media{
  opacity:0!important;
}
.gift-card[data-type="video"]:hover .hover-video.is-ready,
.gift-card[data-type="video"]:focus-within .hover-video.is-ready{
  opacity:1!important;
  z-index:8!important;
}
.gift-card .view-icon{
  display:none!important;
}
.home-auto-card .gift-info{
  display:none!important;
}
.home-auto-card[data-type="video"] .gift-media{
  opacity:0!important;
}
.home-auto-card[data-type="video"] .auto-video.is-ready{
  opacity:1!important;
  z-index:8!important;
}
.home-auto-card[data-type="image"] .gift-media{
  opacity:1!important;
}

/* 点击后的作品详情弹窗：左侧大预览，右侧信息面板 */
.lightbox.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:32px!important;
  background:rgba(2,4,10,.84)!important;
  backdrop-filter:blur(16px);
}
.lightbox-content{
  width:min(1480px,96vw)!important;
  max-height:92vh!important;
}
.work-detail-modal{
  display:grid;
  grid-template-columns:minmax(360px,450px) 1fr;
  min-height:min(860px,86vh);
  overflow:hidden;
  border:1px solid rgba(87,184,255,.24);
  border-radius:22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(38,169,255,.16), transparent 30%),
    linear-gradient(135deg, #080d1a 0%, #11142a 45%, #15122a 100%);
  box-shadow:0 28px 90px rgba(0,0,0,.58);
}
.detail-preview{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:#050914;
}
.detail-media{
  width:100%;
  height:100%;
  max-height:82vh;
  aspect-ratio:750/1624;
  object-fit:contain;
  border-radius:14px;
  background:#161821;
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
.detail-watermark{
  position:absolute;
  right:44px;
  bottom:44px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  color:rgba(255,255,255,.76);
  font-size:12px;
  backdrop-filter:blur(10px);
}
.detail-side{
  padding:48px;
  color:#fff;
}
.detail-topline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:#87c8ff;
}
.detail-topline span,
.detail-tags span{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(46,139,255,.16);
  color:#a9d6ff;
  font-size:14px;
}
.detail-topline b{
  color:#69ffbc;
  font-size:14px;
}
.detail-side h2{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.1;
  letter-spacing:-1.5px;
}
.detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}
.detail-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:0 0 24px;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.detail-metrics div{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
}
.detail-metrics small{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.52);
}
.detail-metrics strong{
  color:#fff;
  font-size:18px;
}
.detail-stars{
  color:#ffd75a!important;
  letter-spacing:1px;
}
.detail-desc{
  max-width:720px;
  color:rgba(255,255,255,.72);
  font-size:17px;
  line-height:1.8;
}
.detail-note{
  margin:26px 0;
  padding:14px 16px;
  border-radius:999px;
  background:rgba(105,255,188,.10);
  color:#74ffc1;
}
.detail-contact{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 28px;
  border-radius:16px;
  background:linear-gradient(135deg,#228cff,#39ddff);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 14px 34px rgba(34,140,255,.28);
}
@media(max-width:900px){
  .lightbox.open{padding:16px!important}
  .work-detail-modal{
    grid-template-columns:1fr;
    max-height:92vh;
    overflow:auto;
  }
  .detail-preview{height:62vh;padding:18px}
  .detail-side{padding:26px}
  .detail-side h2{font-size:30px}
  .detail-metrics{grid-template-columns:1fr}
}
@media(max-width:720px){
  .gift-card .gift-info{padding:48% 10px 12px!important}
  .gift-card .work-title{font-size:18px!important}
  .gift-card .work-desc{display:none!important}
}