:root{
  --bg:#03050b;
  --fg:#eef0f3;
  --dim:rgba(238,240,243,.46);
  --line:rgba(238,240,243,.12);
  --sans:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --kr:"Pretendard",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(16px,2.4vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);overscroll-behavior:none}
body{font:400 13px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;word-break:keep-all}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
img{display:block}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;z-index:0}

/* page: smooth-scrolled on desktop (fixed + translate), native on touch */
#page{position:relative;z-index:1;pointer-events:none}
.smooth #page{position:fixed;top:0;left:0;width:100%;will-change:transform}
#page .clients,#page .works,#page .about{pointer-events:auto}
.hero{position:relative}
.hero{height:100vh;height:100svh}
.field{height:200vh}

/* bar */
.bar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:var(--pad);pointer-events:none}
.bar::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(3,5,11,.55),rgba(3,5,11,0))}
.bar>*{pointer-events:auto}
.brand img{height:clamp(17px,1.7vw,22px);width:auto}
.bar .right{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.bar nav{display:flex;gap:clamp(18px,2.4vw,34px);font-size:13px;letter-spacing:.01em}
.bar nav a{opacity:.62;transition:opacity .25s}
.bar nav a:hover{opacity:1}

.tag{position:fixed;z-index:15;left:0;top:0;pointer-events:none;font:400 10.5px/1.35 var(--mono);
  letter-spacing:.02em;opacity:0;transition:opacity .2s;white-space:nowrap}
.tag.on{opacity:1}
.tag .t{display:block}
.tag .c{display:block;color:var(--dim)}

/* clients — one loose constellation, read as a single group */
.clients{padding:22vh var(--pad) 18vh;display:flex;justify-content:center}
.cloud{position:relative;width:min(980px,100%);height:440px}
.cloud img{position:absolute;opacity:.78;transition:opacity .3s}
.cloud img:hover{opacity:1}

/* works — aligned columns, one per category */
.works{padding:10vh var(--pad) 14vh}
.cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);align-items:start}
.col h2{font:400 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--dim);margin-bottom:14px;display:flex;gap:6px}
.col h2 b{font-weight:400;color:var(--fg)}
/* every column is cut to the same height so the row ends on one line; images keep their own ratio */
.col .grid{--cap:clamp(520px,92vh,920px);display:flex;flex-direction:column;gap:clamp(12px,1.3vw,20px);
  max-height:var(--cap);overflow:hidden;transition:max-height .7s cubic-bezier(.2,.7,.2,1)}
.col.cut .grid{-webkit-mask:linear-gradient(#000 calc(100% - 120px),transparent);mask:linear-gradient(#000 calc(100% - 120px),transparent)}
.col.open .grid{-webkit-mask:none;mask:none}
.col .it{display:block;flex:0 0 auto;background:#0a0d16;cursor:pointer;overflow:hidden}
.col .it img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.col .it:hover img{transform:scale(1.03)}
.col .more{display:none;margin-top:16px;font:400 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim);cursor:pointer;
  padding:8px 0;transition:color .25s}
.col .more:hover{color:var(--fg)}
.col.cut .more{display:inline-flex;gap:8px;align-items:center}
.col .more i{font-style:normal;display:inline-block;transition:transform .4s}
.col.open .more i{transform:rotate(45deg)}

/* about */
.about{padding:16vh var(--pad) clamp(28px,4vh,44px)}
.ab{max-width:none}
.ab .mark{height:clamp(30px,3.6vw,46px);width:auto;margin-bottom:clamp(28px,4vw,48px)}
.ab .lead{font:400 clamp(17px,1.7vw,22px)/1.55 var(--kr);letter-spacing:-.01em;max-width:30em;margin-bottom:clamp(48px,7vw,88px)}
/* four words, set like a title card: index numbers, hairline rules, a prism line on hover */
.ab .words{list-style:none;display:flex;flex-wrap:wrap;align-items:flex-end;max-width:none;counter-reset:w;
  font:400 clamp(30px,4.2vw,64px)/1 var(--sans);letter-spacing:-.025em}
.ab .words li{position:relative;counter-increment:w;padding:22px clamp(18px,2.4vw,36px) 14px;
  border-left:1px solid var(--line)}
.ab .words li:first-child{padding-left:0;border-left:0}
.ab .words li::before{content:counter(w,decimal-leading-zero);position:absolute;top:0;left:clamp(18px,2.4vw,36px);
  font:400 10px/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
.ab .words li:first-child::before{left:0}
.ab .words li::after{content:"";position:absolute;left:clamp(18px,2.4vw,36px);right:clamp(18px,2.4vw,36px);bottom:2px;height:1px;
  background:linear-gradient(90deg,#ff5f7a,#ffc36b,#7cf2c9,#6aa8ff,#b38bff);background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:sheen 4s linear infinite}
.ab .words li:first-child::after{left:0}
.ab .words li:hover::after{transform:scaleX(1)}
.ab dl{display:flex;flex-wrap:wrap;gap:40px clamp(56px,7vw,112px)}
.ab dl>div{flex:0 0 auto}
.ab ul{list-style:none}
.ab li{white-space:nowrap}
.ab dt{font:400 10.5px/1 var(--mono);color:var(--dim);letter-spacing:.04em;margin-bottom:12px}
.ab dd{font:400 13.5px/1.7 var(--kr)}
.ab dd span{color:var(--dim)}
.ab dd a{border-bottom:1px solid var(--line);transition:border-color .25s}
.ab dd a:hover{border-color:var(--fg)}
.about footer{margin-top:clamp(56px,9vh,96px);font:400 10.5px/1 var(--mono);color:var(--dim)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lb.on{opacity:1}
.lb[hidden]{display:flex;visibility:hidden;pointer-events:none}
.lb .stage{width:min(88vw,calc(78vh*16/9));height:78vh;display:flex;align-items:center;justify-content:center}
.lb .stage img,.lb .stage video{max-width:100%;max-height:100%;object-fit:contain;background:#000}
.lb .cap{position:absolute;left:var(--pad);bottom:var(--pad);font:400 10.5px/1.35 var(--mono)}
.lb .cap .c{display:block;color:var(--dim)}
.lb .x{position:absolute;right:var(--pad);top:var(--pad);font-size:13px;opacity:.62;cursor:pointer}
.lb .x:hover{opacity:1}

/* droplet for DOM areas — the WebGL lens takes over above the field */
.drop{position:fixed;z-index:50;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .2s,width .25s,height .25s,margin .25s;
  -webkit-backdrop-filter:saturate(1.8) contrast(1.08) brightness(1.1);backdrop-filter:saturate(1.8) contrast(1.08) brightness(1.1);
  box-shadow:inset 0 0 8px rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.22);animation:wob 6s ease-in-out infinite}
.drop::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;
  background:conic-gradient(from 0deg,#ff4d6d,#ffb347,#f9f871,#5cf2c0,#4ea8ff,#a77bff,#ff4d6d);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.7;filter:blur(.4px);animation:spin 5s linear infinite}
.drop::after{content:"";position:absolute;left:22%;top:16%;width:26%;height:18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0))}
.drop.on{opacity:1}
.drop.big{width:28px;height:28px;margin:-14px 0 0 -14px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wob{0%,100%{border-radius:50% 48% 52% 50%}33%{border-radius:47% 53% 49% 51%}66%{border-radius:52% 49% 50% 47%}}

@media (pointer:fine){ html,body,a,button,.col .it{cursor:none} }

@media (max-width:1100px){
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
}
@media (max-width:640px){
  .bar nav{gap:16px;font-size:12px}
  .cols{grid-template-columns:1fr;row-gap:44px}
  .col .grid{display:block;columns:2;column-gap:10px;--cap:min(120vw,620px)}
  .col .it{break-inside:avoid;margin-bottom:10px}
  .cloud{height:520px}
  .clients{padding:14vh var(--pad) 12vh}
  .lb .stage{width:100vw;height:72vh}
  .ab dl{flex-direction:column;gap:28px}
  .ab .words li{padding:20px 14px 10px}
  .ab .words li::before{left:14px}
  .ab .words li::after{left:14px;right:14px}
  .ab li{white-space:normal}
  .bar .right{gap:14px}
  .bar nav{gap:12px}
}

/* language toggle — two letters, a prism hairline slides under the active one */
.lang{position:relative;display:flex;font:500 10.5px/1 var(--mono);letter-spacing:.06em}
.lang button{position:relative;z-index:1;padding:6px 7px;opacity:.42;transition:opacity .3s;cursor:pointer}
.lang button.on{opacity:1}
.lang button:hover{opacity:.85}
.lang i{position:absolute;left:0;bottom:0;height:1px;width:0;border-radius:1px;
  background:linear-gradient(90deg,#ff5f7a,#ffc36b,#7cf2c9,#6aa8ff,#b38bff,#ff5f7a);background-size:200% 100%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1);animation:sheen 4s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

/* scroll cue — a light drop falling down a hairline */
.cue{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .5s}
.cue .ln{position:relative;width:1px;height:56px;background:rgba(255,255,255,.28);overflow:hidden}
.cue .ln i{position:absolute;left:-1px;top:-14px;width:3px;height:14px;border-radius:2px;
  background:linear-gradient(#fff0,#fff);animation:fall 2.2s cubic-bezier(.6,0,.3,1) infinite}
.cue .lbl{font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:1;text-shadow:0 0 12px rgba(0,0,0,.6)}
.cue::before{content:"";position:absolute;left:50%;bottom:-40px;width:240px;height:160px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(3,5,11,.6),rgba(3,5,11,0))}
.past .cue{opacity:0;pointer-events:none}
@keyframes fall{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(60px);opacity:0}}