/* Lesson tiles (see tiles.js). Hover only with a mouse: on touch nothing moves. */
.ek-tile { position: relative; }

.ek-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--accent-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease-out-quick, cubic-bezier(0.2, 0, 0, 1));
  z-index: 2;
  pointer-events: none;
}

/* The tint and the key wave share one layer, drawn from the top down like the strip */
.ek-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s var(--ease-out-quick, cubic-bezier(0.2, 0, 0, 1));
}

.ek-tile-in { transition: transform 0.3s var(--ease-out-quick, cubic-bezier(0.2, 0, 0, 1)); }

@media (hover: hover) and (pointer: fine) {
  /* Arriving keeps the bounce (settle); leaving is the rest state above and has none */
  .ek-tile:hover::before { transform: scaleY(1); transition: transform 0.45s var(--ease-settle, cubic-bezier(0.34, 1.56, 0.64, 1)); }
  .ek-tile:hover::after {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    clip-path: inset(0);
    transition: clip-path 0.4s var(--ease-settle, cubic-bezier(0.34, 1.56, 0.64, 1));
  }
  .ek-tile:hover .ek-tile-in { transform: translateX(7px); transition: transform 0.5s var(--ease-settle, cubic-bezier(0.34, 1.56, 0.64, 1)); }

  /* Shares a key (teacher or group) with the hovered lesson */
  .ek-tile.ek-mate::after {
    clip-path: inset(0);
    transition: clip-path 0.4s var(--ease-settle, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--ek-wave, 0ms);
    box-shadow: inset 0 0 0 3px var(--accent-color);
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 22%, transparent) 0 6px, transparent 6px 14px);
  }
  .ek-tile.ek-mate .ek-tile-key { font-weight: 800 !important; }
  /* In the light theme the name often sits on an accent-filled chip: accent on accent would vanish, so there it is only bold */
  [data-theme="dark"] .ek-tile.ek-mate .ek-tile-key { color: var(--accent-color) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ek-tile::before, .ek-tile::after, .ek-tile-in { transition: none; }
}
body.reduced-motion .ek-tile::before, body.reduced-motion .ek-tile::after, body.reduced-motion .ek-tile-in { transition: none; }