/*
 * promo-styles.css — CoasterCard Collector
 * Per-card custom visual styles for promotional cards.
 *
 * How to add a new promo card style:
 *   4. Also add .showcase-slot and .avatar.card-avatar variants below for
 *        profile.html showcase and avatar display.
 *
 * How to add a new promo card style (original):
 *   1. Add  cardClass: 'promo-your-card-name'  to the card object in:
 *        - extras.html  (PROMOTIONAL_CARDS array)
 *        - packs.html   (PROMOTIONAL_CARDS array)
 *        - index.html   (individual card const, e.g. ARIE_FORCE_ONE)
 *   2. Add a CSS block below using that class name.
 *   3. The class is automatically applied wherever cards are rendered:
 *        .promo-card  (index.html welcome modal)
 *        .sc-front    (packs.html stack reveal)
 *        .fc-inner    (packs.html final grid)
 *        .coll-card   (collection.html, my_favorites.html)
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   ARIE FORCE ONE — left half red / right half blue split border
   ═══════════════════════════════════════════════════════════════════════════════
   The .promo-card variants below also include the welcome-modal entrance
   animation (cardEntrance) so it doesn't get dropped when we override the
   base animation from .promo-card.
   ═══════════════════════════════════════════════════════════════════════════════ */

.promo-arie-force-one {
  border: 2px solid transparent !important;
  /* gradient border: solid surface on padding-box, gradient on border-box */
  background:
    linear-gradient(#1a1a2a, #1a1a2a) padding-box,
    linear-gradient(to right, #ef4444 50%, #1a72c8 50%) border-box !important;
  /* split side glows: red on left, blue on right */
  box-shadow:
    -14px 0 24px rgba(239, 68, 68, 0.45),
     14px 0 24px rgba(26, 114, 200, 0.45) !important;
  animation: arieGlowPulse 2.5s ease-in-out infinite !important;
}

/* collection.html / my_favorites.html: var(--card-bg) must be wrapped in
   linear-gradient() to be a valid <image> layer in a multi-background rule */
.coll-card.promo-arie-force-one {
  background:
    linear-gradient(var(--card-bg, #263a49), var(--card-bg, #263a49)) padding-box,
    linear-gradient(to right, #ef4444 50%, #1a72c8 50%) border-box !important;
}

@keyframes arieGlowPulse {
  0%, 100% {
    box-shadow:
      -14px 0 24px rgba(239, 68, 68, 0.45),
       14px 0 24px rgba(26, 114, 200, 0.45);
  }
  50% {
    box-shadow:
      -20px 0 36px rgba(239, 68, 68, 0.75),
       20px 0 36px rgba(26, 114, 200, 0.75);
  }
}


/* collection.html detail sheet */
.detail-sheet.promo-arie-force-one {
  border-color: transparent !important;
  border-bottom: none !important;
  background:
    linear-gradient(var(--card-bg, #263a49), var(--card-bg, #263a49)) padding-box,
    linear-gradient(to right, #ef4444 50%, #1a72c8 50%) border-box !important;
  box-shadow:
    -14px 0 24px rgba(239, 68, 68, 0.45),
     14px 0 24px rgba(26, 114, 200, 0.45) !important;
  animation: arieGlowPulse 2.5s ease-in-out infinite !important;
}

/* index.html welcome modal: also include the card entrance animation */
.promo-card.promo-arie-force-one {
  animation: arieGlowPulse 2.5s ease-in-out infinite,
             cardEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   WILDCAT'S REVENGE — slowly cycling border & glow: red → black → white → red
   ═══════════════════════════════════════════════════════════════════════════════ */

.promo-wildcats-revenge {
  animation: wildcatsBorderCycle 6s ease-in-out infinite !important;
}

/* collection.html detail sheet */
.detail-sheet.promo-wildcats-revenge {
  animation: wildcatsBorderCycle 6s ease-in-out infinite !important;
}

/* index.html welcome modal: also include the card entrance animation */
.promo-card.promo-wildcats-revenge {
  animation: wildcatsBorderCycle 6s ease-in-out infinite,
             cardEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both !important;
}

@keyframes wildcatsBorderCycle {
  0% {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.65), 0 0 24px rgba(239, 68, 68, 0.3);
  }
  30% {
    border-color: #1a1a1a;
    box-shadow: 0 0 6px rgba(80, 80, 80, 0.2), 0 0 10px rgba(0, 0, 0, 0.1);
  }
  60% {
    border-color: #f0f0f0;
    box-shadow: 0 0 12px rgba(240, 240, 240, 0.75), 0 0 24px rgba(255, 255, 255, 0.35);
  }
  100% {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.65), 0 0 24px rgba(239, 68, 68, 0.3);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — showcase slot and avatar variants
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ARIE FORCE ONE — showcase slot */
.showcase-slot.promo-arie-force-one {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--surface, #17222d), var(--surface, #17222d)) padding-box,
    linear-gradient(to right, #ef4444 50%, #1a72c8 50%) border-box !important;
  box-shadow:
    -10px 0 18px rgba(239, 68, 68, 0.45),
     10px 0 18px rgba(26, 114, 200, 0.45) !important;
  animation: arieGlowPulse 2.5s ease-in-out infinite !important;
}

/* ARIE FORCE ONE — avatar (profile picture) */
.avatar.card-avatar.promo-arie-force-one {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--surface, #17222d), var(--surface, #17222d)) padding-box,
    linear-gradient(to right, #ef4444 50%, #1a72c8 50%) border-box !important;
  box-shadow:
    -8px 0 14px rgba(239, 68, 68, 0.5),
     8px 0 14px rgba(26, 114, 200, 0.5) !important;
  animation: arieGlowPulse 2.5s ease-in-out infinite !important;
}

/* WILDCAT'S REVENGE — showcase slot */
.showcase-slot.promo-wildcats-revenge {
  animation: wildcatsBorderCycle 6s ease-in-out infinite !important;
}

/* WILDCAT'S REVENGE — avatar (profile picture) */
.avatar.card-avatar.promo-wildcats-revenge {
  animation: wildcatsBorderCycle 6s ease-in-out infinite !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SIRENS CURSE — rainbow cycling border & glow (prism-style)
   No border override here — the base .promotional border stays solid so the
   keyframe border-color values are visible. Adding border !important would lock
   the color to transparent and break the animation (animations cannot override
   !important author declarations in the CSS cascade).
   ═══════════════════════════════════════════════════════════════════════════════ */

.promo-sirens-curse {
  animation: sirensCurseRainbow 3s linear infinite !important;
}

/* collection.html detail sheet */
.detail-sheet.promo-sirens-curse {
  animation: sirensCurseRainbow 3s linear infinite !important;
}

/* index.html welcome modal: also include the card entrance animation */
.promo-card.promo-sirens-curse {
  animation: sirensCurseRainbow 3s linear infinite,
             cardEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both !important;
}

/* SIRENS CURSE — showcase slot */
.showcase-slot.promo-sirens-curse {
  animation: sirensCurseRainbow 3s linear infinite !important;
}

/* SIRENS CURSE — avatar (profile picture) */
.avatar.card-avatar.promo-sirens-curse {
  animation: sirensCurseRainbow 3s linear infinite !important;
}

@keyframes sirensCurseRainbow {
  0%   { border-color: #ff0000; box-shadow: 0 0 12px rgba(255,0,0,0.75),   0 0 24px rgba(255,0,0,0.35); }
  17%  { border-color: #ff8800; box-shadow: 0 0 12px rgba(255,136,0,0.75), 0 0 24px rgba(255,136,0,0.35); }
  33%  { border-color: #ffff00; box-shadow: 0 0 12px rgba(255,255,0,0.75), 0 0 24px rgba(255,255,0,0.35); }
  50%  { border-color: #00ff00; box-shadow: 0 0 12px rgba(0,255,0,0.75),   0 0 24px rgba(0,255,0,0.35); }
  67%  { border-color: #00aaff; box-shadow: 0 0 12px rgba(0,170,255,0.75), 0 0 24px rgba(0,170,255,0.35); }
  83%  { border-color: #aa00ff; box-shadow: 0 0 12px rgba(170,0,255,0.75), 0 0 24px rgba(170,0,255,0.35); }
  100% { border-color: #ff0000; box-shadow: 0 0 12px rgba(255,0,0,0.75),   0 0 24px rgba(255,0,0,0.35); }
}