/* Michal Kašpar — Cursor card on the homepage (cursor-card.js).
   The same card as on the case pages (blocks.css): a square trailing the
   cursor, growing out of nothing as its picture zooms out. Mouse only. */
.cursor-card {
  --card-size: clamp(220px, 23.2vw, 600px);   /* 330 / 445 / 599 at 1440 / 1920 / 2580 */
  --card-in: 760ms;
  --card-out: 420ms;
  --card-fade: 160ms;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: var(--card-size);
  aspect-ratio: 1;
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: 0;
  transition: scale var(--card-out) var(--ease-in-out), opacity var(--card-fade) ease var(--dur-1);
  will-change: transform;
}
.cursor-card.is-on {
  opacity: 1;
  scale: 1;
  transition: scale var(--card-in) var(--ease-out-expo), opacity var(--card-fade) ease;
}
.cursor-card-layer { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.cursor-card-layer > * { scale: 1.6; transition: scale var(--card-out) var(--ease-in-out); }
.cursor-card.is-on .cursor-card-layer > * { scale: 1; transition: scale var(--dur-5) var(--ease-out-expo); }
.cursor-card-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cursor-card-layer img:not([src]) { visibility: hidden; }
.cursor-card-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cursor-card-layer.has-wave > img { visibility: hidden; }
/* The Vision claim through the card (cursor-card.js): white in `difference`
   inverts the picture under it. The type itself comes from services.css. */
.cursor-card-claim {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 100% 0);
  mix-blend-mode: difference;
}
.cursor-card-claim .closer-claim {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  color: var(--color-pure-white);
}
.cursor-card-claim .closer-claim .em { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .cursor-card, .cursor-card.is-on,
  .cursor-card-layer > *, .cursor-card.is-on .cursor-card-layer > * {
    transition: opacity var(--card-fade) ease;
    scale: 1;
  }
}
@media (hover: none), (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .cursor-card { display: none; }
}