/* ============================================================
   LANDMARK — медиа-слой: фото-сторителлинг + scroll-reveal
   Подключается после инлайн-стилей страницы.
   ============================================================ */

/* --- появление при скролле (класс .reveal вешает reveal.js) --- */
.reveal{opacity:0;transform:translateY(38px);
  transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1;transform:none}
/* у .dir и .rel есть свои inline-transition — объединяем, чтобы reveal не ломался */
.dir.reveal{transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1),padding-left .5s}
.rel.reveal{transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1),background .4s}
.story .srow>div.reveal{transition-delay:.15s}

/* --- фото-фрейм --- */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#171307,#0d0c09 70%);display:block}
.ph img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.07);filter:saturate(.88) brightness(.97);
  transition:transform 1.8s cubic-bezier(.19,1,.22,1)}
.ph.in img,.reveal.in .ph img{transform:scale(1)}
.ph::before{content:"";position:absolute;inset:0;border:1px solid rgba(200,169,97,.16);z-index:2;pointer-events:none}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:42px 20px 15px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(236,231,223,.82);
  background:linear-gradient(180deg,transparent,rgba(10,10,11,.82))}

/* --- полноэкранная фото-лента (band) --- */
.media-band{position:relative;z-index:5;height:74vh;min-height:460px;overflow:hidden;
  background:var(--ink);border-bottom:1px solid var(--line)}
.band-img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;
  filter:saturate(.88) brightness(.95);will-change:transform}
.band-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.45),transparent 32%,transparent 58%,rgba(10,10,11,.88))}
.band-cap{position:absolute;left:0;right:0;bottom:0;padding:0 0 30px}
.band-cap .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.band-cap span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(236,231,223,.85)}
.band-cap span:last-child{color:var(--gold)}

/* --- сторителлинг: кадр + текст --- */
.story{position:relative;z-index:5;background:var(--ink);padding:90px 0 10px}
.story .srow{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center;padding:56px 0}
.story .srow.flip>.ph{order:2}
.story .ph{height:580px}
.story .s-eyebrow{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold)}
.story h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(28px,3.4vw,44px);
  line-height:1.12;margin:18px 0 20px}
.story h3 em{font-style:italic;color:var(--gold)}
.story .srow p{color:var(--muted);font-size:15.5px;line-height:1.85;max-width:46ch}
@media(max-width:820px){
  .story .srow{grid-template-columns:1fr;gap:26px;padding:38px 0}
  .story .srow.flip>.ph{order:0}
  .story .ph{height:340px}
}

/* --- фото-полоса (3 кадра, асимметрия) --- */
.strip{position:relative;z-index:5;background:var(--ink);padding:50px 0 120px}
.strip-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:48px}
.strip .s1{grid-column:1/6;height:490px}
.strip .s2{grid-column:6/10;height:400px;margin-top:70px}
.strip .s3{grid-column:10/13;height:450px;margin-top:20px}
.strip .s2.reveal{transition-delay:.14s}
.strip .s3.reveal{transition-delay:.28s}
@media(max-width:760px){
  .strip .s1,.strip .s2,.strip .s3{grid-column:1/13;height:300px;margin-top:0}
  .strip .s2.reveal,.strip .s3.reveal{transition-delay:0s}
}

/* --- мозаика «Моменты» (главная, 6 кадров) --- */
.mosaic{position:relative;z-index:5;background:var(--ink);padding:110px 0;border-top:1px solid var(--line)}
.mosaic-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:50px}
.mosaic .m1{grid-column:1/6;height:450px}
.mosaic .m2{grid-column:6/9;height:370px;margin-top:64px}
.mosaic .m3{grid-column:9/13;height:410px;margin-top:22px}
.mosaic .m4{grid-column:1/4;height:370px}
.mosaic .m5{grid-column:4/9;height:470px;margin-top:48px}
.mosaic .m6{grid-column:9/13;height:380px;margin-top:88px}
.mosaic .m2.reveal,.mosaic .m5.reveal{transition-delay:.14s}
.mosaic .m3.reveal,.mosaic .m6.reveal{transition-delay:.28s}
@media(max-width:760px){
  .mosaic .m1,.mosaic .m2,.mosaic .m3,.mosaic .m4,.mosaic .m5,.mosaic .m6{grid-column:1/13;height:300px;margin-top:0}
  .mosaic .m2.reveal,.mosaic .m3.reveal,.mosaic .m5.reveal,.mosaic .m6.reveal{transition-delay:0s}
}

/* --- миниатюры направлений на главной --- */
.dir{grid-template-columns:80px 300px 1fr 1.2fr 40px!important}
.dir .ph{width:300px;height:200px}
@media(max-width:820px){
  .dir{grid-template-columns:1fr!important}
  .dir .ph{width:100%;height:230px;order:-1;margin-bottom:6px}
}

/* --- WebGL-слой (gl-media.js) --- */
.gl-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;cursor:inherit}
.media-band .band-scrim{z-index:2}
.media-band .band-cap{z-index:3}
figure.ph{position:relative}
figure.ph.gl-item.reveal{opacity:1;transform:none;transition:none}
figure.ph.gl-item img{transition:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ph img{transform:none;transition:none}
  .band-img{transform:none!important}
}

/* --- лонгрид: журнальный сторителлинг со sticky-кадром --- */
.chapters{position:relative;z-index:5;background:var(--ink);padding:120px 0 90px;border-top:1px solid var(--line)}
.ch-lede{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(20px,2.4vw,28px);line-height:1.55;color:var(--muted);max-width:820px;margin-top:40px}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:70px}
.ch-visual{position:relative}
.ch-sticky{position:sticky;top:100px;height:min(74vh,660px)}
.ch-sticky .ph{position:absolute;inset:0;opacity:0;transition:opacity 1.3s cubic-bezier(.4,0,.2,1)}
.ch-sticky .ph.on{opacity:1}
.ch-text .chap{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:50px 0}
.chap .kicker{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.chap h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(28px,3vw,42px);line-height:1.14;margin:20px 0 8px}
.chap h3 em{font-style:italic;color:var(--gold)}
.chap p{color:var(--muted);font-size:16px;line-height:1.95;max-width:50ch;margin-top:18px}
.chap p.drop::first-letter{font-family:'Cormorant Garamond',serif;font-size:66px;line-height:.78;
  float:left;padding:8px 14px 0 0;color:var(--gold)}
.chap .fin{margin-top:26px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
@media(max-width:860px){
  .ch-grid{grid-template-columns:1fr;gap:0}
  .ch-visual{order:-1}
  .ch-sticky{top:64px;height:44vh;min-height:280px;z-index:4}
  .ch-text .chap{min-height:64vh;padding:44px 0}
}

/* --- бесконечная фотолента в контенте (gallery.js) --- */
.wgal{position:relative;z-index:5;background:var(--ink);padding:100px 0 110px;border-top:1px solid var(--line)}
.wgal-stage{position:relative;height:470px;margin-top:52px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink)}
.wgal-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.wgal-stage.drag canvas{cursor:grabbing}
.wgal-hint{position:absolute;right:40px;bottom:16px;z-index:2;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);opacity:.75;pointer-events:none}
.wgal-fallback{display:flex;gap:14px;overflow-x:auto;height:100%;align-items:center;padding:0 24px}
.wgal-fallback img{height:76%;aspect-ratio:16/10;object-fit:cover;flex:none;
  border:1px solid rgba(200,169,97,.16);filter:saturate(.88) brightness(.96)}
@media(max-width:700px){.wgal-stage{height:330px}.wgal-hint{right:20px}}

/* --- подписи кадров бесконечной ленты --- */
.wgal-caps{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.wgal-cap{position:absolute;left:0;top:0;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(236,231,223,.82);white-space:nowrap;will-change:transform,opacity}
.wgal-cap::before{content:"";display:inline-block;width:16px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:12px;opacity:.8}
.wgal-fallback figure{flex:none;height:76%;display:flex;flex-direction:column}
.wgal-fallback figure img{height:100%;width:auto}
.wgal-fallback figcaption{margin-top:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,231,223,.6)}
@media(max-width:700px){.wgal-cap{font-size:9px;letter-spacing:.2em}}

/* --- видео-кадры в фолбэке ленты --- */
.wgal-fallback figure video{height:100%;width:auto;aspect-ratio:16/10;object-fit:cover;
  border:1px solid rgba(200,169,97,.16);filter:saturate(.88) brightness(.96)}

/* --- видео в фото-ленте --- */
video.band-img{object-fit:cover;background:#0a0a0b}

/* --- видео-ленты: края никогда не видны ---
   102% высоты с сдвигом — прячет и ход параллакса, и возможную
   «грязную» нижнюю строку пикселей из кодировщика видео.
   transform:none отключает CSS-параллакс именно у видео. */
video.band-img{top:-1%!important;height:102%!important;transform:none!important}

/* --- видео-ленты: без нижней линии --- */
.media-band.is-video{border-bottom:none}