/* ════════════════════════════════════════════════════════════════════
   Token Clash — Card Frame System (vector / SVG-based)
   Wraps card art with a rarity-themed SVG frame overlay + animated
   shine effect for Legendary.

   Usage:
     <div class="card-frame rarity-legendary">
       <img class="card-frame-art" src="..." />
     </div>

   Frames live in /img/frames/svg/frame-{common,rare,epic,legendary}.svg
   (viewBox 600×800, 30px inset = 5% all-around metal border, v1 hex-corners)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base frame wrapper ─────────────────────────────────────────── */

.card-frame {
  position: relative;
  display: inline-block;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 360px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-frame:hover {
  transform: translateY(-3px) scale(1.02);
}

/* Card art = base layer, fills entire container.
   Frame PNG = overlay on top, with transparent center showing art
   through, and opaque metal border covering the outer ~15% of the art.
   No per-rarity positioning needed — frames are uniform overlays. */
.card-frame-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Frame PNG overlay = top layer */
.card-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

/* ── COMMON ─────────────────────────────────────────────────────── */

.card-frame.rarity-common::before {
  background-image: url("/img/frames/svg/frame-common.svg");
}

.card-frame.rarity-common {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.card-frame.rarity-common:hover {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(180, 180, 180, 0.2);
}

/* ── RARE — cyan tech glow ──────────────────────────────────────── */

.card-frame.rarity-rare::before {
  background-image: url("/img/frames/svg/frame-rare.svg");
}

/* Rare = static, no animation — frame SVG itself carries the rarity */
.card-frame.rarity-rare {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.card-frame.rarity-rare:hover {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(74, 158, 255, 0.35);
}

/* ── Epic helper: scope sparkle visibility to Epic-rarity cards only.
   Game markup includes 14 .sparkle children inside .card-frame.rarity-epic.
   The .sparkle class itself defines the twinkle animation. */
.card-frame.rarity-epic .sparkle {
  /* sparkle styling defined globally below */
}

/* ── EPIC — purple energy pulse ─────────────────────────────────── */

.card-frame.rarity-epic::before {
  background-image: url("/img/frames/svg/frame-epic.svg");
}

/* Epic — no outer glow, animation comes from 14 sparkle children
   (DENSE pattern). Game markup must include 14 <span class="sparkle sN">
   children with class names s1 through s14. */
.card-frame.rarity-epic {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.card-frame.rarity-epic:hover {
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.7),
    0 0 22px rgba(163, 53, 238, 0.45);
}

/* ── LEGENDARY — animated gold shimmer + sweep ──────────────────── */

.card-frame.rarity-legendary::before {
  background-image: url("/img/frames/svg/frame-legendary.svg");
  /* Frame itself pulses in brightness so the gold actually shimmers */
  animation: legendary-frame-shimmer 3.8s ease-in-out infinite;
}

/* Legendary — NO outer glow halo (game-board-friendly). Three layered
   effects on the card surface itself:
     1. Frame metal shimmer (brightness/saturate cycle on ::before)
     2. Single diagonal shine sweep (::after)
     3. Conic-gradient holographic foil rotation (.card-foil child)
   Game markup must include <div class="card-foil"></div> as child. */
.card-frame.rarity-legendary {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
}

.card-frame.rarity-legendary:hover {
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(255, 174, 51, 0.4);
}

/* Gold frame texture pulses in brightness/saturation */
@keyframes legendary-frame-shimmer {
  0%, 100% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 4px rgba(255, 200, 80, 0.2));
  }
  50% {
    filter: brightness(1.18) saturate(1.18) drop-shadow(0 0 12px rgba(255, 220, 100, 0.55));
  }
}

/* Conic foil — auto-activates anywhere a .card-foil element is placed
   inside ANY card container (frame-preview, collection-card, deck-card-mini,
   battle-card, etc). JS renderers only add the .card-foil child to
   Legendary cards, so this universal rule is safe. */
.card-foil {
  opacity: 1;
  background: conic-gradient(
    from 0deg,
    rgba(255, 200, 100, 0.22),
    rgba(255, 220, 150, 0.20),
    rgba(255, 180, 220, 0.16),
    rgba(180, 220, 255, 0.12),
    rgba(150, 255, 200, 0.14),
    rgba(255, 240, 180, 0.22),
    rgba(255, 200, 100, 0.22)
  );
  animation: conic-foil-rotate 16s linear infinite;
}

/* Single diagonal shine-sweep — bright band of light slides across
   the frame, like sunlight catching polished gold. */
.card-frame.rarity-legendary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 245, 200, 0.0) 42%,
    rgba(255, 245, 200, 0.35) 50%,
    rgba(255, 245, 200, 0.0) 58%,
    transparent 65%
  );
  background-size: 200% 200%;
  background-position: -100% -100%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
  animation: legendary-shine-sweep 5s ease-in-out infinite;
}

@keyframes legendary-shine-sweep {
  0%   { background-position: -100% -100%; opacity: 0; }
  20%  { opacity: 0.6; }
  50%  { background-position: 100% 100%; opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { background-position: 200% 200%; opacity: 0; }
}

/* ── CONIC FOIL element (used by Legendary) ──────────────────── */
.card-foil {
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes conic-foil-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── EPIC SPARKLE — 14 staggered twinkling dots across card surface.
   Each child .sparkle has unique position + animation-delay.
   Tiny white dots with purple-magenta glow. No outer glow on frame. */
.sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 4px 1px rgba(220, 180, 255, 0.85),
    0 0 10px 2px rgba(185, 77, 232, 0.45);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: sparkle-twinkle 3s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1.5); }
}

.sparkle.s1  { top: 18%; left: 22%; animation-delay: 0s; }
.sparkle.s2  { top: 35%; left: 75%; animation-delay: 0.4s; }
.sparkle.s3  { top: 60%; left: 28%; animation-delay: 0.8s; }
.sparkle.s4  { top: 80%; left: 60%; animation-delay: 1.2s; }
.sparkle.s5  { top: 25%; left: 55%; animation-delay: 1.6s; }
.sparkle.s6  { top: 70%; left: 82%; animation-delay: 2.0s; }
.sparkle.s7  { top: 45%; left: 18%; animation-delay: 2.4s; }
.sparkle.s8  { top: 85%; left: 35%; animation-delay: 2.8s; }
/* Additional positions for DENSE variant */
.sparkle.s9  { top: 12%; left: 48%; animation-delay: 0.2s; }
.sparkle.s10 { top: 30%; left: 88%; animation-delay: 0.6s; }
.sparkle.s11 { top: 50%; left: 60%; animation-delay: 1.0s; }
.sparkle.s12 { top: 65%; left: 38%; animation-delay: 1.4s; }
.sparkle.s13 { top: 78%; left: 78%; animation-delay: 1.8s; }
.sparkle.s14 { top: 92%; left: 14%; animation-delay: 2.2s; }


/* ════════════════════════════════════════════════════════════════════
   UNIVERSAL FRAME OVERLAY (.card-frame-overlay)
   ───────────────────────────────────────────────────────────────────
   Inject as a child of any card container — collection-card,
   deck-card-mini, battle-card, library-card, card-detail-image —
   to apply the SVG frame system game-wide.

   Markup contract: <div class="card-frame-overlay rarity-{rarity}"></div>
   sibling of the .card-bg-art img inside the card container. The card
   container must have:
     position: relative; overflow: hidden; aspect-ratio: 3 / 4;
   (all existing card classes already do).

   z-index: 2 — sits above the card art (z-index 1) but below text/badges.
   Sparkle dots and .card-foil are added separately above this overlay.
   ═══════════════════════════════════════════════════════════════════ */

.card-frame-overlay {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.card-frame-overlay.rarity-common {
    background-image: url("/img/frames/svg/frame-common.svg");
}

.card-frame-overlay.rarity-rare {
    background-image: url("/img/frames/svg/frame-rare.svg");
}

.card-frame-overlay.rarity-epic {
    background-image: url("/img/frames/svg/frame-epic.svg");
}

.card-frame-overlay.rarity-legendary {
    background-image: url("/img/frames/svg/frame-legendary.svg");
    animation: legendary-frame-shimmer 3.8s ease-in-out infinite;
}

/* Legendary diagonal shine sweep on the overlay div (mirrors original
   .card-frame.rarity-legendary::after rule for game-wide cards) */
.card-frame-overlay.rarity-legendary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 245, 200, 0.0) 42%,
        rgba(255, 245, 200, 0.35) 50%,
        rgba(255, 245, 200, 0.0) 58%,
        transparent 65%
    );
    background-size: 200% 200%;
    background-position: -100% -100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: legendary-shine-sweep 5s ease-in-out infinite;
}

/* Reduced motion: kill animations on the universal overlay too */
@media (prefers-reduced-motion: reduce) {
    .card-frame-overlay.rarity-legendary,
    .card-frame-overlay.rarity-legendary::after {
        animation: none;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .card-frame {
    border-radius: 10px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   LEGACY EFFECT CLEANUP
   ───────────────────────────────────────────────────────────────────
   Disable pre-frame-system rarity overlays/animations that now visually
   conflict with the SVG frame system. The SVG frame + .card-frame-overlay
   shimmer + .card-foil + .sparkle children handle ALL rarity differentiation
   game-wide now — the legacy ::after inner-borders, ::before shimmer-beams,
   border-pulse animations, and outer-glow box-shadows below were earlier
   placeholder simulations of what cardFrame.css now does properly.

   We use !important to override the legacy rules without editing the
   5 separate files (components.css, cardlibrary.css, deck.css, forge.css)
   where they live. Kept selectors so .starter::after / .off-chain::after
   special overlays continue to work.
   ═══════════════════════════════════════════════════════════════════ */

/* Kill legacy rarity-color inner-border placeholders (::after) */
.collection-card.rare::after,
.collection-card.epic::after,
.collection-card.legendary::after,
.library-card.rare::after,
.library-card.epic::after,
.library-card.legendary::after,
.deck-card-mini.rare::after,
.deck-card-mini.epic::after,
.deck-card-mini.legendary::after,
.forge-card.rare::after,
.forge-card.epic::after,
.forge-card.legendary::after,
.game-card.legendary::after {
    display: none !important;
}

/* Kill legacy legendary shimmer-beam (::before) — superseded by
   .card-frame-overlay.rarity-legendary shine-sweep */
.collection-card.legendary::before,
.library-card.legendary::before,
.game-card.legendary::before,
.deck-card-mini.legendary::before {
    display: none !important;
}

/* Kill legacy base-state rarity effects (frame SVG carries differentiation):
   - animations (legendaryGlow, epicPulse, legendaryBorderPulse)
   - outer box-shadow halos
   - rarity-color border-color (was: gold/purple/blue/grey 2px solid frame)
   The SVG frame is the sole rarity indicator now. */
.collection-card.common,
.collection-card.rare,
.collection-card.epic,
.collection-card.legendary,
.library-card.common,
.library-card.rare,
.library-card.epic,
.library-card.legendary,
.deck-card-mini.common,
.deck-card-mini.rare,
.deck-card-mini.epic,
.deck-card-mini.legendary,
.forge-card.common,
.forge-card.rare,
.forge-card.epic,
.forge-card.legendary,
.game-card.common,
.game-card.rare,
.game-card.epic,
.game-card.legendary,
.battle-card.rarity-common,
.battle-card.rarity-rare,
.battle-card.rarity-epic,
.battle-card.rarity-legendary {
    animation: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .card-frame.rarity-rare,
  .card-frame.rarity-epic,
  .card-frame.rarity-legendary,
  .card-frame.rarity-legendary::before,
  .card-frame.rarity-legendary::after {
    animation: none;
  }
}