/* Бенто Kaymak: сетка плиток с эффектами наведения в духе кнопок.
   <div class="k-bento"> <article class="k-tile" data-tone="red" data-k-hover="drip" style="--span:6;--rows:2"> … </article> </div>
   data-tone: cream | red | wine | blueberry | strawberry | pistachio | peach
   data-k-hover: drip («стекает», как D) | stretch («тянется», как C) | pour («наливается»)
   Плитка рисуется без фильтров — углы всегда ровные. Капли «стекает» живут в слое .k-tile__goo ПОД плиткой:
   полоса за нижним краем + «шейки» и тяжёлые «капли», склеенные goo-фильтром (components/bento.js → init()). */

.k-bento { isolation: isolate; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(170px, auto); gap: 18px; }
.k-tile { --span: 4; --rows: 1; grid-column: span var(--span); grid-row: span var(--rows);
  position: relative; border-radius: 28px; padding: 26px; min-height: 170px; display: flex; flex-direction: column;
  font-family: var(--k-font-text); background: var(--fill); color: var(--ink); box-shadow: var(--k-shadow-card);
  --fill: var(--k-mat-cream); --edge: rgb(247 230 204); --ink: var(--k-ink); --pour: var(--k-red); --pour-ink: var(--k-cream); --glow: rgb(122 10 18 / .22);
  transition: color .35s ease .1s, transform .6s var(--k-ease-spring); }
.k-tile[data-tone="red"]        { --fill: var(--k-mat-red); --edge: rgb(201 16 26); --ink: var(--k-cream); --pour: var(--k-cream); --pour-ink: var(--k-wine); --glow: rgb(178 13 20 / .38); }
.k-tile[data-tone="wine"]       { --fill: var(--k-mat-wine); --edge: rgb(94 7 14); --ink: var(--k-cream); --pour: var(--k-cream); --pour-ink: var(--k-wine); }
.k-tile[data-tone="blueberry"]  { --fill: var(--k-mat-blueberry); --edge: rgb(58 33 86); --ink: var(--k-cream); --pour: var(--k-peach); --pour-ink: var(--k-blueberry); }
.k-tile[data-tone="strawberry"] { --fill: var(--k-strawberry); --edge: var(--k-strawberry); --ink: var(--k-wine); --pour: var(--k-wine); --pour-ink: var(--k-cream); }
.k-tile[data-tone="pistachio"]  { --fill: var(--k-pistachio); --edge: var(--k-pistachio); --ink: var(--k-ink); --pour: var(--k-ink); --pour-ink: var(--k-cream); }
.k-tile[data-tone="peach"]      { --fill: var(--k-peach); --edge: var(--k-peach); --ink: var(--k-ink); --pour: var(--k-red); --pour-ink: var(--k-cream); }
.k-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--k-grain); opacity: .08; pointer-events: none; }
.k-tile > * { position: relative; z-index: 2; }

/* «Стекает»: жирные тягучие капли (как кнопка D). Слой под плиткой, поэтому углы и текст не искажаются. */
/* Плитка — свой слой: заливка в ::before (z −1) поверх капель (z −2); при наведении плитка поднимается над соседями. */
.k-tile[data-k-hover="drip"] { isolation: isolate; background: none; transition: color .35s ease .1s, z-index 0s linear .5s; }
.k-tile[data-k-hover="drip"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fill); }
.k-tile > .k-tile__goo { position: absolute; z-index: -2; left: 0; right: 0; top: calc(100% - 70px); height: 230px; pointer-events: none;
  filter: url(#k-goo-tile) drop-shadow(0 12px 14px var(--glow, rgb(122 10 18 / .25))); }
.k-tile__bar { position: absolute; left: 30px; right: 30px; top: 0; height: 70px; background: var(--edge); }
.k-tile__drop { position: absolute; top: 0; left: var(--x); width: var(--w); margin-left: calc(var(--w) / -2); height: 100%; }
.k-tile__neck, .k-tile__bulb { position: absolute; left: 50%; background: var(--edge); }
.k-tile__neck { top: 40px; width: 52%; height: var(--d); margin-left: -26%; border-radius: 0 0 50% 50%; transform-origin: 50% 0; transform: scaleY(0);
  transition: transform .45s cubic-bezier(.5, 0, .75, .35); }
.k-tile__bulb { bottom: calc(100% - 64px); width: 100%; aspect-ratio: .86; margin-left: -50%; border-radius: 50% 50% 48% 48% / 42% 42% 58% 58%;
  transition: transform .45s cubic-bezier(.5, 0, .75, .35); }

/* «Наливается»: каймак поднимается снизу с волной */
.k-tile > .k-tile__clip { position: absolute; z-index: 1; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.k-tile__pour { position: absolute; left: 50%; width: 260%; aspect-ratio: 1; margin-left: -130%; top: calc(100% + 40px);
  border-radius: 43%; background: var(--pour); transition: top 1.1s var(--k-ease-viscous); animation: k-tile-spin 7s linear infinite; }
@keyframes k-tile-spin { to { transform: rotate(360deg); } }

/* «Тянется»: плитка тянется к курсору (JS), внутри — сливочная сфера-ведущий */
.k-tile > .k-tile__lead { position: absolute; z-index: 1; width: 120px; height: 120px; left: calc(50% - 60px); top: calc(50% - 60px); font-size: 120px;
  opacity: 0; transition: opacity .3s, transform .5s var(--k-ease-spring); pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .k-tile[data-k-hover="drip"]:hover { z-index: 3; transition-delay: .1s, 0s; }
  .k-tile[data-k-hover="drip"]:hover .k-tile__neck { transform: scaleY(1); transition: transform 1.25s cubic-bezier(.3, 1.35, .4, 1) var(--delay); }
  .k-tile[data-k-hover="drip"]:hover .k-tile__bulb { transform: translateY(var(--d)) scale(1.04, 1.12);
    transition: transform 1.25s cubic-bezier(.3, 1.35, .4, 1) var(--delay); }
  .k-tile[data-k-hover="pour"]:hover { color: var(--pour-ink); }
  .k-tile[data-k-hover="pour"]:hover .k-tile__pour { top: -40%; }
  .k-tile[data-k-hover="stretch"]:hover .k-tile__lead { opacity: 1; }
}
.k-tile[data-k-hover="stretch"] { cursor: pointer; overflow: hidden; } /* сама «тяга» — в bento.js (только мышь) */
.k-tile[data-k-hover="stretch"]:active, .k-tile[data-k-hover="pour"]:active { transform: scale(.985); } /* у «стекает» без transform: иначе слой капель всплывёт над плиткой */

@media (max-width: 860px) {
  .k-bento { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .k-tile { grid-column: span 6; grid-row: span 1; padding: 22px; min-height: 140px; }
  .k-tile.k-half { grid-column: span 3; }
}
@media (prefers-reduced-motion: reduce) {
  .k-tile > .k-tile__goo, .k-tile > .k-tile__lead { display: none; }
  .k-tile, .k-tile__pour { transition: none; animation: none; }
}