/* 高级线上艺术展厅 · 追光画框交互层。 */
:root{
  --gallery-ease:cubic-bezier(.16,1,.3,1);
}

.desc{display:block;overflow:visible;white-space:normal;overflow-wrap:anywhere}

.hero{
  --hero-field-x:0px;--hero-field-y:0px;--hero-title-x:0px;--hero-title-y:0px;
  min-height:calc(100svh - var(--site-global-height,56px) - clamp(40px,6vw,84px));
  display:flex;flex-direction:column;justify-content:center;isolation:isolate;
}
.hero::before,.hero::after{will-change:transform;transform-origin:center;opacity:1}
.hero::before{
  left:-12%;top:-30%;width:72%;height:150%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,105,58,1),transparent 70%);
  filter:blur(90px);opacity:.13;
  animation:orange-field-drift 12s ease-in-out infinite alternate;
}
.hero::after{
  right:-14%;top:-12%;width:62%;height:142%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(57,91,212,1),transparent 70%);
  filter:blur(110px);opacity:.09;
  animation:blue-field-drift 16s ease-in-out infinite alternate;
}
@keyframes orange-field-drift{
  from{transform:translate3d(calc(var(--hero-field-x) - 10px),calc(var(--hero-field-y) - 6px),0) scale(.99)}
  to{transform:translate3d(calc(var(--hero-field-x) + 18px),calc(var(--hero-field-y) + 12px),0) scale(1.025)}
}
@keyframes blue-field-drift{
  from{transform:translate3d(calc(var(--hero-field-x) + 12px),calc(var(--hero-field-y) - 10px),0) scale(1.02)}
  to{transform:translate3d(calc(var(--hero-field-x) - 16px),calc(var(--hero-field-y) + 16px),0) scale(.985)}
}
.hero-primary>*,.hero-scroll{
  transition:opacity 620ms var(--gallery-ease),transform 620ms var(--gallery-ease),color 180ms ease;
}
.hero-primary>*{transform:translate3d(var(--hero-title-x),var(--hero-title-y),0)}
html.js body:not(.is-exhibit-ready) .hero-primary>*,
html.js body:not(.is-exhibit-ready) .hero-scroll{opacity:0;transform:translate3d(0,22px,0)}
.hero-primary>:nth-child(1){transition-delay:0ms}
.hero-primary>:nth-child(2){transition-delay:70ms}
.hero-primary>:nth-child(3){transition-delay:140ms}
.hero-primary>:nth-child(4){transition-delay:210ms}
.hero-scroll{transition-delay:280ms}
.hero-scroll{
  min-height:44px;margin-top:auto;padding:8px 0;border:0;border-radius:0;
  display:inline-flex;align-items:center;align-self:flex-start;
  color:var(--tx2);background:transparent;font:inherit;font-size:13px;font-weight:750;
  letter-spacing:.02em;cursor:pointer;
}
.hero-scroll:hover{color:var(--tx);transform:translateY(-2px)}
.hero-scroll:focus-visible,.edition-option:focus-visible,.card:focus-visible{
  outline:2px solid #ff8659;outline-offset:3px;
}

.edition-archive{
  position:relative;z-index:6;margin:-4px 0 34px;padding:0;
  scroll-margin-top:calc(var(--site-global-height,56px) + 18px);
  opacity:0;transform:translateY(24px);
  transition:opacity 520ms var(--gallery-ease),transform 520ms var(--gallery-ease);
}
.edition-archive.is-revealed{opacity:1;transform:none}
.edition-archive-label{
  display:flex;align-items:center;gap:9px;margin:0 0 5px;
  color:var(--tx3);font-size:11px;font-weight:800;letter-spacing:.18em;
}
.edition-options{
  display:flex;align-items:flex-end;gap:30px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.edition-option{
  flex:0 0 auto;min-height:44px;padding:8px 0 7px;border:0;
  border-bottom:2px solid transparent;border-radius:0;color:var(--tx2);
  background:transparent;font:inherit;font-size:15px;font-weight:750;
  letter-spacing:.01em;cursor:pointer;white-space:nowrap;
}
.edition-option:hover{color:var(--tx)}
.edition-option[aria-current="true"]{color:#ff8659;border-bottom-color:#ff8659}
.works-proof{
  margin:14px 0 0;color:var(--tx);font-size:clamp(15px,1.7vw,18px);
  font-weight:720;letter-spacing:-.01em;
}

.grid{
  perspective:900px;
  transition:opacity 420ms var(--gallery-ease),transform 420ms var(--gallery-ease);
}
.grid.is-switching-out{opacity:0;transform:translateY(-8px);transition-duration:220ms}
.grid.is-switching-in{opacity:0;transform:translateY(12px);transition:none}

.card{
  --rx:0deg;--ry:0deg;--tz:0px;--frame-scale:1;--img-x:0px;--img-y:0px;
  --spot-x:50%;--spot-y:50%;
  overflow:visible;isolation:auto;background:transparent;border:0;box-shadow:none;
  touch-action:pan-y;opacity:0;filter:blur(4px);
  transform:translate3d(0,36px,0) scale(.96);transform-style:preserve-3d;
  transition:opacity 680ms var(--gallery-ease),transform 680ms var(--gallery-ease),filter 680ms var(--gallery-ease);
}
.card:not(.is-ready){transition-delay:var(--reveal-delay,0ms)}
.card.in{opacity:1;filter:none;transform:none}
.card.in.is-ready{transition-delay:0ms;transition-duration:420ms}
.card-frame{
  position:absolute;inset:0;display:block;overflow:hidden;isolation:isolate;
  border-radius:20px;background:linear-gradient(152deg,var(--from),var(--to));
  border:1px solid var(--line);box-shadow:0 12px 30px -22px rgba(0,0,0,.8);
  transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;
  transform:translate3d(0,0,var(--tz)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--frame-scale));
}
.card-frame::after{
  content:"";position:absolute;inset:-1px;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle 240px at var(--spot-x) var(--spot-y),
    rgba(255,250,238,.22) 0%,rgba(255,141,86,.12) 34%,rgba(255,121,65,.045) 53%,transparent 72%);
  mix-blend-mode:screen;transition:opacity 520ms var(--gallery-ease);
}
.card-frame::before{
  content:"";position:absolute;inset:-18% -65%;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(102deg,transparent 38%,rgba(255,250,238,.38) 49%,rgba(255,153,104,.18) 53%,transparent 64%);
  transform:translateX(-58%) skewX(-10deg);
}
.card.is-spotlit .card-frame{border-color:rgba(255,242,226,.3);box-shadow:0 26px 52px -30px rgba(0,0,0,.94)}
.card.is-spotlit .card-frame::after{opacity:1;transition-duration:240ms}
.card.is-frame-flash .card-frame{animation:frame-border-flash 280ms ease-out}
.card.is-frame-flash .card-frame::before{animation:frame-sweep 280ms ease-out}
@keyframes frame-border-flash{
  0%,100%{border-color:rgba(255,242,226,.3)}
  45%{border-color:rgba(255,248,236,.78)}
}
@keyframes frame-sweep{
  0%{opacity:0;transform:translateX(-58%) skewX(-10deg)}
  24%{opacity:.82}
  100%{opacity:0;transform:translateX(58%) skewX(-10deg)}
}
.ph{z-index:0}
.bg{
  transform:translate3d(var(--img-x),var(--img-y),0) scale(1);
  transform-origin:center;will-change:transform;transition:filter 160ms ease;
}
.card.is-spotlit .bg{transform:translate3d(var(--img-x),var(--img-y),0) scale(1.045)}
.info{isolation:isolate;transform:translateZ(24px);backface-visibility:hidden}
.info::before{display:none}
.maker-row{min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:10px}
.maker{min-width:0;align-self:auto}
.maker .dot{display:none}
.online-status{
  display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.76);
  font-size:10.5px;font-weight:750;letter-spacing:.04em;white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.65);
}
.status-dot{width:6px;height:6px;border-radius:50%;background:#ff8a5e;box-shadow:0 0 0 3px rgba(255,138,94,.14)}
.card h2{overflow-wrap:anywhere}
.card-footer{
  min-height:44px;margin-top:1px;display:flex;align-items:center;justify-content:flex-end;
  font-size:12px;font-weight:800;
}
.card-cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  color:rgba(255,255,255,.82);transition:color 180ms ease;
}
.cta-arrow{display:inline-block;transition:transform 160ms var(--gallery-ease)}
.card.is-spotlit .card-cta{color:#fff}

@media (hover:hover) and (pointer:fine){
  body.exhibit-pointer .grid,body.exhibit-pointer .grid *{cursor:none!important}
  .grid.has-row-focus .card.in.is-row-neighbor{
    opacity:.62;transform:scale(.975);filter:saturate(.78);transition-duration:320ms;
  }
  .grid.has-row-focus .card.in.is-row-peer{
    opacity:.82;transform:scale(.99);transition-duration:320ms;
  }
}

.exhibit-cursor{
  position:fixed;left:0;top:0;z-index:80;width:12px;height:12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(255,248,236,.94);color:#181310;opacity:0;
  box-shadow:0 4px 18px rgba(0,0,0,.22);overflow:hidden;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  transition:width 260ms var(--gallery-ease),height 260ms var(--gallery-ease),
    opacity 80ms ease,background-color 160ms ease;
  will-change:transform,width,height;
}
.exhibit-cursor.is-visible{opacity:1}
.exhibit-cursor.is-card{width:72px;height:72px;transition-duration:220ms}
.exhibit-cursor.is-down{width:58px;height:58px;transition-duration:90ms}
.exhibit-cursor span{
  width:60px;text-align:center;font-size:10px;font-weight:850;line-height:1.25;
  letter-spacing:.02em;opacity:0;transform:scale(.84);transition:opacity 120ms ease,transform 180ms var(--gallery-ease);
}
.exhibit-cursor.is-card span{opacity:1;transform:scale(1)}

@media (max-width:760px){
  .exhibit-cursor{display:none!important}
  .card-frame{transform:none}
  .card.is-spotlit .card-frame::after{opacity:0}
  .card.is-spotlit .bg{transform:none}
  .card.in.is-ready.is-mobile-adjacent{opacity:.72;transform:scale(.965);transition-duration:360ms}
  .card.in.is-ready.active{opacity:1;transform:none}
  .card.active .bg{animation:mobile-cover-drift 7s ease-in-out infinite alternate}
  .card.is-mobile-flash .card-frame::before{animation:mobile-frame-sweep 480ms var(--gallery-ease)}
  .card.is-pressing .card-frame{transform:scale(.985);transition:transform 90ms var(--gallery-ease);border-color:rgba(255,248,236,.52)}
  .card.is-releasing .card-frame{transform:none;transition:transform 160ms var(--gallery-ease)}
  .card.is-releasing .cta-arrow{transform:translateX(4px)}
  @keyframes mobile-cover-drift{
    from{transform:translate3d(0,0,0) scale(1.035)}
    to{transform:translate3d(0,-10px,0) scale(1.035)}
  }
  @keyframes mobile-frame-sweep{
    0%{opacity:0;transform:translateX(-58%) skewX(-10deg)}
    28%{opacity:.6}
    100%{opacity:0;transform:translateX(58%) skewX(-10deg)}
  }
}

@media (max-width:560px){
  h1{font-size:clamp(39px,11.2vw,46px)}
  .wrap{padding-left:16px;padding-right:16px}
  .hero{min-height:calc(100svh - var(--site-global-height,56px) - 40px)}
  .hero-scroll{width:100%;justify-content:flex-start}
  .edition-archive{margin-bottom:26px}
  .edition-options{gap:24px;margin-right:-20px;padding-right:20px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .info{padding:18px 18px 16px}
  .card-footer{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.card-frame,.card-frame::before,.card-frame::after,.bg{animation:none!important}
  .hero-primary>*,.hero-scroll,.edition-archive,.grid,.card,.card-frame,.bg,.card-cta,.cta-arrow{
    transition-duration:80ms!important;transition-delay:0ms!important;
  }
  html.js body:not(.is-exhibit-ready) .hero-primary>*,html.js body:not(.is-exhibit-ready) .hero-scroll,
  .hero-primary>*,.hero-scroll,.edition-archive,.edition-archive.is-revealed,
  .grid,.grid.is-switching-out,.grid.is-switching-in,.card,.card.in,
  .card.in.is-ready.is-mobile-adjacent,.card.in.is-ready.active,.card-frame,.bg,.info{
    transform:none!important;filter:none!important;
  }
  .card,.card.in,.edition-archive{opacity:1!important}
  .card{transition-delay:0ms!important}
  .card-frame::after,.exhibit-cursor{display:none!important}
}