/* ============================================================================
   site/fx/fan.css — веер карточек в «Ресторану / Поставщику» (fx/fan.js).

   Точка веера — пустое поле раскрытой половины: правее середины, выше
   огромного слова. Карточки стоят стопкой под этой точкой (ниже на 150 px,
   мельче, прозрачные) и при наведении разлетаются в дугу с упругим
   перелётом. Уходят — быстрее и без упругости (power2.in), как у Ландо
   закрытие меню: уход короче прихода.

   Слой веера — под текстом половины (z-index −1 внутри isolation), но над
   её заливкой: слово, строка и ссылка всегда читаются поверх карточек.
   ========================================================================== */

.fx-fan{ display:none }

@media (hover:hover) and (pointer:fine) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .side.fx-fan-on{ isolation:isolate }

  .fx-fan{ display:block; position:absolute; left:64%; top:31%; width:0; height:0;
    z-index:-1; pointer-events:none }

  .fx-fan > i{ position:absolute; left:0; top:0; display:block; box-sizing:border-box;
    translate:-50% -50%; transform-origin:50% 88%;
    transform:translate3d(0,150px,0) rotate(0deg) scale(.72);
    opacity:0;
    transition:transform .42s cubic-bezier(.55,.055,.675,.19),        /* power2.in */
      opacity .26s linear .12s }

  /* Экран приложения — в тонкой тёмной рамке, как в «Четырёх работах».
     Телефоны выше товаров: их точка левее и ниже, чтобы правый не доставал
     до круглой стрелки в углу, а низы — до слова. */
  .fx-fan.is-phone{ left:57%; top:33% }
  .fx-fan.is-phone > i{ width:80px; height:173px; padding:3px; border-radius:15px;
    background:var(--bg, #0E1A16);
    box-shadow:0 22px 40px -20px rgba(5,11,9,.6), 0 0 0 1px rgba(5,11,9,.2) }
  .fx-fan.is-phone > i > img{ border-radius:13px; object-fit:cover }

  /* Товар — вырезка на светлой карточке, как на прилавке каталога. */
  .fx-fan.is-goods > i{ width:152px; height:106px; padding:10px 12px; border-radius:14px;
    background:var(--paper, #F4F4ED);
    box-shadow:0 22px 40px -20px rgba(5,11,9,.55), 0 0 0 1px rgba(5,11,9,.08) }
  .fx-fan.is-goods > i > img{ object-fit:contain }

  .fx-fan > i > img{ display:block; width:100%; height:100%; user-select:none }

  .sides > .side:hover .fx-fan > i,
  .sides > .side:focus-visible .fx-fan > i{
    transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(1);
    opacity:1;
    transition:transform 1.1s var(--fx-elastic, cubic-bezier(.165,.84,.44,1)) calc(var(--i) * 55ms),
      opacity .2s linear calc(var(--i) * 55ms);
  }

  /* 900–1199 px: половина уже, веер мельче — стрелка в углу и слово
     остаются свободными. */
  @media (max-width:1199px){
    .fx-fan{ left:62%; top:30%; scale:.8 }
    .fx-fan.is-phone{ left:56%; top:32% }
  }
}