/* «Вместо меню — вектор вкуса» — тарелки на чёрном столе под точечным светом */
.plates{position:relative;overflow:hidden}

/* колонки как у остальных секций: вторая колонка начинается на линии 7-й колонки сетки (центр + 12px) */
.plates-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 24px;align-items:end}
.plates-title{font-size:var(--t-h2);line-height:1.04;max-width:12ch}
.plates-lead{font-size:var(--t-lead);line-height:1.4;color:var(--ink-2);max-width:30ch;transition-delay:120ms}

/* сцена-стол */
.plates-stage{
  --plates-p:560px;--plates-cy:300px;
  position:relative;margin-top:48px;
  height:calc(var(--plates-cy) + var(--plates-p) * .5 + 300px);
  overflow:hidden;cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.plates-stage.is-drag{cursor:grabbing}
.plates-stage:focus{outline:none}
.plates-stage:focus-visible .plates-board{box-shadow:inset 0 0 0 1px var(--ink-3)}

.plates-table{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent)}
/* точечная подложка: почти не видна в темноте, проявляется в пятне света */
.plates-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(242,240,237,.2) 0 1px,transparent 1.4px);
  background-size:12px 12px;background-position:center top;
  -webkit-mask-image:radial-gradient(calc(var(--plates-p) * 1.1) calc(var(--plates-p) * .8) at 50% var(--plates-cy),#000 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,.06) 80%,transparent 100%);
          mask-image:radial-gradient(calc(var(--plates-p) * 1.1) calc(var(--plates-p) * .8) at 50% var(--plates-cy),#000 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,.06) 80%,transparent 100%);
}
/* пятно света сверху: нейтральное, без цвета — на нём читается тень тарелки */
.plates-pool{
  position:absolute;left:0;top:0;
  width:calc(var(--plates-p) * 1.9);height:calc(var(--plates-p) * 1.45);
  margin:calc(var(--plates-p) * -.725) 0 0 calc(var(--plates-p) * -.95);
  background:radial-gradient(closest-side,rgba(242,240,237,.085),rgba(242,240,237,.04) 50%,rgba(242,240,237,.012) 78%,transparent);
}

.plates-ring{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.plates-item{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity;opacity:0}
.plates-item img{position:relative;z-index:1;width:100%;height:100%;-webkit-user-drag:none;pointer-events:none;will-change:transform}
.plates-item:not(.is-focus){cursor:pointer}
/* тень: мягкое пятно под ободом, уходит от источника — не свечение */
.plates-shadow{
  position:absolute;inset:7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.92) 70%,rgba(0,0,0,.55) 86%,transparent 100%);
  filter:blur(calc(var(--plates-p) * .022));
  will-change:transform,opacity;
}
.plates-dim{position:absolute;z-index:2;inset:0;background:#000;opacity:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:opacity,transform}

/* табло выдачи: вектор тарелки в фокусе */
.plates-board{
  position:absolute;left:50%;top:calc(var(--plates-cy) + var(--plates-p) * .5 + 32px);
  width:min(calc(100vw - 2 * var(--m)),560px);transform:translateX(-50%);
  z-index:30;cursor:default;
  opacity:0;transition:opacity var(--d-slow) var(--ease) 900ms;
}
.plates-board.in{opacity:1}
.plates-rows{
  display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:8px;align-items:baseline;
  margin:0;padding:20px 24px;background:var(--bg-2);border-radius:var(--r-card);
}
.plates-rows dt{font-size:var(--t-small);color:var(--ink-2)}
.plates-rows dd{margin:0;font-size:clamp(18px,1.6vw,24px);line-height:1.2;color:var(--gold);overflow-wrap:anywhere}
.plates-name{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;text-align:center}
.plates-cat{font-size:var(--t-small);color:var(--ink-2)}
.plates-dish{font-size:var(--t-lead);line-height:1.2;color:var(--ink)}
.plates-note{margin-top:12px;font-size:var(--t-small);line-height:1.4;color:var(--ink-2);text-align:center}

/* низ: подпись и управление */
.plates-foot{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:8px}
.plates-sign{font-size:var(--t-small);color:var(--ink-2);max-width:40ch}
.plates-ctrl{display:flex;align-items:center;gap:8px;flex:none}
.plates-hint{font-size:var(--t-small);color:var(--ink-2);margin-right:16px}
.plates-pips{display:flex;margin-right:16px}
.plates-pip{position:relative;width:20px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.plates-pip::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--bg-4);transition:transform var(--d-fast) var(--ease),background var(--d-fast)}
.plates-pip:hover::before{background:var(--ink-3);transform:scale(1.3)}
.plates-pip.is-on::before{background:var(--on);transform:scale(1.3)}
.plates-arrow{width:44px;min-height:44px;height:44px;padding:0;font-size:0;background:var(--bg-3);position:relative}
.plates-arrow span{display:none}
.plates-arrow::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.6px solid var(--ink);border-left:1.6px solid var(--ink);transform:translate(-30%,-50%) rotate(-45deg)}
.plates-arrow[data-dir="1"]::before{transform:translate(-70%,-50%) rotate(135deg)}

@media (max-width:719px){
  .plates-head{grid-template-columns:1fr;gap:20px}
  .plates-lead{font-size:var(--t-body)}
  .plates-stage{margin-top:32px;height:calc(var(--plates-cy) + var(--plates-p) * .5 + 330px)}
  .plates-board{width:calc(100% - 2 * var(--m));top:calc(var(--plates-cy) + var(--plates-p) * .5 + 24px)}
  .plates-rows{padding:16px;column-gap:16px}
  .plates-rows dd{font-size:16px}
  .plates-foot{flex-direction:column-reverse;align-items:stretch;gap:24px}
  .plates-hint{display:none}
  .plates-ctrl{justify-content:space-between}
  .plates-pips{margin-right:auto}
}
@media (hover:none){.plates-hint{display:none}}
@media (prefers-reduced-motion:reduce){
  .plates-board{transition:none}
  .plates-item{will-change:auto}
}