/* ================================= */
/* CARD BORDER EFFECTS               */
/* ================================= */

/* Kill the outer .card-preview-canvas wrapper border + glow — it's NOT the card face,
   it's a structural wrapper that shows through at rounded corners */
.card-preview-zone > .card-preview-canvas {
  border: none !important;
  background: none !important;
}
.card-preview-zone > .card-preview-canvas::before {
  display: none !important;
}

/* No Border — strip palette border AND base ::before glow border */
.card-preview-canvas.border-effect-none {
  border: none !important;
}
.card-preview-canvas.border-effect-none::before {
  opacity: 0 !important;
}

/* Suppress base ::before glow when ANY border effect is active so it doesn't bleed through.
   animation: none is required because the cardGlow keyframes set opacity per-frame, overriding static opacity. */
.card-preview-canvas.border-effect-none::before,
.card-preview-canvas.rarity-style-double::before,
.card-preview-canvas.rarity-style-border::before,
.card-preview-canvas.rarity-style-inset::before,
.card-preview-canvas.rarity-style-thick::before,
.card-preview-canvas.rarity-style-dashed::before,
.card-preview-canvas.rarity-style-ridge::before,
.card-preview-canvas.rarity-style-beveled::before,
.card-preview-canvas.rarity-style-corners::before {
  opacity: 0 !important;
  animation: none !important;
  display: none !important;
}

/* Double Line — classic tight double-line border */
.card-preview-canvas.rarity-style-double {
  border: 4px double var(--card-accent, #00d4ff) !important;
}

/* Inset Border — outer + inner border with dark gap between, picture frame matting */
.card-preview-canvas.rarity-style-inset {
  border: 2px solid var(--card-accent, #00d4ff) !important;
  outline: 2px solid var(--card-accent, #00d4ff);
  outline-offset: -8px;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.4);
}

/* Rounded Thick — extra chunky rounded border */
.card-preview-canvas.rarity-style-thick {
  border: 5px solid var(--card-accent, #00d4ff) !important;
  border-radius: 1.25rem;
}

/* Dashed — dashed rarity-colored border */
.card-preview-canvas.rarity-style-dashed {
  border: 3px dashed var(--card-accent, #00d4ff) !important;
}

/* Ridge — 3D ridged border with grooved inner line */
.card-preview-canvas.rarity-style-ridge {
  border: 5px ridge var(--card-accent, #00d4ff) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    inset 0 0 0 3px color-mix(in srgb, var(--card-accent, #00d4ff) 20%, transparent),
    0 0 0 1px rgba(0,0,0,0.3);
}

/* Beveled — strong raised 3D edge with accent-colored directional lighting */
.card-preview-canvas.rarity-style-beveled {
  border-width: 6px !important;
  border-style: solid !important;
  border-top-color: var(--card-accent, #00d4ff) !important;
  border-left-color: color-mix(in srgb, var(--card-accent, #00d4ff) 70%, white) !important;
  border-right-color: color-mix(in srgb, var(--card-accent, #00d4ff) 30%, black) !important;
  border-bottom-color: rgba(0,0,0,0.7) !important;
  box-shadow:
    inset 3px 3px 6px rgba(255,255,255,0.25),
    inset -3px -3px 6px rgba(0,0,0,0.5),
    2px 2px 4px rgba(0,0,0,0.5);
}

/* Frame — inner border + spaced outer ring with lighter contrast */
.card-preview-canvas.rarity-style-corners {
  border: 2px solid var(--card-accent, #00d4ff) !important;
  outline: 3px solid color-mix(in srgb, var(--card-accent, #00d4ff) 50%, white);
  outline-offset: 5px;
  border-radius: 1rem;
}

/* Animated Border — color-cycling border + pulsing outline */
.card-preview-canvas.rarity-style-animated-border {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--card-accent, #00d4ff);
  outline: 2px solid transparent;
  outline-offset: 0px;
  animation: border-animate 3s ease-in-out infinite !important;
}

@keyframes border-animate {
  0%, 100% {
    border-color: var(--card-accent, #00d4ff);
    outline-color: transparent;
    outline-offset: 0px;
  }
  25% {
    border-color: rgba(255, 255, 255, 0.6);
    outline-color: var(--card-accent, #00d4ff);
    outline-offset: 3px;
  }
  50% {
    border-color: var(--card-accent, #00d4ff);
    outline-color: rgba(255, 255, 255, 0.3);
    outline-offset: 5px;
  }
  75% {
    border-color: rgba(255, 255, 255, 0.6);
    outline-color: var(--card-accent, #00d4ff);
    outline-offset: 3px;
  }
}