@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Space+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@200;300;400;500&display=swap');

/* 1. RESET & UTILITIES */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    cursor: none !important; 
}

@media (pointer: coarse) {
    * { cursor: auto !important; }
    #cursor { display: none !important; }
}

body.theme-blueprint {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.rpg-title {
    font-family: 'Cinzel', serif;
}

/* 2. THE DRAFTING BOARD CURSOR */
#cursor {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #111111;
    position: fixed;
    top: 0; left: 0;
    z-index: 10000;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#cursor::before {
    content: '';
    position: absolute;
    top: 50%; left: -15px;
    width: 40px; height: 1px;
    background: rgba(0, 0, 0, 0.15);
}

#cursor::after {
    content: '';
    position: absolute;
    left: 50%; top: -15px;
    height: 40px; width: 1px;
    background: rgba(0, 0, 0, 0.15);
}

/* 3. PARALLAX STREAKS OF COLOR */
.streak {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.4) 30%, rgba(245, 158, 11, 0.6) 70%, transparent);
    border-radius: 9999px;
    pointer-events: none;
    will-change: transform;
}

.streak-1 { left: 12%; top: -10%; height: 35vh; }
.streak-2 { left: 45%; top: -30%; height: 55vh; width: 3px; opacity: 0.7; filter: blur(1px); }
.streak-3 { left: 70%; top: -5%; height: 25vh; opacity: 0.5; }
.streak-4 { left: 92%; top: -20%; height: 45vh; width: 2px; opacity: 0.8; }

/* 4. CHARACTER IMG STYLE & LIGHTNING SVG GLOW */
#character-img {
    transition: opacity 0.1s, transform 0.1s;
    filter: drop-shadow(0 20px 50px rgba(245, 158, 11, 0.25));
}

#lightning-glow, #lightning-core {
    /* Connect the stroke-dash to force instant drawing speed if scrubbed fast */
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

/* 5. SHOWCASE PLATES */
.plate-container-left, .plate-container-right {
    will-change: transform;
    perspective: 1000px;
}

.plate {
    transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s;
    will-change: transform, opacity;
}

.plate:hover {
    border-color: #111111;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.15);
}

/* 6. ANIMATIONS & REVEALS */
.reveal-blur {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(15px);
    will-change: transform, opacity, filter;
}

@keyframes scroll-line {
    0% { transform: translateY(-100%); }
    80% { transform: translateY(200%); }
    100% { transform: translateY(200%); }
}

.scroll-line-anim {
    animation: scroll-line 2.2s infinite cubic-bezier(0.15, 0.85, 0.35, 1);
}

/* Jittery displacement and neon shadow animation */
@keyframes glitch-demon {
  /* "Gods" State - Normal text color, no glitch */
  0%, 70%, 100% {
    content: "Gods";
    color: inherit;
    transform: translate(0);
    text-shadow: none;
  }
  
  /* Brief corruption transition */
  73% {
    content: "EVILS";
    color: #dc2626; /* Tailwind text-red-600 */
    transform: translate(-1.5px, 1px);
    text-shadow: 1.5px -1px 0 rgba(220, 38, 38, 0.5), -1px 1px 0 #000;
  }
  
  /* "Demons" State - Jittering & Red */
  75% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(1px, -1px);
    text-shadow: -1px -1.5px 0 rgba(220, 38, 38, 0.8), 1.5px 1px 0 #000;
  }
  78% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(-1.5px, 0.5px);
    text-shadow: 1.5px -1px 0 rgba(220, 38, 38, 0.8), -0.5px 0.5px 0 #000;
  }
  82% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(1px, 1.5px);
    text-shadow: -1px -1px 0 rgba(220, 38, 38, 0.8), 1px 1px 0 #000;
  }
  86% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(-1px, -1px);
    text-shadow: 1px 1px 0 rgba(220, 38, 38, 0.8), -1px -1px 0 #000;
  }
  89% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(1.5px, -1px);
    text-shadow: -1.5px 1px 0 rgba(220, 38, 38, 0.8), 1px -1.5px 0 #000;
  }
  91% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(-1px, 1px);
    text-shadow: 1px -1px 0 rgba(220, 38, 38, 0.8), -1px 1px 0 #000;
  }
  93% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(1px, -1px);
    text-shadow: -1px -1.5px 0 rgba(220, 38, 38, 0.8), 1.5px 1px 0 #000;
  }
  
  /* Brief corruption transition back */
  96% {
    content: "EVILS";
    color: #dc2626;
    transform: translate(-1px, 1.5px);
    text-shadow: 1.5px 1.5px 0 rgba(220, 38, 38, 0.8), -1px -1px 0 #000;
  }
}

.glitch-word {
  display: inline-block;
}

/* inline-block is required for translate transforms to function on pseudo-elements */
.glitch-word::after {
  content: "Gods";
  display: inline-block;
  animation: glitch-demon 4s infinite;
}