/* Imported Custom Font-Faces */
@font-face {
    font-family: 'AmigaTopaz1200';
    src: url('./fonts/Topaz_a1200_v1.0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MicroKnight';
    src: url('./fonts/MicroKnightPlus_v1.0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Terminus';
    src: url('./fonts/TerminusTTF-4.38.2.ttf') format('truetype');
}
@font-face {  
    font-family: 'Digital-7';
    src: url('./fonts/digital-7-mono.ttf') format('truetype');
}
@font-face {  
    font-family: 'Bookerly';
    src: url('./fonts/bookerly.ttf') format('truetype');
}
@font-face {  
    font-family: 'RaceSpace';
    src: url('./fonts/RACESPACESTRIPE.otf') format('opentype');
}
@font-face {  
    font-family: 'SpaceRanger';
    src: url('./fonts/spaceranger.ttf') format('truetype');
}
@font-face {  
    font-family: 'SpaceRanger3D';
    src: url('./fonts/spaceranger3d.ttf') format('truetype');
}
@font-face {  
    font-family: 'SickCapital';
    src: url('./fonts/sickcapital-vice.ttf') format('truetype');
}
@font-face {  
    font-family: 'AbbeyDawn';
    src: url('./fonts/Font_Abbey_Dawn.ttf') format('truetype');
}
@font-face {  
    font-family: 'HandTimes';
    src: url('./fonts/HandTIMES.ttf') format('truetype');
}


body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    line-height: 1.6;
    background-color: black;
    min-height: 100vh;
}
body.date-420 { /* This class will be added by js on index.html on 4/20 */
  background-color: #5cc41e; 
  color: #d3f4a9;
  cursor: url(https://cur.cursors-4u.net/nature/nat-2/nat120.cur), auto !important; /*weed leaf */
}

/* Utility Classes */
.xyz {
    width: 90%;
    max-width: 1200px;
    padding: 2rem;
}


.holo-card {
/* Base Card Setup */
  --x: 50%;
  --y: 50%;
  --rot-x: 0deg;
  --rot-y: 0deg;
  --glare-opacity: 0;
  
  position: relative;
  width: 300px; /* can be overridden */
  height: 400px; 
  border-radius: 15px;
  background-color: #1a1a1a;
  color: white;
  overflow: hidden;
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  
  /* Apply the computed 3D tilt */
  transform: perspective(1000px) rotateX(var(--rot-x)) rotateY(var(--rot-y));
}

/* Ensure content stays on top of the effects */
.holo-card-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none; /* Let clicks pass through to button if needed */
}

/* Re-enable pointer events for interactive children */
.holo-card-content * {
  pointer-events: auto;
}

/* THE HOLO OVERLAY LAYER */
.holo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  
  /* The Foil Gradient */
  background: 
    linear-gradient(
      115deg, 
      transparent 0%, 
      rgba(255, 0, 150, 0.3) 30%, 
      rgba(0, 255, 255, 0.3) 70%, 
      transparent 100%
    );
    
  /* Mask/Position the gradient based on mouse position */
  background-position: var(--x) var(--y);
  background-size: 200% 200%;
  
  /* Blending Magic: This makes it look like light, not paint */
  mix-blend-mode: color-dodge;
  opacity: 0.7;
  pointer-events: none;
}

.holo-card::after {
 /* glare layer */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  
  /* Radial gradient for the shiny reflection */
  background: radial-gradient(
    circle at var(--x) var(--y), 
    rgba(255, 255, 255, 0.6) 0%, 
    rgba(255, 255, 255, 0) 40%
  );
  
  mix-blend-mode: overlay;
  opacity: var(--glare-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.holo-card .noise {
    /* Add a subtle grain/noise texture for realism (Optional) */
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.sparkler {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    animation: sparkler-fade 0.8s linear forwards;
}

@keyframes sparkler-fade {
    0% { 
        transform: scale(1) translateY(0); 
        opacity: 1; 
        background: #ffdb11; /* Bright yellow spark */
        box-shadow: 0 0 10px #ff6600; 
    }
    100% { 
        transform: scale(0) translateY(20px); 
        opacity: 0; 
        background: #ff4500; /* Fades to red-orange */
    }
}