/* ============================================================
   AXO Holographic Authenticity Seal + Foil Effects
   ------------------------------------------------------------
   Fouad's requirement: every AXO card carries a visible
   holographic/foil authenticity seal — like the shiny security
   strip on a $100 bill. Makes cards look original and premium.

   USAGE:
   1. Link this file in packs.html: <link rel="stylesheet" href="packs-seal.css">
   2. Seal image: img/packs/media-generation-axo-holo-seal-0-c7f54b79-46e4-46fa-8356-002262207124.webp
      (constant: window.AXO_PACKS.SEAL_IMG — set in packs-config.js)

   QUICK INTEGRATION (vanilla JS card render):
     <div class="axo-card axo-holo rarity-epic">
       <img class="axo-card-art" src="..." alt="...">
       <span class="axo-seal" aria-label="Authentic AXO holographic seal"></span>
       ...card body...
     </div>

   The .axo-holo class adds the animated foil sweep over the whole
   card. The .axo-seal span renders the medallion (circular crop +
   screen blend kills the black background on dark cards).
   ============================================================ */

:root{
  --seal-img:url("img/packs/media-generation-axo-holo-seal-0-c7f54b79-46e4-46fa-8356-002262207124.webp");
}

/* ---------- Card wrapper: establishes stacking + foil border ---------- */
.axo-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  isolation:isolate; /* keeps blend modes inside the card */
}

/* Tier-tinted foil edge glow (optional, pairs with rarity classes) */
.axo-card::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.55),rgba(255,255,255,.05) 30%,
    rgba(255,255,255,.35) 50%,rgba(255,255,255,.05) 70%,
    rgba(255,255,255,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
  opacity:.8;
}
.axo-card.t-common::before{filter:hue-rotate(0deg) saturate(.6);}
.axo-card.t-rare::before{filter:hue-rotate(190deg) saturate(1.2);}
.axo-card.t-epic::before{filter:hue-rotate(260deg) saturate(1.4);}
.axo-card.t-legendary::before{filter:hue-rotate(35deg) saturate(1.6);}
.axo-card.t-mythic::before{filter:hue-rotate(300deg) saturate(1.8);opacity:1;}

/* ---------- Animated holographic foil sweep over the card ---------- */
.axo-holo::after{
  content:"";
  position:absolute;inset:-40%;
  z-index:2;pointer-events:none;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,0,128,.28) 20deg,
    rgba(255,200,0,.28) 60deg,
    rgba(0,255,180,.28) 110deg,
    rgba(0,140,255,.28) 160deg,
    rgba(180,0,255,.28) 210deg,
    transparent 260deg,
    transparent 360deg
  );
  mix-blend-mode:screen;
  filter:blur(6px) saturate(1.6);
  animation:axo-holo-spin 7s linear infinite;
  opacity:.55;
}
/* A second, tighter diagonal sheen for the "tilt" feel */
.axo-holo .axo-sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%,rgba(255,255,255,.34) 45%,
    rgba(255,255,255,.06) 52%,transparent 65%);
  background-size:280% 280%;
  mix-blend-mode:screen;
  animation:axo-sheen-slide 4.5s ease-in-out infinite;
}
@keyframes axo-holo-spin{to{transform:rotate(360deg);}}
@keyframes axo-sheen-slide{
  0%,100%{background-position:120% 0;}
  50%{background-position:-20% 0;}
}
/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .axo-holo::after,.axo-holo .axo-sheen{animation:none;opacity:.25;}
}

/* ---------- The authenticity seal medallion ---------- */
.axo-seal{
  position:absolute;
  right:10px;bottom:10px;
  width:54px;height:54px;
  border-radius:50%;
  z-index:4;
  background-image:var(--seal-img);
  background-size:cover;background-position:center;
  /* black backdrop of the source art disappears on dark cards */
  mix-blend-mode:screen;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) saturate(1.25);
  pointer-events:none;
}
/* Seal shimmer ring: rotating rainbow halo around the medallion */
.axo-seal::after{
  content:"";
  position:absolute;inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    #ff0080,#ffcf00,#00ffb4,#008cff,#b400ff,#ff0080);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:axo-holo-spin 5s linear infinite reverse;
  opacity:.85;pointer-events:none;
}
/* Smaller seal variant for dense grids */
.axo-seal.sm{width:38px;height:38px;right:8px;bottom:8px;}
.axo-seal.lg{width:76px;height:76px;right:12px;bottom:12px;}

/* "VERIFIED" microcopy ribbon under the seal (optional) */
.axo-seal-tag{
  position:absolute;right:8px;bottom:66px;z-index:4;
  font-size:9px;letter-spacing:.14em;font-weight:700;
  color:#9ff5e2;text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,255,200,.8);
  pointer-events:none;
}
.axo-seal.sm + .axo-seal-tag{bottom:50px;right:6px;}

/* ---------- Pack-opening reveal: seal pops with the card ---------- */
.axo-card.reveal .axo-seal{
  animation:axo-seal-pop .55s cubic-bezier(.2,1.6,.4,1) both;
  animation-delay:.35s; /* lands just after the card flip */
}
@keyframes axo-seal-pop{
  0%{transform:scale(0) rotate(-120deg);opacity:0;}
  100%{transform:scale(1) rotate(0deg);opacity:1;}
}