/* ═══════════════════════════════════════════════════════════════════════════════════════
   GARAGE PASS — CARd PREMIUM EFFECTS
   Next-level holographic, nostalgic trading card, and tier-specific visual enhancements
   Version 2.0 - "Mind-Blowing Edition"
═══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   1. ENHANCED HOLOGRAPHIC SHIMMER SYSTEM
   Multi-layer holographic effect inspired by premium trading cards
═══════════════════════════════════════════════════════════════════════════════════════ */

/* Primary holo layer - rainbow prism effect */
.gp-holo-prism {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 15;
}

.gp-holo-prism::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: 
    conic-gradient(
      from calc(var(--holo-angle, 0deg) + 0deg) at var(--mx, 50%) var(--my, 50%),
      hsla(0, 90%, 65%, 0.4),
      hsla(30, 90%, 60%, 0.35),
      hsla(60, 95%, 60%, 0.4),
      hsla(120, 85%, 55%, 0.35),
      hsla(180, 90%, 55%, 0.4),
      hsla(220, 90%, 60%, 0.35),
      hsla(270, 85%, 60%, 0.4),
      hsla(310, 90%, 60%, 0.35),
      hsla(0, 90%, 65%, 0.4)
    );
  filter: blur(8px) saturate(1.4);
  animation: holoPrismSpin 12s linear infinite;
}

@keyframes holoPrismSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Secondary holo layer - sparkle highlights */
.gp-holo-sparkle {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  z-index: 16;
  mix-blend-mode: overlay;
}

.gp-holo-sparkle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1px 1px at 20% 30%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, white 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 50%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, white 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 80%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 90%, white 0%, transparent 100%);
  background-size: 100% 100%;
  animation: sparkleFlicker 2.5s ease-in-out infinite;
}

@keyframes sparkleFlicker {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  25% { opacity: 0.8; transform: scale(1.02); }
  50% { opacity: 0.5; transform: scale(1); }
  75% { opacity: 0.9; transform: scale(1.01); }
}

/* Scanline effect - retro tech feel */
.gp-scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0.03;
  z-index: 17;
}

.gp-scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
}

/* Enable holo effects on hover/tilt for NEON, SKYE, NOVA, COSMIC */
.gp-card-shell[data-tier="NEON"] .gp-holo-prism,
.gp-card-shell[data-tier="SKYE"] .gp-holo-prism,
.gp-card-shell[data-tier="NOVA"] .gp-holo-prism,
.gp-card-shell[data-tier="APEX"] .gp-holo-prism,
.gp-card-shell[data-tier="COSMIC"] .gp-holo-prism {
  opacity: 0.6;
}

.gp-card-shell[data-tier="SKYE"] .gp-holo-prism,
.gp-card-shell[data-tier="NOVA"] .gp-holo-prism,
.gp-card-shell[data-tier="APEX"] .gp-holo-prism,
.gp-card-shell[data-tier="COSMIC"] .gp-holo-prism {
  opacity: 0.75;
}

.gp-card-shell[data-tier="NEON"] .gp-holo-sparkle,
.gp-card-shell[data-tier="SKYE"] .gp-holo-sparkle,
.gp-card-shell[data-tier="NOVA"] .gp-holo-sparkle,
.gp-card-shell[data-tier="APEX"] .gp-holo-sparkle,
.gp-card-shell[data-tier="COSMIC"] .gp-holo-sparkle {
  opacity: 0.4;
}

.gp-card-shell[data-tier="COSMIC"] .gp-holo-sparkle {
  opacity: 0.7;
}

.gp-card-shell[data-tier="COSMIC"] .gp-scanlines {
  opacity: 0.06;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   2. TIER-SPECIFIC SIGNATURE EFFECTS
═══════════════════════════════════════════════════════════════════════════════════════ */

/* STREET - Clean, subtle metallic edge */
.gp-card-shell[data-tier="STREET"] {
  --tier-accent: rgba(148, 163, 184, 0.8);
  --tier-glow: rgba(148, 163, 184, 0.15);
}

.gp-card-shell[data-tier="STREET"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgba(148, 163, 184, 0.12);
  pointer-events: none;
}

/* NEON - Cyberpunk circuit glow effect */
.gp-card-shell[data-tier="NEON"] {
  --tier-accent: #00d4ff;
  --tier-glow: rgba(0, 212, 255, 0.25);
}

.gp-neon-circuits {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  z-index: 5;
}

.gp-card-shell[data-tier="NEON"] .gp-neon-circuits {
  opacity: 1;
}

.gp-neon-circuits::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, transparent 0%, transparent 48%, rgba(0, 212, 255, 0.08) 50%, transparent 52%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 48%, rgba(124, 58, 237, 0.08) 50%, transparent 52%, transparent 100%);
  background-size: 40px 40px;
  animation: circuitPulse 4s linear infinite;
}

.gp-neon-circuits::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.8), rgba(124, 58, 237, 0.8), transparent);
  animation: circuitTrace 3s ease-in-out infinite;
}

@keyframes circuitPulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes circuitTrace {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(0) translateY(100vh); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* SKYE - Cool blue shimmer */
.gp-card-shell[data-tier="SKYE"] {
  --tier-accent: #3b82f6;
  --tier-glow: rgba(59, 130, 246, 0.25);
}

.gp-card-shell[data-tier="SKYE"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.16);
  pointer-events: none;
}

/* NOVA - Molten gold particles effect */
.gp-card-shell[data-tier="NOVA"],
.gp-card-shell[data-tier="APEX"] {
  --tier-accent: #ffd700;
  --tier-glow: rgba(255, 215, 0, 0.3);
}

.gp-apex-gold {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  z-index: 6;
}

.gp-card-shell[data-tier="NOVA"] .gp-apex-gold,
.gp-card-shell[data-tier="APEX"] .gp-apex-gold {
  opacity: 1;
}

.gp-apex-gold::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255, 180, 0, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(255, 200, 50, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(255, 215, 0, 0.15) 0%, transparent 40%);
  animation: goldShimmer 6s ease-in-out infinite;
}

@keyframes goldShimmer {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 3px) rotate(2deg); }
  50% { transform: translate(0, 5px) rotate(0deg); }
  75% { transform: translate(-5px, 3px) rotate(-2deg); }
}

/* Apex embossed crown corner accents */
.gp-apex-crowns {
  pointer-events: none;
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  opacity: 0;
  z-index: 18;
}

.gp-card-shell[data-tier="NOVA"] .gp-apex-crowns,
.gp-card-shell[data-tier="APEX"] .gp-apex-crowns {
  opacity: 0.7;
}

.gp-apex-crowns::before,
.gp-apex-crowns::after {
  content: "♔";
  position: absolute;
  font-size: 14px;
  color: rgba(255, 215, 0, 0.6);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.gp-apex-crowns::before {
  top: 10px;
  left: 10px;
}

.gp-apex-crowns::after {
  bottom: 10px;
  right: 10px;
  transform: rotate(180deg);
}

/* COSMIC - Plasma nebula effect with stars */
.gp-card-shell[data-tier="COSMIC"] {
  --tier-accent: #bc13fe;
  --tier-glow: rgba(188, 19, 254, 0.4);
}

.gp-cosmic-nebula {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  z-index: 6;
}

.gp-card-shell[data-tier="COSMIC"] .gp-cosmic-nebula {
  opacity: 1;
}

.gp-cosmic-nebula::before {
  content: "";
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(188, 19, 254, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(72, 219, 251, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 107, 107, 0.15) 0%, transparent 40%);
  animation: nebulaSwirl 15s ease-in-out infinite;
}

@keyframes nebulaSwirl {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(5deg) scale(1.05); }
  50% { transform: rotate(-3deg) scale(1.08); }
  75% { transform: rotate(4deg) scale(1.03); }
}

/* Cosmic star field */
.gp-cosmic-stars {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  z-index: 7;
}

.gp-card-shell[data-tier="COSMIC"] .gp-cosmic-stars {
  opacity: 1;
}

.gp-cosmic-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 45%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 40% 15%, rgba(255, 255, 255, 0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 65%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 35%, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 80%, rgba(255, 255, 255, 0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 75%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 50%, rgba(255, 255, 255, 0.65) 0%, transparent 100%);
  animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* COSMIC border plasma animation */
.gp-cosmic-border {
  pointer-events: none;
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  opacity: 0;
  z-index: 2;
}

.gp-card-shell[data-tier="COSMIC"] .gp-cosmic-border {
  opacity: 1;
  background: linear-gradient(
    var(--cosmic-border-angle, 0deg),
    rgba(188, 19, 254, 0.8),
    rgba(72, 219, 251, 0.8),
    rgba(255, 107, 107, 0.8),
    rgba(255, 215, 0, 0.8),
    rgba(188, 19, 254, 0.8)
  );
  animation: cosmicBorderSpin 4s linear infinite;
  mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 3px;
}

@keyframes cosmicBorderSpin {
  from { --cosmic-border-angle: 0deg; }
  to { --cosmic-border-angle: 360deg; }
}

@property --cosmic-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   3. NOSTALGIC TRADING CARD ELEMENTS
   Pokemon, Yu-Gi-Oh, sports card inspired visual features
═══════════════════════════════════════════════════════════════════════════════════════ */

/* Foil frame border - embossed metallic look */
.gp-foil-frame {
  pointer-events: none;
  position: absolute;
  inset: 4px;
  border-radius: 20px;
  z-index: 4;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.02) 75%,
    rgba(255, 255, 255, 0.15) 100%
  );
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 2px 3px rgba(255, 255, 255, 0.08),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}

/* Corner stamps - like vintage trading cards */
.gp-corner-stamp {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

.gp-corner-stamp--tl {
  top: 12px;
  left: 12px;
  border-radius: 8px 4px 8px 4px;
}

.gp-corner-stamp--br {
  bottom: 118px;
  right: 12px;
  border-radius: 4px 8px 4px 8px;
}

/* Edition marker - 1st Edition style */
.gp-edition-mark {
  position: absolute;
  left: 16px;
  bottom: 92px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: rgba(255, 215, 0, 0.85);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gp-edition-mark::before {
  content: "★";
  font-size: 8px;
}

.gp-card-shell[data-edition="first"] .gp-edition-mark::after {
  content: "1ST";
  padding: 2px 5px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 140, 0, 0.3));
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   4. STAT BAR SYSTEM (Pokemon HP bar style)
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-stat-bars {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gp-card-shell[data-show-stats="true"] .gp-stat-bars {
  opacity: 1;
}

.gp-stat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.gp-stat-bar__label {
  width: 24px;
  text-align: right;
  letter-spacing: 0.3px;
}

.gp-stat-bar__track {
  width: 60px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.gp-stat-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px currentColor;
}

.gp-stat-bar__fill--hp { background: linear-gradient(90deg, #22c55e, #4ade80); color: #22c55e; }
.gp-stat-bar__fill--pwr { background: linear-gradient(90deg, #ef4444, #f87171); color: #ef4444; }
.gp-stat-bar__fill--spd { background: linear-gradient(90deg, #3b82f6, #60a5fa); color: #3b82f6; }
.gp-stat-bar__fill--stl { background: linear-gradient(90deg, #a855f7, #c084fc); color: #a855f7; }

.gp-stat-bar__value {
  width: 20px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   5. QR CODE DATA CHIP INTEGRATION
   Futuristic data chip design for QR codes
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-data-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.gp-data-chip__qr {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gp-data-chip__qr canvas,
.gp-data-chip__qr img {
  width: 100%;
  height: 100%;
  display: block;
}

.gp-data-chip__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-data-chip__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.gp-data-chip__code {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
}

/* Scan animation glow */
.gp-data-chip--scanning::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
  animation: scanGlow 1.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes scanGlow {
  0%, 100% { opacity: 0; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1.05); }
}

/* Tier-specific data chip accents */
.gp-card-shell[data-tier="NEON"] .gp-data-chip {
  border-color: rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

.gp-card-shell[data-tier="SKYE"] .gp-data-chip {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

.gp-card-shell[data-tier="NOVA"] .gp-data-chip,
.gp-card-shell[data-tier="APEX"] .gp-data-chip {
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.gp-card-shell[data-tier="COSMIC"] .gp-data-chip {
  border-color: rgba(188, 19, 254, 0.4);
  box-shadow: 0 0 20px rgba(188, 19, 254, 0.15);
  animation: cosmicChipPulse 2s ease-in-out infinite;
}

@keyframes cosmicChipPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(188, 19, 254, 0.15); }
  50% { box-shadow: 0 0 30px rgba(188, 19, 254, 0.25), 0 0 50px rgba(72, 219, 251, 0.1); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   6. CARD CONDITION / PATINA SYSTEM
   Adds character to cards over time - mint, near-mint, loved
═══════════════════════════════════════════════════════════════════════════════════════ */

/* Condition overlays */
.gp-condition-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  z-index: 30;
  opacity: 0;
}

/* Near-Mint - subtle edge wear */
.gp-card-shell[data-condition="near-mint"] .gp-condition-layer {
  opacity: 1;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.08) 0%, transparent 25%),
    radial-gradient(ellipse at 100% 0%, rgba(0, 0, 0, 0.06) 0%, transparent 20%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.08) 0%, transparent 25%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.06) 0%, transparent 20%);
}

/* Loved - visible character, gentle creases */
.gp-card-shell[data-condition="loved"] .gp-condition-layer {
  opacity: 1;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.12) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 0%, rgba(0, 0, 0, 0.1) 0%, transparent 25%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.12) 0%, transparent 30%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.1) 0%, transparent 25%),
    linear-gradient(160deg, transparent 45%, rgba(255, 255, 255, 0.02) 48%, transparent 51%);
}

.gp-card-shell[data-condition="loved"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 31;
}

/* Vintage - aged texture */
.gp-card-shell[data-condition="vintage"] .gp-condition-layer {
  opacity: 1;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(139, 119, 101, 0.08) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(139, 119, 101, 0.08) 0%, transparent 35%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   7. ENHANCED TILT / 3D DEPTH EFFECTS
═══════════════════════════════════════════════════════════════════════════════════════ */

/* Depth layers for parallax effect */
.gp-card-shell {
  transform-style: preserve-3d;
  perspective: 1200px;
}

.gp-card-photo {
  transform: translateZ(8px);
  transition: transform 0.15s ease-out;
}

.gp-card-shell:hover .gp-card-photo {
  transform: translateZ(16px);
}

.gp-card-bottom {
  transform: translateZ(20px);
  transition: transform 0.15s ease-out;
}

.gp-card-shell:hover .gp-card-bottom {
  transform: translateZ(28px);
}

.gp-badges {
  transform: translateZ(25px);
  transition: transform 0.15s ease-out;
}

.gp-card-shell:hover .gp-badges {
  transform: translateZ(35px);
}

/* Floating card effect on hover */
.gp-card-shell {
  transition: 
    transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.25s ease;
}

.gp-card-shell:hover {
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 30px var(--tier-glow, rgba(35, 235, 188, 0.15));
}

/* Tier-specific hover glows */
.gp-card-shell[data-tier="NEON"]:hover {
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 212, 255, 0.2),
    0 0 80px rgba(124, 58, 237, 0.1);
}

.gp-card-shell[data-tier="SKYE"]:hover {
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 45px rgba(59, 130, 246, 0.22),
    0 0 90px rgba(0, 212, 255, 0.1);
}

.gp-card-shell[data-tier="NOVA"]:hover,
.gp-card-shell[data-tier="APEX"]:hover {
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(255, 215, 0, 0.25),
    0 0 100px rgba(255, 140, 0, 0.1);
}

.gp-card-shell[data-tier="COSMIC"]:hover {
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(188, 19, 254, 0.3),
    0 0 120px rgba(72, 219, 251, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   8. WALLPAPER / LOCK SCREEN MODE
   Optimized display for phone backgrounds
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-card-shell[data-mode="wallpaper"] {
  /* Remove interactive elements for static display */
  --wallpaper-mode: 1;
}

.gp-card-shell[data-mode="wallpaper"] .gp-controls,
.gp-card-shell[data-mode="wallpaper"] .gp-ctl {
  display: none !important;
}

/* Wallpaper container with phone aspect ratios */
.gp-wallpaper-container {
  position: relative;
  background: linear-gradient(180deg, #0a0d10 0%, #0f1318 50%, #0a0d10 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gp-wallpaper-container[data-ratio="9x16"] {
  aspect-ratio: 9 / 16;
}

.gp-wallpaper-container[data-ratio="9x19.5"] {
  aspect-ratio: 9 / 19.5; /* iPhone Pro Max */
}

.gp-wallpaper-container[data-ratio="9x20"] {
  aspect-ratio: 9 / 20; /* Samsung S series */
}

/* Wallpaper background effects */
.gp-wallpaper-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, var(--tier-glow, rgba(35, 235, 188, 0.15)), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(0, 0, 0, 0.4), transparent 60%);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   9. ENHANCED REVEAL ANIMATIONS
═══════════════════════════════════════════════════════════════════════════════════════ */

/* Screen shake for epic reveals */
@keyframes epicShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) rotate(-0.5deg); }
  20% { transform: translateX(4px) rotate(0.5deg); }
  30% { transform: translateX(-3px) rotate(-0.3deg); }
  40% { transform: translateX(3px) rotate(0.3deg); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  90% { transform: translateX(0); }
}

.gp-reveal-shake {
  animation: epicShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Tier reveal flashes */
.gp-reveal-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}

.gp-reveal-flash--neon {
  background: radial-gradient(circle at center, rgba(0, 212, 255, 0.4), transparent 70%);
  animation: flashPulse 0.4s ease-out;
}

.gp-reveal-flash--apex {
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.45), transparent 70%);
  animation: flashPulse 0.5s ease-out;
}

.gp-reveal-flash--cosmic {
  background: 
    radial-gradient(circle at center, rgba(188, 19, 254, 0.5), transparent 50%),
    radial-gradient(circle at 30% 30%, rgba(72, 219, 251, 0.3), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255, 107, 107, 0.3), transparent 40%);
  animation: flashPulse 0.6s ease-out;
}

@keyframes flashPulse {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Confetti container for COSMIC reveals */
.gp-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   10. MOBILE OPTIMIZATIONS
═══════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .gp-stat-bars {
    right: 10px;
  }
  
  .gp-stat-bar__track {
    width: 45px;
  }
  
  .gp-data-chip {
    left: 10px;
    bottom: 10px;
    padding: 6px;
  }
  
  .gp-data-chip__qr {
    width: 40px;
    height: 40px;
  }
  
  .gp-corner-stamp {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   11. REDUCED MOTION - Accessibility
═══════════════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .gp-holo-prism::before,
  .gp-cosmic-nebula::before,
  .gp-cosmic-border,
  .gp-neon-circuits::before,
  .gp-apex-gold::before,
  .gp-cosmic-stars::before,
  .gp-holo-sparkle::before {
    animation: none;
  }
  
  .gp-reveal-shake {
    animation: none;
  }
  
  .gp-card-shell,
  .gp-card-photo,
  .gp-card-bottom,
  .gp-badges {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   12. INTERACTIVE SHINE EFFECT
   Mouse/touch-following holographic shine
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-interactive-shine {
  --shine-x: 50%;
  --shine-y: 50%;
  --shine-opacity: 0;
  
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  z-index: 35;
  opacity: var(--shine-opacity);
  transition: opacity 0.3s ease;
  background: radial-gradient(
    ellipse 80% 80% at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 70%
  );
  mix-blend-mode: overlay;
}

/* Tier-specific shine colors */
.gp-card-shell[data-tier="NEON"] .gp-interactive-shine {
  background: radial-gradient(
    ellipse 80% 80% at var(--shine-x) var(--shine-y),
    rgba(0, 212, 255, 0.4) 0%,
    rgba(124, 58, 237, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
}

.gp-card-shell[data-tier="SKYE"] .gp-interactive-shine {
  background: radial-gradient(
    ellipse 80% 80% at var(--shine-x) var(--shine-y),
    rgba(59, 130, 246, 0.45) 0%,
    rgba(0, 212, 255, 0.18) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
}

.gp-card-shell[data-tier="NOVA"] .gp-interactive-shine,
.gp-card-shell[data-tier="APEX"] .gp-interactive-shine {
  background: radial-gradient(
    ellipse 80% 80% at var(--shine-x) var(--shine-y),
    rgba(255, 215, 0, 0.5) 0%,
    rgba(255, 140, 0, 0.25) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
}

.gp-card-shell[data-tier="COSMIC"] .gp-interactive-shine {
  background: radial-gradient(
    ellipse 80% 80% at var(--shine-x) var(--shine-y),
    rgba(188, 19, 254, 0.5) 0%,
    rgba(72, 219, 251, 0.3) 20%,
    rgba(255, 107, 107, 0.2) 40%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 70%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   13. ACHIEVEMENT BADGES
   Animated badges for car achievements
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-achievement-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 40;
}

.gp-achievement-badge {
  --badge-color: #ffd700;
  
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.75) 100%
  );
  border: 1px solid var(--badge-color);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.3),
    0 0 20px color-mix(in srgb, var(--badge-color) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateX(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gp-achievement-badge:hover {
  transform: translateX(-4px) scale(1.05);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 30px color-mix(in srgb, var(--badge-color) 40%, transparent);
}

.gp-achievement-badge__icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px var(--badge-color));
}

.gp-achievement-badge__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--badge-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gp-achievement-badge__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  overflow: hidden;
}

/* Badge reveal animation */
.gp-achievement-badge--reveal {
  animation: badgeReveal 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgeReveal {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.5);
  }
  50% {
    transform: translateX(-8px) scale(1.1);
  }
  70% {
    transform: translateX(4px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   14. SECRET REVEALS
   Easter egg reveal styles
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-secret-reveal {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(30, 30, 50, 0.9) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.6);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  opacity: 0;
  z-index: 50;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gp-secret-reveal--active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gp-secret-reveal span {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.gp-secret-signature {
  border-color: rgba(188, 19, 254, 0.6);
}

.gp-secret-signature span {
  color: #bc13fe;
  text-shadow: 0 0 10px rgba(188, 19, 254, 0.5);
}

/* Rainbow mode (Konami code secret) */
.gp-rainbow-mode {
  animation: rainbowShift 2s linear infinite;
}

@keyframes rainbowShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.gp-rainbow-mode::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 26px;
  background: linear-gradient(
    var(--rainbow-angle, 0deg),
    #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff0088, #ff0000
  );
  animation: rainbowBorder 1s linear infinite;
  z-index: -1;
  opacity: 0.8;
}

@keyframes rainbowBorder {
  from { --rainbow-angle: 0deg; }
  to { --rainbow-angle: 360deg; }
}

@property --rainbow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   15. PRINT-READY EXPORT STYLES
   Bleed marks and print container
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-print-container {
  position: relative;
}

.gp-bleed-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

.gp-bleed-mark {
  position: absolute;
  width: 20px;
  height: 20px;
}

.gp-bleed-mark::before,
.gp-bleed-mark::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
}

.gp-bleed-mark::before {
  width: 1px;
  height: 12px;
}

.gp-bleed-mark::after {
  width: 12px;
  height: 1px;
}

.gp-bleed-mark--tl { top: 0; left: 0; }
.gp-bleed-mark--tl::before { top: 0; left: 10px; }
.gp-bleed-mark--tl::after { top: 10px; left: 0; }

.gp-bleed-mark--tr { top: 0; right: 0; }
.gp-bleed-mark--tr::before { top: 0; right: 10px; }
.gp-bleed-mark--tr::after { top: 10px; right: 0; }

.gp-bleed-mark--bl { bottom: 0; left: 0; }
.gp-bleed-mark--bl::before { bottom: 0; left: 10px; }
.gp-bleed-mark--bl::after { bottom: 10px; left: 0; }

.gp-bleed-mark--br { bottom: 0; right: 0; }
.gp-bleed-mark--br::before { bottom: 0; right: 10px; }
.gp-bleed-mark--br::after { bottom: 10px; right: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   16. VANILLA-TILT GLARE ENHANCEMENTS
   Custom styling for tilt glare effect
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-card-shell .js-tilt-glare {
  border-radius: 22px;
  overflow: hidden;
}

.gp-card-shell .js-tilt-glare-inner {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* Tier-specific glare */
.gp-card-shell[data-tier="NEON"] .js-tilt-glare-inner {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 212, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(124, 58, 237, 0.1) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

.gp-card-shell[data-tier="SKYE"] .js-tilt-glare-inner {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(59, 130, 246, 0.12) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(0, 212, 255, 0.1) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

.gp-card-shell[data-tier="NOVA"] .js-tilt-glare-inner,
.gp-card-shell[data-tier="APEX"] .js-tilt-glare-inner {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 215, 0, 0.15) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 140, 0, 0.15) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

.gp-card-shell[data-tier="COSMIC"] .js-tilt-glare-inner {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(188, 19, 254, 0.15) 25%,
    rgba(72, 219, 251, 0.2) 40%,
    rgba(255, 255, 255, 0.45) 55%,
    rgba(255, 107, 107, 0.15) 75%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   17. MOBILE ENHANCEMENTS FOR NEW FEATURES
═══════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .gp-achievement-badges {
    top: 8px;
    right: 8px;
    gap: 4px;
  }
  
  .gp-achievement-badge {
    padding: 4px 8px 4px 6px;
  }
  
  .gp-achievement-badge__icon {
    font-size: 12px;
  }
  
  .gp-achievement-badge__label {
    font-size: 8px;
  }
  
  .gp-secret-reveal {
    padding: 8px 14px;
  }
  
  .gp-secret-reveal span {
    font-size: 10px;
  }
}