/* Yelumio — #directions: стеклянное окошко «С чем работаем» у карточек направлений.
   Разметка — site-v3 build.py dir_glass(), поведение — assets/dirglass.js.
   v2 (правки 28.09): белое очень прозрачное стекло БЕЗ рамки и кромки, почти квадратное; логотипы — сетка из --dg-cols колонок,
   колонки едут вверх-вниз (JS ставит каждому логотипу translate3d), сверху и снизу затухание.
   Окошко лежит внутри карточки, абсолютно под ней (.up — над ней, если внизу вышло бы за тёмную секцию), и заходит на неё на 18px (= OVER в JS).
   На телефоне (≤640px) открытое окошко — в потоке карточки под кнопкой «С чем работаем». */

#directions .dir{position:relative}
#directions .dir.dg-on{z-index:5}
.dir.dg-on .dir-num{color:var(--coral);-webkit-text-stroke-color:var(--coral)}

/* «С чем работаем» — кнопка для тача и клавиатуры; на устройствах с мышью видна только в фокусе с клавиатуры (там всё делает наведение) */
.dg-open{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:-8px;padding:7px 14px 7px 8px;border-radius:999px;
  border:0;cursor:pointer;font:650 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.08);-webkit-tap-highlight-color:transparent;transition:background .2s}
.dg-open b{font-weight:650;color:var(--coral)}
.dg-peek{display:flex}
.dg-peek svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--deep3);box-shadow:0 0 0 2px var(--paper);color:var(--ink)}
.dg-peek svg+svg{margin-left:-7px}
.dir.dg-on .dg-open{background:rgba(255,255,255,.15)}
.dg-open:focus-visible,.dg-logo:focus-visible{outline:2px solid var(--apricot);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .dg-open:not(:focus-visible){position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ── материал: белое, очень прозрачное стекло; ни обводки, ни кромки — только мягкая размытая тень.
   saturate держим низким: на синей сцене сильный saturate красит стекло в лиловый (сравнение — directions_glass_preview/v2/tints.png) ── */
.dg{--dg-cols:3;--dg-row:.84;
  position:absolute;z-index:3;grid-column:2/-1;left:0;top:calc(100% - 18px);width:340px;max-width:100%;
  padding:16px 0 14px;border:0;outline:0;border-radius:28px;color:var(--ink);isolation:isolate;
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(28px) saturate(1.15) brightness(1.1);backdrop-filter:blur(28px) saturate(1.15) brightness(1.1);
  box-shadow:0 40px 80px -36px rgba(5,6,20,.55);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.95);transform-origin:24% 0;
  transition:opacity .2s ease,transform .3s var(--ease),visibility 0s linear .3s}
.dg.up{top:auto;bottom:calc(100% - 18px);transform:translateY(10px) scale(.95);transform-origin:24% 100%}
.dir.dg-on .dg{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .24s ease,transform .46s cubic-bezier(.3,1.35,.55,1),visibility 0s}
/* без backdrop-filter: тот же белый полупрозрачный слой поверх цвета сцены — текст следующей карточки не просвечивает */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dg{background:linear-gradient(rgba(255,255,255,.17),rgba(255,255,255,.17)),var(--paper-2)}
}

/* ── шапка ── */
.dg-head{display:flex;align-items:baseline;gap:10px;padding:0 20px 6px}
.dg-t{font:650 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.72}
.dg-n{font:650 11px/1 var(--sans);letter-spacing:.08em;color:var(--apricot)}

/* ── сетка: 3 колонки × 3 ряда (ячейка = ширина/3 × её .84 — --dg-row в JS); затухание сверху и снизу ── */
.dg-grid{position:relative;padding:0 12px;overflow:clip;cursor:grab;touch-action:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(180deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
@supports not (overflow:clip){.dg-grid{overflow:hidden}}
.dg-grid.drag{cursor:grabbing}
.dg-grid.drag .dg-logo{pointer-events:none}
.dir .dg-track{grid-column:auto;position:relative;display:block;aspect-ratio:1/.84;list-style:none;margin:0;padding:0}
.dir .dg-track li{position:absolute;top:0;left:0;width:33.333%;aspect-ratio:1/.84;display:grid;place-items:center;padding:0;
  font-size:inherit;line-height:1;will-change:transform;backface-visibility:hidden}
.dir .dg-track li::before{content:none}
.dg-logo{display:grid;place-items:center;width:68px;height:68px;padding:0;border:0;border-radius:22px;cursor:pointer;color:var(--ink);background:transparent;
  -webkit-tap-highlight-color:transparent;transition:transform .42s cubic-bezier(.3,1.6,.5,1),background .25s,color .25s}
.dg-ic{width:34px;height:34px;opacity:.82;transition:opacity .25s}
.dg-ic .c{opacity:0;transition:opacity .25s}
.dg-ic .m{transition:opacity .25s}
.dg-logo:hover,.dg-logo.on{color:var(--c);transform:scale(1.16);background:rgba(255,255,255,.16)}
.dg-logo:hover .dg-ic,.dg-logo.on .dg-ic{opacity:1}
.dg-logo:hover .dg-ic .m,.dg-logo.on .dg-ic .m{opacity:0}
.dg-logo:hover .dg-ic .c,.dg-logo.on .dg-ic .c{opacity:1}
.dg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── подпись: название / что мы с ним делаем — всегда две строки, окошко не прыгает ── */
.dg-cap{margin:8px 20px 0;min-height:42px;font:500 14px/1.5 var(--sans);color:var(--ink);opacity:.78}
.dg-cur,.dg-ht{display:none}
.dg-cur b{display:block;font-weight:650}
.dg-cur > span{display:block;opacity:.85}
.dg-cap.has{opacity:1}
.dg-cap.has .dg-def{display:none}
.dg-cap.has .dg-cur{display:block;animation:dg-cap .3s var(--ease)}
@keyframes dg-cap{from{opacity:0;transform:translateY(3px)}}

@media (hover:none),(pointer:coarse){
  .dg-hm{display:none}
  .dg-ht{display:inline}
}
@media (max-width:640px){
  .dg-open{grid-column:1;margin-top:-4px}
  .dg{grid-column:1/-1;width:100%;border-radius:26px}
  /* телефон: открытое окошко встаёт в поток карточки под кнопкой — не наезжает на соседнюю карточку и не уходит за тёмную секцию */
  .dir.dg-on .dg{position:relative;top:auto;bottom:auto;margin-top:2px}
  .dg-cap{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .dg,.dir.dg-on .dg,.dg.up{transform:none}
}