/* =========================================================================
   ANDRII ZAKHAROV — portfolio
   Display: ATOMIC.  Everything else: Montserrat.
   ========================================================================= */

@font-face{
  font-family:'Zeronix';
  src:url('../assets/fonts/ZERONIX.woff2') format('woff2'),
      url('../assets/fonts/ZERONIX.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:        #050506;
  --bg-2:      #0b0b0d;
  --fg:        #F2EFE9;
  --fg-dim:    #8E8A84;
  --fg-faint:  #4A4845;
  --line:      rgba(242,239,233,.12);
  --line-soft: rgba(242,239,233,.06);

  --f-display: 'Zeronix', 'Montserrat', sans-serif;
  --f-sans:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --pad:  clamp(20px, 4.2vw, 64px);
  --gap:  clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-size:16px; font-weight:400; line-height:1.55;
}
body.is-locked{ overflow:hidden; height:100vh; }

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--fg); color:var(--bg); }

/* ------------------------------------------------------------ type system */
.mono{
  font-family:var(--f-sans);
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-dim);
}
.atomic{ font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; line-height:.92; }

/* *word* → outlined display type */
.out{
  font-family:var(--f-display);
  color:transparent;
  -webkit-text-stroke:1.2px var(--fg);
  paint-order:stroke fill;
}

h1,h2,h3{ font-family:var(--f-display); font-weight:400; letter-spacing:-.012em; line-height:.94; }

.h-display{ font-size:clamp(44px, 10.5vw, 168px); }
.h-1{ font-size:clamp(34px, 6.4vw, 96px); }
.h-2{ font-size:clamp(26px, 3.6vw, 54px); line-height:1.0; }
.h-3{ font-size:clamp(19px, 1.9vw, 27px); line-height:1.14; }

.dim{ color:var(--fg-dim); }
p{ font-size:15px; line-height:1.65; color:var(--fg-dim); }

/* --------------------------------------------------------------- layout */
.wrap{ padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(84px, 11vh, 160px); }
.section--tight{ padding-block:clamp(56px, 7vh, 100px); }

.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:clamp(30px, 4.5vw, 62px);
  border-bottom:1px solid var(--line);
}

/* =========================================================== PRELOADER == */
#preloader{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; align-items:flex-end; justify-content:space-between; padding:var(--pad);
}
#preloader.done{ pointer-events:none; }
.pre__num{
  font-family:var(--f-display);
  font-size:clamp(64px, 17vw, 230px); line-height:.8;
  font-variant-numeric:tabular-nums;
}
.pre__meta{ text-align:right; }
.pre__bar{ position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) - 1px); height:1px; background:var(--line); }
.pre__bar i{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--fg); display:block; }

/* ================================================================ NAV == */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:90; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad); mix-blend-mode:difference;
}
.nav__mark{ font-family:var(--f-display); font-size:16px; letter-spacing:.01em; }
.nav__mark small{
  display:block; font-family:var(--f-sans); font-size:9.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#8b8b8b; margin-top:3px;
}
.nav__links{ display:flex; gap:clamp(14px,2.1vw,30px); align-items:center; }
.nav__links a{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  opacity:.72; transition:opacity .35s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__cta{ border:1px solid rgba(255,255,255,.4); border-radius:99px; padding:8px 16px !important; opacity:1 !important; }
@media (max-width:860px){ .nav__links a:not(.nav__cta){ display:none; } }

/* =============================================================== HERO == */
#webgl{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease); }
#webgl.ready{ opacity:1; }

#hero{
  position:relative; z-index:2;
  min-height:100svh; overflow:hidden;
  display:grid; place-items:center;
  padding:calc(var(--nav-h) + 8px) var(--pad) clamp(20px,3vh,36px);
}

/* giant name, edge to edge and bleeding off BOTH sides */
.hero__wordmark{
  grid-area:1/1; z-index:1; justify-self:stretch; align-self:center;
  margin-top:clamp(-56px,-5vh,-16px);
  position:relative; overflow:hidden;
  font-family:var(--f-display); letter-spacing:-.03em; line-height:.8;
  color:var(--fg);
}
.hero__wordmark span{        /* centres the overflow so it clips evenly left and right */
  display:block; width:max-content; white-space:nowrap;
  position:relative; left:50%; transform:translateX(-50%);
}
.hero__wordmark i{ display:block; font-style:normal; will-change:transform; }

/* the figure sits over the type, exactly like the reference */
.hero__figure{
  grid-area:1/1; z-index:2; align-self:end; justify-self:center;
  height:min(98vh, 1100px);
  margin-bottom:calc(clamp(20px,3vh,36px) * -1);
  pointer-events:none;
}
.hero__figure img{ height:100%; width:auto; display:block; }

.hero__corner{
  position:absolute; z-index:3; bottom:clamp(20px,3.4vh,44px);
  display:flex; flex-direction:column; gap:9px;
}
.hero__corner--l{ left:var(--pad); align-items:flex-start; }
.hero__corner--r{ right:var(--pad); align-items:flex-end; text-align:right; }
.hero__corner a{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); transition:color .4s var(--ease); }
.hero__corner a:hover{ color:var(--fg); }
.hero__job{ font-family:var(--f-display); font-size:clamp(15px,1.65vw,26px); line-height:1.16; color:var(--fg); }

.hero__cue{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  bottom:clamp(20px,3.4vh,44px); display:flex; align-items:center; gap:9px;
}
.hero__cue i{ width:1px; height:22px; background:linear-gradient(var(--fg),transparent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

@media (max-width:760px){
  #hero{ padding-top:calc(var(--nav-h) + 4px); padding-bottom:96px; }
  /* height only — setting width too was squashing the figure */
  .hero__figure{ height:min(78vh, 640px); width:auto; }
  .hero__wordmark{ margin-top:-13vh; }
  .hero__cue{ display:none; }
  .hero__corner{ bottom:auto; }
  .hero__corner--r{ right:var(--pad); left:auto; bottom:48px; }
  .hero__corner--l{                       /* socials become one row so they clear the role */
    left:var(--pad); right:var(--pad); bottom:15px;
    flex-direction:row; flex-wrap:nowrap; justify-content:space-between; gap:8px;
  }
  .hero__corner--l a{ font-size:9.5px; letter-spacing:.1em; }
  .hero__job{ font-size:16px; }
}

main{ position:relative; z-index:2; }
.solid{ background:var(--bg); }

/* =========================================================== SHOWREEL == */
.reel-frame{
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:16/9; background:var(--bg-2); cursor:pointer;
}
.reel-frame video, .reel-frame img{ width:100%; height:100%; object-fit:cover; }
.reel-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 28%, transparent 62%, rgba(0,0,0,.5) 100%);
}
.reel-frame__ui{
  position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:space-between;
  padding:clamp(16px,2.2vw,32px); pointer-events:none;
}
.reel-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(76px,8vw,116px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(242,239,233,.45); backdrop-filter:blur(6px); background:rgba(10,10,12,.25);
  display:grid; place-items:center; z-index:4;
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
}
.reel-frame:hover .reel-play{ background:rgba(242,239,233,.92); color:#000; border-color:transparent; transform:translate(-50%,-50%) scale(1.06); }
.reel-frame.playing .reel-play, .reel-frame.playing::after, .reel-frame.playing .reel-frame__ui{ opacity:0; }
.reel-frame__ui, .reel-play, .reel-frame::after{ transition:opacity .5s var(--ease); }

/* =============================================== PROFILE + EXPERIENCE == */
/* profile on the left, experience alongside it on the right */
.cv-top{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) clamp(30px,5vw,80px); }
.cv-top__l{ grid-column:1 / span 5; }
.cv-top__r{ grid-column:6 / span 7; }
.profile-line{
  margin-top:16px;
  font-family:var(--f-display); font-size:clamp(21px,2.1vw,33px); line-height:1.18;
  color:var(--fg);
}
@media (max-width:1000px){
  .cv-top__l,.cv-top__r{ grid-column:1 / span 12; }
  .cv-top__r{ margin-top:clamp(44px,6vh,70px); }
  .profile-line{ font-size:clamp(21px,3.2vw,34px); }
}

.xp{ margin-top:4px; }
.xp__row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:8px var(--gap); align-items:baseline;
  padding-block:clamp(14px,1.5vw,20px); border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease);
}
.xp__row:hover{ padding-left:10px; }
.xp__title{ font-family:var(--f-display); font-size:clamp(15px,1.35vw,20px); line-height:1.14; }
.xp__org{ grid-column:1; font-size:13px; color:var(--fg-dim); margin-top:2px; }
.xp__org b{ font-weight:600; color:var(--fg); }
.xp__years{ grid-column:2; grid-row:1; text-align:right; white-space:nowrap; }

/* ======================================================= CAPABILITIES == */
.caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.cap{ padding-top:2px; }
.cap__n{ display:block; margin-bottom:14px; }
.cap__title{ font-family:var(--f-display); font-size:clamp(16px,1.4vw,21px); line-height:1.1; margin-bottom:16px; }
.cap ul{ list-style:none; }
.cap li{ font-size:13.5px; line-height:1.9; color:var(--fg-dim); }
.cap li.lead{ color:var(--fg); font-weight:600; }
@media (max-width:1000px){ .caps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .caps{ grid-template-columns:1fr; } }

/* =============================================================== APPS == */
.apps{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); align-items:center;
  border:1px solid var(--line); border-radius:4px;
  padding:clamp(26px,3.6vw,54px);
  background:linear-gradient(160deg, rgba(242,239,233,.045), rgba(242,239,233,0) 60%);
}
.apps__l{ grid-column:1 / span 7; }
.apps__r{ grid-column:9 / span 4; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.apps__count{ font-family:var(--f-display); font-size:clamp(34px,4.4vw,64px); line-height:1; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--fg); border-radius:99px; padding:12px 22px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.btn:hover{ background:var(--fg); color:var(--bg); }
@media (max-width:860px){ .apps__l,.apps__r{ grid-column:1 / span 12; } }

/* ========================================================= OFF THE CLOCK */
.off{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px,2.8vw,46px);
}
.off__item{ display:flex; align-items:flex-start; gap:11px; }
.off__item svg{ width:22px; height:22px; flex:0 0 auto; margin-top:-1px; stroke:var(--fg); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.off__item span{ display:flex; flex-direction:column; gap:2px; }
.off__item b{ font-size:clamp(13px,1.1vw,15px); font-weight:600; letter-spacing:.03em; color:var(--fg); white-space:nowrap; }
.off__item i{ font-size:12px; font-style:normal; color:var(--fg-dim); white-space:nowrap; }

/* ======================================================= EDU/LANGUAGES == */
.two-col{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,5vw,80px); }
.mini{ padding-top:2px; }
.mini__row{ padding-block:14px; border-bottom:1px solid var(--line-soft); }
.mini__row b{ display:block; font-family:var(--f-display); font-size:17px; font-weight:400; }
.mini__row span{ font-size:13.5px; color:var(--fg-dim); }
@media (max-width:700px){ .two-col{ grid-template-columns:1fr; } }

/* ============================================================== WORK == */
.work-list{ border-top:1px solid var(--line); }
.work-row{ position:relative; display:block; width:100%; text-align:left; border-bottom:1px solid var(--line); padding-block:clamp(20px,2.6vw,36px); cursor:pointer; }
.work-row__inner{
  display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,.85fr) 90px;
  gap:var(--gap); align-items:baseline;
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.work-row__title{ font-family:var(--f-display); font-size:clamp(22px,3.2vw,48px); line-height:1; }
.work-row__client{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:10px; }
.work-row__disc{ display:flex; gap:8px; flex-wrap:wrap; }
.work-row__disc span{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); border:1px solid var(--line); border-radius:99px; padding:5px 10px; }
.work-row__year{ text-align:right; }
.work-row:hover .work-row__inner{ transform:translateX(14px); }
.work-list:hover .work-row:not(:hover) .work-row__inner{ opacity:.35; }
@media (max-width:860px){ .work-row__inner{ grid-template-columns:34px 1fr 64px; } .work-row__disc{ display:none; } }

#hoverimg{
  position:fixed; top:0; left:0; z-index:40;
  width:clamp(220px,22vw,340px); aspect-ratio:4/5; overflow:hidden; border-radius:3px;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.94);
  transition:opacity .45s var(--ease), transform .7s var(--ease);
}
#hoverimg.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
#hoverimg > *{ width:100%; height:100%; object-fit:cover; }
@media (hover:none){ #hoverimg{ display:none; } }

/* ================================================ REELS — MIRROR HALL == */
.hall{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
  background:radial-gradient(120% 78% at 50% 0%, #191919 0%, #0e0e10 36%, #08080a 66%, var(--bg) 100%), var(--bg);
  isolation:isolate;
}
.hall::after{
  content:''; position:absolute; left:0; right:0; bottom:24%; height:36vh; z-index:0;
  background:radial-gradient(58% 100% at 50% 100%, rgba(242,239,233,.07), transparent 72%);
  pointer-events:none;
}
.hall__top{ grid-row:1; position:relative; z-index:2; text-align:center; padding:clamp(72px,10vh,120px) var(--pad) 0; pointer-events:none; }
.hall__eyebrow{ color:var(--fg-dim) !important; }
.hall__title{ font-family:var(--f-display); font-size:clamp(42px,7vw,108px); line-height:.95; margin-top:0; color:var(--fg); text-shadow:0 0 70px rgba(242,239,233,.14); }
.hall__canvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; touch-action:pan-y; }
.hall__bottom{ grid-row:3; align-self:end; position:relative; z-index:2; text-align:center; padding:0 var(--pad) clamp(34px,6vh,64px); pointer-events:none; }
.hall__counter{ display:flex; align-items:center; justify-content:center; gap:18px; pointer-events:auto; }
.hall__counter .mono{ color:var(--fg-dim) !important; letter-spacing:.2em; }
.hall__counter b{ color:var(--fg); font-weight:600; }
.hall__arrow{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--fg-dim); font-size:14px; transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.hall__arrow:hover{ background:var(--fg); color:var(--bg); border-color:transparent; }
.hall__active{ margin-top:14px; font-family:var(--f-display); font-size:clamp(22px,4vw,54px); line-height:1; color:var(--fg); text-transform:uppercase; min-height:1.1em; }
@media (max-width:760px){ .hall{ min-height:92svh; } .hall__top{ padding-top:clamp(56px,8vh,90px); } }

.reels-scroll{ display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--pad); margin-inline:calc(var(--pad) * -1); scrollbar-width:none; }
.reels-scroll::-webkit-scrollbar{ display:none; }
.reel-card{ flex:0 0 clamp(210px, 21vw, 300px); scroll-snap-align:start; cursor:pointer; }
.reel-card__media{ position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:3px; background:var(--bg-2); }
.reel-card__media video, .reel-card__media img{ width:100%; height:100%; object-fit:cover; }
.reel-card__meta{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; }

/* ========================================================== GRID WORK == */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.cell{ position:relative; cursor:pointer; }
.cell__media{ position:relative; overflow:hidden; border-radius:3px; background:var(--bg-2); }
.cell__media > *{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.cell:hover .cell__media > *{ transform:scale(1.04); }
.cell__meta{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; align-items:baseline; }
.cell__title{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.r-wide{ grid-column:span 8; }   .r-wide   .cell__media{ aspect-ratio:16/10; }
.r-square{ grid-column:span 4; } .r-square .cell__media{ aspect-ratio:1; }
.r-tall{ grid-column:span 4; }   .r-tall   .cell__media{ aspect-ratio:3/4; }
.r-third{ grid-column:span 3; }  .r-third  .cell__media{ aspect-ratio:1; }
@media (max-width:900px){ .r-wide,.r-square,.r-tall{ grid-column:span 12; } .r-third{ grid-column:span 6; } }

/* =========================================================== CLIENTS == */
.logo-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(86px,9vw,150px), 1fr));
  gap:clamp(26px,3.4vw,58px) clamp(14px,1.8vw,30px);
  align-items:center; justify-items:center;
}
.logo-wall > *{
  width:100%; height:clamp(38px,3.6vw,52px);
  display:grid; place-items:center;
  transition:opacity .45s var(--ease), transform .5s var(--ease);
  opacity:.5;
}
.logo-wall > *:hover{ opacity:1; transform:translateY(-2px); }
.logo-wall img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter:brightness(0) invert(1);
}
.logo-wall span{
  font-size:clamp(11px,1vw,14px); font-weight:600; letter-spacing:.04em;
  text-align:center; color:var(--fg); line-height:1.25;
}

/* =========================================================== CONTACT == */
#contact{ position:relative; z-index:2; }
.contact__mail{
  display:inline-block; position:relative; font-family:var(--f-display);
  font-size:clamp(22px,4.6vw,70px); line-height:1;
  margin-block:clamp(26px,3.6vw,50px); word-break:break-word;
}
.contact__mail::after{ content:''; position:absolute; left:0; right:0; bottom:-.08em; height:1px; background:var(--fg); transform:scaleX(0); transform-origin:right; transition:transform .8s var(--ease); }
.contact__mail:hover::after{ transform:scaleX(1); transform-origin:left; }
.contact__socials{ display:flex; gap:22px; flex-wrap:wrap; }
.contact__socials a{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); transition:color .4s var(--ease); }
.contact__socials a:hover{ color:var(--fg); }

footer{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:26px var(--pad); border-top:1px solid var(--line); position:relative; z-index:2; background:var(--bg); }

/* ====================================================== MEDIA SLOTS === */
.m-slot{
  position:relative; width:100%; height:100%; min-height:60px;
  background:
    repeating-linear-gradient(-45deg, rgba(242,239,233,.028) 0 1px, transparent 1px 9px),
    linear-gradient(150deg, #131318 0%, #0b0b0e 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:14px; border:1px solid var(--line-soft); border-radius:3px;
}
.m-slot b{ font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); }
.m-slot i{ font-size:9px; font-style:normal; color:var(--fg-faint); word-break:break-all; line-height:1.5; max-width:90%; }

/* ======================================================= CASE PANEL === */
#case{ position:fixed; inset:0; z-index:120; background:var(--bg); overflow-y:auto; overscroll-behavior:contain; transform:translateY(100%); visibility:hidden; }
#case.open{ visibility:visible; }
.case__close{ position:fixed; top:18px; right:var(--pad); z-index:5; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(10,10,12,.7); backdrop-filter:blur(10px); display:grid; place-items:center; transition:background .4s var(--ease), transform .4s var(--ease); }
.case__close:hover{ background:var(--fg); color:var(--bg); transform:rotate(90deg); }
.case__hero{ padding:clamp(80px,10vh,140px) var(--pad) 0; }
.case__cover{ margin-top:clamp(30px,5vh,60px); aspect-ratio:16/9; overflow:hidden; border-radius:3px; }
.case__cover > *{ width:100%; height:100%; object-fit:cover; }
.case__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; padding:clamp(32px,5vh,56px) var(--pad); border-bottom:1px solid var(--line); }
.case__facts div p{ margin-top:8px; font-size:14px; }
.case__sec{ padding:clamp(40px,7vh,90px) var(--pad); }
.case__sec--text{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.case__sec--text h3{ grid-column:span 4; }
.case__sec--text p{ grid-column:6 / span 6; font-size:clamp(15px,1.2vw,18px); }
@media (max-width:860px){ .case__sec--text h3,.case__sec--text p{ grid-column:span 12; } }
.case__gal{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.case__gal > *{ aspect-ratio:4/3; overflow:hidden; border-radius:3px; }
.case__gal > * > *{ width:100%; height:100%; object-fit:cover; }
.case__next{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:clamp(40px,7vh,80px) var(--pad); border-top:1px solid var(--line); }

/* ========================================================== LIGHTBOX === */
#lightbox{ position:fixed; inset:0; z-index:200; background:rgba(5,5,6,.94); backdrop-filter:blur(14px); display:grid; place-items:center; padding:clamp(20px,5vw,70px); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox .lb-inner{ max-width:min(1100px,100%); max-height:88vh; }
#lightbox video, #lightbox img{ max-width:100%; max-height:88vh; width:auto; height:auto; margin-inline:auto; border-radius:3px; }
#lightbox .m-slot{ width:min(680px,86vw); aspect-ratio:16/9; }
.lb-close{ position:absolute; top:22px; right:var(--pad); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }

/* ============================================================ CURSOR == */
#cursor{ position:fixed; top:0; left:0; z-index:300; width:9px; height:9px; border-radius:50%; background:var(--fg); pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .45s var(--ease), height .45s var(--ease), background .4s var(--ease); }
#cursor.big{ width:76px; height:76px; background:rgba(242,239,233,.16); backdrop-filter:invert(1); }
#cursor .lbl{ position:absolute; inset:0; display:grid; place-items:center; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bg); opacity:0; transition:opacity .3s var(--ease); white-space:nowrap; }
#cursor.big .lbl{ opacity:1; }
@media (hover:none),(max-width:760px){ #cursor{ display:none; } }

/* ========================================================== REVEALS === */
.rv{ opacity:0; transform:translateY(24px); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* ========================================================= FILM GRAIN == */
.grain{
  position:fixed; top:-60%; left:-60%; width:220%; height:220%;
  z-index:400; pointer-events:none;
  background-image:url('../assets/grain.png');
  background-repeat:repeat;
  opacity:.14;
  will-change:transform;
  animation:grainShift 1.1s steps(5) infinite;
}
@keyframes grainShift{
  0%   { transform:translate(0,0) }
  20%  { transform:translate(-6%,4%) }
  40%  { transform:translate(4%,-7%) }
  60%  { transform:translate(-3%,8%) }
  80%  { transform:translate(7%,3%) }
  100% { transform:translate(0,0) }
}
#cursor{ z-index:500; }
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }