/* WOOZU STUDIO — dark minimal, fullscreen video portfolio */

:root{
  --bg:#070707;
  --fg:#f4f2ef;
  --dim:rgba(244,242,239,.52);
  --faint:rgba(244,242,239,.28);
  --line:rgba(244,242,239,.13);
  --pad:clamp(18px,4.2vw,64px);
  --ease:cubic-bezier(.22,.9,.24,1);
  --sans:"Archivo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--fg);color:var(--bg)}

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}   20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:120; background:var(--bg);
  display:grid; place-content:center; gap:22px; justify-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__mark{
  font-size:clamp(15px,2vw,20px); font-weight:600;
  letter-spacing:.42em; text-transform:uppercase; padding-left:.42em;
}
.loader__mark span{ color:var(--faint); }
.loader__bar{width:min(220px,46vw);height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--fg);animation:load 1.1s var(--ease) forwards}
@keyframes load{to{width:100%}}

/* ---------- topbar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:clamp(14px,2.4vw,26px) var(--pad);
  mix-blend-mode:difference; color:#fff;
}
.brand{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:clamp(12px,1.35vw,14px);
  letter-spacing:.2em; text-transform:uppercase;
}
.brand em{font-style:normal;font-weight:400;opacity:.62}
.brand__dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.nav{display:flex;gap:clamp(14px,2vw,30px);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.nav a{position:relative;padding-bottom:3px;opacity:.75;transition:opacity .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .4s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after{width:100%}
@media (max-width:820px){ .nav a:nth-child(2){display:none} }
@media (max-width:640px){
  .brand{font-size:11px;letter-spacing:.14em;gap:.45em}
  .brand__dot{width:5px;height:5px}
  .nav{font-size:10.5px;gap:13px;letter-spacing:.06em}
  .nav a:nth-child(3){display:none}
}

/* ---------- sound ---------- */
.sound{
  position:fixed; right:var(--pad); bottom:clamp(16px,2.6vw,30px); z-index:80;
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  mix-blend-mode:difference; color:#fff; opacity:.8; transition:opacity .3s;
}
.sound:hover{opacity:1}
.sound__bars{display:flex;align-items:flex-end;gap:2.5px;height:13px}
.sound__bars i{width:2px;height:3px;background:currentColor;transition:height .3s var(--ease)}
.sound[aria-pressed="true"] .sound__bars i{animation:eq .9s ease-in-out infinite alternate}
.sound[aria-pressed="true"] .sound__bars i:nth-child(2){animation-delay:.15s}
.sound[aria-pressed="true"] .sound__bars i:nth-child(3){animation-delay:.3s}
.sound[aria-pressed="true"] .sound__bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:13px}}
@media (max-width:640px){ .sound__label{display:none} }

/* ---------- right rail ---------- */
.rail{
  position:fixed; right:var(--pad); top:50%; transform:translateY(-50%); z-index:78;
  display:flex; flex-direction:column; gap:14px;
  mix-blend-mode:difference; color:#fff;
}
.rail button{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  font-size:10.5px; letter-spacing:.16em; opacity:.45; transition:opacity .35s;
}
.rail button i{display:block;width:16px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.rail button:hover{opacity:.9}
.rail button.is-on{opacity:1}
.rail button.is-on i{width:40px}
@media (max-width:900px){ .rail{display:none} }

/* ---------- shared media ---------- */
.media{position:absolute;inset:0;overflow:hidden;background:#000}
.media .v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.06); transition:transform 1.6s var(--ease), opacity .8s ease;
  opacity:0;
}
.media .v.is-ready{opacity:1}
.is-active .media .v{transform:scale(1)}
.media__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,0) 58%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%);
}

/* 초광각(2.4:1) 소스는 잘라내지 않고 레터박스 + 블러 배경 */
.media__bg,.media__fg{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.media__bg{inset:-10%; filter:blur(56px) brightness(.42) saturate(1.15); display:none}
/* 모든 작업은 화면을 꽉 채운다. 잘리지 않은 원본 비율은 작업을 눌렀을 때
   열리는 상세 화면에서 보여준다. 초광각만 레터박스로 보고 싶다면 아래 주석을 푼다.
@media (min-aspect-ratio:6/5){
  .is-wide .media__bg{display:block}
  .is-wide .media__fg{background-size:contain}
  .is-wide .v{object-fit:contain}
}
*/

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hero__inner{position:relative;z-index:2;padding:0 var(--pad);width:100%}
.wordmark{
  font-weight:700; letter-spacing:-.045em; line-height:.84;
  font-size:clamp(3.6rem,15.5vw,15rem);
  text-transform:uppercase;
}
.hero__tag{
  margin-top:clamp(14px,2vw,26px);
  font-size:clamp(12px,1.35vw,15px); letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.wm-line{display:block;overflow:hidden}
.wm-line>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.hero.is-in .wm-line>span{transform:none}
.hero.is-in .wm-line:nth-child(2)>span{transition-delay:.09s}
.hero.is-in .hero__tag .wm-line>span{transition-delay:.24s}

.hero__foot{
  position:absolute; left:0; right:0; bottom:clamp(16px,2.6vw,30px); z-index:2;
  display:flex; align-items:flex-end; justify-content:flex-start;
  gap:clamp(18px,4vw,48px); padding:0 var(--pad);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.scrollcue{display:inline-flex;align-items:center;gap:10px;opacity:.75}
.scrollcue i{display:block;width:34px;height:1px;background:currentColor;position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:640px){ .scrollcue{display:none} }

/* ---------- work sections ---------- */
.work{position:relative;height:100svh;min-height:520px;overflow:hidden;cursor:pointer}
.work__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:clamp(58px,7vw,84px);
  padding:0 var(--pad);
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:clamp(14px,2.4vw,34px);
}
.work__no{
  font-size:11.5px; letter-spacing:.2em; color:rgba(255,255,255,.6);
  padding-bottom:.9em; font-variant-numeric:tabular-nums;
}
.work__title{
  font-weight:600; letter-spacing:-.042em; line-height:.9;
  font-size:clamp(2.6rem,8.2vw,8rem);
}
.work__ko{
  margin-top:.5em; font-weight:300; font-size:clamp(12px,1.4vw,16px);
  letter-spacing:.02em; color:rgba(255,255,255,.68);
}
.work__side{
  text-align:right; padding-bottom:1em;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62);
  display:grid; gap:6px;
}
.work__side b{font-weight:500;color:rgba(255,255,255,.9)}
.reveal{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.reveal>span{display:block;transform:translateY(110%);opacity:0;transition:transform 1s var(--ease),opacity .8s ease}
.work.is-in .reveal>span{transform:none;opacity:1}
.work.is-in .work__ko .reveal>span{transition-delay:.1s}

.work__play{
  position:absolute; z-index:2; left:var(--pad); bottom:clamp(16px,2.6vw,30px);
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55);
  transition:color .3s, gap .3s var(--ease);
}
.work:hover .work__play{color:#fff;gap:14px}
.work__prog{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:0;
  height:1px; background:rgba(255,255,255,.16);
}
.work__prog i{display:block;height:100%;width:0;background:#fff}

@media (max-width:780px){
  .work__cap{grid-template-columns:1fr;gap:10px;bottom:clamp(64px,12vw,96px)}
  .work__no{padding-bottom:0}
  .work__side{text-align:left;padding-bottom:0;grid-auto-flow:column;justify-content:start;gap:16px}
  .work__play{display:none}
}

/* ---------- index ---------- */
.index{padding:clamp(72px,11vw,150px) var(--pad) clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.index__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,3.6vw,48px)}
.index__head h2{font-size:clamp(12px,1.4vw,14px);font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.index__count{font-size:11.5px;letter-spacing:.18em;color:var(--faint)}
.index__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(12px,1.6vw,22px)}
.card{position:relative;overflow:hidden;background:#111;cursor:pointer;aspect-ratio:16/10}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:grayscale(1) brightness(.72)}
.card:hover img{transform:scale(1.05);filter:none}
.card__t{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
}
.card__t strong{font-weight:600;font-size:clamp(15px,1.7vw,19px);letter-spacing:-.02em}
.card__t span{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.6);text-transform:uppercase}

/* ---------- about ---------- */
.about{padding:clamp(72px,11vw,150px) var(--pad);border-top:1px solid var(--line)}
.about__eyebrow,.contact__eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:clamp(20px,3vw,40px)}
.about__lead{
  font-size:clamp(1.35rem,3.4vw,3rem); line-height:1.28; letter-spacing:-.025em;
  font-weight:400; max-width:22ch; max-width:min(1100px,100%);
}
.about__lead em{font-style:normal;color:var(--dim)}
.about__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(24px,4vw,60px); margin-top:clamp(40px,6vw,88px);
  border-top:1px solid var(--line); padding-top:clamp(24px,3vw,40px);
}
.about__cols h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:500}
.about__cols li{font-size:clamp(14px,1.5vw,17px);padding:5px 0;color:rgba(244,242,239,.85)}

/* ---------- contact ---------- */
.contact{padding:clamp(72px,11vw,150px) var(--pad) clamp(80px,9vw,120px);border-top:1px solid var(--line)}
.contact__mail{
  display:inline-block; font-weight:600; letter-spacing:-.04em; line-height:1;
  font-size:clamp(2rem,7.5vw,6.5rem); word-break:break-word;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .6s var(--ease);
}
.contact__mail:hover{background-size:100% 1px}
.contact__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(36px,5vw,70px); padding-top:20px; border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.contact__row a:hover{color:var(--fg)}

/* ---------- viewer ---------- */
.viewer{
  position:fixed; inset:0; z-index:110; background:rgba(5,5,5,.97);
  display:grid; grid-template-rows:auto 1fr auto; gap:clamp(12px,2vw,22px);
  padding:clamp(14px,2.6vw,30px) var(--pad);
  opacity:0; transition:opacity .45s var(--ease);
}
.viewer[hidden]{display:none}
.viewer.is-open{opacity:1}
.viewer__close{
  justify-self:end; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.viewer__close:hover{color:var(--fg)}
.viewer__stage{display:grid;place-items:center;min-height:0}
.viewer__stage video{width:100%;height:100%;max-height:100%;object-fit:contain;background:#000}
.viewer__meta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.viewer__meta strong{font-size:clamp(18px,2.6vw,30px);font-weight:600;letter-spacing:-.03em}
.viewer__meta span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- chrome visibility ---------- */
.rail,.sound{transition:opacity .5s var(--ease),visibility .5s}
body.no-chrome .rail,
body.no-chrome .sound,
body.is-locked .topbar,
body.is-locked .rail,
body.is-locked .sound{opacity:0;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .wm-line>span,.reveal>span{transform:none !important;opacity:1 !important}
}