/* Страницы «этажами»: текст, фоны этажей, вспышки фото — src/_includes/floors.njk */
.fl{position:relative;width:100%;background:#171717;overflow:hidden;overflow:clip} /* clip, а не hidden: иначе параллакс считается от этого блока, а не от экрана */

/* этажи с фонами (компьютер) */
.fl-floor{position:absolute;left:0;right:0;overflow:hidden;overflow:clip;z-index:0}
.fl-floor-bg{position:absolute;top:0;left:0;width:100%;object-fit:cover;will-change:transform;filter:saturate(.9)}
/* параллакс целиком на браузере: он сам считает его по прокрутке, скрипт в этом не участвует.
   --from/--to и высоту фона задаёт floors.js. Где animation-timeline не поддерживается,
   фон просто стоит на месте — двигать его из скрипта значит отставать на кадр и дрожать */
@supports (animation-timeline: view()){
  .fl-floor{view-timeline-name:--fl-floor}
  .fl-floor-bg{animation:fl-parallax linear both;animation-timeline:--fl-floor;animation-range:cover 0% cover 100%}
  @keyframes fl-parallax{from{transform:translateY(var(--from))}to{transform:translateY(var(--to))}}
}
.fl-floor-dim{position:absolute;inset:0;background:#171717}

.fl-text{position:absolute;z-index:2;color:#d9c5ae;font-weight:300;line-height:1.55;
  font-size:calc(clamp(13px,1.15vw,17px) * var(--tscale,1));box-sizing:border-box}
.fl-text.hl{background:rgba(217,197,174,var(--tbg,.06));padding:1.05em 1.2em;border-radius:2px}
.fl-text .muted{opacity:.5}
.fl-text a{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(217,197,174,.4)}
.fl-text a:hover{text-decoration-color:#d9c5ae}
/* ссылки: при наведении загораются сразу, гаснут за 100 мс */
.fl-text a,.fl-footer a{transition:opacity .1s,text-decoration-color .1s}
.fl-text a:hover,.fl-footer a:hover{transition:none}

.fl-logo{position:absolute;z-index:3;left:2.1rem;top:1.5rem}
.fl-logo img{height:2.6rem;width:auto;display:block}

/* заголовок страницы: середина первого экрана, в колонке абзацев — floors.js ставит ему
   left и width по той же сетке и подгоняет кегль под ширину колонки, чтобы рядом влезали фото.
   50vh — это середина первого экрана, потому что .fl начинается от верха страницы.
   Первый абзац floors.js опускает под заголовок сам, по его настоящей высоте */
.fl-title{position:absolute;z-index:3;left:2.1rem;top:50vh;transform:translateY(-50%);
  margin:0;color:#d9c5ae;font-weight:300;line-height:1.08;
  text-transform:uppercase;letter-spacing:.24em;font-size:clamp(30px,5.6vw,86px)}
/* строки не переносим: вместо этого floors.js уменьшает кегль, пока самая длинная не влезет в колонку */
.fl-title-line{display:block;white-space:nowrap}

.fl-footer{position:absolute;z-index:3;left:2.1rem;right:2.1rem;bottom:1.8rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;color:#d9c5ae;font-weight:300;
  font-size:calc(clamp(13px,1.15vw,17px) * var(--tscale,1))}
.fl-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.fl-footer a{opacity:.75}
.fl-footer a:hover{opacity:1}

/* вспышки фото (компьютер) */
.fl-photo{position:absolute;z-index:1;object-fit:cover;opacity:0;
  transition:opacity var(--fade,1150ms) ease-in-out;will-change:opacity}
.fl-photo.on{opacity:1}

/* фото между абзацами (телефон) */
.fl-slot{display:none}

@media (max-width:767px){
  /* текст, логотип, футер и фото идут потоком, но остаются позиционированными —
     иначе их перекроет фон этажа (он позиционирован, а z-index:0 рисуется поверх потока) */
  .fl{height:auto!important;overflow:visible;padding:1.2rem 1.35rem 2.5rem}
  .fl-photo{display:none!important}
  /* фон на телефоне неподвижен. Адресная строка прячется прямо во время прокрутки
     и меняет высоту окна — любое движение фона на этом фоне читается как дрожание */
  .fl-floor-bg{animation:none;will-change:auto}
  .fl-logo{position:relative;left:auto;top:auto;display:block;margin:.5rem 0}
  .fl-title{position:relative;left:auto;top:auto;transform:none;z-index:3;
    margin-top:2.4rem;letter-spacing:.18em;font-size:clamp(22px,6.6vw,34px)}
  /* !important — перебиваем раскладку компьютера (она в атрибуте style),
     чтобы текст не уезжал вбок в те мгновения, пока floors.js не пересчитал её после поворота экрана */
  .fl-text{position:relative;width:auto!important;left:auto!important;right:auto!important;top:auto!important;
    max-width:34rem;margin-top:1.7rem;font-size:clamp(17px,4.8vw,20px)}
  .fl-footer{position:relative;left:auto;right:auto;bottom:auto;
    flex-direction:column;align-items:flex-start;gap:1rem;
    margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(217,197,174,.15);font-size:clamp(17px,4.8vw,20px)}
  /* место под фото одной высоты, фото вписывается целиком и прижато влево — страница не скачет */
  .fl-slot{position:relative;z-index:1;display:flex;align-items:center;height:min(112vw,620px);margin-top:2.2rem}
  .fl-slot img{max-width:80%;max-height:100%;opacity:0;transition:opacity var(--fade,1150ms) ease-in-out}
  .fl-slot img.on{opacity:1}
}
@media (prefers-reduced-motion:reduce){.fl-photo,.fl-slot img{transition-duration:200ms}}
.fl-p{margin-top:.6em}
.fl-h{margin:1.2em 0 .5em;font-size:1.3em;font-weight:300;line-height:1.3}
.fl-h:first-child{margin-top:0}
.fl-list{margin-top:.4em;padding-left:1.1em;list-style:"— "}

/* галерея «Примеры работ» (gallery.js). На компьютере место и ширину ей даёт floors.js,
   фото в ряду — --g-cols в ceramics.njk */
.fl-gallery{position:absolute;z-index:2;box-sizing:border-box}
.fl-g-grid{display:grid;grid-template-columns:repeat(var(--g-cols,8),1fr);gap:6px}
.fl-g-item{position:relative;display:block;aspect-ratio:3/4;padding:0;border:0;
  overflow:hidden;background:none;cursor:pointer}
.fl-g-item img{width:100%;height:100%;object-fit:cover;object-position:50% 65%;display:block}
/* затемнение: у открытого фото — насовсем, при наведении — чуть-чуть */
.fl-g-item::after{content:"";position:absolute;inset:0;background:#171717;opacity:0;transition:opacity .15s}
.fl-g-item:hover::after{opacity:.2}
.fl-g-item.on::after{opacity:.6}

/* раскрытое фото — строкой под рядом, в половину ширины сетки, по центру; кнопки поверх фото.
   Слой с кнопками высотой в экран и прилипает к нему — стрелки видны, пока фото на экране */
.fl-g-open{grid-column:1/-1;position:relative;justify-self:center;width:50%;margin:0}
.fl-g-frame{aspect-ratio:9/16}
.fl-g-frame img{width:100%;height:100%;object-fit:cover;display:block}
.fl-g-ctl{position:absolute;inset:0;pointer-events:none}
.fl-g-stick{position:sticky;top:0;height:min(100vh,100%);pointer-events:none}
.fl-g-nav,.fl-g-close{position:absolute;border:0;padding:0;background:none;color:#fff;cursor:pointer;
  opacity:.75;font-weight:300;line-height:1;pointer-events:auto;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.fl-g-nav:hover,.fl-g-close:hover{opacity:1}
.fl-g-nav{top:50%;transform:translateY(-50%);font-size:56px;width:4rem;height:6rem}
.fl-g-prev{left:0}
.fl-g-next{right:0}
.fl-g-close{top:.8rem;right:1rem;font-size:40px}
@media (max-width:767px){
  .fl-gallery{position:relative;margin-top:2.2rem}
  .fl-g-grid{gap:4px}
  .fl-g-open{width:100%} /* на телефоне половина — это меньше 170 px */
  .fl-g-nav{width:3rem;font-size:44px}
}