/* Category cards share one gesture; the drawing gives each gesture its meaning. */
.bento-tile {
  --lab-engaged: 0;
  --lab-movement: var(--lab-engaged);
  --lab-accent: #a6c4de;
  transform: translateY(calc(-4px * var(--lab-movement)));
  transition:
    transform 0.65s cubic-bezier(0.22, 0.8, 0.22, 1),
    border-color 0.4s,
    opacity 0.8s var(--ease),
    translate 0.8s var(--ease);
}
.bento-tile > * {
  pointer-events: none;
}
.bento-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--lab-accent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--lab-accent) 11%, transparent),
    transparent 60%
  );
  opacity: var(--lab-engaged);
  pointer-events: none;
  transition: opacity 0.55s;
}
.bento-tile:is(:focus-visible, [data-lab-engaged="true"]) {
  --lab-engaged: 1;
  border-color: var(--lab-accent);
}
@media (hover: hover) and (pointer: fine) {
  .bento-tile:hover {
    --lab-engaged: 1;
    border-color: var(--lab-accent);
  }
}
.tile-apps {
  --lab-accent: #a6c4de;
}
.tile-web {
  --lab-accent: #a6c4de;
}
.tile-automation {
  --lab-accent: #e5bc78;
}
.tile-games {
  --lab-accent: #bed280;
}
.tile-education {
  --lab-accent: #d2a382;
}
.tile-film {
  --lab-accent: #d4a0ac;
}
.bento-tile .tile-media {
  transform: none;
  transition: none;
}
.bento-tile .tile-number {
  color: var(--text);
  opacity: calc(0.65 + var(--lab-engaged) * 0.35);
  transform: translateX(calc(3px * var(--lab-movement)));
  transition:
    transform 0.55s var(--ease),
    opacity 0.4s;
}
.bento-tile .tile-number::after {
  content: " / KEŞFET";
  display: inline-block;
  color: var(--lab-accent);
  opacity: var(--lab-engaged);
  transform: translateX(calc(8px * (1 - var(--lab-movement))));
  transition:
    opacity 0.35s,
    transform 0.55s var(--ease);
}
.bento-tile .tile-copy {
  transform: translateY(calc(-4px * var(--lab-movement)));
  transition: transform 0.6s var(--ease);
}
.bento-tile .tile-copy > span {
  transform: translateX(calc(3px * var(--lab-movement)));
  transition: transform 0.7s var(--ease);
}
.bento-tile .tile-open {
  color: var(--lab-accent);
  border-color: var(--lab-accent);
  background: #202d3be0;
  border-radius: 10px;
  transform: translate(
    calc(-2px * var(--lab-movement)),
    calc(-2px * var(--lab-movement))
  );
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.6s var(--ease),
    color 0.4s;
}
.bento-tile .tile-open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--lab-accent);
  transform: scale(calc(1.5 * var(--lab-engaged)));
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.22, 1);
}
.bento-tile .tile-open .icon {
  transform: rotate(calc(45deg * var(--lab-movement)));
  transition: transform 0.65s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.bento-tile:is(:focus-visible, [data-lab-engaged="true"]) .tile-open {
  color: #1c222b;
}
@media (hover: hover) and (pointer: fine) {
  .bento-tile:hover .tile-open {
    color: #1c222b;
  }
}
.bento-tile:active {
  transform: scale(0.99);
}
html[data-motion="off"] .bento-tile {
  --lab-movement: 0;
}
html[data-page-hidden="true"] .bento-tile,
html[data-page-hidden="true"] .bento-tile *,
html[data-page-hidden="true"] .bento-tile::before {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .bento-tile {
    --lab-movement: 0;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 220px) 190px;
  }
  .tile-apps {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .tile-web {
    grid-column: 2;
    grid-row: 1;
  }
  .tile-automation {
    grid-column: 2;
    grid-row: 2;
  }
  .tile-games {
    grid-column: 1;
    grid-row: 3;
  }
  .tile-education {
    grid-column: 2;
    grid-row: 3;
  }
  .tile-film {
    grid-column: 1 / 3;
    grid-row: 4;
  }
}
@media (max-width: 767px) {
  .bento-tile .tile-number::after {
    display: none;
  }
  .bento-tile .tile-copy {
    right: 13px;
  }
}
@media (max-width: 360px) {
  .bento-tile .tile-copy strong {
    font-size: 16px;
  }
}