/* The masks follow the supplied card silhouettes. The photography stays intact. */
[data-card-cutout] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: size;
  --card-width: min(131%, 190cqh);
  --card-center-y: 47%;
  --card-shadow: rgb(14 16 24 / .23);
}
[data-card-cutout="angle"] { --card-mask: url('/assets/knockout-card/angle-mask.svg'); }
[data-card-cutout="front"] { --card-mask: url('/assets/knockout-card/front-mask.svg'); }
[data-card-cutout="detail"] { --card-mask: url('/assets/knockout-card/detail-mask.svg'); }

[data-card-cutout] > .kc-cutout {
  position: absolute;
  display: block;
  inset: var(--card-center-y) auto auto 50%;
  width: var(--card-width);
  max-width: none;
  height: auto;
  border-radius: 0;
  translate: -50% -50%;
  -webkit-mask: var(--card-mask) center / 100% 100% no-repeat;
  mask: var(--card-mask) center / 100% 100% no-repeat;
}
[data-card-cutout]:not([data-card-cutout="detail"])::before {
  content: "";
  position: absolute;
  inset: auto 17% 10%;
  height: 5%;
  border-radius: 50%;
  background: var(--card-shadow);
  filter: blur(clamp(2px, 1.4cqw, 12px));
}
[data-card-cutout="angle"]::before { rotate: -5deg; }

.kc-card-art--hero[data-card-cutout] {
  background: transparent;
  --card-width: min(149%, 201cqh);
  --card-center-y: 46%;
}
.kc-card-art--hero[data-card-cutout]::before {
  inset: auto 13% 13%;
  --card-shadow: rgb(14 16 24 / .26);
}
.approved-hero-visual .kc-cutout { animation: kc-card-hover 8s ease-in-out infinite; }
@keyframes kc-card-hover {
  50% { translate: -50% calc(-50% - 7px); }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .approved-hero-visual .kc-cutout { animation: none; }
}

[data-card-cutout="detail"] > .kc-cutout {
  inset: 50% 0 auto auto;
  width: max(110%, 144cqh);
  translate: 0 -49%;
}
.approved-how-photo [data-card-cutout="detail"] > .kc-cutout {
  width: max(122%, 148cqh);
  translate: 0 -49%;
}
.kc-cart-art[data-card-cutout] {
  --card-width: min(132%, 179cqh);
}
.ob-product[data-card-cutout] {
  aspect-ratio: 1.8;
  --card-width: min(129%, 189cqh);
}
.ob-card-thumb[data-card-cutout] {
  flex: 0 0 78px;
  aspect-ratio: 1.6;
  --card-width: min(144%, 201cqh);
}

/* Apply the silhouette at the intrinsic aspect ratio of each approved crop. */
[data-launch-mask="angle"] { --launch-mask: url('/assets/knockout-card/launch-angle-mask.svg'); }
[data-launch-mask="front"] { --launch-mask: url('/assets/knockout-card/launch-front-mask.svg'); }
[data-launch-mask="reveal"] { --launch-mask: url('/assets/knockout-card/launch-reveal-mask.svg'); }
.kc-launch-mask {
  -webkit-mask: var(--launch-mask, none) center / 100% 100% no-repeat;
  mask: var(--launch-mask, none) center / 100% 100% no-repeat;
}
.kc-card-art.kc-launch-hero,.kc-card-art.kc-launch-tile {
  display:grid;place-items:center;position:relative;isolation:isolate;
}
.kc-launch-hero img,.kc-launch-tile img {
  display:block;width:94%;height:auto;z-index:1;
}
.kc-launch-hero::before,.kc-launch-tile::before {
  content:"";position:absolute;inset:auto 14% 19%;height:7%;
  border-radius:50%;background:#171b2633;filter:blur(clamp(5px,1.1vw,16px));
  transform:rotate(-4deg);
}
.kc-launch-tile img { width:auto;max-width:88%;max-height:80%;object-fit:contain }
.kc-launch-tile::before { bottom:12%; }
.approved-hero-visual .kc-launch-hero img { animation:kc-launch-enter .75s ease-out both; }
@keyframes kc-launch-enter { from { opacity:.2;transform:translateY(8px) } }
@media (max-width:760px) {
  .approved-hero-visual .kc-launch-hero img { width:100%; }
  .kc-launch-hero::before { bottom:14%; }
}
@media (prefers-reduced-motion:reduce) {
  .approved-hero-visual .kc-launch-hero img { animation:none; }
}
.kc-card-art.kc-launch-hero { background:transparent; }
[data-launch-mask="back"] { --launch-mask: url('/assets/knockout-card/launch-back-mask.svg'); }
[data-launch-mask="side"] { --launch-mask: url('/assets/knockout-card/launch-side-mask.svg'); }

/* Artwork follows the surrounding surface and leaves interaction to its controls. */
.kc-cutout,.kc-launch-mask {
  pointer-events:none;
  user-select:none;
  -webkit-touch-callout:none;
}