/* ============================================================
   Obyss — editorial digital studio. Study clone "by motives" of
   obys.agency. Monochrome ink/paper + one acid accent. Grotesk +
   contrast serif-italic. Line-mask reveal, marquees, custom cursor,
   smooth scroll, WebGL hover distortion of project thumbnails.
   ============================================================ */

:root{
  --ink:   #0d0e13;          /* near-black */
  --paper: #f3f1ec;          /* warm off-white */
  --paper-2:#e9e6df;
  --acc:   #d6ff3f;          /* acid lime accent */
  --mute:  rgba(13,14,19,.5);
  --hair:  rgba(13,14,19,.16);
  --m-x: clamp(16px, 3.6vw, 56px);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; font:inherit; }
html{ -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html,body{ background:var(--paper); color:var(--ink); }
body{
  font-family:"Archivo","Space Grotesk",sans-serif;
  font-weight:500;
  overflow-x:hidden;
  cursor:none;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.acc{ color:var(--acc); }
.serif{ font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; }
.label{ font-size:clamp(11px,1vw,13px); letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }

@media (hover:none){ body{ cursor:auto; } }

/* ============ custom cursor ============ */
.cursor{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  transform:translate3d(-100px,-100px,0);
  mix-blend-mode:difference;
}
.cursor__dot{
  position:absolute; top:50%; left:50%; width:7px; height:7px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); transition:opacity .3s;
}
.cursor__ring{
  position:absolute; top:50%; left:50%; width:38px; height:38px; border-radius:50%;
  border:1px solid #fff; transform:translate(-50%,-50%) scale(1);
  transition:width .4s var(--ease), height .4s var(--ease), opacity .3s, border-color .3s;
}
.cursor__label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.4);
  color:#fff; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  opacity:0; transition:opacity .3s, transform .4s var(--ease); white-space:nowrap;
}
body.cur-link .cursor__ring{ width:64px; height:64px; }
body.cur-link .cursor__dot{ opacity:0; }
body.cur-view .cursor__ring{ width:88px; height:88px; background:transparent; border-color:#fff; }
body.cur-view .cursor__dot{ opacity:0; }
body.cur-view .cursor__label{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none){ .cursor{ display:none; } }

/* ============ preloader ============ */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:transform .9s var(--ease); will-change:transform;
}
body.is-loaded #preloader{ transform:translateY(-101%); }
.preloader__inner{ width:min(440px,72vw); text-align:center; }
.preloader__mark{ font-family:"Anton",sans-serif; font-size:clamp(40px,8vw,80px); letter-spacing:-.01em; line-height:.9; }
.preloader__bar{ height:2px; background:rgba(255,255,255,.18); margin:22px 0 12px; overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:100%; background:var(--acc); transform:translateX(-101%); }
.preloader__pct{ font-size:13px; letter-spacing:.12em; color:rgba(255,255,255,.6); }

/* ============ line-mask reveal (приём 3) ============ */
.ln_{ display:block; overflow:hidden; }
.ln{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); will-change:transform; }
.hero__title.is-inview .ln,
section.is-inview .ln{ transform:translateY(0); }

.reveal-lines .line-mask{ display:block; overflow:hidden; }
.reveal-lines .line-inner{
  display:block; transform:translateY(110%);
  transition:transform .95s var(--ease); will-change:transform;
}
.reveal-lines.is-inview .line-inner{ transform:translateY(0); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-inview{ opacity:1; transform:none; }

/* ============ header ============ */
.head{
  position:fixed; top:0; left:0; width:100%; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--m-x); mix-blend-mode:difference; color:#fff;
  transition:transform .5s var(--ease);
}
.head.is-hidden{ transform:translateY(-110%); }
.head__brand{ font-family:"Anton",sans-serif; font-size:22px; letter-spacing:.01em; }
.head__brand .acc{ color:inherit; font-size:.7em; vertical-align:.55em; }
.head__nav{ display:flex; gap:30px; font-size:14px; letter-spacing:.02em; }
.head__nav a{ position:relative; }
.head__nav a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.head__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.head__meta{ display:flex; align-items:center; gap:18px; }
.head__clock{ font-size:12px; letter-spacing:.1em; }
.head__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; }
.head__toggle span{ width:24px; height:1.5px; background:#fff; display:block; }
@media (max-width:760px){
  .head__nav{ display:none; }
  .head__toggle{ display:flex; }
}

/* ============ hero ============ */
.hero{
  position:relative; min-height:100vh; padding:clamp(96px,14vh,150px) var(--m-x) clamp(60px,10vh,90px);
  display:flex; align-items:center; overflow:hidden;
}
.hero__grid{ width:100%; }
.hero__kick{ font-size:clamp(13px,1.3vw,16px); color:var(--mute); margin-bottom:clamp(16px,3vh,36px); letter-spacing:.01em; }
.hero__title{
  font-family:"Anton",sans-serif; font-weight:400;
  font-size:clamp(64px,15.5vw,240px); line-height:.86;
  letter-spacing:-.035em; text-transform:none;
}
.hero__title .serif{ font-size:.92em; letter-spacing:-.01em; }
.hero__title .amp{ color:var(--acc); font-style:italic; }
.hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-top:clamp(28px,5vh,56px); flex-wrap:wrap; }
.hero__lead{ max-width:42ch; font-size:clamp(15px,1.4vw,19px); line-height:1.45; color:var(--ink); }
.hero__scroll{ display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.hero__scroll svg{ animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.hero__corner{ position:absolute; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); pointer-events:none; }
.hero__corner--tl{ top:72px; left:var(--m-x); }
.hero__corner--tr{ top:72px; right:var(--m-x); }
.hero__corner--bl{ bottom:24px; left:var(--m-x); }
.hero__corner--br{ bottom:24px; right:calc(var(--m-x) + 86px); }
@media (max-width:760px){ .hero__corner--tl,.hero__corner--tr,.hero__corner--br{ display:none; } }

/* ============ marquee ============ */
.marquee{ overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:18px 0; background:var(--paper); }
.marquee__row{ display:inline-flex; white-space:nowrap; will-change:transform; }
.marquee__row span{ font-family:"Anton",sans-serif; font-size:clamp(28px,5vw,64px); letter-spacing:-.01em; text-transform:uppercase; padding-right:.3em; }
.marquee__row i{ font-style:normal; padding:0 .25em; }
.marquee--big{ padding:30px 0; border-color:var(--ink); background:var(--ink); color:var(--paper); }
.marquee--big .marquee__row span{ font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; text-transform:none; font-size:clamp(34px,7vw,96px); letter-spacing:0; }
.marquee--big .acc{ color:var(--acc); }

/* ============ work ============ */
.work{ position:relative; padding:clamp(70px,11vh,140px) var(--m-x) clamp(50px,8vh,90px); }
.work__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(34px,6vh,70px); border-bottom:1px solid var(--hair); padding-bottom:22px; }
.work__title{ font-family:"Anton",sans-serif; font-size:clamp(46px,9vw,140px); line-height:.85; letter-spacing:-.03em; }
.work__title .serif{ color:var(--ink); }
.work__index{ font-size:13px; letter-spacing:.04em; color:var(--mute); white-space:nowrap; }

/* WebGL hover stage — fixed thumbnail that follows cursor */
.stage{
  position:fixed; top:0; left:0; width:clamp(300px,30vw,460px); aspect-ratio:4/5;
  z-index:60; pointer-events:none; opacity:0; transform:translate3d(-50%,-50%,0) scale(.85);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  will-change:transform,opacity; mix-blend-mode:normal;
}
.stage.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.stage canvas{ width:100%; height:100%; border-radius:2px; }

/* projects list */
.projects{ border-top:1px solid var(--hair); }
.proj{
  position:relative; display:grid;
  grid-template-columns:64px 1fr auto auto; align-items:center; gap:24px;
  padding:clamp(18px,2.6vh,30px) 4px; border-bottom:1px solid var(--hair);
  transition:padding-left .5s var(--ease), color .4s; color:var(--ink);
}
.proj::before{ content:""; position:absolute; left:0; top:0; height:100%; width:0; background:var(--acc); transition:width .5s var(--ease); z-index:-1; }
.proj.is-hot{ padding-left:26px; }
.proj.is-hot::before{ width:8px; }
.proj.is-dim{ color:var(--mute); }
.proj__num{ font-size:13px; letter-spacing:.06em; color:var(--mute); }
.proj__name{ font-family:"Anton",sans-serif; font-size:clamp(28px,5.2vw,72px); line-height:.95; letter-spacing:-.02em; transition:transform .5s var(--ease); }
.proj__name.serif{ font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; }
.proj.is-hot .proj__name{ transform:translateX(10px); }
.proj__tag{ font-size:13px; letter-spacing:.02em; color:var(--mute); text-align:right; }
.proj__role{ font-size:13px; letter-spacing:.02em; color:var(--mute); text-align:right; min-width:180px; }
@media (max-width:860px){
  .stage{ display:none; }
  .proj{ grid-template-columns:42px 1fr; gap:12px; }
  .proj__tag{ grid-column:2; text-align:left; }
  .proj__role{ display:none; }
}

/* ============ big statement ============ */
.statement{ padding:clamp(80px,16vh,200px) var(--m-x); }
.statement__text{
  font-family:"Anton",sans-serif; font-size:clamp(40px,9vw,150px);
  line-height:.92; letter-spacing:-.03em;
}
.statement__text .serif{ color:var(--ink); }

/* ============ studio ============ */
.studio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); padding:clamp(50px,9vh,110px) var(--m-x); border-top:1px solid var(--hair); }
.studio__lead{ margin-top:20px; font-size:clamp(20px,2.6vw,38px); line-height:1.22; letter-spacing:-.01em; }
.caps{ }
.caps__row{ display:flex; align-items:baseline; gap:20px; padding:18px 0; border-bottom:1px solid var(--hair); }
.caps__row span{ font-size:13px; color:var(--mute); }
.caps__row b{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(22px,3.4vw,46px); letter-spacing:-.01em; }
@media (max-width:760px){ .studio{ grid-template-columns:1fr; } }

/* ============ contact / footer ============ */
.contact{ padding:clamp(60px,11vh,150px) var(--m-x) 40px; border-top:1px solid var(--ink); }
.contact__title{ font-family:"Anton",sans-serif; font-size:clamp(60px,15vw,230px); line-height:.84; letter-spacing:-.035em; margin:12px 0 clamp(24px,5vh,50px); }
.contact__mail{
  display:inline-block; font-family:"Instrument Serif",serif; font-style:italic;
  font-size:clamp(28px,6vw,90px); line-height:1; border-bottom:2px solid var(--ink);
  padding-bottom:6px; transition:color .4s, border-color .4s;
}
.contact__mail:hover{ color:var(--acc); border-color:var(--acc); }
.contact__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:clamp(50px,9vh,110px); padding-top:22px; border-top:1px solid var(--hair); flex-wrap:wrap; }
.contact__social{ display:flex; gap:26px; flex-wrap:wrap; }
.contact__social a{ font-size:14px; position:relative; }
.contact__social a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.contact__social a:hover::after{ transform:scaleX(1); transform-origin:left; }
.contact__rights{ font-size:12px; color:var(--mute); letter-spacing:.02em; max-width:42ch; }

/* ============ menu overlay ============ */
.menu{
  position:fixed; inset:0; z-index:130; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); pointer-events:none;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:all; }
.menu__nav{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.menu__nav a{ font-family:"Anton",sans-serif; font-size:clamp(40px,12vw,90px); line-height:1; letter-spacing:-.02em; transition:color .3s; }
.menu__nav a:hover{ color:var(--acc); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .ln,.line-inner{ transform:none !important; }
}