/* Takaramono — TK Boxes (clip-path library) */
/* Vendored verbatim from tk-brand: https://codeberg.org/takaramono-nl/tk-brand/raw/branch/main/tokens/boxes.css */
/* Originates from tk-ghost: https://codeberg.org/takaramono-nl/tk-ghost/raw/branch/main/assets/css/tk-boxes.css */
/*---------------------------------------------------------*/
/* TAKARAMONO THEME — TK BOX LIBRARY                       */
/* Clip-path polygon shapes for image/content boxes         */
/*                                                          */
/* Naming convention:                                       */
/*   Organic: box-{depth}-{direction}-{feature}             */
/*     depth = deep / shallow                               */
/*     direction = top / right / bottom / left              */
/*     feature = lean / narrow / shift / skew / slope /     */
/*               swoop / taper / tilt / twist               */
/*                                                          */
/*   Straight: box-straight-{edge}-{feature}                */
/*     edge = top / right / bottom / left                   */
/*     feature = taper (1-3%) / angle (4-6%) / steep (7%+)  */
/*---------------------------------------------------------*/

:root {
  /* TK Box Library — clip-path polygons — organic */
  --clip-deep-bottom-tilt: polygon(7% 2%, 96% 4%, 99% 92%, 3% 96%);
  --clip-deep-left-skew: polygon(1% 7%, 99% 4%, 96% 91%, 3% 92%);
  --clip-deep-right-lean: polygon(3% 2%, 100% 6%, 97% 93%, 2% 97%);
  --clip-deep-right-narrow: polygon(2% 6%, 97% 3%, 95% 96%, 4% 94%);
  --clip-deep-right-shift: polygon(5% 1%, 100% 7%, 93% 95%, 1% 98%);
  --clip-deep-right-slope: polygon(2% 8%, 98% 1%, 92% 93%, 5% 99%);
  --clip-deep-right-swoop: polygon(1% 7%, 99% 2%, 95% 98%, 6% 93%);
  --clip-deep-right-tilt: polygon(2% 5%, 98% 0, 100% 95%, 0 100%);
  --clip-deep-right-twist: polygon(4% 3%, 95% 5%, 98% 95%, 2% 92%);
  --clip-deep-top-taper: polygon(6% 6%, 94% 4%, 96% 94%, 4% 96%);
  --clip-shallow-bottom-tilt: polygon(4% 2%, 97% 3%, 99% 94%, 3% 92%);
  --clip-shallow-left-skew: polygon(1% 5%, 99% 3%, 97% 93%, 3% 92%);
  --clip-shallow-right-lean: polygon(2% 1%, 100% 4%, 98% 95%, 3% 92%);
  --clip-shallow-right-narrow: polygon(1% 4%, 98% 2%, 97% 96%, 3% 92%);
  --clip-shallow-right-shift: polygon(3% 1%, 100% 4%, 97% 96%, 3% 92%);
  --clip-shallow-right-slope: polygon(2% 5%, 99% 1%, 96% 95%, 3% 92%);
  --clip-shallow-right-swoop: polygon(1% 4%, 99% 2%, 97% 96%, 3% 92%);
  --clip-shallow-right-tilt: polygon(1% 3%, 99% 0, 100% 97%, 3% 92%);
  --clip-shallow-right-twist: polygon(2% 2%, 97% 3%, 99% 95%, 3% 92%);
  --clip-shallow-top-taper: polygon(3% 3%, 97% 2%, 98% 96%, 3% 92%);

  /* TK Box Library — clip-path polygons — straight-side */
  --clip-straight-bottom-angle: polygon(2% 4%, 96% 2%, 100% 100%, 0% 100%);
  --clip-straight-bottom-steep: polygon(5% 8%, 93% 3%, 100% 100%, 0% 100%);
  --clip-straight-bottom-taper: polygon(2% 3%, 98% 2%, 97% 100%, 3% 100%);
  --clip-straight-left-angle: polygon(0% 0%, 94% 6%, 97% 95%, 0% 100%);
  --clip-straight-left-steep: polygon(0% 0%, 92% 2%, 94% 91%, 0% 100%);
  --clip-straight-left-taper: polygon(0% 0%, 96% 3%, 98% 96%, 0% 100%);
  --clip-straight-right-angle: polygon(6% 4%, 100% 0%, 100% 100%, 4% 94%);
  --clip-straight-right-steep: polygon(7% 3%, 100% 0%, 100% 100%, 2% 92%);
  --clip-straight-right-taper: polygon(3% 2%, 100% 0%, 100% 100%, 2% 97%);
  --clip-straight-top-angle: polygon(0% 0%, 100% 0%, 96% 92%, 4% 88%);
  --clip-straight-top-steep: polygon(0% 0%, 100% 0%, 91% 90%, 3% 93%);
  --clip-straight-top-taper: polygon(0% 0%, 100% 0%, 97% 92%, 3% 94%);
}

/* TK Box utility classes — organic — deep */
.box-deep-bottom-tilt {
  clip-path: var(--clip-deep-bottom-tilt);
}
.box-deep-left-skew {
  clip-path: var(--clip-deep-left-skew);
}
.box-deep-right-lean {
  clip-path: var(--clip-deep-right-lean);
}
.box-deep-right-narrow {
  clip-path: var(--clip-deep-right-narrow);
}
.box-deep-right-shift {
  clip-path: var(--clip-deep-right-shift);
}
.box-deep-right-slope {
  clip-path: var(--clip-deep-right-slope);
}
.box-deep-right-swoop {
  clip-path: var(--clip-deep-right-swoop);
}
.box-deep-right-tilt {
  clip-path: var(--clip-deep-right-tilt);
}
.box-deep-right-twist {
  clip-path: var(--clip-deep-right-twist);
}
.box-deep-top-taper {
  clip-path: var(--clip-deep-top-taper);
}

/* TK Box utility classes — organic — shallow */
.box-shallow-bottom-tilt {
  clip-path: var(--clip-shallow-bottom-tilt);
}
.box-shallow-left-skew {
  clip-path: var(--clip-shallow-left-skew);
}
.box-shallow-right-lean {
  clip-path: var(--clip-shallow-right-lean);
}
.box-shallow-right-narrow {
  clip-path: var(--clip-shallow-right-narrow);
}
.box-shallow-right-shift {
  clip-path: var(--clip-shallow-right-shift);
}
.box-shallow-right-slope {
  clip-path: var(--clip-shallow-right-slope);
}
.box-shallow-right-swoop {
  clip-path: var(--clip-shallow-right-swoop);
}
.box-shallow-right-tilt {
  clip-path: var(--clip-shallow-right-tilt);
}
.box-shallow-right-twist {
  clip-path: var(--clip-shallow-right-twist);
}
.box-shallow-top-taper {
  clip-path: var(--clip-shallow-top-taper);
}

/* TK Box utility classes — straight-side */
.box-straight-bottom-angle {
  clip-path: var(--clip-straight-bottom-angle);
}
.box-straight-bottom-steep {
  clip-path: var(--clip-straight-bottom-steep);
}
.box-straight-bottom-taper {
  clip-path: var(--clip-straight-bottom-taper);
}
.box-straight-left-angle {
  clip-path: var(--clip-straight-left-angle);
}
.box-straight-left-steep {
  clip-path: var(--clip-straight-left-steep);
}
.box-straight-left-taper {
  clip-path: var(--clip-straight-left-taper);
}
.box-straight-right-angle {
  clip-path: var(--clip-straight-right-angle);
}
.box-straight-right-steep {
  clip-path: var(--clip-straight-right-steep);
}
.box-straight-right-taper {
  clip-path: var(--clip-straight-right-taper);
}
.box-straight-top-angle {
  clip-path: var(--clip-straight-top-angle);
}
.box-straight-top-steep {
  clip-path: var(--clip-straight-top-steep);
}
.box-straight-top-taper {
  clip-path: var(--clip-straight-top-taper);
}

/* TK Box — randomized thumbnail clipping */
.js .js-tk-box {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.js .js-tk-box.tk-boxed {
  opacity: 1;
}

/* Preserve existing hover interactions on card images */
.js .collection-card:hover img.js-tk-box.tk-boxed,
.js .highlights-slide-link:hover img.js-tk-box.tk-boxed {
  opacity: 0.85;
}