/**
 * Collection Tracker -- foil / holographic finish.
 *
 * Loaded alongside ui/styles.css. Markup comes from core/foil.js; pointer
 * tracking comes from core/foilInteract.js, which writes the variables below.
 *
 * Compositing follows pokemon-cards-css (MIT, github.com/simeydotme/pokemon-cards-css):
 * the pointer changes the *viewing angle*, never the position of the print. The
 * pattern tile is pinned at 50% 50% and stays there; what moves is the reveal
 * mask, the holo offset and the specular glare.
 *
 * Interaction variables (set on the card surface by core/foilInteract.js):
 *   --ct-rotate-x / --ct-rotate-y          card tilt, applied in tilt contexts only
 *   --ct-pointer-x / --ct-pointer-y        glare + reveal origin
 *   --ct-pointer-from-center               0 at rest, 1 at the card corners
 *   --ct-background-x / --ct-background-y  holo shine offset (37-63% / 33-67%)
 *   --ct-card-opacity                      interaction strength, 0 when idle
 *
 * Layer order, painted bottom to top:
 *   texture zone -> sheen zone (shine, sweep, glare) -> sparkles
 */

/* ------------------------------------------------- surfaces + defaults ---- */

/*
 * Resting values live at the document root, never on the surfaces themselves:
 * core/foilInteract.js writes to whichever element it is tracking, and a
 * default redeclared further down the tree would shadow what it writes.
 */
:root {
  --ct-rotate-x: 0deg;
  --ct-rotate-y: 0deg;
  --ct-pointer-x: 50%;
  --ct-pointer-y: 50%;
  --ct-pointer-from-center: 0;
  --ct-card-opacity: 0;
  --ct-background-x: 50%;
  --ct-background-y: 50%;
  --ct-subject-translate-x: 0;
  --ct-subject-translate-y: 0;
}

.ct-tile--foil .ct-tile__art,
.ct-thumb--foil,
.ct-drawer__art-frame--foil,
.ct-foil-preview__frame[data-ct-foil] {
  --ct-foil-intensity: 0.6;
  --ct-foil-speed: 4.5s;
  isolation: isolate;
  overflow: visible;
}

.ct-tile.ct-tile--foil {
  overflow: visible;
}

.ct-tile--battlefield.ct-tile--foil .ct-tile__art {
  overflow: hidden;
}

.ct-thumb--foil {
  --ct-foil-intensity: 0.55;
}

.ct-drawer__art-frame--foil {
  --ct-foil-intensity: 0.78;
}

/* Tilt contexts: the enlarged lightbox card and the drawer art button. */
.ct-foil-preview--tilt .ct-foil-preview__frame,
.ct-drawer__art-expand .ct-drawer__art-frame {
  transform: perspective(900px) rotateX(var(--ct-rotate-x, 0deg)) rotateY(var(--ct-rotate-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.ct-foil-preview--tilt .ct-foil-preview__art,
.ct-foil-preview--tilt .ct-foil,
.ct-drawer__art-expand .ct-foil {
  transform-style: preserve-3d;
}

/* ------------------------------------------------------- edge border ----- */

.ct-tile__art-frame.ct-tile__art-frame--foil-border,
.ct-drawer__art-frame.ct-tile__art-frame--foil-border,
.ct-foil-preview__art.ct-tile__art-frame--foil-border {
  border-radius: var(--ct-card-art-radius);
  overflow: visible;
}

.ct-drawer__art-frame.ct-tile__art-frame--foil-border {
  box-shadow: none;
}

.ct-tile__art-frame--foil-border::before,
.ct-drawer__art-frame.ct-tile__art-frame--foil-border::before,
.ct-foil-preview__art.ct-tile__art-frame--foil-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--ct-card-art-radius) + 3px);
  padding: 2.5px;
  background: conic-gradient(from 35deg, #86e7ff, #d89aff, #ffe59c, #94ffcf, #86e7ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  filter: saturate(1.2);
  box-shadow:
    0 0 8px rgb(134 231 255 / 0.24),
    0 0 14px rgb(212 136 255 / 0.12);
  animation: ct-foil-border-spin 4s linear infinite;
  transition: opacity 0.25s ease;
}

@keyframes ct-foil-border-spin {
  to {
    filter: saturate(1.2) hue-rotate(360deg);
  }
}

/*
 * Gallery / compact contexts: hide the rim at rest so dense grids stay calm.
 * Showcase previews (large frame + lightbox) keep the rim visible -- see below.
 */
.ct-tile.ct-tile--foil .ct-tile__art-frame--foil-border::before,
.ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-drawer__art-frame.ct-tile__art-frame--foil-border::before,
.ct-foil-preview-panel__tile .ct-foil-preview__art.ct-tile__art-frame--foil-border::before {
  opacity: 0;
}

.ct-tile.ct-tile--foil:hover .ct-tile__art-frame--foil-border::before,
.ct-tile.ct-tile--foil:focus-within .ct-tile__art-frame--foil-border::before,
.ct-thumb--foil.ct-tile__art-frame--foil-border:hover::before,
.ct-thumb--foil.ct-tile__art-frame--foil-border:focus-within::before,
.ct-dboard-slot:hover .ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-dboard-slot:focus-within .ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-picker__card:hover .ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-picker__card:focus-within .ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-binder-cover__card:hover .ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-binder-cover__card:focus-within .ct-thumb--foil.ct-tile__art-frame--foil-border::before,
.ct-drawer__art-expand:hover .ct-drawer__art-frame.ct-tile__art-frame--foil-border::before,
.ct-drawer__art-expand:focus-within .ct-drawer__art-frame.ct-tile__art-frame--foil-border::before,
.ct-foil-preview-panel__tile:hover .ct-foil-preview__art.ct-tile__art-frame--foil-border::before,
.ct-foil-preview-panel__tile:focus-within .ct-foil-preview__art.ct-tile__art-frame--foil-border::before {
  opacity: 1;
}

/* Enlarged preview + lightbox: intentional showcase -- rim stays on at rest. */
.ct-foil-preview__frame--large .ct-foil-preview__art.ct-tile__art-frame--foil-border::before,
.ct-foil-preview-lightbox__card .ct-foil-preview__art.ct-tile__art-frame--foil-border::before {
  opacity: 1;
}

/* Missing / unowned: same hover reveal, softer rim when visible. */
.ct-tile--missing.ct-tile--foil:hover .ct-tile__art-frame--foil-border::before,
.ct-tile--missing.ct-tile--foil:focus-within .ct-tile__art-frame--foil-border::before,
.ct-foil-preview-panel__tile--missing:hover .ct-foil-preview__art.ct-tile__art-frame--foil-border::before,
.ct-foil-preview-panel__tile--missing:focus-within .ct-foil-preview__art.ct-tile__art-frame--foil-border::before {
  opacity: 0.55;
}

.ct-thumb.ct-tile__art-frame--foil-border::before {
  inset: -2px;
  padding: 1.5px;
}

.ct-tile--foil .ct-tile__art img:not([style*='position: absolute']):not(.ct-bf-oriented),
.ct-drawer__art-frame--foil img,
.ct-drawer__art-frame--foil .ct-tile__placeholder,
.ct-foil-preview__art img {
  position: relative;
  z-index: 1;
  border-radius: var(--ct-card-art-radius);
}

/* --------------------------------------------------------- the stack ----- */

.ct-foil {
  --ct-foil-pattern: none;
  --ct-foil-pattern-size: calc(12px * var(--ct-foil-pattern-scale, 1)) calc(12px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1;
  --ct-foil-texture-color-intensity: 1;
  /* Opacity scales down below 1x; above 1x boosts saturation instead of blowing out to white. */
  --ct-foil-texture-tint-opacity-mul: min(var(--ct-foil-texture-color-intensity, 1), 1);
  --ct-foil-texture-tint-saturate: var(--ct-foil-texture-color-intensity, 1);
  --ct-sparkle-user-scale: 1;
  --ct-sparkle-size: calc(1 * var(--ct-sparkle-user-scale, 1));
  --ct-sparkle-core: 255 255 255;
  --ct-sparkle-glow: 190 245 255;
  --ct-sparkle-halo: 255 255 255;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--ct-card-art-radius);
  pointer-events: none;
}

/* Bleed past rounded corners so holo does not vanish at the card rim when tilted. */
.ct-foil-preview__frame--large .ct-foil,
.ct-foil-preview-lightbox__card .ct-foil,
.ct-drawer__art-frame--foil .ct-foil {
  inset: -2px;
  border-radius: calc(var(--ct-card-art-radius) + 2px);
}

.ct-foil--masked,
.ct-foil--title-strip {
  clip-path: var(--ct-foil-mask-clip, var(--ct-title-strip-clip, inset(56% 3% 36% 3%)));
}

/* v2 masked stack -- parallax layers: base -> bg-finish -> subject -> ui-text -> holo-text. */
.ct-foil--masked-stack {
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
  transform-style: preserve-3d;
}

.ct-foil__base,
.ct-foil__bg-finish,
.ct-foil__masked-finish,
.ct-foil__subject,
.ct-foil__ui-text,
.ct-foil__preserve,
.ct-foil__holo-text {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.ct-foil__base {
  z-index: 0;
}

.ct-foil__base img,
.ct-foil__subject img,
.ct-foil__ui-text img,
.ct-foil__preserve img,
.ct-foil__holo-text img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Optional dim underlay in background foil zones (mask applied at runtime). */
.ct-foil__base--dim:not(.ct-foil--luma-fallback) {
  opacity: 0.42;
  filter: saturate(0.35) brightness(0.82);
  -webkit-mask-image: var(--ct-foil-background-mask, var(--ct-foil-luma-mask));
  mask-image: var(--ct-foil-background-mask, var(--ct-foil-luma-mask));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.ct-foil__bg-finish,
.ct-foil__masked-finish {
  z-index: 1;
  transform: translateZ(0);
}

.ct-foil__subject {
  z-index: 2;
  transform: translate3d(var(--ct-subject-translate-x, 0), var(--ct-subject-translate-y, 0), 2px)
    scale(calc(1 + var(--ct-card-opacity, 0) * 0.008));
  transform-style: preserve-3d;
  will-change: transform;
}

.ct-foil__ui-text,
.ct-foil__preserve {
  z-index: 3;
}

.ct-foil__holo-text {
  z-index: 4;
}

/* Art-derived luma mask -- clip-path replaced at runtime by baked mask-image. */
.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  clip-path: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.ct-foil__bg-finish.ct-foil--luma-mask:not(.ct-foil--luma-fallback),
.ct-foil__masked-finish.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: var(--ct-foil-luma-mask);
  mask-image: var(--ct-foil-luma-mask);
}

/* Safe-area exclusion: foil applies only outside subject / ui-text (no duplicate art layers). */
.ct-foil--safe-exclusion .ct-foil__bg-finish.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: var(--ct-foil-apply-mask, var(--ct-foil-luma-mask));
  mask-image: var(--ct-foil-apply-mask, var(--ct-foil-luma-mask));
}

.ct-foil--safe-exclusion .ct-foil__texture-zone,
.ct-foil--safe-exclusion .ct-foil__sheen-zone {
  -webkit-mask-image: inherit;
  mask-image: inherit;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Safe-exclusion apply mask wins over textured sheen inverse-pattern mask. */
.ct-foil--safe-exclusion .ct-foil__sheen-zone--textured {
  -webkit-mask-image: inherit;
  mask-image: inherit;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Split safe exclusion -- each zone owns apply mask when only one skips safe area. */
.ct-foil--split-safe-exclude .ct-foil__bg-finish.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: none;
  mask-image: none;
}

.ct-foil--split-safe-exclude .ct-foil__texture-zone--safe-exclude,
.ct-foil--split-safe-exclude .ct-foil__sheen-zone--safe-exclude {
  -webkit-mask-image: var(--ct-foil-apply-mask);
  mask-image: var(--ct-foil-apply-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

/* Safe-exclusion -- restore protected UI (cost, nameplate, rules) above clipped foil. */
.ct-foil--safe-exclusion .ct-foil__ui-text {
  z-index: 3;
}

.ct-foil--safe-exclusion .ct-foil__ui-text:not([data-foil-mask-ready]) {
  opacity: 0;
  visibility: hidden;
}

.ct-foil--safe-exclusion .ct-foil__ui-text[data-foil-mask-ready] {
  opacity: 1;
  visibility: visible;
}

/* Live foil stacks must never show tuning/debug mask overlays (settings map-only). */
.ct-foil:not(.ct-foil--mask-debug-only) .ct-foil__mask-debug {
  display: none !important;
}

.ct-foil__mask-baker,
.ct-foil__mask-debug-baker {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Tuning overlay -- grayscale safe-area mask (white = safe, black = foil apply). */
.ct-foil__mask-debug {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}

.ct-foil__mask-debug-bw {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image: var(--ct-foil-safe-mask);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Protected-zone debug -- tinted overlay (settings tuning). */
.ct-foil__mask-debug-protected {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--ct-foil-protected-mask);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.45;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.ct-foil--mask-debug-only .ct-foil__mask-debug-protected,
.ct-foil-preview__art--mask-map .ct-foil__mask-debug-protected {
  background-color: transparent;
  background-blend-mode: normal;
  mix-blend-mode: normal;
  opacity: 0.55;
  filter: sepia(1) saturate(4) hue-rotate(300deg);
}

/* Mask-map compare + lightbox -- pure #fff on #000, no card art bleed. */
.ct-foil--mask-debug-only .ct-foil__mask-debug-bw,
.ct-foil-preview__art--mask-map .ct-foil__mask-debug-bw {
  opacity: 1;
}

/* Live foil overlay debug (when enabled) -- keep semi-transparent over stack. */
.ct-foil--mask-debug-only .ct-foil__mask-debug-bw,
.ct-foil-preview__art--mask-map .ct-foil__mask-debug-bw {
  opacity: 0.72;
}

/* Settings safe-area tuning -- side-by-side live foil vs mask map. */
.ct-foil-mask-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
}

.ct-foil-mask-compare__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ct-foil-mask-compare__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ct-muted, rgb(160 168 180));
}

.ct-foil-mask-compare__panel .ct-foil-preview__frame {
  width: 100%;
  max-width: 9.5rem;
}

.ct-foil-preview-panel__tile--compare {
  grid-column: 1 / -1;
  cursor: pointer;
  padding-bottom: 0.35rem;
  text-align: inherit;
  width: 100%;
}

.ct-foil-preview-panel__tile--compare:hover {
  transform: translateY(-1px);
}

.ct-foil-preview__art--mask-map {
  background: #000;
}

.ct-foil-preview__art--mask-map > img {
  opacity: 0;
  visibility: hidden;
}

.ct-foil-mask-compare__legend {
  margin: 0.35rem 0 0;
  width: 100%;
  text-align: center;
  line-height: 1.45;
}

.ct-foil-mask-compare__swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  margin-right: 0.15rem;
  vertical-align: -0.08em;
}

.ct-foil-mask-compare__swatch--white {
  background: #fff;
  border: 1px solid rgb(255 255 255 / 0.22);
}

.ct-foil-mask-compare__swatch--black {
  background: #000;
  border: 1px solid rgb(255 255 255 / 0.28);
  margin-left: 0.35rem;
}

@media (max-width: 520px) {
  .ct-foil-mask-compare {
    grid-template-columns: 1fr;
  }
}

.ct-foil__base.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: var(--ct-foil-background-mask, var(--ct-foil-luma-mask));
  mask-image: var(--ct-foil-background-mask, var(--ct-foil-luma-mask));
}

.ct-foil__subject.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: var(--ct-foil-subject-mask);
  mask-image: var(--ct-foil-subject-mask);
}

.ct-foil__ui-text.ct-foil--luma-mask:not(.ct-foil--luma-fallback),
.ct-foil__preserve.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: var(--ct-foil-ui-text-mask, var(--ct-foil-preserve-mask));
  mask-image: var(--ct-foil-ui-text-mask, var(--ct-foil-preserve-mask));
}

.ct-foil__holo-text.ct-foil--luma-mask:not(.ct-foil--luma-fallback) {
  -webkit-mask-image: var(--ct-foil-holo-text-mask);
  mask-image: var(--ct-foil-holo-text-mask);
}

/* v2 safe-exclusion stack -- hide bg-finish until baked apply mask is ready. */
.ct-foil--safe-exclusion .ct-foil__bg-finish:not([data-foil-mask-ready]),
.ct-foil--safe-exclusion .ct-foil__holo-text--stub:not([data-foil-mask-ready]) {
  opacity: 0;
  visibility: hidden;
}

.ct-foil--safe-exclusion .ct-foil__bg-finish[data-foil-mask-ready] {
  opacity: 1;
  visibility: visible;
}

.ct-foil--safe-exclusion .ct-foil__holo-text--stub {
  display: none;
}

/* Legacy parallax stack -- hide layers until baked masks apply (prevents full-card gold/dim flash). */
.ct-foil--masked-stack .ct-foil__base--dim:not([data-foil-mask-ready]),
.ct-foil--masked-stack .ct-foil__bg-finish:not([data-foil-mask-ready]),
.ct-foil--masked-stack .ct-foil__masked-finish:not([data-foil-mask-ready]),
.ct-foil--masked-stack .ct-foil__subject:not([data-foil-mask-ready]),
.ct-foil--masked-stack .ct-foil__ui-text:not([data-foil-mask-ready]),
.ct-foil--masked-stack .ct-foil__preserve:not([data-foil-mask-ready]),
.ct-foil--masked-stack .ct-foil__holo-text:not([data-foil-mask-ready]) {
  opacity: 0;
  visibility: hidden;
}

.ct-foil--masked-stack .ct-foil__base--dim[data-foil-mask-ready] {
  opacity: 0.42;
  visibility: visible;
}

.ct-foil--masked-stack .ct-foil__bg-finish[data-foil-mask-ready],
.ct-foil--masked-stack .ct-foil__masked-finish[data-foil-mask-ready],
.ct-foil--masked-stack .ct-foil__subject[data-foil-mask-ready],
.ct-foil--masked-stack .ct-foil__ui-text[data-foil-mask-ready],
.ct-foil--masked-stack .ct-foil__preserve[data-foil-mask-ready] {
  opacity: 1;
  visibility: visible;
}

/* v1 holo-text stub -- gold shimmer on bright title pixels only after mask bake. */
.ct-foil__holo-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgb(255 215 0 / 0.92) 0%,
    rgb(255 248 220 / 0.88) 35%,
    rgb(255 179 71 / 0.9) 68%,
    rgb(255 215 0 / 0.92) 100%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
}

.ct-foil__holo-text[data-foil-mask-ready] {
  visibility: visible;
  opacity: 1;
}

.ct-foil__holo-text[data-foil-mask-ready]::after {
  opacity: 0.32;
}

.ct-foil__holo-text img {
  opacity: 0;
}

/* Legacy single-stack luma mask (geometry fallback path). */
.ct-foil.ct-foil--luma-mask:not(.ct-foil--luma-fallback):not(.ct-foil--masked-stack) {
  -webkit-mask-image: var(--ct-foil-luma-mask);
  mask-image: var(--ct-foil-luma-mask);
}

.ct-foil__text-preserve--luma-mask:not(.ct-foil--luma-fallback) {
  clip-path: none;
  -webkit-mask-image: var(--ct-foil-luma-mask);
  mask-image: var(--ct-foil-luma-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Keeps light card names legible when the strip sits on top of them. */
.ct-foil__text-preserve {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--ct-card-art-radius);
}

.ct-foil__text-preserve img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
}

/* Only lift bright card text -- leave the strip background foiled underneath. */
.ct-foil__text-preserve--luma img {
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(2.4) contrast(3.5);
  opacity: 0.82;
}

.ct-foil__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Isolated sub-stacks keep texture tint and sheen/sweep colors independent. */
.ct-foil__texture-zone,
.ct-foil__sheen-zone {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ct-foil__texture-zone {
  isolation: isolate;
  z-index: 1;
}

.ct-foil__sheen-zone {
  isolation: isolate;
  mix-blend-mode: normal;
  z-index: 2;
}

/*
 * When a pattern is active, exclude motif pixels from the sheen zone so rainbow
 * holo/sweep hits card art gaps only -- texture zone keeps the themed heart tint.
 */
.ct-foil__sheen-zone--textured {
  -webkit-mask-image: linear-gradient(#fff 0 0), var(--ct-foil-pattern);
  mask-image: linear-gradient(#fff 0 0), var(--ct-foil-pattern);
  -webkit-mask-size: 100% 100%, var(--ct-foil-pattern-size);
  mask-size: 100% 100%, var(--ct-foil-pattern-size);
  -webkit-mask-position: 0 0, 50% 50%;
  mask-position: 0 0, 50% 50%;
  -webkit-mask-repeat: no-repeat, repeat;
  mask-repeat: no-repeat, repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/*
 * Solid sheens on textured stacks -- feather inverse-pattern XOR seams and repeating
 * holo bands (rainbow hides these with dense multi-hue stops).
 */
.ct-foil__sheen-zone--textured:not(.ct-foil-sheen-field--rainbow) .ct-foil__layer--shine {
  filter: saturate(1.45) blur(0.55px);
}

.ct-foil__sheen-zone--textured.ct-foil-sheen-field--silver .ct-foil__layer--shine {
  filter: saturate(calc(1.25 + var(--ct-card-opacity, 0) * 0.4)) blur(0.55px);
}

.ct-foil__sheen-zone--textured.ct-foil-sheen-field--white .ct-foil__layer--shine {
  filter: saturate(0.75) brightness(calc(0.94 + var(--ct-card-opacity, 0) * 0.14)) blur(0.55px);
}

/* --- 1. texture: pinned print, revealed by the lit cone ------------------- */

/*
 * Tinted stacks paint motif color on ::after (pattern-masked). The base layer must
 * not repeat the white SVG/gradient print or mix-blend-mode: color keeps white luminosity.
 */
.ct-foil__texture-zone .ct-foil__layer--texture {
  background-image: none;
  mix-blend-mode: normal;
}

.ct-foil__layer--texture {
  /* Isolate tint ::after compositing before this layer overlays the art. */
  isolation: isolate;
  background-image: var(--ct-foil-pattern);
  background-size: var(--ct-foil-pattern-size);
  background-position: 50% 50%;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  filter: saturate(1.25);
  opacity: calc(
    (0.05 + var(--ct-card-opacity, 0) * 0.55) *
    var(--ct-foil-intensity) *
    var(--ct-foil-texture-intensity, 1) *
    var(--ct-foil-pattern-strength)
  );
  -webkit-mask-image: radial-gradient(
    ellipse 120% 105% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.72) 26%,
    rgb(0 0 0 / 0.34) 52%,
    rgb(0 0 0 / 0.18) 78%
  );
  mask-image: radial-gradient(
    ellipse 120% 105% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.72) 26%,
    rgb(0 0 0 / 0.34) 52%,
    rgb(0 0 0 / 0.18) 78%
  );
}

.ct-foil-preview__frame--large .ct-foil__layer--texture,
.ct-foil-preview-lightbox__card .ct-foil__layer--texture {
  opacity: calc(
    (0.08 + var(--ct-card-opacity, 0) * 0.5) *
    var(--ct-foil-intensity) *
    var(--ct-foil-texture-intensity, 1) *
    var(--ct-foil-pattern-strength)
  );
  -webkit-mask-image: radial-gradient(
    ellipse 135% 120% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.78) 30%,
    rgb(0 0 0 / 0.4) 58%,
    rgb(0 0 0 / 0.2) 82%
  );
  mask-image: radial-gradient(
    ellipse 135% 120% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.78) 30%,
    rgb(0 0 0 / 0.4) 58%,
    rgb(0 0 0 / 0.2) 82%
  );
}

.ct-foil-preview__frame--large .ct-foil__layer--shine,
.ct-foil-preview-lightbox__card .ct-foil__layer--shine {
  opacity: calc(
    (0.12 + var(--ct-card-opacity, 0) * 0.38) *
    var(--ct-foil-intensity) *
    var(--ct-foil-sheen-intensity, 1)
  );
}

/* --- 2. shine: holo colour field, offset by viewing angle ----------------- */

.ct-foil__layer--shine {
  isolation: isolate;
  background-size: 260% 260%;
  background-position: var(--ct-background-x) var(--ct-background-y);
  mix-blend-mode: overlay;
  filter: saturate(1.45);
  opacity: calc(
    (0.05 + var(--ct-card-opacity, 0) * 0.32) *
    var(--ct-foil-intensity) *
    var(--ct-foil-sheen-intensity, 1)
  );
  -webkit-mask-image: radial-gradient(
    ellipse 120% 105% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.72) 26%,
    rgb(0 0 0 / 0.34) 52%,
    rgb(0 0 0 / 0.18) 78%
  );
  mask-image: radial-gradient(
    ellipse 120% 105% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.72) 26%,
    rgb(0 0 0 / 0.34) 52%,
    rgb(0 0 0 / 0.18) 78%
  );
}

.ct-foil__sheen-zone.ct-foil-sheen-field--rainbow .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(348 96% 56%) 2%,
    hsl(18 98% 58%) 7%,
    hsl(52 98% 54%) 12%,
    hsl(142 88% 46%) 18%,
    hsl(198 96% 50%) 24%,
    hsl(262 92% 58%) 30%,
    hsl(318 94% 58%) 36%,
    hsl(348 96% 56%) 42%
  );
  filter: saturate(calc(1.1 + var(--ct-card-opacity, 0) * 0.65));
}

.ct-foil__sheen-zone.ct-foil-sheen-field--gold .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(38 92% 38%) 0%,
    hsl(42 94% 48%) 5%,
    hsl(46 96% 62%) 11%,
    hsl(44 95% 54%) 17%,
    hsl(36 90% 44%) 23%,
    hsl(32 88% 46%) 29%,
    hsl(40 93% 58%) 35%,
    hsl(38 92% 42%) 42%
  );
}

.ct-foil__sheen-zone.ct-foil-sheen-field--silver .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(215 38% 36%) 4%,
    hsl(200 52% 68%) 11%,
    hsl(228 32% 40%) 18%,
    hsl(192 58% 76%) 25%,
    hsl(220 34% 38%) 32%,
    hsl(205 48% 72%) 39%
  );
  filter: saturate(calc(1.25 + var(--ct-card-opacity, 0) * 0.4));
}

.ct-foil__sheen-zone.ct-foil-sheen-field--white .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(210 6% 26%) 0%,
    hsl(210 5% 42%) 6%,
    hsl(210 4% 72%) 12%,
    hsl(210 3% 94%) 18%,
    hsl(210 4% 78%) 24%,
    hsl(210 5% 34%) 30%,
    hsl(210 4% 88%) 36%,
    hsl(210 6% 26%) 42%
  );
  filter: saturate(0.75) brightness(calc(0.94 + var(--ct-card-opacity, 0) * 0.14));
}

.ct-foil__sheen-zone.ct-foil-sheen-field--copper .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(22 72% 34%) 0%,
    hsl(26 78% 44%) 5%,
    hsl(32 88% 58%) 11%,
    hsl(28 82% 50%) 17%,
    hsl(18 65% 40%) 23%,
    hsl(24 74% 46%) 29%,
    hsl(38 92% 62%) 35%,
    hsl(22 72% 36%) 42%
  );
}

.ct-foil__sheen-zone.ct-foil-sheen-field--aqua .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(188 68% 36%) 0%,
    hsl(182 74% 48%) 5%,
    hsl(175 82% 62%) 11%,
    hsl(180 78% 54%) 17%,
    hsl(195 60% 42%) 23%,
    hsl(188 70% 50%) 29%,
    hsl(168 78% 66%) 35%,
    hsl(188 68% 38%) 42%
  );
}

.ct-foil__sheen-zone.ct-foil-sheen-field--violet .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    hsl(275 62% 36%) 0%,
    hsl(280 70% 48%) 5%,
    hsl(285 78% 68%) 11%,
    hsl(278 72% 56%) 17%,
    hsl(268 58% 42%) 23%,
    hsl(276 66% 52%) 29%,
    hsl(292 82% 72%) 35%,
    hsl(275 62% 38%) 42%
  );
}

.ct-foil__sheen-zone.ct-foil-sheen-field--theme .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 48%, black) 0%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 58%, black) 5%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 72%, white) 11%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 66%, white) 17%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 45%, black) 23%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 52%, black) 29%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 78%, white) 35%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 50%, black) 42%
  );
}

.ct-foil__sheen-zone.ct-foil-sheen-field--theme-split .ct-foil__layer--shine {
  background-image: repeating-linear-gradient(
    82deg,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 52%, black) 0%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 62%, white) 6%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 48%, black) 12%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 75%, white) 18%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 50%, black) 24%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 68%, white) 30%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 55%, black) 36%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 72%, white) 42%
  );
}

/* --- 3. sweep: sheen band that flashes the print as it passes ------------- */

.ct-foil__layer--sweep {
  isolation: isolate;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: calc(var(--ct-foil-intensity) * 0.42 * var(--ct-foil-sheen-intensity, 1));
  /* Pointer-lit band -- never pattern-masked; texture zone owns motif color. */
  -webkit-mask-image: radial-gradient(
    ellipse 120% 105% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.72) 26%,
    rgb(0 0 0 / 0.34) 52%,
    rgb(0 0 0 / 0.18) 78%
  );
  mask-image: radial-gradient(
    ellipse 120% 105% at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.72) 26%,
    rgb(0 0 0 / 0.34) 52%,
    rgb(0 0 0 / 0.18) 78%
  );
}

/* The band moves inside the layer, so the mask it shines through stays put. */
.ct-foil__layer--sweep::before {
  content: '';
  position: absolute;
  inset: -35%;
  width: 55%;
  filter: blur(1.5px);
  transform: translateX(-260%) rotate(18deg);
  animation: ct-foil-sweep var(--ct-foil-speed) ease-in-out infinite;
}

/*
 * Solid sheen presets -- wider blur + band so the animated sweep does not read as a
 * hard diagonal wedge (rainbow spreads many hue stops across the same geometry).
 */
.ct-foil__sheen-zone:not(.ct-foil-sweep-band--rainbow) .ct-foil__layer--sweep::before {
  width: 64%;
  filter: blur(4px);
}

.ct-foil__sheen-zone.ct-foil-sweep-band--rainbow .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 70 150 / 0.38) 12%,
    rgb(255 190 60 / 0.48) 28%,
    rgb(80 235 180 / 0.46) 46%,
    rgb(90 160 255 / 0.44) 64%,
    rgb(210 100 255 / 0.4) 80%,
    transparent
  );
  filter: saturate(calc(1.05 + var(--ct-card-opacity, 0) * 0.55));
}

.ct-foil__sheen-zone.ct-foil-sweep-band--white .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 0.03) 12%,
    rgb(255 255 255 / 0.22) 28%,
    rgb(255 255 255 / 0.52) 50%,
    rgb(255 255 255 / 0.22) 72%,
    rgb(255 255 255 / 0.03) 88%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--gold .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 193 7 / 0.05) 10%,
    rgb(255 210 80 / 0.18) 24%,
    rgb(255 224 130 / 0.38) 38%,
    rgb(255 235 180 / 0.44) 50%,
    rgb(255 224 130 / 0.38) 62%,
    rgb(255 210 80 / 0.18) 76%,
    rgb(255 193 7 / 0.05) 90%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--silver .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(100 170 215 / 0.08) 10%,
    rgb(180 220 245 / 0.22) 24%,
    rgb(230 245 255 / 0.4) 38%,
    rgb(245 250 255 / 0.46) 50%,
    rgb(230 245 255 / 0.4) 62%,
    rgb(120 185 225 / 0.22) 76%,
    rgb(70 140 195 / 0.08) 90%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--copper .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(180 90 40 / 0.06) 10%,
    rgb(210 120 55 / 0.18) 24%,
    rgb(255 180 90 / 0.38) 38%,
    rgb(255 200 120 / 0.44) 50%,
    rgb(255 180 90 / 0.38) 62%,
    rgb(210 120 55 / 0.18) 76%,
    rgb(160 75 35 / 0.06) 90%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--aqua .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(40 180 190 / 0.06) 10%,
    rgb(70 210 205 / 0.18) 24%,
    rgb(120 240 230 / 0.36) 38%,
    rgb(150 245 238 / 0.42) 50%,
    rgb(120 240 230 / 0.36) 62%,
    rgb(70 210 205 / 0.18) 76%,
    rgb(30 150 180 / 0.06) 90%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--violet .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(140 70 210 / 0.06) 10%,
    rgb(170 110 230 / 0.18) 24%,
    rgb(210 160 255 / 0.36) 38%,
    rgb(225 185 255 / 0.42) 50%,
    rgb(210 160 255 / 0.36) 62%,
    rgb(170 110 230 / 0.18) 76%,
    rgb(120 60 190 / 0.06) 90%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--theme .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 8%, transparent) 10%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 24%, transparent) 24%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 48%, white) 38%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 58%, white) 50%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 48%, white) 62%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 24%, transparent) 76%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 8%, transparent) 90%,
    transparent 100%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--theme-split .ct-foil__layer--sweep::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 12%, transparent) 8%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 28%, white) 22%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 18%, transparent) 36%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 46%, white) 50%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 18%, transparent) 64%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 28%, white) 78%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 10%, transparent) 92%,
    transparent 100%
  );
}

@keyframes ct-foil-sweep {
  0%,
  16% {
    transform: translateX(-260%) rotate(18deg);
  }

  64%,
  100% {
    transform: translateX(420%) rotate(18deg);
  }
}

/* --- 4. glare: specular highlight under the pointer ----------------------- */

.ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(255 255 255 / 0.7) 0%,
    rgb(255 255 255 / 0.24) 16%,
    transparent 46%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.9) contrast(1.15);
  opacity: calc(var(--ct-card-opacity, 0) * var(--ct-foil-intensity) * 0.6 * var(--ct-foil-sheen-intensity, 1));
}

.ct-foil__sheen-zone.ct-foil-sweep-band--rainbow .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(255 140 200 / 0.62) 0%,
    rgb(120 220 255 / 0.36) 14%,
    rgb(180 130 255 / 0.22) 24%,
    transparent 46%
  );
  filter: saturate(calc(1 + var(--ct-card-opacity, 0) * 0.5));
}

.ct-foil__sheen-zone.ct-foil-sweep-band--gold .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(255 226 140 / 0.66) 0%,
    rgb(255 193 7 / 0.3) 16%,
    transparent 46%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--silver .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(195 230 255 / 0.64) 0%,
    rgb(120 175 220 / 0.32) 14%,
    rgb(160 200 240 / 0.18) 24%,
    transparent 46%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--white .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(255 255 255 / 0.78) 0%,
    rgb(255 255 255 / 0.2) 10%,
    transparent 40%
  );
  filter: saturate(0.8);
}

.ct-foil__sheen-zone.ct-foil-sweep-band--copper .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(255 190 110 / 0.64) 0%,
    rgb(210 120 50 / 0.28) 16%,
    transparent 46%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--aqua .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(130 240 230 / 0.62) 0%,
    rgb(50 180 200 / 0.28) 16%,
    transparent 46%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--violet .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    rgb(210 160 255 / 0.62) 0%,
    rgb(140 80 210 / 0.28) 16%,
    transparent 46%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--theme .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 68%, white) 0%,
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 32%, transparent) 16%,
    transparent 46%
  );
}

.ct-foil__sheen-zone.ct-foil-sweep-band--theme-split .ct-foil__layer--glare {
  background-image: radial-gradient(
    circle at var(--ct-pointer-x) var(--ct-pointer-y),
    color-mix(in srgb, var(--ct-foil-sheen-a, var(--ct-accent)) 55%, white) 0%,
    color-mix(in srgb, var(--ct-foil-sheen-b, var(--ct-accent-sub)) 38%, transparent) 14%,
    transparent 46%
  );
}

/* --- 5. sparkles ---------------------------------------------------------- */

.ct-foil__layer--sparkles {
  mix-blend-mode: screen;
  opacity: calc(var(--ct-foil-sparkle-intensity, 1) * (0.42 + var(--ct-card-opacity, 0) * 0.58));
}

/* ------------------------------------------------------ texture tints ---- */
/*
 * Tint is masked to the pattern alpha so color hits motif shapes (hearts, dots,
 * stars). The base texture layer hides its white print inside .ct-foil__texture-zone;
 * ::after paints the palette color with screen blend (not color blend, which
 * preserves white luminosity). Intensity above 1x boosts saturation, not opacity.
 */

.ct-foil__texture-zone .ct-foil__layer--texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(var(--ct-foil-tint, 255 255 255));
  opacity: calc(var(--ct-foil-tint-opacity, 0) * var(--ct-foil-texture-tint-opacity-mul, 1));
  mix-blend-mode: screen;
  filter: saturate(var(--ct-foil-texture-tint-saturate, 1));
  pointer-events: none;
  -webkit-mask-image: var(--ct-foil-pattern);
  mask-image: var(--ct-foil-pattern);
  -webkit-mask-size: var(--ct-foil-pattern-size);
  mask-size: var(--ct-foil-pattern-size);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.ct-foil__texture-zone.ct-foil-tint--rainbow .ct-foil__layer--texture::after {
  background: conic-gradient(
    from 0deg at 50% 50%,
    hsl(348 88% 58% / 0.42),
    hsl(52 90% 52% / 0.38),
    hsl(198 88% 52% / 0.42),
    hsl(262 82% 58% / 0.42),
    hsl(348 88% 58% / 0.42)
  );
  mix-blend-mode: soft-light;
  filter: saturate(var(--ct-foil-texture-tint-saturate, 1));
  opacity: calc((0.22 + var(--ct-card-opacity, 0) * 0.52) * var(--ct-foil-texture-tint-opacity-mul, 1));
}

.ct-foil__texture-zone.ct-foil-tint--gold .ct-foil__layer--texture {
  --ct-foil-tint: 255 190 40;
  --ct-foil-tint-opacity: 0.72;
}

.ct-foil__texture-zone.ct-foil-tint--silver .ct-foil__layer--texture {
  --ct-foil-tint: 175 195 225;
  --ct-foil-tint-opacity: 0.7;
}

.ct-foil__texture-zone.ct-foil-tint--white .ct-foil__layer--texture {
  --ct-foil-tint: 238 242 248;
  --ct-foil-tint-opacity: 0.62;
}

.ct-foil__texture-zone.ct-foil-tint--copper .ct-foil__layer--texture {
  --ct-foil-tint: 200 120 55;
  --ct-foil-tint-opacity: 0.72;
}

.ct-foil__texture-zone.ct-foil-tint--aqua .ct-foil__layer--texture {
  --ct-foil-tint: 55 195 185;
  --ct-foil-tint-opacity: 0.7;
}

.ct-foil__texture-zone.ct-foil-tint--violet .ct-foil__layer--texture {
  --ct-foil-tint: 150 80 230;
  --ct-foil-tint-opacity: 0.72;
}

.ct-foil__texture-zone.ct-foil-tint--blue .ct-foil__layer--texture {
  --ct-foil-tint: 70 160 255;
  --ct-foil-tint-opacity: 0.72;
}

.ct-foil__texture-zone.ct-foil-tint--pink .ct-foil__layer--texture {
  --ct-foil-tint: 255 90 190;
  --ct-foil-tint-opacity: 0.7;
}

.ct-foil__texture-zone.ct-foil-tint--green .ct-foil__layer--texture {
  --ct-foil-tint: 70 230 130;
  --ct-foil-tint-opacity: 0.7;
}

.ct-foil__texture-zone.ct-foil-tint--fire .ct-foil__layer--texture {
  --ct-foil-tint: 255 100 30;
  --ct-foil-tint-opacity: 0.76;
}

.ct-foil__texture-zone.ct-foil-tint--cosmic .ct-foil__layer--texture::after {
  background:
    radial-gradient(circle at 28% 72%, rgb(120 70 255), transparent 52%),
    radial-gradient(circle at 72% 28%, rgb(60 170 255), transparent 48%),
    rgb(80 50 180);
  mix-blend-mode: soft-light;
  filter: saturate(var(--ct-foil-texture-tint-saturate, 1));
  opacity: calc((0.42 + var(--ct-card-opacity, 0) * 0.58) * var(--ct-foil-texture-tint-opacity-mul, 1));
}

.ct-foil__texture-zone.ct-foil-tint--theme .ct-foil__layer--texture {
  --ct-foil-tint-opacity: 0;
}

.ct-foil__texture-zone.ct-foil-tint--theme .ct-foil__layer--texture::after {
  background: var(--ct-accent, #3ecf8e);
  mix-blend-mode: screen;
  filter: saturate(var(--ct-foil-texture-tint-saturate, 1));
  opacity: calc((0.58 + var(--ct-card-opacity, 0) * 0.32) * var(--ct-foil-texture-tint-opacity-mul, 1));
}

.ct-foil__texture-zone.ct-foil-tint--theme-split .ct-foil__layer--texture {
  --ct-foil-tint-opacity: 0;
}

.ct-foil__texture-zone.ct-foil-tint--theme-split .ct-foil__layer--texture::after {
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--ct-accent, #3ecf8e),
    var(--ct-accent-sub, #ff6b9d),
    var(--ct-accent, #3ecf8e)
  );
  mix-blend-mode: screen;
  filter: saturate(var(--ct-foil-texture-tint-saturate, 1));
  opacity: calc((0.52 + var(--ct-card-opacity, 0) * 0.28) * var(--ct-foil-texture-tint-opacity-mul, 1));
}

/* ---------------------------------------------------- texture patterns ---- */
/*
 * Patterns are declared as variables on the stack so the texture tint mask and
 * the sheen-zone inverse mask can both read them.
 *
 * SVG motifs (stars, fire, cosmic, swirl): original in-repo art, MIT.
 * Source files live in ui/assets/foil-texture-*.svg -- patch via
 * scripts/patchFoilCssPatterns.mjs after editing those assets.
 */

.ct-foil-texture--dots {
  --ct-foil-pattern: radial-gradient(circle, rgb(255 255 255 / 0.82) 0 1.4px, transparent 1.6px);
  --ct-foil-pattern-size: calc(7px * var(--ct-foil-pattern-scale, 1)) calc(7px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.06;
}

.ct-foil-texture--hearts {
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffffe6' d='M8 13s-5-3.2-5-6.4C3 4.6 4.6 3 6.4 3c1 0 1.6.5 2 1.1.4-.6 1-1.1 2-1.1C12.4 3 14 4.6 14 6.6 14 9.8 8 13 8 13z'/%3E%3C/svg%3E");
  --ct-foil-pattern-size: calc(16px * var(--ct-foil-pattern-scale, 1)) calc(16px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.08;
}

.ct-foil-texture--shatters {
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.55' stroke-linejoin='round'%3E%3Cpolygon fill='%23ffffffd9' points='1,1 11,3 7,12'/%3E%3Cpolygon fill='%23ffffffa6' points='12,0 24,5 20,14 9,10'/%3E%3Cpolygon fill='%23ffffffbf' points='2,14 13,16 9,24 0,20'/%3E%3Cpolygon fill='%23ffffff8c' points='15,15 27,19 23,27 14,25'/%3E%3Cpolygon fill='%23ffffffcc' points='8,12 16,11 14,19 6,18'/%3E%3Cline x1='11' y1='3' x2='7' y2='12'/%3E%3Cline x1='16' y1='11' x2='14' y2='19'/%3E%3Cline x1='24' y1='5' x2='20' y2='14'/%3E%3C/g%3E%3C/svg%3E");
  --ct-foil-pattern-size: calc(28px * var(--ct-foil-pattern-scale, 1)) calc(28px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.12;
}

.ct-foil-texture--stars {
  /* Source: ui/assets/foil-texture-stars.svg -- original MIT in-repo pattern */
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3C!--%20Original%20Market%20Watch%20foil%20tile%20(MIT%2C%20in-repo).%20Classic%20holo%20star%20field.%20--%3E%0A%20%20%3Cg%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.94%22%20d%3D%22M16%2010%20L17.8%2016.2%20L24%2018%20L17.8%2019.8%20L16%2026%20L14.2%2019.8%20L8%2018%20L14.2%2016.2%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.9%22%20d%3D%22M48%208%20L49.6%2013.4%20L55%2015%20L49.6%2016.6%20L48%2022%20L46.4%2016.6%20L41%2015%20L46.4%2013.4%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.88%22%20d%3D%22M32%2034%20L33.4%2038.6%20L38%2040%20L33.4%2041.4%20L32%2046%20L30.6%2041.4%20L26%2040%20L30.6%2038.6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.86%22%20d%3D%22M10%2042%20L11.2%2046%20L15%2047%20L11.2%2048%20L10%2052%20L8.8%2048%20L5%2047%20L8.8%2046%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.84%22%20d%3D%22M54%2038%20L55.2%2042%20L59%2043%20L55.2%2044%20L54%2048%20L52.8%2044%20L49%2043%20L52.8%2042%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.82%22%20d%3D%22M38%2052%20L39%2055.2%20L42%2056%20L39%2056.8%20L38%2060%20L37%2056.8%20L34%2056%20L37%2055.2%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.8%22%20d%3D%22M22%2052%20L23%2055%20L25.5%2055.8%20L23%2056.6%20L22%2059.5%20L21%2056.6%20L18.5%2055.8%20L21%2055%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2214%22%20r%3D%221.2%22%20opacity%3D%220.72%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2242%22%20cy%3D%2228%22%20r%3D%221%22%20opacity%3D%220.66%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%2228%22%20r%3D%220.9%22%20opacity%3D%220.62%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2256%22%20cy%3D%2216%22%20r%3D%221.1%22%20opacity%3D%220.7%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2258%22%20r%3D%220.8%22%20opacity%3D%220.58%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2256%22%20r%3D%221%22%20opacity%3D%220.64%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%224%22%20cy%3D%2252%22%20r%3D%220.7%22%20opacity%3D%220.55%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2250%22%20r%3D%220.9%22%20opacity%3D%220.6%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --ct-foil-pattern-size: calc(32px * var(--ct-foil-pattern-scale, 1)) calc(32px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.1;
}

.ct-foil-texture--fire {
  /* Source: ui/assets/foil-texture-fire.svg -- original MIT in-repo pattern */
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2256%22%20viewBox%3D%220%200%2048%2056%22%3E%0A%20%20%3C!--%20Original%20Market%20Watch%20foil%20tile%20(MIT%2C%20in-repo).%20Tiled%20flame%20silhouettes.%20--%3E%0A%20%20%3Cg%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.92%22%20d%3D%22M24%2052%20C14%2042%2012%2030%2017%2020%20C19%2024%2021%2022%2024%2010%20C27%2022%2029%2024%2031%2020%20C36%2030%2034%2042%2024%2052%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.58%22%20d%3D%22M24%2046%20C19%2038%2019%2030%2022%2025%20C23%2028%2024%2027%2024%2018%20C25%2027%2026%2028%2027%2025%20C29%2030%2029%2038%2024%2046%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.86%22%20d%3D%22M8%2038%20C2%2032%201%2024%204%2018%20C5%2020%206%2019%208%2012%20C10%2019%2011%2020%2012%2018%20C15%2024%2014%2032%208%2038%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.48%22%20d%3D%22M8%2034%20C5%2029%205%2024%207%2020%20C7.5%2022%208%2021.5%208%2016%20C9%2021.5%209.5%2022%2010%2020%20C11%2024%2011%2029%208%2034%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.84%22%20d%3D%22M40%2040%20C46%2034%2047%2026%2044%2020%20C43%2022%2042%2021%2040%2014%20C38%2021%2037%2022%2036%2020%20C33%2026%2034%2034%2040%2040%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.46%22%20d%3D%22M40%2036%20C43%2031%2043%2026%2041%2022%20C40.5%2024%2040%2023.5%2040%2018%20C39%2023.5%2038.5%2024%2038%2022%20C36%2026%2036%2031%2040%2036%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --ct-foil-pattern-size: calc(36px * var(--ct-foil-pattern-scale, 1)) calc(42px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.12;
}

.ct-foil-texture--cosmic {
  /* Source: ui/assets/foil-texture-cosmic.svg -- original MIT in-repo pattern */
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3C!--%20Original%20Market%20Watch%20foil%20tile%20(MIT%2C%20in-repo).%20Nebula%20specks%20%2B%20galaxy%20arms%20%2B%20stars.%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.42%22%20stroke-width%3D%228%22%20d%3D%22M64%2064%20C64%2064%2088%2052%2096%2032%20C104%2012%2088%204%2072%2012%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.36%22%20stroke-width%3D%226%22%20d%3D%22M64%2064%20C64%2064%2040%2076%2032%2096%20C24%20116%2040%20124%2056%20116%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.3%22%20stroke-width%3D%225%22%20d%3D%22M64%2064%20C64%2064%2078%2088%2098%2096%20C118%20104%20126%2088%20118%2072%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2238%22%20cy%3D%2242%22%20rx%3D%2214%22%20ry%3D%2210%22%20opacity%3D%220.22%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2292%22%20cy%3D%2286%22%20rx%3D%2212%22%20ry%3D%229%22%20opacity%3D%220.2%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2288%22%20cy%3D%2234%22%20rx%3D%2210%22%20ry%3D%228%22%20opacity%3D%220.18%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2234%22%20cy%3D%2292%22%20rx%3D%2211%22%20ry%3D%228%22%20opacity%3D%220.19%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.9%22%20d%3D%22M22%2028%20L23.4%2032.6%20L28%2034%20L23.4%2035.4%20L22%2040%20L20.6%2035.4%20L16%2034%20L20.6%2032.6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.86%22%20d%3D%22M98%2022%20L99.2%2026%20L103%2027%20L99.2%2028%20L98%2032%20L96.8%2028%20L93%2027%20L96.8%2026%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.84%22%20d%3D%22M106%2078%20L107.2%2082%20L111%2083%20L107.2%2084%20L106%2088%20L104.8%2084%20L101%2083%20L104.8%2082%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.82%22%20d%3D%22M18%2088%20L19%2091.2%20L22%2092%20L19%2092.8%20L18%2096%20L17%2092.8%20L14%2092%20L17%2091.2%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.8%22%20d%3D%22M64%2014%20L65%2017%20L68%2018%20L65%2018.8%20L64%2022%20L63%2018.8%20L60%2018%20L63%2017%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.78%22%20d%3D%22M64%20108%20L65%20111%20L68%20112%20L65%20112.8%20L64%20116%20L63%20112.8%20L60%20112%20L63%20111%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2248%22%20cy%3D%2258%22%20r%3D%221.3%22%20opacity%3D%220.74%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2272%22%20cy%3D%2248%22%20r%3D%221.1%22%20opacity%3D%220.68%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2256%22%20cy%3D%2278%22%20r%3D%221%22%20opacity%3D%220.64%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2262%22%20r%3D%221.2%22%20opacity%3D%220.7%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2242%22%20cy%3D%2272%22%20r%3D%220.9%22%20opacity%3D%220.6%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2294%22%20cy%3D%2248%22%20r%3D%220.8%22%20opacity%3D%220.58%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2252%22%20r%3D%221%22%20opacity%3D%220.62%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2228%22%20r%3D%220.9%22%20opacity%3D%220.6%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2276%22%20cy%3D%2296%22%20r%3D%221.1%22%20opacity%3D%220.66%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2268%22%20r%3D%220.8%22%20opacity%3D%220.56%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22112%22%20cy%3D%2272%22%20r%3D%221%22%20opacity%3D%220.62%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2252%22%20cy%3D%22104%22%20r%3D%220.9%22%20opacity%3D%220.58%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --ct-foil-pattern-size: calc(64px * var(--ct-foil-pattern-scale, 1)) calc(64px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.15;
}

.ct-foil-texture--stripes {
  --ct-foil-pattern: repeating-linear-gradient(
    125deg,
    transparent 0 calc(7px * var(--ct-foil-pattern-scale, 1)),
    rgb(255 255 255 / 0.34) calc(7px * var(--ct-foil-pattern-scale, 1)) calc(8px * var(--ct-foil-pattern-scale, 1))
  );
  --ct-foil-pattern-size: auto;
  --ct-foil-pattern-strength: 1.04;
}

.ct-foil-texture--sheen {
  /* Brushed-metal micro-lines -- distinct from crosshatch and the animated sheen zone. */
  --ct-foil-pattern: repeating-linear-gradient(
    102deg,
    transparent 0 calc(2px * var(--ct-foil-pattern-scale, 1)),
    rgb(255 255 255 / 0.1) calc(2px * var(--ct-foil-pattern-scale, 1)) calc(3px * var(--ct-foil-pattern-scale, 1)),
    rgb(255 255 255 / 0.38) calc(3px * var(--ct-foil-pattern-scale, 1)) calc(4px * var(--ct-foil-pattern-scale, 1)),
    rgb(255 255 255 / 0.12) calc(4px * var(--ct-foil-pattern-scale, 1)) calc(5px * var(--ct-foil-pattern-scale, 1)),
    transparent calc(5px * var(--ct-foil-pattern-scale, 1)) calc(14px * var(--ct-foil-pattern-scale, 1))
  );
  --ct-foil-pattern-size: auto;
  --ct-foil-pattern-strength: 1.18;
}

.ct-foil-texture--crosshatch {
  --ct-foil-pattern:
    repeating-linear-gradient(
      45deg,
      transparent 0 calc(6px * var(--ct-foil-pattern-scale, 1)),
      rgb(255 255 255 / 0.32) calc(6px * var(--ct-foil-pattern-scale, 1)) calc(7px * var(--ct-foil-pattern-scale, 1))
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 calc(6px * var(--ct-foil-pattern-scale, 1)),
      rgb(255 255 255 / 0.26) calc(6px * var(--ct-foil-pattern-scale, 1)) calc(7px * var(--ct-foil-pattern-scale, 1))
    );
  --ct-foil-pattern-size: auto, auto;
  --ct-foil-pattern-strength: 1.06;
}

.ct-foil-texture--water {
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%2364c8ff' stroke-width='1.1' opacity='0.82'%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Ccircle cx='16' cy='16' r='8'/%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.65' opacity='0.55'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --ct-foil-pattern-size: calc(32px * var(--ct-foil-pattern-scale, 1)) calc(32px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.14;
}

.ct-foil-texture--horizontal-line {
  --ct-foil-pattern: repeating-linear-gradient(
    0deg,
    transparent 0 calc(6px * var(--ct-foil-pattern-scale, 1)),
    rgb(255 255 255 / 0.34) calc(6px * var(--ct-foil-pattern-scale, 1)) calc(7px * var(--ct-foil-pattern-scale, 1))
  );
  --ct-foil-pattern-size: auto;
  --ct-foil-pattern-strength: 1.04;
}

.ct-foil-texture--vertical-line {
  --ct-foil-pattern: repeating-linear-gradient(
    90deg,
    transparent 0 calc(6px * var(--ct-foil-pattern-scale, 1)),
    rgb(255 255 255 / 0.34) calc(6px * var(--ct-foil-pattern-scale, 1)) calc(7px * var(--ct-foil-pattern-scale, 1))
  );
  --ct-foil-pattern-size: auto;
  --ct-foil-pattern-strength: 1.04;
}

.ct-foil-texture--sequin {
  --ct-foil-pattern:
    radial-gradient(
      circle at 32% 28%,
      rgb(255 255 255 / 0.95) 0 0.55px,
      rgb(255 220 170 / 0.72) 0.85px,
      rgb(180 140 90 / 0.38) 1.05px,
      transparent 1.35px
    ),
    radial-gradient(
      circle at 68% 72%,
      rgb(255 255 255 / 0.88) 0 0.5px,
      rgb(255 210 160 / 0.65) 0.8px,
      rgb(170 130 80 / 0.32) 1px,
      transparent 1.3px
    );
  --ct-foil-pattern-size:
    calc(10px * var(--ct-foil-pattern-scale, 1)) calc(10px * var(--ct-foil-pattern-scale, 1)),
    calc(10px * var(--ct-foil-pattern-scale, 1)) calc(10px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.12;
}

.ct-foil-texture--pixel {
  --ct-foil-pattern: conic-gradient(
    from 90deg at 50% 50%,
    rgb(255 255 255 / 0.52) 0 25%,
    transparent 0 50%,
    rgb(255 255 255 / 0.52) 0 75%,
    transparent 0
  );
  --ct-foil-pattern-size: calc(6px * var(--ct-foil-pattern-scale, 1)) calc(6px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.08;
}

.ct-foil-texture--blocky {
  --ct-foil-pattern:
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 0.42) 0 calc(10px * var(--ct-foil-pattern-scale, 1)),
      transparent calc(10px * var(--ct-foil-pattern-scale, 1)) calc(14px * var(--ct-foil-pattern-scale, 1))
    ),
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.42) 0 calc(10px * var(--ct-foil-pattern-scale, 1)),
      transparent calc(10px * var(--ct-foil-pattern-scale, 1)) calc(14px * var(--ct-foil-pattern-scale, 1))
    );
  --ct-foil-pattern-size: auto, auto;
  --ct-foil-pattern-strength: 1.1;
}

.ct-foil-texture--swirl {
  /* Source: ui/assets/foil-texture-swirl.svg -- original MIT in-repo pattern */
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%20%20%3C!--%20Original%20Market%20Watch%20foil%20tile%20(MIT%2C%20in-repo).%20Archimedean%20spiral%20arms.%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.92%22%20stroke-width%3D%223.2%22%20d%3D%22M%2031.9%2030.6%20L%2032.1%2031.6%20L%2031.8%2032.7%20L%2030.9%2033.8%20L%2029.5%2034.5%20L%2027.7%2034.6%20L%2025.9%2034.0%20L%2024.2%2032.6%20L%2023.0%2030.5%20L%2022.7%2028.0%20L%2023.3%2025.3%20L%2024.9%2022.8%20L%2027.5%2020.9%20L%2030.8%2019.9%20L%2034.4%2020.2%20L%2037.9%2021.9%20L%2040.7%2024.8%20L%2042.5%2028.6%20L%2042.8%2033.1%20L%2041.5%2037.6%20L%2038.7%2041.6%20L%2034.4%2044.4%20L%2029.2%2045.7%20L%2023.7%2045.1%20L%2018.6%2042.5%20L%2014.5%2038.2%20L%2012.0%2032.5%20L%2011.6%2026.2%20L%2013.5%2019.8%20L%2017.5%2014.3%20L%2023.3%2010.4%20L%2030.4%208.7%20L%2037.8%209.5%20L%2044.7%2012.9%20L%2050.1%2018.6%20L%2053.4%2025.9%20L%2054.0%2034.2%20L%2051.7%2042.4%20L%2046.6%2049.5%20L%2039.2%2054.6%20L%2030.4%2056.9%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.88%22%20stroke-width%3D%222.8%22%20d%3D%22M%2089.5%2035.9%20L%2088.6%2036.1%20L%2087.5%2035.9%20L%2086.5%2035.1%20L%2085.8%2033.8%20L%2085.6%2032.1%20L%2086.1%2030.3%20L%2087.3%2028.7%20L%2089.2%2027.6%20L%2091.6%2027.2%20L%2094.1%2027.6%20L%2096.5%2029.1%20L%2098.3%2031.5%20L%2099.2%2034.5%20L%2099.0%2037.9%20L%2097.6%2041.1%20L%2094.9%2043.8%20L%2091.4%2045.4%20L%2087.3%2045.7%20L%2083.1%2044.6%20L%2079.5%2041.9%20L%2076.9%2038.0%20L%2075.7%2033.2%20L%2076.3%2028.2%20L%2078.8%2023.5%20L%2082.8%2019.8%20L%2088.0%2017.6%20L%2093.9%2017.4%20L%2099.6%2019.2%20L%20104.6%2023.1%20L%20107.9%2028.6%20L%20109.3%2035.1%20L%20108.3%2041.8%20L%20104.9%2048.0%20L%2099.5%2052.7%20L%2092.6%2055.4%20L%2085.0%2055.5%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.9%22%20stroke-width%3D%223%22%20d%3D%22M%2032.1%2089.3%20L%2032.0%2088.3%20L%2032.4%2087.2%20L%2033.4%2086.3%20L%2034.8%2085.7%20L%2036.5%2085.7%20L%2038.2%2086.4%20L%2039.8%2087.9%20L%2040.7%2090.0%20L%2040.9%2092.5%20L%2040.1%2095.0%20L%2038.3%2097.3%20L%2035.7%2098.9%20L%2032.5%2099.6%20L%2029.0%2099.0%20L%2025.8%2097.1%20L%2023.3%2094.1%20L%2022.0%2090.3%20L%2022.0%2086.0%20L%2023.7%2081.8%20L%2026.8%2078.2%20L%2031.1%2075.9%20L%2036.1%2075.2%20L%2041.3%2076.3%20L%2046.0%2079.2%20L%2049.5%2083.7%20L%2051.3%2089.3%20L%2051.1%2095.5%20L%2048.7%20101.3%20L%2044.3%20106.1%20L%2038.3%20109.2%20L%2031.4%20110.1%20L%2024.5%20108.6%20L%2018.3%20104.6%20L%2013.7%2098.6%20L%2011.4%2091.2%20L%2011.7%2083.3%20L%2014.9%2075.8%20L%2020.5%2069.6%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.86%22%20stroke-width%3D%222.6%22%20d%3D%22M%2092.8%2086.4%20L%2093.7%2086.4%20L%2094.6%2086.9%20L%2095.4%2087.9%20L%2095.7%2089.2%20L%2095.5%2090.8%20L%2094.6%2092.2%20L%2093.1%2093.4%20L%2091.1%2093.9%20L%2088.8%2093.7%20L%2086.7%2092.6%20L%2084.9%2090.7%20L%2083.9%2088.1%20L%2083.8%2085.1%20L%2084.9%2082.2%20L%2087.1%2079.6%20L%2090.2%2077.9%20L%2093.9%2077.4%20L%2097.6%2078.2%20L%20101.1%2080.4%20L%20103.6%2083.8%20L%20104.9%2088.1%20L%20104.5%2092.7%20L%20102.6%2097.1%20L%2099.1%20100.6%20L%2094.4%20102.8%20L%2089.0%20103.2%20L%2083.7%20101.7%20L%2079.1%2098.4%20L%2075.8%2093.5%20L%2074.4%2087.5%20L%2075.1%2081.3%20L%2078.1%2075.6%20L%2082.9%2071.1%20L%2089.2%2068.5%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.84%22%20stroke-width%3D%222.4%22%20d%3D%22M%2058.9%2061.0%20L%2058.2%2060.8%20L%2057.5%2060.1%20L%2057.2%2059.1%20L%2057.3%2057.8%20L%2057.9%2056.6%20L%2059.1%2055.6%20L%2060.8%2055.1%20L%2062.7%2055.2%20L%2064.5%2056.2%20L%2066.1%2057.8%20L%2066.9%2060.0%20L%2067.0%2062.6%20L%2066.0%2065.2%20L%2064.1%2067.4%20L%2061.4%2068.8%20L%2058.1%2069.2%20L%2054.8%2068.4%20L%2051.8%2066.4%20L%2049.6%2063.3%20L%2048.6%2059.5%20L%2049.0%2055.4%20L%2050.9%2051.6%20L%2054.2%2048.5%20L%2058.5%2046.7%20L%2063.3%2046.5%20L%2068.0%2048.1%20L%2072.1%2051.3%20L%2074.8%2055.9%20L%2075.8%2061.3%20L%2074.8%2066.9%20L%2071.9%2072.0%20L%2067.2%2075.8%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.8%22%20stroke-width%3D%222.5%22%20d%3D%22M%20119.4%2061.4%20L%20119.0%2062.3%20L%20118.2%2063.0%20L%20117.0%2063.4%20L%20115.6%2063.3%20L%20114.1%2062.6%20L%20113.0%2061.2%20L%20112.3%2059.3%20L%20112.5%2057.2%20L%20113.4%2055.0%20L%20115.2%2053.3%20L%20117.7%2052.2%20L%20120.5%2052.1%20L%20123.4%2053.0%20L%20126.0%2055.0%20L%20127.7%2058.0%20L%20128.3%2061.5%20L%20127.6%2065.2%20L%20125.6%2068.6%20L%20122.3%2071.2%20L%20118.2%2072.6%20L%20113.7%2072.4%20L%20109.4%2070.5%20L%20105.8%2067.2%20L%20103.6%2062.6%20L%20103.0%2057.4%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.8%22%20stroke-width%3D%222.5%22%20d%3D%22M%200.9%2058.4%20L%201.3%2057.6%20L%202.3%2057.0%20L%203.5%2056.8%20L%204.9%2057.1%20L%206.2%2058.1%20L%207.2%2059.6%20L%207.5%2061.6%20L%207.0%2063.7%20L%205.7%2065.6%20L%203.7%2067.1%20L%201.1%2067.8%20L%20-1.8%2067.4%20L%20-4.5%2066.0%20L%20-6.7%2063.6%20L%20-7.9%2060.5%20L%20-8.0%2056.9%20L%20-6.7%2053.3%20L%20-4.1%2050.3%20L%20-0.5%2048.2%20L%203.8%2047.6%20L%208.2%2048.5%20L%2012.2%2051.0%20L%2015.2%2054.8%20L%2016.7%2059.7%20L%2016.4%2064.9%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.78%22%20stroke-width%3D%222.5%22%20d%3D%22M%2058.1%202.5%20L%2057.5%201.7%20L%2057.3%200.6%20L%2057.5%20-0.6%20L%2058.4%20-1.8%20L%2059.8%20-2.6%20L%2061.5%20-2.9%20L%2063.4%20-2.5%20L%2065.2%20-1.3%20L%2066.6%200.6%20L%2067.2%203.0%20L%2066.9%205.7%20L%2065.6%208.2%20L%2063.3%2010.2%20L%2060.3%2011.4%20L%2056.8%2011.4%20L%2053.5%2010.1%20L%2050.6%207.7%20L%2048.7%204.2%20L%2048.1%200.1%20L%2049.1%20-4.2%20L%2051.5%20-8.0%20L%2055.3%20-10.8%20L%2060.0%20-12.1%20L%2065.0%20-11.8%20L%2069.8%20-9.6%22%2F%3E%0A%20%20%20%20%3Cpath%20opacity%3D%220.78%22%20stroke-width%3D%222.5%22%20d%3D%22M%2061.8%20117.1%20L%2062.5%20117.7%20L%2063.0%20118.7%20L%2063.0%20119.9%20L%2062.5%20121.3%20L%2061.3%20122.4%20L%2059.7%20123.2%20L%2057.7%20123.2%20L%2055.7%20122.5%20L%2053.9%20121.0%20L%2052.8%20118.8%20L%2052.4%20116.1%20L%2053.1%20113.3%20L%2054.8%20110.8%20L%2057.5%20109.0%20L%2060.8%20108.1%20L%2064.4%20108.5%20L%2067.8%20110.2%20L%2070.4%20113.2%20L%2072.0%20117.0%20L%2072.1%20121.4%20L%2070.6%20125.6%20L%2067.6%20129.3%20L%2063.4%20131.7%20L%2058.4%20132.6%20L%2053.3%20131.6%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --ct-foil-pattern-size: calc(120px * var(--ct-foil-pattern-scale, 1)) calc(120px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.12;
}

.ct-foil-texture--fireworks {
  --ct-foil-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg stroke='%23ffffff' stroke-linecap='round' fill='none'%3E%3Cg stroke-width='0.9' opacity='0.88'%3E%3Cline x1='18' y1='18' x2='18' y2='4'/%3E%3Cline x1='18' y1='18' x2='28' y2='10'/%3E%3Cline x1='18' y1='18' x2='32' y2='18'/%3E%3Cline x1='18' y1='18' x2='28' y2='26'/%3E%3Cline x1='18' y1='18' x2='18' y2='32'/%3E%3Cline x1='18' y1='18' x2='8' y2='26'/%3E%3Cline x1='18' y1='18' x2='4' y2='18'/%3E%3Cline x1='18' y1='18' x2='8' y2='10'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23ffffaa'/%3E%3C/g%3E%3C/svg%3E");
  --ct-foil-pattern-size: calc(36px * var(--ct-foil-pattern-scale, 1)) calc(36px * var(--ct-foil-pattern-scale, 1));
  --ct-foil-pattern-strength: 1.1;
}

/* -------------------------------------------------------- sparkle dots ---- */

.ct-foil-sparkle {
  --sparkle-base: 8px;
  position: absolute;
  top: var(--sparkle-top, 50%);
  left: var(--sparkle-left, 50%);
  width: calc(var(--sparkle-base) * var(--sparkle-scale, 1) * var(--ct-sparkle-size));
  height: calc(var(--sparkle-base) * var(--sparkle-scale, 1) * var(--ct-sparkle-size));
  transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.45);
  opacity: 0;
  pointer-events: none;
  animation: ct-foil-sparkle-twinkle var(--sparkle-duration, 2.4s) ease-in-out infinite;
  animation-delay: calc(var(--sparkle-delay, 0s) + var(--sparkle-phase, 0) * var(--sparkle-duration, 2.4s));
  will-change: opacity, transform;
}

/* Legacy cross pseudo-elements -- superseded by twinkle SVG mask below. */
.ct-foil-sparkle::before,
.ct-foil-sparkle::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}

/* Twinkle speckles (stars style) -- 4-point concave glints and soft dots. */
.ct-foil-sparkle--twinkle,
.ct-foil-sparkle--twinkle-large {
  --ct-twinkle-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%23fff' d='M50 0 C50 35 50 35 50 60 C50 35 50 35 100 60 C65 60 65 60 50 60 C65 60 65 60 50 120 C50 85 50 85 50 60 C50 85 50 85 0 60 C35 60 35 60 50 60 C35 60 35 60 50 0 Z'/%3E%3C/svg%3E");
  --sparkle-aspect: 1.2;
  background: linear-gradient(
    180deg,
    rgb(var(--ct-sparkle-core) / 1),
    rgb(var(--ct-sparkle-glow) / 0.88)
  );
  -webkit-mask: var(--ct-twinkle-shape) center / contain no-repeat;
  mask: var(--ct-twinkle-shape) center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgb(var(--ct-sparkle-halo) / 0.92))
    drop-shadow(0 0 8px rgb(var(--ct-sparkle-glow) / 0.45));
}

.ct-foil-sparkle--twinkle {
  --sparkle-base: 7px;
  height: calc(var(--sparkle-base) * var(--sparkle-aspect) * var(--sparkle-scale, 1) * var(--ct-sparkle-size));
}

.ct-foil-sparkle--twinkle-dot {
  --sparkle-base: 5px;
  --sparkle-aspect: 1.2;
  height: calc(var(--sparkle-base) * var(--sparkle-aspect) * var(--sparkle-scale, 1) * var(--ct-sparkle-size));
  background:
    radial-gradient(
      circle,
      rgb(var(--ct-sparkle-core) / 1) 0 18%,
      rgb(var(--ct-sparkle-glow) / 0.72) 28%,
      transparent 58%
    );
  filter: drop-shadow(0 0 4px rgb(var(--ct-sparkle-halo) / 0.82))
    drop-shadow(0 0 8px rgb(var(--ct-sparkle-glow) / 0.38));
}

.ct-foil-sparkle--twinkle-large {
  --sparkle-base: 16px;
  height: calc(var(--sparkle-base) * var(--sparkle-aspect) * var(--sparkle-scale, 1) * var(--ct-sparkle-size));
  filter: drop-shadow(0 0 6px rgb(var(--ct-sparkle-halo) / 0.95))
    drop-shadow(0 0 12px rgb(var(--ct-sparkle-glow) / 0.55));
}

.ct-foil-sparkle--heart::before,
.ct-foil-sparkle--heart::after,
.ct-foil-sparkle--swirl::before,
.ct-foil-sparkle--swirl::after,
.ct-foil-sparkle--water::before,
.ct-foil-sparkle--water::after,
.ct-foil-sparkle--shatter::before,
.ct-foil-sparkle--shatter::after {
  opacity: 0;
}

.ct-foil-sparkle--heart {
  --sparkle-base: 13px;
  background: linear-gradient(145deg, rgb(var(--ct-sparkle-core) / 1), rgb(var(--ct-sparkle-glow) / 0.98));
  clip-path: polygon(50% 92%, 4% 36%, 4% 20%, 22% 8%, 50% 32%, 78% 8%, 96% 20%, 96% 36%);
  box-shadow:
    0 0 10px 4px rgb(var(--ct-sparkle-halo) / 0.95),
    0 0 18px 6px rgb(var(--ct-sparkle-glow) / 0.55);
}

.ct-foil-sparkle--swirl {
  --sparkle-base: 12px;
  background: transparent;
  border: 3px solid transparent;
  border-top-color: rgb(var(--ct-sparkle-core) / 0.98);
  border-right-color: rgb(var(--ct-sparkle-glow) / 0.85);
  border-radius: 50%;
  box-shadow:
    0 0 10px 4px rgb(var(--ct-sparkle-halo) / 0.88),
    inset 0 0 4px 1px rgb(var(--ct-sparkle-glow) / 0.45);
  animation:
    ct-foil-sparkle-twinkle var(--sparkle-duration, 2.4s) ease-in-out infinite,
    ct-foil-sparkle-swirl var(--sparkle-duration, 2.4s) linear infinite;
  animation-delay:
    calc(var(--sparkle-delay, 0s) + var(--sparkle-phase, 0) * var(--sparkle-duration, 2.4s)),
    calc(var(--sparkle-delay, 0s) + var(--sparkle-phase, 0) * var(--sparkle-duration, 2.4s));
}

.ct-foil-sparkle--water {
  --sparkle-base: 11px;
  background: transparent;
  border: 2.5px solid rgb(var(--ct-sparkle-glow) / 0.95);
  border-radius: 50%;
  box-shadow:
    0 0 8px 3px rgb(var(--ct-sparkle-glow) / 0.75),
    inset 0 0 6px 2px rgb(var(--ct-sparkle-core) / 0.55);
  animation: ct-foil-sparkle-water var(--sparkle-duration, 2.4s) ease-out infinite;
  animation-delay: calc(var(--sparkle-delay, 0s) + var(--sparkle-phase, 0) * var(--sparkle-duration, 2.4s));
}

.ct-foil-sparkle--shatter {
  --sparkle-base: 13px;
  background: linear-gradient(155deg, rgb(var(--ct-sparkle-core) / 1), rgb(var(--ct-sparkle-glow) / 0.92));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow:
    0 0 10px 4px rgb(var(--ct-sparkle-halo) / 0.92),
    0 0 16px 5px rgb(var(--ct-sparkle-glow) / 0.48);
}

/* Sparkle tint presets -- read by twinkle speckles via --ct-sparkle-* vars. */
.ct-foil-sparkle-tint--rainbow {
  /* Saturated fallbacks so hue-rotate has chroma to shift (white stays white). */
  --ct-sparkle-core: 255 180 120;
  --ct-sparkle-glow: 120 200 255;
  --ct-sparkle-halo: 255 140 220;
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle {
  animation-name: ct-foil-sparkle-twinkle-rainbow;
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--twinkle,
.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--twinkle-large {
  background: linear-gradient(
    180deg,
    hsl(var(--sparkle-hue, 42) 96% 72%),
    hsl(calc(var(--sparkle-hue, 42) + 52) 92% 58%)
  );
  filter: drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 18) 92% 70% / 0.92))
    drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 36) 88% 58% / 0.5));
  animation-name: ct-foil-sparkle-twinkle-rainbow-glint;
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--twinkle-dot {
  background: radial-gradient(
    circle,
    hsl(var(--sparkle-hue, 42) 96% 78%) 0 18%,
    hsl(calc(var(--sparkle-hue, 42) + 40) 90% 62%) 28%,
    transparent 58%
  );
  filter: drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 16) 90% 68% / 0.82))
    drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 32) 86% 56% / 0.42));
  animation-name: ct-foil-sparkle-twinkle-rainbow-dot;
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--heart {
  background: linear-gradient(
    145deg,
    hsl(var(--sparkle-hue, 42) 96% 72%),
    hsl(calc(var(--sparkle-hue, 42) + 48) 92% 58%)
  );
  box-shadow:
    0 0 10px 4px hsl(calc(var(--sparkle-hue, 42) + 20) 90% 68% / 0.95),
    0 0 18px 6px hsl(calc(var(--sparkle-hue, 42) + 36) 88% 58% / 0.55);
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--swirl {
  border-top-color: hsl(var(--sparkle-hue, 42) 94% 68% / 0.98);
  border-right-color: hsl(calc(var(--sparkle-hue, 42) + 44) 90% 58% / 0.85);
  box-shadow:
    0 0 10px 4px hsl(calc(var(--sparkle-hue, 42) + 18) 88% 66% / 0.88),
    inset 0 0 4px 1px hsl(calc(var(--sparkle-hue, 42) + 32) 86% 56% / 0.45);
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--water {
  border-color: hsl(calc(var(--sparkle-hue, 42) + 36) 90% 62% / 0.95);
  box-shadow:
    0 0 8px 3px hsl(calc(var(--sparkle-hue, 42) + 28) 88% 58% / 0.75),
    inset 0 0 6px 2px hsl(var(--sparkle-hue, 42) 94% 68% / 0.55);
}

.ct-foil-sparkle-tint--rainbow .ct-foil-sparkle--shatter {
  background: linear-gradient(
    155deg,
    hsl(var(--sparkle-hue, 42) 96% 72%),
    hsl(calc(var(--sparkle-hue, 42) + 48) 92% 58%)
  );
  box-shadow:
    0 0 10px 4px hsl(calc(var(--sparkle-hue, 42) + 20) 90% 68% / 0.92),
    0 0 16px 5px hsl(calc(var(--sparkle-hue, 42) + 36) 88% 58% / 0.48);
}

.ct-foil-sparkle-tint--gold {
  --ct-sparkle-core: 255 230 140;
  --ct-sparkle-glow: 255 190 40;
  --ct-sparkle-halo: 255 220 120;
}

.ct-foil-sparkle-tint--silver {
  --ct-sparkle-core: 240 248 255;
  --ct-sparkle-glow: 175 195 225;
  --ct-sparkle-halo: 210 225 245;
}

.ct-foil-sparkle-tint--white {
  --ct-sparkle-core: 255 255 255;
  --ct-sparkle-glow: 238 242 248;
  --ct-sparkle-halo: 255 255 255;
}

.ct-foil-sparkle-tint--pink {
  --ct-sparkle-core: 255 210 230;
  --ct-sparkle-glow: 255 90 190;
  --ct-sparkle-halo: 255 150 200;
}

.ct-foil-sparkle-tint--aqua {
  --ct-sparkle-core: 190 250 255;
  --ct-sparkle-glow: 55 195 185;
  --ct-sparkle-halo: 120 230 240;
}

.ct-foil-sparkle-tint--theme {
  --ct-sparkle-core: 255 255 255;
  --ct-sparkle-glow: 200 255 230;
  --ct-sparkle-halo: 255 255 255;
}

.ct-foil-sparkle-tint--theme .ct-foil-sparkle--twinkle,
.ct-foil-sparkle-tint--theme .ct-foil-sparkle--twinkle-large {
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 1),
    color-mix(in srgb, var(--ct-accent, #3ecf8e) 62%, white)
  );
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ct-accent, #3ecf8e) 48%, white))
    drop-shadow(0 0 8px color-mix(in srgb, var(--ct-accent, #3ecf8e) 32%, transparent));
}

.ct-foil-sparkle-tint--theme .ct-foil-sparkle--twinkle-dot {
  background: radial-gradient(
    circle,
    rgb(255 255 255 / 1) 0 18%,
    color-mix(in srgb, var(--ct-accent, #3ecf8e) 55%, white) 28%,
    transparent 58%
  );
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ct-accent, #3ecf8e) 42%, white))
    drop-shadow(0 0 8px color-mix(in srgb, var(--ct-accent, #3ecf8e) 28%, transparent));
}

@keyframes ct-foil-sparkle-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.3);
  }

  8% {
    opacity: calc(0.85 * var(--ct-foil-sparkle-intensity, 1));
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(1.05);
  }

  22% {
    opacity: calc(0.95 * var(--ct-foil-sparkle-intensity, 1));
  }

  38% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.45);
  }
}

@keyframes ct-foil-sparkle-twinkle-rainbow {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.3);
    filter: hue-rotate(0deg) saturate(1.15);
  }

  8% {
    opacity: calc(0.85 * var(--ct-foil-sparkle-intensity, 1));
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(1.05);
    filter: hue-rotate(0deg) saturate(1.25);
  }

  22% {
    opacity: calc(0.95 * var(--ct-foil-sparkle-intensity, 1));
    filter: hue-rotate(72deg) saturate(1.35);
  }

  38% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.45);
    filter: hue-rotate(144deg) saturate(1.15);
  }
}

@keyframes ct-foil-sparkle-twinkle-rainbow-glint {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.3);
    filter: hue-rotate(0deg) saturate(1.15)
      drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 18) 92% 70% / 0.92))
      drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 36) 88% 58% / 0.5));
  }

  8% {
    opacity: calc(0.85 * var(--ct-foil-sparkle-intensity, 1));
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(1.05);
    filter: hue-rotate(0deg) saturate(1.25)
      drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 18) 92% 70% / 0.92))
      drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 36) 88% 58% / 0.5));
  }

  22% {
    opacity: calc(0.95 * var(--ct-foil-sparkle-intensity, 1));
    filter: hue-rotate(72deg) saturate(1.35)
      drop-shadow(0 0 5px hsl(calc(var(--sparkle-hue, 42) + 90) 92% 68% / 0.95))
      drop-shadow(0 0 10px hsl(calc(var(--sparkle-hue, 42) + 108) 88% 58% / 0.55));
  }

  38% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.45);
    filter: hue-rotate(144deg) saturate(1.15)
      drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 162) 90% 66% / 0.88))
      drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 180) 86% 56% / 0.48));
  }
}

@keyframes ct-foil-sparkle-twinkle-rainbow-dot {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.3);
    filter: hue-rotate(0deg) saturate(1.15)
      drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 16) 90% 68% / 0.82))
      drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 32) 86% 56% / 0.42));
  }

  8% {
    opacity: calc(0.85 * var(--ct-foil-sparkle-intensity, 1));
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(1.05);
    filter: hue-rotate(0deg) saturate(1.25)
      drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 16) 90% 68% / 0.82))
      drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 32) 86% 56% / 0.42));
  }

  22% {
    opacity: calc(0.95 * var(--ct-foil-sparkle-intensity, 1));
    filter: hue-rotate(72deg) saturate(1.35)
      drop-shadow(0 0 5px hsl(calc(var(--sparkle-hue, 42) + 88) 90% 66% / 0.88))
      drop-shadow(0 0 10px hsl(calc(var(--sparkle-hue, 42) + 104) 86% 56% / 0.48));
  }

  38% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.45);
    filter: hue-rotate(144deg) saturate(1.15)
      drop-shadow(0 0 4px hsl(calc(var(--sparkle-hue, 42) + 160) 88% 64% / 0.8))
      drop-shadow(0 0 8px hsl(calc(var(--sparkle-hue, 42) + 176) 84% 54% / 0.4));
  }
}

@keyframes ct-foil-sparkle-swirl {
  from {
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.55);
  }

  to {
    transform: translate(-50%, -50%) rotate(calc(var(--sparkle-rotate, 45deg) + 360deg)) scale(1.05);
  }
}

@keyframes ct-foil-sparkle-water {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.35);
    border-width: 3.5px;
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(2.4);
    border-width: 1px;
  }
}

/* ------------------------------------------------------ context tuning ---- */
/*
 * One engine, three intensities: dense galleries stay restrained, the drawer is
 * livelier, and the enlarged lightbox card is the showcase.
 */

.ct-foil-preview__frame[data-ct-foil] {
  --ct-foil-intensity: 0.7;
}

.ct-foil-preview-lightbox__card .ct-foil-preview__frame[data-ct-foil] {
  --ct-foil-intensity: 0.92;
}

.ct-drawer__art-frame--foil.ct-foil-effect--rich .ct-foil,
.ct-foil-preview__frame--large .ct-foil {
  --ct-sparkle-size: calc(1.4 * var(--ct-sparkle-user-scale, 1));
}

/* Motif prints scale up on showcase cards so the shapes stay readable. */
.ct-foil-preview__frame--large .ct-foil-texture--dots {
  --ct-foil-pattern-size: calc(15px * var(--ct-foil-pattern-scale, 1)) calc(15px * var(--ct-foil-pattern-scale, 1));
}

.ct-foil-preview__frame--large .ct-foil-texture--hearts {
  --ct-foil-pattern-size: calc(30px * var(--ct-foil-pattern-scale, 1)) calc(30px * var(--ct-foil-pattern-scale, 1));
}

.ct-foil-preview__frame--large .ct-foil-texture--stars {
  --ct-foil-pattern-size: calc(48px * var(--ct-foil-pattern-scale, 1)) calc(48px * var(--ct-foil-pattern-scale, 1));
}

.ct-foil-preview__frame--large .ct-foil-texture--fire {
  --ct-foil-pattern-size: calc(54px * var(--ct-foil-pattern-scale, 1)) calc(63px * var(--ct-foil-pattern-scale, 1));
}

.ct-foil-preview__frame--large .ct-foil-texture--cosmic {
  --ct-foil-pattern-size: calc(96px * var(--ct-foil-pattern-scale, 1)) calc(96px * var(--ct-foil-pattern-scale, 1));
}

.ct-foil-preview__frame--large .ct-foil-texture--swirl {
  --ct-foil-pattern-size: calc(180px * var(--ct-foil-pattern-scale, 1)) calc(180px * var(--ct-foil-pattern-scale, 1));
}

/*
 * Missing tiles: one filter on the art stack greys card, foil overlay and border
 * together. Partial child filters left colour bleeding through the rim.
 */
.ct-tile--missing .ct-tile__art,
.ct-foil-preview-panel__tile--missing .ct-foil-preview__art,
.ct-foil-preview-lightbox--missing .ct-foil-preview__art {
  filter: grayscale(1) brightness(0.55);
}

.ct-tile--missing .ct-tile__art-frame--foil-border::before,
.ct-foil-preview-panel__tile--missing .ct-tile__art-frame--foil-border::before,
.ct-foil-preview-lightbox--missing .ct-tile__art-frame--foil-border::before {
  animation: none;
  box-shadow: none;
}

/*
 * In-transit tiles breathe on the art stack so card, foil overlay and border
 * pulse together. Low amplitude, slow cycle -- "on the way" without shouting.
 */
@keyframes ct-in-transit-breathe-missing {
  0%,
  100% {
    filter: grayscale(1) brightness(0.55);
  }

  50% {
    filter: grayscale(0.42) brightness(0.78);
  }
}

@keyframes ct-in-transit-breathe-owned {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

.ct-tile--in-transit.ct-tile--missing .ct-tile__art {
  animation: ct-in-transit-breathe-missing 3.2s ease-in-out infinite;
}

.ct-tile--in-transit.ct-tile--owned .ct-tile__art {
  animation: ct-in-transit-breathe-owned 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ct-tile--in-transit.ct-tile--missing .ct-tile__art {
    animation: none;
    filter: grayscale(0.62) brightness(0.72);
  }

  .ct-tile--in-transit.ct-tile--owned .ct-tile__art {
    animation: none;
    filter: brightness(1.04);
  }
}

.ct-reduced-motion .ct-tile--in-transit.ct-tile--missing .ct-tile__art {
  animation: none;
  filter: grayscale(0.62) brightness(0.72);
}

.ct-reduced-motion .ct-tile--in-transit.ct-tile--owned .ct-tile__art {
  animation: none;
  filter: brightness(1.04);
}

/* Scrolled out of view: stop painting. */
.ct-foil--offscreen .ct-foil__layer,
.ct-foil--offscreen .ct-foil__layer--sweep::before,
.ct-foil--offscreen .ct-foil-sparkle {
  animation-play-state: paused;
}

/* -------------------------------------------------------- reduced motion -- */
/*
 * Pointer tracking never binds under reduced motion, so --ct-card-opacity stays
 * at 0 and every layer settles on its resting value. Only the loops need to go.
 */

.ct-reduced-motion .ct-tile__art-frame--foil-border::before,
.ct-reduced-motion .ct-drawer__art-frame.ct-tile__art-frame--foil-border::before,
.ct-reduced-motion .ct-foil-preview__art.ct-tile__art-frame--foil-border::before,
.ct-reduced-motion .ct-foil__layer--sweep::before {
  animation: none;
  transition: none;
}

.ct-reduced-motion .ct-foil-preview--tilt .ct-foil-preview__frame,
.ct-reduced-motion .ct-drawer__art-expand .ct-drawer__art-frame {
  transform: none;
}

.ct-reduced-motion .ct-foil__layer--sweep::before {
  transform: translateX(90%) rotate(18deg);
}

.ct-reduced-motion .ct-foil-sparkle {
  animation: none;
  opacity: 0;
}

.ct-reduced-motion .ct-foil-sparkle:nth-child(3n + 1),
.ct-reduced-motion .ct-foil-sparkle:nth-child(5n + 2) {
  opacity: 0.72;
  transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .ct-tile__art-frame--foil-border::before,
  .ct-drawer__art-frame.ct-tile__art-frame--foil-border::before,
  .ct-foil-preview__art.ct-tile__art-frame--foil-border::before,
  .ct-foil__layer--sweep::before {
    animation: none;
    transition: none;
  }

  .ct-foil-preview--tilt .ct-foil-preview__frame,
  .ct-drawer__art-expand .ct-drawer__art-frame {
    transform: none;
  }

  .ct-foil__layer--sweep::before {
    transform: translateX(90%) rotate(18deg);
  }

  .ct-foil-sparkle {
    animation: none;
    opacity: 0;
  }

  .ct-foil-sparkle:nth-child(3n + 1),
  .ct-foil-sparkle:nth-child(5n + 2) {
    opacity: 0.72;
    transform: translate(-50%, -50%) rotate(var(--sparkle-rotate, 45deg)) scale(0.85);
  }
}

/* ------------------------------------------------ settings: foil panel ---- */

.ct-foil-settings {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.ct-foil-settings legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 1rem;
}

.ct-foil-settings__intro {
  margin: 0 0 1rem;
  max-width: 52rem;
}

.ct-foil-settings__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 760px) {
  .ct-foil-settings__layout {
    grid-template-columns: 1fr;
  }
}

.ct-foil-settings__toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-foil-block {
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}

.ct-foil-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.ct-foil-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
}

.ct-foil-toggle input {
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
}

.ct-foil-toggle__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ct-foil-toggle__title {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text);
}

.ct-foil-toggle__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 400;
}

.ct-foil-subcontrols {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.55rem 0 0 1.65rem;
  padding: 0.55rem 0 0 0.75rem;
  border-left: 2px solid var(--border);
}

.ct-foil-subcontrols.is-collapsed {
  display: none;
}

.ct-foil-subcontrols-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
}

@media (max-width: 560px) {
  .ct-foil-subcontrols-grid {
    grid-template-columns: 1fr;
  }
}

.ct-foil-control-row {
  display: grid;
  grid-template-columns: minmax(5.25rem, 6.75rem) minmax(0, 1fr);
  gap: 0.45rem 0.65rem;
  align-items: center;
}

.ct-foil-control-row__label {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.25;
}

.ct-foil-control-row__field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.ct-foil-control-row__field .ct-select {
  width: 100%;
  min-width: 0;
}

.ct-foil-control-row__field .ct-foil-swatch-field {
  width: 100%;
  min-width: 0;
}

.ct-foil-control-row--slider .ct-foil-control-row__field {
  gap: 0.5rem;
}

.ct-foil-control-row--slider .ct-range {
  flex: 1;
  min-width: 0;
}

.ct-foil-intensity__value {
  flex: 0 0 auto;
  min-width: 3.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.ct-foil-preview {
  position: sticky;
  top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 40%), var(--card);
}

.ct-foil-preview-panel__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.ct-foil-preview-panel__tiles--landscape {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ct-foil-preview-panel__source {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.ct-foil-preview-panel__source-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ct-foil-preview-panel__source-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.ct-foil-preview-panel__source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ct-foil-preview-panel__tiles--compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-foil-preview-panel__tile {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: zoom-in;
}

.ct-foil-preview-panel__tile:hover {
  border-color: var(--border-hover);
}

.ct-foil-preview-panel__tile:focus-visible {
  outline: 2px solid var(--ct-accent);
  outline-offset: 2px;
}

.ct-foil-preview-panel__tile-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.ct-foil-preview__frame {
  position: relative;
  border-radius: var(--ct-card-art-radius);
}

.ct-foil-preview__art {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ct-card-art-radius);
  background: var(--card);
}

.ct-foil-preview__art:has(.ct-foil),
.ct-foil-preview__art.ct-tile__art-frame--foil-border {
  overflow: visible;
}

.ct-foil-preview__art img {
  display: block;
  width: 100%;
  height: auto;
}

.ct-foil-preview-panel__texture-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.ct-foil-preview-panel__layers {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.ct-foil-preview-panel__layers-label {
  font-weight: 600;
  color: var(--text);
}

.ct-foil-preview-panel__hint {
  margin: 0.35rem 0 0;
}

.ct-foil-preview-panel__enlarge-hint {
  margin: 0.5rem 0 0;
  text-align: center;
}

.ct-foil-preview__frame--large {
  width: min(380px, 88vw);
  margin: 0 auto;
}

/* Landscape art sets its own aspect; it just needs the full panel width. */
.ct-foil-preview__frame--large.ct-foil-preview__frame--landscape,
.ct-foil-preview__frame--large.ct-foil-preview__frame--battlefield {
  width: 100%;
}

/* Battlefields read landscape; portrait scans are rotated into this same box. */
.ct-foil-preview__frame--battlefield .ct-foil-preview__art {
  aspect-ratio: var(--ct-bf-aspect);
  overflow: hidden;
}

.ct-foil-preview__frame--battlefield .ct-foil-preview__art img.ct-bf-oriented,
.ct-foil-preview__frame--battlefield .ct-foil-preview__art img[style*='position: absolute'],
.ct-foil-preview__frame--battlefield .ct-foil-preview__art img[style*='position:absolute'] {
  object-fit: unset;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  border-radius: 0;
}

.ct-foil-preview__frame--battlefield .ct-foil-preview__art img:not(.ct-bf-oriented):not([style*='position']) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -------------------------------------------------- preview lightbox ----- */

.ct-foil-preview-lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  font-family: var(--ct-font);
  color: var(--text);
}

.ct-foil-preview-lightbox__dialog {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.ct-foil-preview-lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / 0.82);
  cursor: pointer;
}

.ct-foil-preview-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(420px, 100%);
  max-height: calc(100vh - 2.5rem);
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--ct-shadow-lg);
  overflow-x: hidden;
  overflow-y: auto;
  animation: ct-pop-in 0.28s cubic-bezier(0.2, 1.2, 0.45, 1);
}

.ct-foil-preview-lightbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.ct-foil-preview-lightbox__title {
  margin: 0;
  font-size: 0.95rem;
}

.ct-foil-preview-lightbox__card {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  padding: 0.65rem 0.5rem;
}

/* 88vw is for inline enlarged previews; lightbox width is panel-bound. */
.ct-foil-preview-lightbox__card .ct-foil-preview__frame--large:not(.ct-foil-preview__frame--landscape) {
  width: min(380px, 100%);
}

/* Masked regions stay subtle at rest; pointer cone reveals chroma on interaction. */
.ct-foil--masked .ct-foil__layer--texture,
.ct-foil--title-strip .ct-foil__layer--texture,
.ct-foil--masked-stack .ct-foil__bg-finish .ct-foil__layer--texture,
.ct-foil--masked-stack .ct-foil__masked-finish .ct-foil__layer--texture {
  opacity: calc(
    (0.07 + var(--ct-card-opacity, 0) * 0.48) *
    var(--ct-foil-intensity) *
    var(--ct-foil-texture-intensity, 1) *
    var(--ct-foil-pattern-strength)
  );
}

.ct-foil--masked .ct-foil__layer--shine,
.ct-foil--title-strip .ct-foil__layer--shine,
.ct-foil--masked-stack .ct-foil__bg-finish .ct-foil__layer--shine,
.ct-foil--masked-stack .ct-foil__masked-finish .ct-foil__layer--shine {
  opacity: calc(
    (0.06 + var(--ct-card-opacity, 0) * 0.34) *
    var(--ct-foil-intensity) *
    var(--ct-foil-sheen-intensity, 1)
  );
}

.ct-foil-preview-lightbox__card .ct-foil-preview__art.ct-tile__art-frame--foil-border {
  box-shadow: none;
}

.ct-foil-preview-lightbox__hint {
  margin: 0;
  text-align: center;
}

body.ct-foil-lightbox-open {
  overflow: hidden;
}

/* Mask tuning lightbox -- enlarged compare + synchronized zoom/pan. */
.ct-foil-preview-lightbox__panel--mask-compare {
  width: min(920px, 100%);
}

.ct-foil-mask-compare--lightbox {
  gap: 1rem;
}

.ct-foil-mask-compare--lightbox .ct-foil-mask-compare__panel .ct-foil-preview__frame {
  max-width: none;
  width: min(380px, 42vw);
}

.ct-foil-mask-compare__zoom-viewport {
  width: 100%;
  max-height: min(70vh, 640px);
  overflow: hidden;
  touch-action: none;
  cursor: default;
  border-radius: var(--radius-md, 8px);
  background: rgb(0 0 0 / 0.18);
}

.ct-foil-mask-compare__zoom-viewport--zoomed {
  cursor: grab;
}

.ct-foil-mask-compare__zoom-viewport.is-dragging {
  cursor: grabbing;
}

.ct-foil-mask-compare__zoom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.5rem;
  transform-origin: center center;
  will-change: transform;
}

.ct-foil-mask-compare__zoom-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
}

.ct-foil-mask-compare__zoom-label {
  min-width: 3.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  color: var(--ct-muted, rgb(160 168 180));
}

@media (max-width: 720px) {
  .ct-foil-mask-compare--lightbox {
    grid-template-columns: 1fr;
  }

  .ct-foil-mask-compare--lightbox .ct-foil-mask-compare__panel .ct-foil-preview__frame {
    width: min(320px, 100%);
  }
}