/* ══════════════════════════════════════════════════════════════
   PERSONA 4 REVIVAL - CRT CATHODE-RAY SHADER & COMPOSITING LAYER
   Hardware-accelerated CSS3 with 60 FPS Compositing Pipeline
   Strictly executes on transform3d, opacity, polygon clip-paths
   ══════════════════════════════════════════════════════════════ */

:root {
  --p4-yellow: #fff300;
  --p4-dark-yellow: #cea519;
  --p4-charcoal: #2d2d2d;
  --p4-cyan: #00deff;
  --p4-slant-deg: -14deg;
  --p4-slash-clip: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  --p4-badge-clip: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
}

/* 60 FPS Hardware Acceleration Compositing Root */
.p4-hardware-layer {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
}

/* 14-Degree Slanted Comic Slash Wipe Utility */
.p4-slash-14deg {
  clip-path: polygon(0 0, 100% 0, calc(100% - 3vw) 100%, 0 100%);
  transform: translate3d(0, 0, 0);
  transition: clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cathode-Ray Tube (CRT) Scanline Shader Overlay */
.crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.28) 50%
  ),
  linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.04),
    rgba(0, 255, 0, 0.02),
    rgba(0, 0, 255, 0.04)
  );
  background-size: 100% 4px, 6px 100%;
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Cathode-Ray Scanline Flash Animation */
@keyframes crt-scanline-pulse {
  0% {
    transform: translate3d(0, -100%, 0);
    opacity: 0.2;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translate3d(0, 100%, 0);
    opacity: 0.2;
  }
}

.crt-beam-flash {
  position: absolute;
  inset: 0;
  height: 20%;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 243, 0, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 243, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 26;
  animation: crt-scanline-pulse 3s linear infinite;
  mix-blend-mode: screen;
}

/* Chromatic RGB Glitch Noise */
@keyframes crt-rgb-flicker {
  0% {
    text-shadow: 2px 0 0 rgba(255, 0, 0, 0.8), -2px 0 0 rgba(0, 222, 255, 0.8);
    transform: translate3d(0, 0, 0);
  }
  20% {
    text-shadow: -2px 0 0 rgba(255, 0, 0, 0.8), 2px 0 0 rgba(0, 222, 255, 0.8);
    transform: translate3d(-1px, 1px, 0);
  }
  40% {
    text-shadow: 1px -1px 0 rgba(255, 0, 0, 0.7), -1px 1px 0 rgba(0, 222, 255, 0.7);
    transform: translate3d(1px, -1px, 0);
  }
  60% {
    text-shadow: -3px 0 0 rgba(255, 0, 0, 0.85), 3px 0 0 rgba(0, 222, 255, 0.85);
    transform: translate3d(2px, 0, 0);
  }
  80% {
    text-shadow: 0 0 0 transparent;
    transform: translate3d(0, 0, 0);
  }
  100% {
    text-shadow: 2px 0 0 rgba(255, 0, 0, 0.8), -2px 0 0 rgba(0, 222, 255, 0.8);
    transform: translate3d(0, 0, 0);
  }
}

.p4-rgb-glitch {
  animation: crt-rgb-flicker 0.18s steps(2, start) infinite;
}

/* Soundbox Floating Audio Rack */
.p4-soundbox-rack {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #2d2d2d;
  border: 2px solid #fff300;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  box-shadow: 4px 4px 0 #000, 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.p4-soundbox-rack:hover {
  transform: translate3d(-2px, -2px, 0);
  box-shadow: 6px 6px 0 #000, 0 12px 28px rgba(0, 0, 0, 0.5);
}

.p4-soundbox-btn {
  background: #fff300;
  border: none;
  color: #2d2d2d;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s ease, transform 0.1s ease;
}

.p4-soundbox-btn:hover {
  background: #00deff;
  color: #fff;
}

.p4-soundbox-btn:active {
  transform: scale3d(0.95, 0.95, 1);
}

.p4-soundbox-label {
  color: #fff300;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Circular Nav Drawer Burst Wipe Animation */
@keyframes site-nav-drawer-clip-open {
  0% {
    clip-path: circle(0% at var(--site-nav-drawer-clip-cx, calc(100% - 3.54167vw)) var(--site-nav-drawer-clip-cy, 2.76042vw));
  }
  100% {
    clip-path: circle(150% at var(--site-nav-drawer-clip-cx, calc(100% - 3.54167vw)) var(--site-nav-drawer-clip-cy, 2.76042vw));
  }
}

@keyframes site-nav-drawer-clip-close {
  0% {
    clip-path: circle(150% at var(--site-nav-drawer-clip-cx, calc(100% - 3.54167vw)) var(--site-nav-drawer-clip-cy, 2.76042vw));
  }
  100% {
    clip-path: circle(0% at var(--site-nav-drawer-clip-cx, calc(100% - 3.54167vw)) var(--site-nav-drawer-clip-cy, 2.76042vw));
  }
}