/* ---------------------------------------------------------------
   Nasuy Studio — design-system recreation study (Obys-style)
   Fluid rem scale: 1rem = 0.694444vw (10px @ 1440w)
   12-column grid: --c column width, --g gutter
---------------------------------------------------------------- */

:root {
  --white: #fff;
  --black: #000;
  --gray: #c9c9c9;
  --g: 1rem;
  --m-x: 1rem;
  --m-y: 1rem;
  --c: calc((100vw - (var(--m-x) * 2 + var(--g) * 11)) / 12);
}

* { font: inherit; margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 0.694444vw; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; }
html, body { -webkit-tap-highlight-color: transparent; }
li, ul { list-style: none; }
button { display: block; color: inherit; outline: 0; background: 0 0; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; display: inline-block; }
img, svg, figure { display: block; }
img { width: 100%; height: auto; }
html, body { width: 100%; height: 100%; }

body {
  background-color: var(--white);
  color: var(--black);
  font-family: "Inter", "Helvetica Neue", sans-serif;
  letter-spacing: -0.01em;
  font-size: 1.1rem;
  line-height: 1.2;
  overscroll-behavior: none;
  overflow: hidden;
}

/* ---- line-reveal primitives ---- */
.ln_ { overflow: hidden; display: block; margin: -1px; padding: 1px; }
.ln  { display: block; position: relative; will-change: transform; transform: translateY(102%); }

.l { overflow: hidden; width: 100%; height: 3px; }
.l > div { border-bottom: 1.34px solid; width: 100%; height: 1px; transform: translateX(-100.1%); }

/* ---------------- preloader ---------------- */
#preloader, #preloader-bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; }
#preloader { z-index: 9996; overflow: hidden; }
#preloader-bg { background-color: var(--black); will-change: transform; }
#preloader-prg {
  position: absolute; right: var(--m-x); top: 50%; transform: translateY(-50%);
  z-index: 1; color: var(--white); mix-blend-mode: difference; overflow: hidden;
}
#preloader-prg > span { display: block; will-change: transform; transform: translateY(110%); }
#prg_ { position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; pointer-events: none; }
#prg { overflow: hidden; width: 100%; height: 2.5px; }
#prg > div { background-color: var(--black); width: 100%; height: 100%; transform: translateX(-101%); will-change: transform; }

/* ---------------- center logo ---------------- */
#logo {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 9999; pointer-events: none; will-change: transform;
  mix-blend-mode: difference; color: #fff;
}
#logo > svg {
  position: relative; z-index: 1; aspect-ratio: 1; overflow: visible;
  width: 13rem; transition: width 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}
#logo.is-intro > svg { transition: none; }
#logo.is-intro path { opacity: 0; }
#logo.is-on > svg { width: var(--logo-w, 13rem); }
#logo #logo-l, #logo #logo-r { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
#logo.is-spread #logo-l { transform: translateX(-37%); }
#logo.is-spread #logo-r { transform: translateX(37%); }

/* ---------------- header ---------------- */
#header {
  position: fixed; top: var(--m-y); inset-inline: var(--m-x);
  display: flex; justify-content: space-between;
  color: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9997;
}
#header-title { pointer-events: all; overflow: hidden; font-weight: 500; font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1; }
#header-title > span { display: inline-block; transform: translateY(110%); }
#header-right { display: flex; align-items: start; gap: var(--g); }
#header-right > * { width: var(--c); }
#header-menu, #header-time, #header-contact_ { overflow: hidden; }
#header-menu { display: flex; pointer-events: all; }
#header-menu > a:not(:last-child)::after { content: ",\00a0"; }
#header-menu > a { position: relative; transform: translateY(110%); }
#header-menu > a span { position: relative; display: inline-block; }
#header-menu > a span::before {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; border-bottom: 0.1rem solid;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
#header-menu > a.is-on > span::before,
#header-menu > a:hover > span::before { transform-origin: left; transform: scaleX(1); }
#header-time > span { display: inline-block; transform: translateY(110%); font-variant-numeric: tabular-nums; }
#header-contact_ { text-align: right; }
#header-contact { display: inline-block; pointer-events: all; transform: translateY(110%); }

/* ---------------- fixed description ---------------- */
#fix {
  position: absolute; top: 5rem;
  right: calc(var(--c) * 1 + var(--g) * 3);
  width: calc(var(--c) * 2);
  z-index: 9995;
}
#fix-de { margin-bottom: 1.3rem; }
#fix-co-em { position: relative; width: auto; }
#fix-co-em .l { transform-origin: right; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
#fix-co-em:hover .l { transform: scaleX(0); }
#fix-co-em:not(:hover) .l { transform-origin: left; }

/* ---------------- work showcase shell ---------------- */
main { position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; }
#ho-wo { position: absolute; width: 100%; height: 100svh; top: 0; left: 0; }
.ho-wo-s_ { position: absolute; width: 100%; height: 100svh; top: 0; left: 0; }
.ho-wo-s_ .ho-wo-s { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#ho-wo-1, #ho-wo-2 { visibility: hidden; }

#ho-wo-mo { position: absolute; left: var(--g); bottom: var(--g); overflow: hidden; z-index: 5; }
#ho-wo-mo > button { position: relative; display: inline-block; transform: translateY(110%); }
#ho-wo-mo > button::before {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; border-bottom: 1.34px solid;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#ho-wo-mo > button.is-on::before,
#ho-wo-mo > button:hover::before { transform-origin: left; transform: scaleX(1); }

#ho-cp { position: absolute; bottom: var(--g); right: var(--g); color: var(--gray); }

/* ---------------- mode 0: vertical ---------------- */
#ho-wo-0 > .ho-wo-s { display: flex; justify-content: center; }
#wo-col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; will-change: transform; }
#wo-col a { display: block; flex-shrink: 0; overflow: hidden; }
#wo-col a img { width: 100%; height: 100%; object-fit: cover; }

#ho-wo-0-ti {
  position: absolute; top: 50%; left: var(--g); transform: translateY(-50%);
  width: calc(var(--c) * 2 + var(--g) * 1);
  overflow: hidden; height: 25.25rem; line-height: 1.2;
}
#wo-ti-col { display: flex; flex-direction: column; align-items: start; will-change: transform; }
#wo-ti-col a { white-space: nowrap; color: var(--gray); transition: color 0.3s; cursor: pointer; }
#wo-ti-col a.is-active { color: var(--black); }
#wo-ti-col a:hover { color: var(--black); }

#ho-wo-0-me_ {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--c) * 2 + var(--g) * 3);
  width: calc(var(--c) * 10 + var(--g) * 9);
  overflow: hidden; pointer-events: none; height: 1.32rem; line-height: 1.2;
}
#ho-wo-0-me { position: absolute; inset: 0; }
#ho-wo-0-me > div { position: absolute; inset: 0; display: flex; opacity: 0; }
#ho-wo-0-me > div.is-on { opacity: 1; }
#ho-wo-0-me > div > span { display: block; overflow: hidden; }
#ho-wo-0-me > div > span > span { display: block; will-change: transform; }
#ho-wo-0-me > div > span:first-child { width: calc(var(--c) * 7 + var(--g) * 7); }
#ho-wo-0-me > div > span:nth-child(2) { width: calc(var(--c) * 2 + var(--g) * 2); }
#ho-wo-0-me > div > span:nth-child(3) { width: var(--c); text-align: right; }

/* ---------------- mode 1: horizontal ---------------- */
#wo-row {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: 0.5rem; will-change: transform;
}
#wo-row a { display: block; flex-shrink: 0; transform: rotate(-90deg); overflow: hidden; }
#wo-row a img { width: 100%; height: 100%; object-fit: cover; }

#ho-wo-1-ti {
  position: absolute; bottom: 0; right: var(--g);
  width: calc(var(--c) * 3 + var(--g) * 2);
  overflow: hidden; height: 24.5rem; clip-path: inset(0 0 2.5% 0);
}
#wo-ti-row { display: flex; flex-direction: column; align-items: start; will-change: transform; }
#wo-ti-row a { white-space: nowrap; color: var(--gray); transition: color 0.3s; cursor: pointer; }
#wo-ti-row a.is-active { color: var(--black); }
#wo-ti-row a:hover { color: var(--black); }

#ho-wo-1-me_ {
  position: absolute; bottom: var(--g); right: var(--g);
  width: calc(var(--c) * 6 + var(--g) * 5);
  pointer-events: none; height: 24.5rem;
}
#ho-wo-1-me {
  position: absolute; overflow: hidden; width: 100%; height: 1.45rem;
  top: calc(50% + 1.425rem); left: 0; transform: translateY(-50%);
}
#ho-wo-1-me > div {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(var(--c) * 3 + var(--g) * 1);
  display: flex; justify-content: space-between; opacity: 0;
}
#ho-wo-1-me > div.is-on { opacity: 1; }
#ho-wo-1-me > div > span { display: block; overflow: hidden; }
#ho-wo-1-me > div > span > span { display: block; will-change: transform; }
#ho-wo-1-me_ .l { position: absolute; bottom: 0; }
#ho-wo-1-me_ .l > div { border-color: var(--gray); }

/* ---------------- mode 2: grid ---------------- */
#ho-wo-2 > .ho-wo-s { height: auto; }
#wo-grid {
  position: relative; padding: 6rem var(--g) calc(var(--g) * 3);
  display: grid; grid-template-columns: repeat(12, var(--c));
  gap: 8rem var(--g); will-change: transform;
}
.g2-li { position: relative; opacity: 0; grid-row: var(--gr); grid-column: var(--gc); }
.g2-img { position: relative; display: block; width: 100%; cursor: pointer; }
.g2-img img { width: 100%; height: auto; }
.g2-img::before {
  content: ""; position: absolute; inset: 0.1rem; z-index: 1;
  border: 0.1rem solid rgba(0, 0, 0, 0.1); opacity: 0;
}
.g2-img.is-hv::before { opacity: 1; }

#g2-preview {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(var(--c) * 4 + var(--g) * 3); overflow: hidden; pointer-events: none; z-index: 2;
  clip-path: inset(50%); will-change: clip-path;
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#g2-preview.is-on { clip-path: inset(0%); }
#g2-preview > img { will-change: transform; transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); transform: scale(1.15); }
#g2-preview.is-on > img { transform: scale(1); }

#g2-title {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  letter-spacing: -0.03em; white-space: nowrap; text-align: center; overflow: hidden;
  font-size: 8rem; line-height: 1; z-index: 3; pointer-events: none;
}
#g2-title > div {
  will-change: transform; padding-block: 1px; margin-block: -1px;
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.55, 0.2);
}
#ho-wo-2.is-hv #g2-title > div { transform: translateY(0); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

#g2-meta {
  position: fixed; top: 50%; left: var(--g); right: var(--g); transform: translateY(-50%);
  display: flex; gap: var(--g); z-index: 3; pointer-events: none;
}
#g2-meta > div { overflow: hidden; }
#g2-meta > div > div {
  transform: translateY(110%); will-change: transform;
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.55, 0.2);
}
#ho-wo-2.is-hv #g2-meta > div > div { transform: translateY(0); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
#ho-wo-2.is-hv #g2-meta > div:nth-child(2) > div { transition-delay: 0.04s; }
#ho-wo-2.is-hv #g2-meta > div:nth-child(3) > div { transition-delay: 0.08s; }
#ho-wo-2.is-hv #g2-meta > div:nth-child(4) > div { transition-delay: 0.12s; }
#g2-meta > div:first-child { width: calc(var(--c) * 2 + var(--g) * 1); }
#g2-meta > div:nth-child(2) { width: calc(var(--c) * 2 + var(--g) * 1); }
#g2-meta > div:nth-child(3) { margin-left: calc(var(--c) * 5 + var(--g) * 5); }
#g2-meta > div:nth-child(4) { margin-left: auto; }

/* ---------------- responsive fallback ---------------- */
@media (max-width: 768px) {
  html { font-size: 1.9vw; }
  #fix { display: none; }
  #header-right > * { width: auto; }
  #header-time { display: none; }
  #wo-grid { grid-template-columns: repeat(4, 1fr); gap: 4rem var(--g); }
  .g2-li { grid-column: auto / span 2 !important; grid-row: auto !important; }
  #ho-wo-0-me_, #ho-wo-1-me_ { display: none; }
  #g2-title { font-size: 5rem; }
}