/**
 * Advanced Holographic Card Effects
 * Inspired by simeydotme/pokemon-cards-css
 * https://poke-holo.simey.me/
 * https://github.com/simeydotme/pokemon-cards-css
 *
 * Uses mouse-tracking via CSS custom properties for dynamic effects.
 * Requires companion JavaScript for full interactivity.
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
  /* Mouse position (0-100, updated by JS) */
  --pointer-x: 50;
  --pointer-y: 50;

  /* Rotation based on pointer (calculated in CSS from pointer) */
  --rotate-x: 0deg;
  --rotate-y: 0deg;

  /* Background position derived from pointer */
  --bg-x: 50%;
  --bg-y: 50%;

  /* Holographic pattern URLs - using CSS gradients as fallback */
  --holo-gradient: repeating-linear-gradient(
    0deg,
    rgb(255, 119, 115) calc(5% * 1),
    rgba(255, 237, 95, 1) calc(5% * 2),
    rgba(168, 255, 95, 1) calc(5% * 3),
    rgba(131, 255, 247, 1) calc(5% * 4),
    rgba(120, 148, 255, 1) calc(5% * 5),
    rgb(216, 117, 255) calc(5% * 6),
    rgb(255, 119, 115) calc(5% * 7)
  );

  /* Sparkle/glitter pattern */
  --sparkle-gradient: 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.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

  /* Timing */
  --spring-duration: 0.4s;
  --spring-easing: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes holo-gradient-shift {
  0%, 100% {
    opacity: 0.5;
    background-position: 0% 0%;
    filter: brightness(0.8) contrast(1.2);
  }
  5%, 8% {
    opacity: 0.6;
    background-position: 100% 100%;
    filter: brightness(0.9) contrast(1.15);
  }
  13%, 16% {
    opacity: 0.65;
    background-position: 0% 0%;
    filter: brightness(1) contrast(1.1);
  }
  35%, 38% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.1) contrast(1);
  }
  55% {
    opacity: 0.65;
    background-position: 25% 25%;
    filter: brightness(0.95) contrast(1.1);
  }
  75% {
    opacity: 0.55;
    background-position: 75% 75%;
    filter: brightness(0.85) contrast(1.2);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.75;
    filter: brightness(1.2) contrast(1);
  }
  15% {
    opacity: 0.9;
    filter: brightness(1.4) contrast(1.1);
  }
  50% {
    opacity: 0.8;
    filter: brightness(1.1) contrast(1.2);
  }
}

/* ============================================
   BASE HOLOGRAPHIC CARD
   ============================================ */

.holo-card {
  /* Card dimensions */
  --card-width: 100%;
  --card-aspect: auto;
  --card-radius: var(--radius-xl, 12px);

  position: relative;
  width: var(--card-width);
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);

  /* 3D Setup */
  transform-style: preserve-3d;
  perspective: 600px;

  /* Smooth transitions */
  transition: transform var(--spring-duration) var(--spring-easing);

  /* Isolation for blend modes */
  isolation: isolate;

  /* Content z-index base */
  z-index: 1;
}

/* Card inner wrapper - handles the 3D rotation */
.holo-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;

  /* 3D Rotation - driven by CSS custom properties */
  transform:
    rotateY(calc(var(--rotate-y, 0deg) * 0.5))
    rotateX(calc(var(--rotate-x, 0deg) * -0.5));
  transform-style: preserve-3d;
  transition: transform var(--spring-duration) var(--spring-easing);

  /* Card shadow */
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.1),
    0 10px 40px rgba(0, 0, 0, 0.15);

  /* Background */
  background: var(--color-bg-primary, white);
}

.holo-card:hover .holo-card__inner {
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ============================================
   HOLOGRAPHIC SHINE LAYER
   The main rainbow foil effect
   ============================================ */

.holo-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;

  /* Holographic gradient */
  background: var(--holo-gradient);
  background-size: 400% 400%;
  background-position:
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%);

  /* Blend mode for foil effect */
  mix-blend-mode: color-dodge;
  opacity: 0;

  /* Smooth transition */
  transition:
    opacity 0.3s ease,
    background-position 0.1s ease;

  /* Mask to card shape */
  -webkit-mask-image: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(0, 0, 0, 0.8) 10%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 80%,
    transparent 100%
  );
  mask-image: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(0, 0, 0, 0.8) 10%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 80%,
    transparent 100%
  );
}

.holo-card:hover .holo-card__shine,
.holo-card.active .holo-card__shine {
  opacity: 0.7;
}

/* ============================================
   GLARE/REFLECTION LAYER
   Simulates light reflecting off the card
   ============================================ */

.holo-card__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;

  /* Radial glare following pointer */
  background: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 80%
  );

  mix-blend-mode: overlay;
  opacity: 0;

  transition: opacity 0.3s ease;
}

.holo-card:hover .holo-card__glare,
.holo-card.active .holo-card__glare {
  opacity: 0.4;
}

/* ============================================
   SPARKLE/GLITTER LAYER
   Adds that grainy sparkle texture
   ============================================ */

.holo-card__sparkle {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  /* Noise texture for sparkle */
  background-image: var(--sparkle-gradient);
  background-size: 20% 20%;
  background-position:
    calc(var(--pointer-x, 50) * 0.5%)
    calc(var(--pointer-y, 50) * 0.5%);

  mix-blend-mode: color-dodge;
  filter: brightness(1.5) contrast(1.5);
  opacity: 0;

  transition: opacity 0.3s ease;
}

.holo-card:hover .holo-card__sparkle,
.holo-card.active .holo-card__sparkle {
  opacity: 0.15;
  animation: sparkle 8s ease infinite;
}

/* ============================================
   CONTENT LAYER
   ============================================ */

.holo-card__content {
  position: relative;
  z-index: 1;
  height: 100%;
}

/* ============================================
   CARD VARIANTS
   Different holographic effect types
   ============================================ */

/* --- COSMOS: Stars and nebula effect --- */
.holo-card--cosmos .holo-card__shine {
  background:
    radial-gradient(
      circle at 20% 80%,
      rgba(255, 0, 128, 0.4) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(0, 200, 255, 0.4) 0%,
      transparent 50%
    ),
    var(--holo-gradient);
  background-size: 200% 200%, 200% 200%, 400% 400%;
}

/* --- RAINBOW: Classic rainbow foil --- */
.holo-card--rainbow .holo-card__shine {
  background: conic-gradient(
    from calc(var(--pointer-x, 50) * 3.6deg) at 50% 50%,
    hsl(0, 100%, 70%),
    hsl(60, 100%, 70%),
    hsl(120, 100%, 70%),
    hsl(180, 100%, 70%),
    hsl(240, 100%, 70%),
    hsl(300, 100%, 70%),
    hsl(360, 100%, 70%)
  );
  background-size: 100% 100%;
  filter: saturate(1.2) brightness(1.1);
}

/* --- SUNBURST: Radiating rays --- */
.holo-card--sunburst .holo-card__shine {
  background: repeating-conic-gradient(
    from calc(var(--pointer-x, 50) * 1deg) at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    transparent 0deg,
    rgba(255, 255, 255, 0.3) 2deg,
    transparent 4deg
  ),
  var(--holo-gradient);
  background-size: 100% 100%, 400% 400%;
}

/* --- PIXEL: Digital/glitch aesthetic --- */
.holo-card--pixel .holo-card__shine {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, 0.1) 2px,
      rgba(255, 255, 255, 0.1) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, 0.1) 2px,
      rgba(255, 255, 255, 0.1) 4px
    ),
    var(--holo-gradient);
  background-size: 4px 4px, 4px 4px, 400% 400%;
}

/* --- GALAXY: Cosmic dust effect --- */
.holo-card--galaxy .holo-card__sparkle {
  background-size: 10% 10%;
  filter: brightness(2) contrast(2);
  opacity: 0.25;
}

.holo-card--galaxy .holo-card__shine {
  background:
    radial-gradient(
      ellipse 150% 100% at 50% 50%,
      rgba(100, 50, 200, 0.3) 0%,
      transparent 70%
    ),
    var(--holo-gradient);
}

/* ============================================
   RARITY LEVELS (TCG-style)
   ============================================ */

/* Common - No holo, just subtle shine */
.holo-card--common .holo-card__shine,
.holo-card--common .holo-card__sparkle {
  display: none;
}

.holo-card--common .holo-card__glare {
  opacity: 0.2;
}

.holo-card--common:hover .holo-card__glare {
  opacity: 0.3;
}

/* Uncommon - Subtle holo */
.holo-card--uncommon .holo-card__shine {
  opacity: 0.3;
}

.holo-card--uncommon:hover .holo-card__shine {
  opacity: 0.5;
}

/* Rare - Standard holo (default) */
/* Uses base styles */

/* Holo Rare - Enhanced sparkle */
.holo-card--holo-rare .holo-card__sparkle {
  opacity: 0.2;
}

.holo-card--holo-rare:hover .holo-card__sparkle {
  opacity: 0.35;
}

/* Ultra Rare - Maximum effects */
.holo-card--ultra-rare .holo-card__shine {
  mix-blend-mode: hard-light;
  opacity: 0.6;
  filter: saturate(1.3);
}

.holo-card--ultra-rare:hover .holo-card__shine {
  opacity: 0.85;
}

.holo-card--ultra-rare .holo-card__glare {
  opacity: 0.3;
}

.holo-card--ultra-rare:hover .holo-card__glare {
  opacity: 0.6;
}

/* Secret Rare - Gold treatment */
.holo-card--secret-rare {
  --card-border: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffed4e 25%,
    #ffd700 50%,
    #b8860b 75%,
    #ffd700 100%
  );
}

.holo-card--secret-rare .holo-card__inner {
  border: 3px solid transparent;
  background-clip: padding-box;
}

.holo-card--secret-rare .holo-card__inner::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--card-radius) + 3px);
  background: var(--card-border);
  z-index: -1;
}

.holo-card--secret-rare .holo-card__shine {
  filter: sepia(0.3) saturate(1.5) hue-rotate(20deg);
}

/* ============================================
   ADMONITION INTEGRATION
   Apply holographic effects to admonitions
   ============================================ */

.admonition.holo {
  /* Convert admonition to holo card structure */
  position: relative;
  transform-style: preserve-3d;
  perspective: 600px;
  isolation: isolate;
  overflow: visible;

  /* Smooth rotation transition */
  transition: transform var(--spring-duration) var(--spring-easing);
}

.admonition.holo::before {
  /* Shine layer */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--holo-gradient);
  background-size: 400% 400%;
  background-position:
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%);
  mix-blend-mode: color-dodge;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease;

  /* Radial mask */
  -webkit-mask-image: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(0, 0, 0, 0.8) 10%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 80%,
    transparent 100%
  );
  mask-image: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(0, 0, 0, 0.8) 10%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 80%,
    transparent 100%
  );
}

.admonition.holo::after {
  /* Glare layer */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 60%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  z-index: 11;
  transition: opacity 0.3s ease;
}

.admonition.holo:hover::before {
  opacity: 0.6;
}

.admonition.holo:hover::after {
  opacity: 0.35;
}

/* 3D tilt on hover (requires JS to update --rotate-x/y) */
.admonition.holo:hover {
  transform:
    perspective(600px)
    rotateY(calc(var(--rotate-y, 0deg) * 0.3))
    rotateX(calc(var(--rotate-x, 0deg) * -0.3));
}

/* Type-specific tints */
.admonition.holo.note::before,
.admonition.holo.info::before {
  filter: hue-rotate(180deg) saturate(0.8);
}

.admonition.holo.tip::before {
  filter: hue-rotate(100deg) saturate(0.9);
}

.admonition.holo.warning::before {
  filter: hue-rotate(30deg) saturate(1.2);
}

.admonition.holo.danger::before,
.admonition.holo.error::before {
  filter: hue-rotate(-30deg) saturate(1.3);
}

/* ============================================
   ENERGY ORB (Spherical Resource Icon)
   More realistic 3D sphere effect
   ============================================ */

.energy-orb-3d {
  --orb-size: 32px;
  --orb-color-primary: #3b82f6;
  --orb-color-secondary: #1d4ed8;
  --orb-color-highlight: #93c5fd;
  --orb-glow: rgba(59, 130, 246, 0.5);

  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--orb-size) * 0.45);
  color: white;

  /* 3D sphere gradient */
  background:
    radial-gradient(
      circle at 30% 30%,
      var(--orb-color-highlight) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(0, 0, 0, 0.3) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      var(--orb-color-primary) 0%,
      var(--orb-color-secondary) 100%
    );

  /* Glow effect */
  box-shadow:
    0 0 calc(var(--orb-size) * 0.3) var(--orb-glow),
    inset 0 0 calc(var(--orb-size) * 0.2) rgba(255, 255, 255, 0.2);

  /* Subtle animation */
  animation: orb-float 3s ease-in-out infinite;

  /* 3D transform */
  transform-style: preserve-3d;
}

/* Highlight reflection */
.energy-orb-3d::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 35%;
  height: 25%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(1px);
}

/* Type variants */
.energy-orb-3d.info {
  --orb-color-primary: #3b82f6;
  --orb-color-secondary: #1d4ed8;
  --orb-color-highlight: #93c5fd;
  --orb-glow: rgba(59, 130, 246, 0.5);
}

.energy-orb-3d.success {
  --orb-color-primary: #22c55e;
  --orb-color-secondary: #15803d;
  --orb-color-highlight: #86efac;
  --orb-glow: rgba(34, 197, 94, 0.5);
}

.energy-orb-3d.warning {
  --orb-color-primary: #f59e0b;
  --orb-color-secondary: #b45309;
  --orb-color-highlight: #fcd34d;
  --orb-glow: rgba(245, 158, 11, 0.5);
}

.energy-orb-3d.error {
  --orb-color-primary: #ef4444;
  --orb-color-secondary: #b91c1c;
  --orb-color-highlight: #fca5a5;
  --orb-glow: rgba(239, 68, 68, 0.5);
}

.energy-orb-3d.psychic {
  --orb-color-primary: #a855f7;
  --orb-color-secondary: #7e22ce;
  --orb-color-highlight: #d8b4fe;
  --orb-glow: rgba(168, 85, 247, 0.5);
}

.energy-orb-3d.fire {
  --orb-color-primary: #f97316;
  --orb-color-secondary: #c2410c;
  --orb-color-highlight: #fdba74;
  --orb-glow: rgba(249, 115, 22, 0.5);
}

.energy-orb-3d.electric {
  --orb-color-primary: #eab308;
  --orb-color-secondary: #a16207;
  --orb-color-highlight: #fef08a;
  --orb-glow: rgba(234, 179, 8, 0.5);
}

@keyframes orb-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] .holo-card__shine {
  mix-blend-mode: color-dodge;
  opacity: 0;
}

[data-theme="dark"] .holo-card:hover .holo-card__shine {
  opacity: 0.5;
}

[data-theme="dark"] .holo-card__glare {
  background: radial-gradient(
    farthest-corner circle at
    calc(var(--pointer-x, 50) * 1%)
    calc(var(--pointer-y, 50) * 1%),
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.2) 30%,
    transparent 70%
  );
}

[data-theme="dark"] .admonition.holo:hover::before {
  opacity: 0.45;
}

[data-theme="dark"] .admonition.holo:hover::after {
  opacity: 0.25;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .holo-card,
  .holo-card__inner,
  .holo-card__shine,
  .holo-card__glare,
  .holo-card__sparkle,
  .admonition.holo,
  .energy-orb-3d {
    animation: none !important;
    transition: none !important;
  }

  .holo-card:hover .holo-card__shine,
  .admonition.holo:hover::before {
    opacity: 0.4;
  }

  .admonition.holo:hover {
    transform: none;
  }
}
