/* Kobelev — redesign. Brand tokens are locked to the production site. */
:root{
  --bg:#07070a; --bg-2:#0e0e13; --bg-3:#15151c;
  --text:#f3efe8; --muted:#a39e96; --dim:#6d6a66;
  --amber:#ffb547; --amber-2:#ff7a2f;
  --line:rgba(243,239,232,.12);

  --display:"Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --body:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Motion system: one entrance curve, one mask curve, three durations. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-mask:cubic-bezier(.65,0,.35,1);
  --t-enter:.9s;
  --t-page:.45s;
  --t-hover:.3s;

  --pad:clamp(1.15rem,4vw,3.5rem);
  --nav-h:68px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
video{display:block}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

.wrap{width:100%;max-width:1600px;margin:0 auto;padding-inline:calc(var(--pad) + env(safe-area-inset-left,0px)) calc(var(--pad) + env(safe-area-inset-right,0px))}
.sec{padding-top:clamp(6rem,14vw,12rem)}
.mono{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.num{color:var(--dim)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--amber);color:#140a00;padding:.5rem 1rem}

/* Display type — the same voice for h1 and section statements */
.display{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:.94;letter-spacing:-.005em;font-size:clamp(2rem,9.6vw,10.5rem)}
.display em{font-style:normal;color:var(--amber)}
h2.display{font-size:clamp(2.2rem,7.4vw,7.5rem)}
/* line mask: the padding keeps Cyrillic diacritics (Й) inside the clip */
.lines .ln{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.lines .ln>span{display:block}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color var(--t-hover),border-color var(--t-hover);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,7,10,.86);border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.6rem);height:var(--nav-h)}
.logo{font-family:var(--display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:1rem;margin-right:auto}
.nav-links{display:flex;gap:clamp(1rem,2.6vw,2.4rem);font-size:.92rem;color:var(--muted)}
.nav-links a,.lang a,.foot a{transition:color var(--t-hover)}
.nav-links a:hover,.lang a:hover,.foot a:hover{color:var(--text)}
.lang{display:flex;gap:.7rem}
.lang b{color:var(--text);font-weight:400}
.lang a{color:var(--dim)}
@media (max-width:560px){.nav-links a[href="#services"]{display:none}}

/* HERO */
.hero{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + clamp(2.5rem,9vh,6.5rem))}
.hero-kicker{margin-bottom:clamp(1.1rem,2.4vw,2rem)}
.lede{max-width:34rem;margin-top:clamp(1.4rem,2.6vw,2.4rem);color:var(--muted);font-size:clamp(1.02rem,.95rem + .45vw,1.3rem);line-height:1.5}
.feature{margin-top:clamp(2.4rem,5vw,4.5rem)}

/* PROJECT (shared by hero feature and work grid) */
.proj{display:block}
.media{position:relative;display:block;width:100%;overflow:hidden;background:var(--bg-2);border-radius:4px}
.media-in{position:absolute;inset:0;display:block}
.media video{width:100%;height:100%;object-fit:cover;transition:transform var(--t-hover) var(--ease-out)}
.proj figcaption{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;padding-top:1rem}
.proj-title{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.15rem,1rem + .8vw,1.7rem);line-height:1.15;transition:color var(--t-hover)}
.proj-meta{grid-column:2}
.watch{position:absolute;left:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);display:flex;align-items:center;gap:.7rem;color:var(--text);padding:.7rem 1rem;background:rgba(7,7,10,.72);border-radius:999px;transition:background-color var(--t-hover),color var(--t-hover)}
.watch i{width:0;height:0;border-left:9px solid var(--amber);border-block:6px solid transparent;transition:border-left-color var(--t-hover)}
@media (hover:hover){
  .media:hover video{transform:scale(1.03)}
  .media:hover .watch{background:var(--amber);color:#140a00}
  .media:hover .watch i{border-left-color:#140a00}
  .proj:has(.media:hover) .proj-title{color:var(--amber)}
}
.media:active video{transform:scale(1.015)}

/* WORK */
.kicker{display:block;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:clamp(2rem,4vw,3.5rem)}
.work-grid,.work-col{display:grid;gap:clamp(2.6rem,5vw,4.5rem) clamp(1.2rem,3vw,3rem)}
@media (min-width:860px){
  .work-grid{grid-template-columns:5fr 7fr;align-items:start}
  .work-col{padding-top:clamp(4rem,9vw,9rem)}
}
@media (max-width:859px){.proj.tall{max-width:26rem}}

/* SERVICES — a typographic index, not cards */
.services h2{margin-bottom:clamp(2.5rem,6vw,5rem)}
.svc{list-style:none;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:2.6rem 1fr;gap:.3rem 1rem;align-items:baseline;padding:clamp(1.1rem,2vw,1.7rem) 0;border-bottom:1px solid var(--line)}
.svc h3{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.5rem,1.1rem + 2vw,2.9rem);line-height:1.1}
.svc p{grid-column:2;color:var(--muted);max-width:32rem}
@media (min-width:860px){
  .svc li{grid-template-columns:5rem 1.1fr 1fr}
  .svc p{grid-column:3}
}

/* CONTACT */
.contact{padding-bottom:clamp(5rem,10vw,9rem)}
.contact-row{display:grid;gap:1.8rem;margin-top:clamp(2rem,4vw,3.5rem);align-items:center}
.contact-row p{color:var(--muted);max-width:30rem;font-size:clamp(1.02rem,.95rem + .45vw,1.3rem);line-height:1.5}
@media (min-width:860px){.contact-row{grid-template-columns:1fr auto}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--display);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1rem,.9rem + .4vw,1.25rem);padding:1.15rem 2rem;border-radius:999px;background:var(--amber);color:#140a00;white-space:nowrap;transition:background-color var(--t-hover),transform var(--t-hover) var(--ease-out)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn:hover{background:var(--amber-2)}
.btn:active{transform:scale(.98)}

/* FOOTER */
.foot{border-top:1px solid var(--line);padding:1.6rem 0 calc(1.6rem + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;color:var(--dim)}

/* PLAYER — native <dialog>, video keeps its own aspect ratio */
.player{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:rgba(7,7,10,.97);color:var(--text);padding:calc(var(--nav-h) + env(safe-area-inset-top,0px)) var(--pad) calc(1.5rem + env(safe-area-inset-bottom,0px));opacity:0;transition:opacity var(--t-page) ease,display var(--t-page) allow-discrete,overlay var(--t-page) allow-discrete}
.player[open]{display:grid;place-items:center;opacity:1}
@starting-style{.player[open]{opacity:0}}
.player::backdrop{background:transparent}
.player video{max-width:100%;max-height:100%;width:auto;height:auto;min-height:0;background:#000;border-radius:4px}
.player-close{position:absolute;right:var(--pad);top:calc(env(safe-area-inset-top,0px) + 1.4rem);color:var(--text);padding:.5rem 0}
.player-close:hover{color:var(--amber)}
html:has(.player[open]){overflow:hidden}

/* ───────── MOTION ─────────
   Hidden states only exist when JS is running (html.js), so the page is
   complete without it. Everything is opacity / transform / clip-path. */

/* Hero entrance: one sequence — lines rise, then copy, then the film opens. */
.js .hero .ln>span{transform:translateY(108%);transition:transform var(--t-enter) var(--ease-out)}
.js .hero .ln:nth-child(2)>span{transition-delay:.09s}
.js .hero .ln:nth-child(3)>span{transition-delay:.18s}
.js .hero-kicker,.js .lede,.js .nav-in,.js .feature figcaption{opacity:0;transition:opacity .8s ease .45s}
.js .feature .media{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-mask) .35s}
.js .feature .media-in{transform:scale(1.08);transition:transform 1.4s var(--ease-out) .35s}
.js.ready .hero .ln>span{transform:none}
.js.ready .hero-kicker,.js.ready .lede,.js.ready .nav-in,.js.ready .feature figcaption{opacity:1}
.js.ready .feature .media{clip-path:inset(0)}
.js.ready .feature .media-in{transform:none}

/* Scroll reveals, used selectively: media masks, statement lines, quiet fades. */
.js .proj[data-reveal] .media{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-mask)}
.js .proj[data-reveal] .media-in{transform:scale(1.08);transition:transform 1.4s var(--ease-out)}
.js .proj[data-reveal] figcaption{opacity:0;transition:opacity .8s ease .4s}
.js .proj[data-reveal].in .media{clip-path:inset(0)}
.js .proj[data-reveal].in .media-in{transform:none}
.js .proj[data-reveal].in figcaption{opacity:1}

.js .lines[data-reveal] .ln>span{transform:translateY(108%);transition:transform var(--t-enter) var(--ease-out)}
.js .lines[data-reveal] .ln:nth-child(2)>span{transition-delay:.09s}
.js .lines[data-reveal].in .ln>span{transform:none}

.js .kicker[data-reveal],.js .svc[data-reveal],.js .contact-row[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform var(--t-enter) var(--ease-out)}
.js .kicker[data-reveal].in,.js .svc[data-reveal].in,.js .contact-row[data-reveal].in{opacity:1;transform:none}

/* Page transitions: a short cross-fade between documents, where supported. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-page);animation-timing-function:ease}

/* Phones: shorter travel, no scale on masked media. */
@media (max-width:700px){
  .js .feature .media-in,.js .proj[data-reveal] .media-in{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important}
  .js .hero .ln>span,.js .lines[data-reveal] .ln>span,.js .feature .media-in,.js .proj[data-reveal] .media-in,.js [data-reveal]{transform:none!important}
  .js .feature .media,.js .proj[data-reveal] .media{clip-path:none!important}
  .js .hero-kicker,.js .lede,.js .nav-in,.js figcaption,.js [data-reveal]{opacity:1!important}
  @view-transition{navigation:none}
}