/* Works list below the hero: centre guide line, alternating images, category filter. */
#creation .pyro-works{position:relative;padding:180px 0 220px;background:#000;color:#fff;font-family:'SUIT Variable',sans-serif}
#creation .pyro-works::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.16);pointer-events:none}

#creation .pyro-works__filter{position:absolute;top:180px;left:60px;z-index:1}
#creation .pyro-works__filter ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
#creation .pyro-works__filter button{position:relative;padding:6px 0 6px 20px;border:0;background:none;color:rgba(255,255,255,.45);font:500 15px/1.4 'SUIT Variable',sans-serif;letter-spacing:.02em;cursor:pointer;transition:color .3s}
#creation .pyro-works__filter button::before{content:"";position:absolute;left:2px;top:50%;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #9DFFCE;transform:translate(-6px,-50%);opacity:0;transition:opacity .3s,transform .3s}
#creation .pyro-works__filter button:hover,#creation .pyro-works__filter button.is-active{color:#fff}
#creation .pyro-works__filter button.is-active::before{opacity:1;transform:translate(0,-50%)}
#creation .pyro-works__filter button:focus-visible{outline:2px solid #9DFFCE;outline-offset:4px}

#creation .pyro-works__list{margin:0;padding:0;list-style:none}
#creation .pyro-works__item{display:grid;grid-template-columns:1fr 1fr;align-items:center}
#creation .pyro-works__item+.pyro-works__item{margin-top:12vw}
#creation .pyro-works__media{grid-row:1;width:min(42vw,760px);margin:0;overflow:hidden;background:#111}
#creation .pyro-works__media img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#creation .pyro-works__item:hover .pyro-works__media img{transform:scale(1.04)}
#creation .pyro-works__caption{grid-row:1;padding:0 48px}
#creation .pyro-works__caption p{margin:0 0 10px;color:rgba(255,255,255,.55);font-size:12px;font-weight:500;letter-spacing:.08em}
#creation .pyro-works__caption h3{margin:0;font-size:28px;font-weight:600;line-height:1.3;letter-spacing:-.01em;word-break:keep-all}

#creation .pyro-works__item.is-right .pyro-works__media{grid-column:2;justify-self:end}
#creation .pyro-works__item.is-right .pyro-works__caption{grid-column:1;justify-self:end;text-align:right}
#creation .pyro-works__item.is-left .pyro-works__media{grid-column:1;justify-self:start}
#creation .pyro-works__item.is-left .pyro-works__caption{grid-column:2;justify-self:start}

@keyframes pyro-works-in{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
@keyframes pyro-works-fade{from{opacity:0}to{opacity:1}}
#creation .pyro-works__item{animation:pyro-works-fade .6s ease both}
@supports (animation-timeline:view()){
  #creation .pyro-works__media,#creation .pyro-works__caption{animation:pyro-works-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}

@media(max-width:1024px){
  #creation .pyro-works{padding:96px 16px 140px}
  #creation .pyro-works::before{display:none}
  #creation .pyro-works__filter{position:static;margin-bottom:48px}
  #creation .pyro-works__filter ul{flex-direction:row;flex-wrap:wrap;gap:4px 20px}
  #creation .pyro-works__filter button{font-size:14px}
  #creation .pyro-works__item{display:flex;flex-direction:column;align-items:stretch}
  #creation .pyro-works__item+.pyro-works__item{margin-top:112px}
  #creation .pyro-works__media{width:100%}
  #creation .pyro-works__caption,#creation .pyro-works__item.is-right .pyro-works__caption{padding:16px 0 0;text-align:left}
  #creation .pyro-works__caption h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  #creation .pyro-works__item,#creation .pyro-works__media,#creation .pyro-works__caption{animation:none}
  #creation .pyro-works__media img{transition:none}
}

/* Hero: triangle artwork behind the copy (public/about-orbit.js) and the landing scroll cue. */
#creation .keyvisual{position:relative}
#creation .keyvisual__content{position:relative;z-index:1}
#creation .pyro-works-orbit{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#creation .pyro-works-orbit canvas{display:block;width:100%;height:100%}
#creation .pyro-works-desc p{font-size:20px;line-height:30px}
#creation .pyro-works-scroll{position:absolute;left:50%;bottom:8px;z-index:2;height:78px;transform:translateX(-50%)}
#creation .pyro-works-scroll button{all:unset;display:flex;flex-direction:column;align-items:center;height:78px;cursor:pointer}
#creation .pyro-works-scroll button::after{content:"";display:block;width:1px;height:52px;background:linear-gradient(to bottom,transparent,#f4f4f8);animation:pyro-scroll-drop 2s ease-in-out infinite}
#creation .pyro-works-scroll button:focus-visible{outline:2px solid #9DFFCE;outline-offset:8px}
@media(max-width:1024px){#creation .pyro-works-desc p{font-size:calc(14 / 375 * 100vw);line-height:calc(24 / 14)}}
@media(prefers-reduced-motion:reduce){#creation .pyro-works-scroll button::after{animation:none}}