/* Riddlewerk: SCHATTEN's flair, a row of cubes and a lamp that sweeps past them (flair-schatten.js).
   Wide screens only, nothing with reduced motion; never in the way of reading or clicking. */

.flair-schatten {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  /* The floor fades out at both ends instead of stopping at an edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  transition: opacity 1.1s var(--ease, ease);
}

/* Along the bottom of the SCHATTEN page's hero, in its bottom padding. */
.flair-schatten--hero {
  bottom: 4px;
  height: clamp(56px, 6.2vw, 88px);
}

/* Along the top of the SCHATTEN card on the home page, above its content. */
.flair-schatten--card {
  top: 2px;
  height: clamp(44px, 4vw, 58px);
  opacity: 0.92;
}

.flair-schatten.is-gone {
  opacity: 0;
}

.flair-schatten svg {
  display: block;
  overflow: visible;
}

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .flair-schatten {
    display: none;
  }
}