/* ═══════════════════════════════════════════════════════════
   36TH CHAMBER — Site Enhancements
   enhancements.css
═══════════════════════════════════════════════════════════ */

/* ── CURSOR ───────────────────────────────────────────────── */
* { cursor: none !important; }

#shuriken-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 999999;
  will-change: transform;
}
#shuriken-cursor svg {
  width: 100%;
  height: 100%;
  transition: filter 0.15s;
}
body.cursor-hover #shuriken-cursor svg {
  filter: drop-shadow(0 0 6px rgba(200,57,43,0.9));
}
body.cursor-hover #shuriken-cursor .blade { fill: #c8392b; }
body.cursor-hover #shuriken-cursor .hub   { fill: #e8e0d0; }

/* ── TRAIL CANVAS ─────────────────────────────────────────── */
#trail-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
}

/* ── SPARKS CANVAS ────────────────────────────────────────── */
#sparks-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.65;
}

/* ── CHAMBER DOOR (intro) ─────────────────────────────────── */
#chamber-door {
  position: fixed;
  inset: 0;
  z-index: 999990;
  overflow: hidden;
}
#chamber-door .door-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: #0a0705;
  transition: transform 1.15s cubic-bezier(0.77, 0, 0.175, 1);
}
#chamber-door .door-panel.left  { left: 0;  border-right: 1px solid #2a2018; }
#chamber-door .door-panel.right { right: 0; border-left:  1px solid #2a2018; }
#chamber-door.opening .door-panel.left  { transform: translateX(-100%); }
#chamber-door.opening .door-panel.right { transform: translateX(100%); }

/* Centre content sits above both panels */
#chamber-door .door-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  pointer-events: none;
}
#chamber-door .door-logo {
  width: 130px;
  height: 130px;
  object-fit: contain;
  mix-blend-mode: screen;
  animation: doorLogoReveal 2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes doorLogoReveal {
  0%   { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
#chamber-door .door-eyebrow {
  font-family: 'HoloMono', monospace;
  font-size: 9px;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: #c9a84c;
  opacity: 0;
  animation: doorTextReveal 2s ease forwards 0.6s;
}
#chamber-door .door-title {
  font-family: 'HoloComp', sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 8vw, 88px);
  text-transform: uppercase;
  color: #e8e0d0;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  animation: doorTextReveal 2s ease forwards 0.9s;
}
#chamber-door .door-divider {
  width: 48px;
  height: 1px;
  background: #c8392b;
  opacity: 0;
  animation: doorTextReveal 2s ease forwards 1.1s;
}
#chamber-door .door-sub {
  font-family: 'HoloMono', monospace;
  font-size: 8px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #3a3028;
  opacity: 0;
  animation: doorTextReveal 1.5s ease forwards 1.3s;
}
@keyframes doorTextReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── INK TRANSITION ───────────────────────────────────────── */
#ink-overlay {
  position: fixed;
  inset: 0;
  background: #0a0705;
  pointer-events: none;
  z-index: 999985;
}

/* ── MUSIC TOGGLE ─────────────────────────────────────────── */
#music-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: rgba(10,7,5,0.94);
  border: 1px solid #2a2018;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color 0.2s, background 0.2s;
}
#music-toggle:hover {
  border-color: #c9a84c;
  background: rgba(20,14,10,0.98);
}
#music-icon {
  width: 14px;
  height: 14px;
  fill: #3a3028;
  transition: fill 0.25s;
}
#music-toggle.playing #music-icon { fill: #c9a84c; }
#music-toggle.playing {
  border-color: rgba(201,168,76,0.35);
}

/* Pulsing ring when playing */
#music-toggle.playing::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(201,168,76,0.2);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  animation: musicPulse 2.4s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.04); }
}