/* karal0v — первый экран главной, как у Iconoclast: работа на весь экран
   фоном без звука, название проявляется бегущими буквами, внизу шкала
   01 02 03… с полоской до следующей работы. Ниже — сетка, как раньше. */

.hero{
  position:relative;overflow:hidden;
  height:calc(100svh - var(--head) - var(--safe-t));
  margin-bottom:clamp(24px,4vh,48px);background:#000;color:#F5F5F5;
}
.hero__slide{display:none}

/* видео/обложка — «cover»: заполняет экран без полей, лишнее обрезается */
.hero__media{position:absolute;inset:0}
/* слой работы: проявляется поверх прошлого за ~1.2 с; плеер внутри сначала
   невидим и проявляется поверх обложки, когда реально пошёл */
.hero__layer{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.hero__layer.on{opacity:1}
.hero__layer img,.hero__layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* клип чуть крупнее кадра: у некоторых исходников по краю светлая полоска —
   так она не видна (тонкая линия между шапкой и видео) */
.hero__layer video{transform:scale(1.04)}
.hero__layer video{opacity:0}
.hero__layer.playing video{opacity:1}
.hero__layer img.fill43{transform:scale(1.3334)}
.hero__layer img.fill11{transform:scale(1.7778)}
.hero__layer iframe{
  position:absolute;top:50%;left:50%;border:0;pointer-events:none;
  width:max(100%, calc((100svh - var(--head)) * 16 / 9));
  height:max(100%, calc(100vw * 9 / 16));
  transform:translate(-50%,-50%) scale(1.12);opacity:0;transition:opacity 1s ease;
}
.hero__layer.playing iframe{opacity:1}
.hero__layer.fit43 iframe{transform:translate(-50%,-50%) scale(1.4934)}
.hero__layer.fit11 iframe{transform:translate(-50%,-50%) scale(1.99)}

.hero__veil{
  position:absolute;inset:0;pointer-events:auto;
  background:linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 45%),
             linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
}

/* название — бегущие буквы: каждая выезжает снизу со сдвигом по времени */
.hero__title{
  position:absolute;left:var(--pad);bottom:calc(var(--pad) + 40px);right:var(--pad);
  display:flex;flex-direction:column;gap:6px;
}
/* у всех работ название на одной высоте: всегда одна строка, а место под
   второй строчкой есть, даже если её нет */
.hero__top{font-size:clamp(20px,3vw,44px);font-weight:700;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;
  white-space:nowrap;max-width:100%}
.hero__top .hero__word{white-space:nowrap}

/* вторая строчка (подзаголовок работы) не показывается — только название */
.hero__sub{display:none;min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(12px,1.2vw,16px);font-weight:500;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.hero__word{display:inline-block;white-space:nowrap}
/* старое название тает целиком */
.hero__title{transition:opacity .45s ease}
.hero__title.out{opacity:0}
.hero__top{display:inline-block;align-self:flex-start;position:relative}

/* «табло»: перебор символов делает скрипт; цифры одинаковой ширины,
   чтобы строка не дёргалась */
.hero__top{font-variant-numeric:tabular-nums}

/* шкала внизу: номера, у текущего — полоска времени */
.hero__index{
  position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(6px,1vw,14px);
}
.hero__i{display:flex;flex-direction:column;gap:5px;padding:10px 0;text-align:left;color:inherit;cursor:pointer}
/* номера — совсем мелкие и серые, как «1 · 2 · 3» в шапке; текущий светлее */
.hero__i span{display:none;font-size:9px;font-weight:400;letter-spacing:0;opacity:.4;transition:opacity .4s}
.hero__i:hover span{opacity:.7}
.hero__i.on span{opacity:.85}
.hero__i i{position:relative;display:block;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.hero__i i::after{content:"";position:absolute;inset:0;background:#F5F5F5;transform:scaleX(var(--p,0));transform-origin:left}
.hero__i.done i::after{transform:scaleX(1)}

@media (max-width:600px){
  /* на телефоне видео — до самого низа экрана, под панель браузера;
     название и шкала стоят над панелью (100lvh − 100svh — её высота) */
  .hero__index{gap:4px;bottom:calc(var(--pad) + 100lvh - 100svh + env(safe-area-inset-bottom))}
  .hero__title{bottom:calc(var(--pad) + 34px + 100lvh - 100svh + env(safe-area-inset-bottom))}
  .hero__top{white-space:normal;font-size:clamp(20px,6.4vw,30px)}
}

/* без клипа — обложка с медленным наездом, как в трейлере */
.hero__layer.kb img{animation:heroKB 12s linear both}
.hero__layer.kb img.fill43{animation-name:heroKB43}
.hero__layer.kb img.fill11{animation-name:heroKB11}
@keyframes heroKB{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes heroKB43{from{transform:scale(1.3334)}to{transform:scale(1.44)}}
@keyframes heroKB11{from{transform:scale(1.7778)}to{transform:scale(1.92)}}

/* страница 1 — только первый экран: без отступа снизу и без прокрутки */
.hero{margin-bottom:0}
body:has(.hero):not(:has(.panel)){padding-bottom:0}

/* первая страница (компьютер и телефон): шапка прозрачная поверх видео,
   видео — на весь экран от самого верха. Имя, «оператор, монтажёр», 1 · 2 · 3
   и мигающий кружок — белые с наложением difference: над светлым кадром темнеют.
   Шапка без своего слоя (absolute без z-index), иначе difference смешивал бы
   буквы только с её пустым фоном, а не с видео. */
body:has(.hero) .head{position:absolute;top:0;left:0;right:0;z-index:auto;background:transparent}
body:has(.hero) .hero{height:100svh}
body:has(.hero) .head .brand,
body:has(.hero) .head .pages,
body:has(.hero) .head .dot{position:relative;z-index:21;mix-blend-mode:difference;color:#fff}
body:has(.hero) .head .role{color:#fff}
body:has(.hero) .head .pages a,body:has(.hero) .head .pages i{color:#fff}
body:has(.hero) .head .dot{inset:auto}            /* у кружка свои right/bottom от прежнего места внизу */
body:has(.hero) .head .dot i{background:#fff;animation-name:dotBlinkDiff}
body:has(.hero) .head .dot[aria-expanded="true"] i{background:transparent;box-shadow:inset 0 0 0 2px #fff}
@keyframes dotBlinkDiff{0%{background-color:#fff}50%{background-color:#7a7a7a}}

/* телефон: видео — до самого пола. Закреплённый (fixed) слой Safari на iOS 26
   под панель адреса не пускает, а обычный — пускает (так уже было «в пол»):
   поэтому первый экран в потоке страницы, на высоту 100lvh, шапка лежит
   поверх. Название и шкала — над развёрнутой панелью (100lvh − 100svh). */
@media (max-width:600px){
  /* +--floor: запас вниз, чтобы видео было и в углах вокруг панели, и под ней
     до самой кромки экрана (100lvh кончается чуть выше) */
  body:has(.hero){--floor:120px}
  body:has(.hero) .hero{position:relative;height:calc(100lvh + var(--floor));margin:0}
  body:has(.hero) .hero__index{bottom:calc(var(--floor) + 100lvh - 100svh + var(--pad) + env(safe-area-inset-bottom))}
  body:has(.hero) .hero__title{bottom:calc(var(--floor) + 100lvh - 100svh + var(--pad) + 34px + env(safe-area-inset-bottom))}
  html:has(.hero){overscroll-behavior:none}
}