/* ==========================================================================
   RAYSPACE — rs design system (visual port of the .com.cn intro + wall)
   ========================================================================== */
:root{
  --rs-red:#ee631f; --rs-ink:#111; --rs-muted:#686868; --rs-line:#d9d9d9;
  --rs-paper:#fff; --rs-gutter:14px;
  --rs-ease:cubic-bezier(.22,1,.36,1);
  --rs-intro-duration:13.1s;
  --rs-nav-left:24px; --rs-nav-top:24px; --rs-nav-size:30px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--rs-paper);color:var(--rs-ink);
  font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-intro-active{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
ul{list-style:none}
::selection{background:var(--rs-red);color:#fff}
.rs-visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}

/* =============================== Intro =============================== */
.rs-intro{position:fixed;inset:0;z-index:200;background:#090909;color:#fff;isolation:isolate;overflow:hidden;
  transition:opacity .96s var(--rs-ease),visibility 0s linear .96s;
  animation:rs-intro-auto-exit 14.6s var(--rs-ease) both}
@keyframes rs-intro-auto-exit{0%,93%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
.rs-intro.is-leaving{pointer-events:none;opacity:0}
.rs-intro.is-complete{display:none}

.rs-intro-media{position:absolute;inset:0;z-index:0;background:#111;overflow:hidden}
.rs-intro-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  backface-visibility:hidden;will-change:opacity,transform;transform:scale(1.07)}
.rs-intro-media img:nth-child(1){animation:rs-intro-first 7.4s var(--rs-ease) both}
.rs-intro-media img:nth-child(2){animation:rs-intro-frame 7.4s var(--rs-ease) 3.7s both}
.rs-intro-media img:nth-child(3){animation:rs-intro-frame 7.4s var(--rs-ease) 5.7s both}
.rs-intro-media img:nth-child(4){animation:rs-intro-final 7.4s var(--rs-ease) 9.2s both}
@keyframes rs-intro-first{0%,58%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.012)}}
@keyframes rs-intro-frame{0%{opacity:0;transform:scale(1.08)}18%,82%{opacity:1}100%{opacity:0;transform:scale(1.008)}}
@keyframes rs-intro-final{0%{opacity:0;transform:scale(1.08)}12%,100%{opacity:1;transform:scale(1.008)}}

.rs-intro-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#06070861,#0000 46%,#0607082e),linear-gradient(#0000 62%,#06070875);
  transition:opacity .36s}
.rs-intro.is-leaving .rs-intro-shade{opacity:0}

.rs-intro-brand{position:absolute;inset:0;z-index:40;color:var(--rs-red);pointer-events:none;transition:opacity .42s .12s}
.rs-intro.is-leaving .rs-intro-brand{opacity:0}

.rs-intro-wordmark{
  position:absolute;top:50%;left:50%;
  transform:translate3d(-50%,-50%,0) scaleX(13.45) scaleY(9.684);
  width:max-content;display:inline-flex;align-items:center;white-space:nowrap;overflow:visible;
  column-gap:.045em;
  font-size:var(--rs-nav-size);line-height:1;
  filter:drop-shadow(0 1px 2px #000000d9) drop-shadow(0 0 8px #00000059);
  animation:rs-intro-journey var(--rs-intro-duration) var(--rs-ease) both,
            rs-intro-spacing var(--rs-intro-duration) var(--rs-ease) both;
}
@keyframes rs-intro-journey{
  0%,38.4%{transform:translate3d(-50%,-50%,0) scaleX(13.45) scaleY(9.684)}
  51.3%{transform:translate(-50%,-50%) scale(1.48,1.48)}
  58.6%,100%{transform:translate3d(calc(-50vw + var(--rs-nav-left)),calc(-50vh + var(--rs-nav-top)),0) scale(1,1)}
}
@keyframes rs-intro-spacing{0%,38.4%{column-gap:.045em}51.3%,100%{column-gap:0}}
.rs-intro-wordmark>span{
  width:calc(var(--rs-letter-width,.48em)*1em);height:1em;
  margin-right:calc(var(--rs-letter-gap,.1em)*1em);
  flex:none;display:inline-block;overflow:hidden;transform-origin:0;will-change:transform,opacity;
  animation:rs-intro-letter-collapse var(--rs-intro-duration) var(--rs-ease) both}
.rs-intro-wordmark>span:first-child{animation:none}
.rs-intro-wordmark>span:last-child{margin-right:0}
@keyframes rs-intro-letter-collapse{
  0%,88.6%{opacity:1;transform:translate(0,0) scaleX(1)}
  96.4%,100%{opacity:0;transform:translate3d(var(--rs-letter-collapse-x,0),0,0) scaleX(.16)}
}
.rs-intro-wordmark i{display:block;width:100%;height:100%;background:currentColor;
  -webkit-mask:var(--rs-letter-mask) center/100% 100% no-repeat;
  mask:var(--rs-letter-mask) center/100% 100% no-repeat;
  animation:rs-intro-letter-up var(--rs-intro-duration) var(--rs-ease) both;
  animation-delay:calc(var(--i,0)*70ms)}
.rs-intro-wordmark>span:nth-child(odd) i{transform:translateY(-120%)}
.rs-intro-wordmark>span:nth-child(even) i{animation-name:rs-intro-letter-down;transform:translateY(120%)}
@keyframes rs-intro-letter-up{0%,3.7%{opacity:0;transform:translateY(-120%)}18.4%,100%{opacity:1;transform:translate(0,0)}}
@keyframes rs-intro-letter-down{0%,3.7%{opacity:0;transform:translateY(120%)}18.4%,100%{opacity:1;transform:translate(0,0)}}

.rs-intro-brand-meta{
  position:absolute;top:64%;left:24px;right:24px;
  display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:18px;
  opacity:0;animation:rs-intro-meta var(--rs-intro-duration) var(--rs-ease) both;
}
.rs-intro.is-complete .rs-intro-brand-meta{visibility:hidden;animation:none}
@keyframes rs-intro-meta{
  0%,18.4%{opacity:0;transform:translateY(14px)}
  29.4%,42.1%{opacity:1;transform:translateY(0)}
  53.1%,100%{opacity:0;transform:translateY(-8px)}
}
.rs-intro-brand-meta small,.rs-intro-brand-meta em{
  font-size:10px;font-weight:700;font-style:normal;letter-spacing:.17em;text-transform:uppercase;line-height:1}
.rs-intro-brand-meta i{display:block;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0;
  animation:rs-intro-line var(--rs-intro-duration) var(--rs-ease) both}
@keyframes rs-intro-line{0%,22%{transform:scaleX(0)}36.7%,100%{transform:scaleX(1)}}

.rs-intro-principles{
  position:absolute;inset:0;z-index:30;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(34px,6vw,96px);
  clip-path:inset(100% 0 0 0);
  animation:rs-intro-principles-stage var(--rs-intro-duration) var(--rs-ease) both;
}
@keyframes rs-intro-principles-stage{0%,56.5%{opacity:0;clip-path:inset(100% 0 0 0)}61.5%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
.rs-intro-principles:before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,#08090ae0,#08090a80 58%,#08090ac2);transition:opacity .42s}
.rs-intro.is-leaving .rs-intro-principles:before{opacity:0}
.rs-intro-principles-copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;
  transition:opacity .3s,filter .42s,transform .42s var(--rs-ease)}
.rs-intro.is-leaving .rs-intro-principles-copy{opacity:0;filter:blur(3px);transform:translateY(-14px)}
.rs-intro-principles p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,7vw,96px);line-height:.92;letter-spacing:-.04em;
  max-width:12ch;margin:auto 0;color:#fff}
.rs-intro-principles p span{display:inline-block;clip-path:inset(0 100% 0 0);transform:translateX(-18px);
  animation:rs-intro-principle-line var(--rs-intro-duration) var(--rs-ease) both}
.rs-intro-principles p:nth-child(2) span{animation-delay:.55s}
.rs-intro-principles p:nth-child(3) span{animation-delay:1.1s}
@keyframes rs-intro-principle-line{0%,59.3%{clip-path:inset(0 100% 0 0);transform:translateX(-18px)}72%,100%{clip-path:inset(0);transform:translateX(0)}}

.rs-intro-skip{
  position:absolute;right:24px;bottom:24px;z-index:60;color:#fff;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:12px 0;overflow:hidden;
}
.rs-intro-skip:hover{opacity:.85}
.rs-intro-progress{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:0;
  animation:rs-intro-progress var(--rs-intro-duration) linear both}
@keyframes rs-intro-progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* =============================== Nav =============================== */
.rs-portfolio-nav{
  position:fixed;z-index:120;top:var(--rs-nav-top);left:var(--rs-nav-left);
  display:flex;flex-direction:column;gap:14px;color:var(--rs-red);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .5s var(--rs-ease) .2s,transform .5s var(--rs-ease) .2s,visibility 0s linear .7s;
}
.rs-portfolio-nav.is-final{opacity:1;visibility:visible;transform:none}
.rs-portfolio-wordmark{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:var(--rs-nav-size);line-height:1;color:currentColor;
}
.rs-portfolio-initial,.rs-portfolio-rest{display:block;height:1em;flex:none;background:currentColor}
.rs-portfolio-initial{
  width:.487445em;
  -webkit-mask:url(/brand/rayspace-letter-r.png) 50%/100% 100% no-repeat;
  mask:url(/brand/rayspace-letter-r.png) 50%/100% 100% no-repeat;
}
.rs-portfolio-rest{
  width:3.94387em;max-width:3.94387em;opacity:1;clip-path:inset(0);transform:none;
  -webkit-mask:url(/brand/rayspace-wordmark-rest-mask.png) 50%/100% 100% no-repeat;
  mask:url(/brand/rayspace-wordmark-rest-mask.png) 50%/100% 100% no-repeat;
}
.rs-portfolio-nav nav a{
  width:max-content;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;opacity:.85;text-shadow:0 1px 2px #000000b3;
  transition:opacity .25s,color .3s;
}
.rs-portfolio-nav.is-final nav a{color:inherit;text-shadow:none}
.rs-portfolio-nav nav a::after{content:"";display:block;height:1px;background:currentColor;width:0;transition:width .35s var(--rs-ease)}
.rs-portfolio-nav nav a:hover,.rs-portfolio-nav nav a.is-active{opacity:1}
.rs-portfolio-nav nav a:hover::after,.rs-portfolio-nav nav a.is-active::after{width:100%}

/* =============================== Wall =============================== */
.rs-portfolio-wall{padding:calc(var(--rs-nav-top) + 66px) var(--rs-nav-left) 0;min-height:100vh}
.rs-wall-scroll{max-width:1680px;margin:0 auto}
.rs-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rs-gutter);margin-bottom:var(--rs-gutter)}
.rs-span-full{grid-column:span 12}
.rs-span-twothird{grid-column:span 8}
.rs-span-third{grid-column:span 4}

.rs-project-card{position:relative;min-width:0;z-index:0}
.rs-project-card.is-previewing{z-index:8}
.rs-project-card.in-view{animation:rs-card-in .7s var(--rs-ease) both;animation-delay:calc(var(--d,0)*70ms)}
@keyframes rs-card-in{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}

.rs-project-trigger{display:block;width:100%;text-align:left;padding:0}
.rs-project-image{position:relative;display:block;width:100%;overflow:hidden;isolation:isolate;background:#efefef}
.rs-ratio-full{aspect-ratio:2.35}
.rs-ratio-twothird{aspect-ratio:1.55}
.rs-ratio-third{aspect-ratio:.75}
.rs-project-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--rs-ease)}
.rs-project-trigger:hover .rs-project-image img,
.rs-project-card.is-previewing .rs-project-image img{transform:scale(1.035)}
.rs-project-image:after{content:"";position:absolute;inset:24% 0 0;z-index:1;opacity:0;pointer-events:none;
  background:linear-gradient(#0000,#000000b8);transition:opacity .42s}
.rs-project-trigger:hover .rs-project-image:after,
.rs-project-card.is-previewing .rs-project-image:after{opacity:1}

.rs-project-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  padding:18px 20px;color:#fff;
  opacity:0;transform:translateY(8px);
  transition:opacity .42s var(--rs-ease),transform .42s var(--rs-ease);
}
.rs-project-trigger:hover .rs-project-caption,
.rs-project-card.is-previewing .rs-project-caption{opacity:1;transform:none}
.rs-project-caption small{display:block;font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;opacity:.72}
.rs-project-caption strong{display:block;font-size:clamp(15px,1.3vw,20px);font-weight:600;letter-spacing:-.01em;margin-top:4px}
.rs-project-caption em{font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;white-space:nowrap;font-variant-numeric:tabular-nums}

.rs-angle-preview{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 16px 16px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .42s var(--rs-ease),transform .42s var(--rs-ease),visibility 0s linear .42s;
}
.rs-project-card.is-previewing .rs-angle-preview{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;
}
.rs-angle-preview-inner{display:flex;align-items:center;gap:14px}
.rs-angle-rail{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.rs-angle-rail::-webkit-scrollbar{display:none}
.rs-angle-rail button{flex:none;width:52px;height:38px;overflow:hidden;opacity:.68;transition:opacity .25s}
.rs-angle-rail button:hover,.rs-angle-rail button.is-active{opacity:1;outline:2px solid #fff;outline-offset:-2px}
.rs-angle-rail img{width:100%;height:100%;object-fit:cover}
.rs-preview-open{
  flex:none;display:inline-flex;align-items:center;gap:10px;color:#fff;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid #ffffff90;padding:4px 0;
}
.rs-preview-open .rs-arrow{width:22px;display:inline-flex;transition:transform .3s var(--rs-ease)}
.rs-preview-open:hover .rs-arrow{transform:translateX(6px)}

/* =========================== Studio =========================== */
.rs-studio-info{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr);
  column-gap:clamp(48px,10vw,180px);row-gap:40px;
  min-height:82vh;align-content:end;
  padding:clamp(54px,7vw,110px) var(--rs-nav-left);
  background:var(--rs-paper);
}
.rs-studio-statement p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(50px,7vw,96px);line-height:.92;letter-spacing:-.04em;max-width:12ch}
.rs-studio-statement button{
  display:inline-flex;align-items:center;gap:18px;margin-top:48px;padding:11px 0;
  border-bottom:1px solid var(--rs-ink);
  letter-spacing:.08em;text-transform:uppercase;font-size:12px;
}
.rs-studio-statement .rs-arrow{width:28px;transition:transform .3s var(--rs-ease)}
.rs-studio-statement button:hover .rs-arrow{transform:translateX(6px)}
.rs-studio-aside{display:flex;flex-direction:column;justify-content:flex-end;gap:34px}
.rs-studio-note{color:var(--rs-muted);font-size:14px;max-width:38ch}
.rs-studio-history{border-top:1px solid var(--rs-ink)}
.rs-studio-history li{
  display:grid;grid-template-columns:98px minmax(0,1fr);gap:18px;align-items:baseline;
  min-height:98px;padding:18px 0;border-bottom:1px solid var(--rs-line)}
.rs-studio-history time{font-family:Georgia,serif;font-size:31px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.rs-studio-history span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}

/* =========================== Dialog =========================== */
.rs-dialog-backdrop{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:32px;
  background:#0a0a0ac2;animation:rs-backdrop-in .26s var(--rs-ease) both;
}
.rs-dialog-backdrop[hidden]{display:none}
@keyframes rs-backdrop-in{0%{opacity:0}100%{opacity:1}}
.rs-project-dialog{
  position:relative;width:min(1280px,100%);max-height:92vh;
  display:flex;flex-direction:column;
  background:var(--rs-paper);color:var(--rs-ink);
  animation:rs-dialog-in .3s var(--rs-ease) both;
}
@keyframes rs-dialog-in{0%{opacity:0;transform:translateY(18px) scale(.99)}100%{opacity:1;transform:none}}
.rs-dialog-close{position:absolute;top:16px;right:16px;z-index:4;width:44px;height:44px;padding:10px;
  background:var(--rs-paper);color:var(--rs-ink);transition:background .25s}
.rs-dialog-close:hover{background:#eee}
.rs-dialog-close svg{width:100%;height:auto}
.rs-dialog-arrow{
  position:absolute;top:50%;z-index:4;transform:translateY(-50%);
  width:46px;height:46px;display:grid;place-items:center;padding:12px;
  background:#ffffffd9;color:var(--rs-ink);transition:background .25s;
}
.rs-dialog-arrow:hover{background:#fff}
.rs-dialog-arrow svg{width:22px;height:auto}
.rs-dialog-prev{left:14px}
.rs-dialog-next{right:14px}
.rs-dialog-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;flex:1}
.rs-dialog-main-image{background:#0d0d0d;display:grid;place-items:center;min-height:0;padding:24px}
.rs-dialog-main-image img{max-width:100%;max-height:72vh;object-fit:contain;animation:rs-image-in .35s both}
@keyframes rs-image-in{0%{opacity:.35}100%{opacity:1}}
.rs-dialog-information{padding:28px 26px;display:flex;flex-direction:column;gap:12px;
  border-left:1px solid var(--rs-line);overflow:auto}
.rs-dialog-information small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rs-muted);font-variant-numeric:tabular-nums}
.rs-dialog-information strong{font-family:Georgia,serif;font-size:clamp(24px,2.4vw,34px);line-height:1.05;letter-spacing:-.02em}
.rs-dialog-information span{font-size:13px;color:var(--rs-muted)}
.rs-dialog-filmstrip{display:flex;gap:8px;padding:14px;border-top:1px solid var(--rs-line);overflow-x:auto}
.rs-dialog-filmstrip button{flex:none;width:86px;height:60px;overflow:hidden;opacity:.6;transition:opacity .25s}
.rs-dialog-filmstrip button:hover,.rs-dialog-filmstrip button.is-active{opacity:1;outline:2px solid var(--rs-ink);outline-offset:-2px}
.rs-dialog-filmstrip img{width:100%;height:100%;object-fit:cover}

/* =========================== Responsive =========================== */
@media (max-width:900px){
  :root{--rs-nav-left:16px;--rs-nav-top:16px;--rs-nav-size:24px}
  .rs-portfolio-wall{padding-top:calc(var(--rs-nav-top) + 54px)}
  .rs-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-span-full{grid-column:span 2}
  .rs-span-twothird,.rs-span-third{grid-column:span 1}
  .rs-ratio-full{aspect-ratio:1.6}
  .rs-ratio-twothird{aspect-ratio:1.25}
  .rs-angle-preview{display:none}
  .rs-project-caption{opacity:1;transform:none}
  .rs-studio-info{grid-template-columns:1fr;min-height:0}
  .rs-dialog-main{grid-template-columns:1fr}
  .rs-dialog-information{border-left:0;border-top:1px solid var(--rs-line)}
  .rs-intro-principles p{font-size:clamp(34px,9vw,54px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rs-project-card{opacity:1;transform:none}
}