/* ============================================================
   Yuri Davitkokhvyan — portfolio
   Palette and metrics sampled directly from the Figma prototype video.
   ============================================================ */

:root{
  /* colour */
  --ink:#060606;
  --card:#383838;
  --ph:#D9D9D9;
  --fg:#FFFFFF;
  --muted:#969696;
  --ghost:#3D3D3D;
  --line:rgba(255,255,255,.14);
  --pill:rgba(255,255,255,.075);

  /* rhythm */
  --pad:clamp(20px, 1.77vw, 34px);
  --top:clamp(9px, .83vw, 16px);

  /* type */
  --font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --h:clamp(24px, 1.875vw, 36px);
  --hero-h:clamp(28px, 2.4vw, 46px);
  --body:clamp(14px, .885vw, 17px);
  --micro:clamp(11px, .625vw, 12px);
  --stat:clamp(30px, 2.5vw, 48px);

  /* geometry */
  --pill-h:clamp(52px, 3.33vw, 64px);
  --slot-title:calc(var(--h) * 1.38);
  --desc-top:83%;
  --slot-desc:max(17vh, 150px);
  --media-gap:clamp(40px, 3.75vw, 72px);
  --media-w:min(52.4vw, 118vh);   /* width of the case preview column */
  --media-r:4.8vw;                /* its distance from the right edge */
  --case-ar:1780/1080;
  --r:12px;

  /* motion */
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--body);
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; }
body.viewer-open{ overflow:hidden; }

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

.a11y{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:4px; }

/* ============================================================
   PRELOADER
   ============================================================ */
.pre{
  position:fixed; inset:0; z-index:100;
  background:var(--ink);
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
body.is-ready .pre{ transform:translateY(-100%); }

.pre__foot{
  position:absolute; left:var(--pad); bottom:calc(64px + var(--pad));
}
.pre__count{
  display:block; font-size:var(--hero-h); font-weight:400;
  letter-spacing:-.01em; color:#fff; font-variant-numeric:tabular-nums;
}
.pre__rule{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(255,255,255,.18);
}
.pre__rule i{ display:block; height:100%; width:0; background:#fff; }

/* ============================================================
   CURSOR
   ============================================================ */
.cur{ position:fixed; top:0; left:0; z-index:90; pointer-events:none; }
@media (hover:none),(pointer:coarse){ .cur{ display:none } }

.cur__dot{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
  transition:opacity .25s;
}
.cur__ring{
  position:absolute; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  transition:width .45s var(--ease-out), height .45s var(--ease-out),
             background-color .35s, border-color .35s;
}
.cur.is-hover .cur__ring{ width:58px; height:58px; border-color:rgba(255,255,255,.85); }
.cur.is-open .cur__ring{
  width:104px; height:104px;
  background:#060606; border-color:rgba(255,255,255,.35);
}
.cur.is-open .cur__dot{ opacity:0 }
.cur__label{
  font-size:var(--micro); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; opacity:0; transition:opacity .3s .1s;
}
.cur.is-open .cur__label{ opacity:1 }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:var(--top) var(--pad) 0;
  pointer-events:none;
}
.hdr > *{ pointer-events:auto }

.hdr__pill{
  border:1px solid transparent;
  display:inline-flex; align-items:center;
  height:var(--pill-h); padding:0 clamp(14px,1.25vw,24px);
  border-radius:14px; background:transparent;
  transition:background-color .55s var(--ease), backdrop-filter .55s var(--ease);
}
.hdr.is-compact .hdr__pill{
  background:var(--pill);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.hdr__logo img{ height:clamp(16px,1.35vw,26px); width:auto; }

.hdr__name{
  display:block; max-width:0; opacity:0; overflow:hidden;
  transition:max-width .75s var(--ease), opacity .45s var(--ease);
}
.hdr.is-compact .hdr__name{ max-width:360px; opacity:1 }
.hdr__name > span{
  display:block; white-space:nowrap;
  padding-left:clamp(24px,2.3vw,44px);
  font-size:var(--micro); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}

.hdr__nav{
  position:absolute; top:var(--top); left:calc(var(--pad) + clamp(140px,11.1vw,213px));
  height:var(--pill-h); display:flex; align-items:center;
  gap:clamp(22px,2.4vw,46px);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.hdr.is-compact .hdr__nav{ opacity:0; transform:translateY(-8px); pointer-events:none }
.hdr__nav a{
  font-size:var(--micro); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  transition:color .3s;
}
.hdr__nav a:hover{ color:#fff }

.hdr__back{
  border:1px solid transparent;
  position:absolute; top:var(--top); right:var(--pad);
  height:var(--pill-h); padding:0 clamp(14px,1.25vw,22px);
  display:flex; align-items:center; gap:10px;
  border-radius:14px; background:var(--pill);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:var(--micro); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
body.viewer-open .hdr__back{ opacity:1; visibility:visible; transform:none }
.hdr__back svg{ width:18px; height:18px }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; height:100vh; height:100svh; min-height:520px;
  background:var(--ink);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ---- difference blending -------------------------------------------------
   The hero footer text and the header marks are inverted against whatever the
   video is showing, so they stay legible on black, white and everything in
   between. Two rules matter for this to work at all:
   1. mix-blend-mode sits on the element that also carries the transform. A
      transform makes a stacking context, and a stacking context on an ancestor
      would cut the element off from the video behind it.
   2. .hdr has a z-index, so it is already a stacking context — the blend has to
      be on .hdr itself, not on the links inside it.
   -------------------------------------------------------------------------- */
.hero__text{
  position:absolute; left:var(--pad); bottom:clamp(40px,5.5vh,64px);
  will-change:opacity,transform;
  mix-blend-mode:difference;
}
.hero__name,.hero__role{
  font-size:var(--hero-h); font-weight:400; letter-spacing:-.012em;
  line-height:1.32; overflow:hidden;
}
.hero__role{ color:var(--muted) }
.hero__name > span,.hero__role > span{
  display:block; transform:translateY(115%);
  transition:transform 1.05s var(--ease-out);
}
body.is-ready .hero__name > span{ transform:none; transition-delay:.18s }
body.is-ready .hero__role > span{ transform:none; transition-delay:.28s }

.hero__note{
  margin-top:clamp(10px,1vw,18px);
  max-width:min(56ch, 44vw);
  font-size:var(--body); line-height:1.45; color:var(--muted);
  overflow:hidden;
}
.hero__note > span{
  display:block; transform:translateY(115%);
  transition:transform 1.05s var(--ease-out);
}
body.is-ready .hero__note > span{ transform:none; transition-delay:.38s }

body.on-hero .hdr{ mix-blend-mode:difference }
body.on-hero .hdr__pill{
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ============================================================
   WORK — pinned viewport, three sliding tracks
   ============================================================ */
.work{
  --page:.7; /* overwritten by PAGE in main.js */
  position:relative;
  height:calc((var(--pages) * var(--page, 1) + .7) * 100svh);
  background:var(--ink);
}
.work__pin{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
}
.track{ will-change:transform }
.work__media .track{ position:absolute; left:0; top:0; width:100% }

.work__label{
  position:absolute; left:var(--pad); top:48.5%;
  font-size:var(--h); font-weight:400; letter-spacing:-.01em;
  line-height:var(--slot-title);
}
.work__titles{
  position:absolute; left:var(--pad); top:53.5%;
  width:min(46vw,620px); height:var(--slot-title); overflow:hidden;
}
.work__titles p{
  height:var(--slot-title); line-height:var(--slot-title);
  font-size:var(--h); font-weight:400; letter-spacing:-.01em;
  color:var(--muted); white-space:nowrap;
}
.work__descs{
  position:absolute; left:var(--pad); top:var(--desc-top);
  width:min(31vw,560px); height:var(--slot-desc); overflow:hidden;
}
.work__descs p{
  height:var(--slot-desc); color:var(--muted); line-height:1.3;
}

.work__media{
  position:absolute; top:0; right:var(--media-r); height:100%;
  width:var(--media-w); overflow:hidden;
}
.case{
  position:relative; overflow:hidden;
  display:block; width:100%; aspect-ratio:var(--case-ar);
  margin-bottom:var(--media-gap);
  border-radius:var(--r); background:var(--ph);
  cursor:pointer; border:0; padding:0;
  transition:transform .6s var(--ease-out);
}
.case:hover{ transform:scale(1.012) }
.case__media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* mobile flow version of the work section */
.work__flow{ display:none }

/* ============================================================
   TAIL — shared sticky index for Impact + Contacts
   ============================================================ */
.tail{
  position:relative; background:var(--ink);
  display:grid; grid-template-columns:1fr var(--media-w) var(--media-r);
}
.tail__index{
  grid-column:1; grid-row:1 / 3;
  position:sticky; top:0; height:100svh;
}
.tail__window{
  position:absolute; left:var(--pad); top:53.5%;
  width:calc(100% - var(--pad) * 2); height:var(--slot-title); overflow:hidden;
}
.tail__h{
  display:block; height:var(--slot-title); line-height:var(--slot-title);
  font-size:var(--h); font-weight:400; letter-spacing:-.01em; color:var(--fg);
}
.tail__inline{ display:none }

/* ---- Impact ---- */
.impact{
  grid-column:2; grid-row:1;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:12vh 0;
}
.impact__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,1.7vw,32px);
  width:100%;
}
.stat{
  background:var(--card); border-radius:var(--r);
  padding:clamp(20px,1.7vw,32px);
  min-height:clamp(140px,10.3vw,197px);
  display:flex; flex-direction:column; gap:clamp(12px,1vw,20px);
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.stat.is-in{ opacity:1; transform:none }
.stat b{
  font-size:var(--stat); font-weight:400; letter-spacing:-.02em; line-height:1;
}
.stat span{ color:var(--muted); line-height:1.32 }

/* ---- Contacts ---- */
.contacts{
  grid-column:2; grid-row:2;
  min-height:100svh; display:flex; align-items:center;
}
.rows{ width:100% }
.rows li{
  display:grid; grid-template-columns:44% 1fr; align-items:baseline;
  padding:clamp(20px,2.3vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.rows li:last-child{ border-bottom:0 }
.rows span{
  font-size:var(--micro); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.rows a{
  font-size:clamp(12px,.78vw,15px); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; position:relative; justify-self:start;
}
.rows a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.rows a:hover::after{ transform:scaleX(1); transform-origin:left }

/* ============================================================
   CASE VIEWER
   ============================================================ */
/* A case document can be any colour under the header, so both chips go solid
   dark while one is open. White marks on a dark chip read on white artwork and
   on the near-black viewer background alike.

   The !important flags are deliberate. The header also carries
   mix-blend-mode:difference while the hero video is behind it, and if that ever
   survived into an open case it would invert the chip straight back to white.
   Blending is switched off here explicitly for the same reason. */
html body.viewer-open .hdr{
  mix-blend-mode:normal !important;
  isolation:isolate;
}
html body.viewer-open .hdr__pill,
html body.viewer-open .hdr__back{
  background:#0E0E0E !important;
  border:1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 6px 28px rgba(0,0,0,.45) !important;
  mix-blend-mode:normal !important;
}
html body.viewer-open .hdr__logo img,
html body.viewer-open .hdr__name,
html body.viewer-open .hdr__back{
  color:#fff !important;
  opacity:1 !important;
}

.viewer{
  position:fixed; inset:0; z-index:50; background:var(--ink);
  opacity:0; transition:opacity .5s var(--ease);
}
.viewer.is-open{ opacity:1 }
.viewer__scroll{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:calc(var(--top) + var(--pill-h) + 30px) var(--pad) var(--pad);
}
.viewer__scroll::-webkit-scrollbar{ width:0; height:0; display:none }
.viewer__doc{
  border-radius:var(--r); overflow:hidden; background:var(--ph);
  min-height:40vh;
}
.viewer__doc{ font-size:0; line-height:0 }
.viewer__doc > img,.viewer__doc > video,.viewer__doc > canvas{
  display:block; width:100%; height:auto; border:0;
  margin:0; vertical-align:bottom;
}
.viewer__note{
  padding:14vh clamp(20px,6vw,80px); color:#7A7A7A;
  font-size:var(--body); line-height:1.5; max-width:46ch;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  :root{
    --h:26px; --hero-h:30px; --body:15px; --stat:34px; --pill-h:52px;
    --pad:20px; --top:16px;
  }

  .hdr__nav{ display:none }
  .hdr.is-compact .hdr__name{ max-width:260px }

  .hero__text{ bottom:44px; right:var(--pad) }
  .hero__name,.hero__role{ line-height:1.28 }
  .hero__name > span,.hero__role > span,.hero__note > span{ will-change:transform }

  /* work becomes a normal document flow */
  .work{ height:auto }
  .work__pin{ display:none }
  .work__flow{ display:block; padding:14vh 0 10vh }
  .work__flow .work__label{
    position:static; margin:0 var(--pad) 4px; line-height:1.25;
  }
  .m-case{ padding:0 var(--pad) 12vh }
  .m-case:last-child{ padding-bottom:6vh }
  .m-case__title{
    font-size:var(--h); color:var(--muted); letter-spacing:-.01em;
    line-height:1.25; margin-bottom:22px;
  }
  .m-case .case{ margin-bottom:22px }
  .m-case__desc{ color:var(--muted); line-height:1.42 }

  .tail{ display:block }
  .tail__index{ display:none }
  .tail__inline{
    display:block; font-size:var(--h); font-weight:400;
    letter-spacing:-.01em; margin:0 0 26px; padding:0 var(--pad);
  }
  .impact,.contacts{ min-height:0; padding:10vh 0; display:block }
  .hero__note{ max-width:none; margin-right:var(--pad) }
  .impact__grid{
    grid-template-columns:1fr; width:auto; margin:0 var(--pad);
  }
  .contacts{ padding-right:0 }
  .rows{ width:auto; margin:0 var(--pad) }
  .rows li{ grid-template-columns:1fr; gap:10px }
  .rows a{ font-size:14px }

  .viewer__scroll{ padding-top:calc(var(--top) + var(--pill-h) + 18px) }
}

@media (max-width:560px){
  :root{ --h:22px; --hero-h:26px; --stat:30px }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero__name > span,.hero__role > span,.hero__note > span{ transform:none }
  .stat{ opacity:1; transform:none }
  .cur{ display:none }
}