/* === Custom Fonts === */
@font-face {
  font-family: 'WhoAsksSatan';
  src: url('assets/fonts/whoaskssatan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gravedigger';
  src: url('assets/fonts/Gravedigger.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* === Reset & Base Styles === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
body, html {
  height: 100%;
  background-color: #000;
  color: #ccc;
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
}

/* === Corridor Background === */
.background-layers {
  position: fixed;
  inset: 0;
  background: 
    linear-gradient(0deg, rgba(0,0,0,0.7) 70%, transparent 100%),
    radial-gradient(ellipse at 60% 90%, rgba(10,10,10,0.68) 55%, transparent 85%),
    url('assets/rcvhilok5ph6bhbrimuf.jpg') center/cover no-repeat;
  filter: brightness(0.23) contrast(1.18) grayscale(0.93) blur(1.3px);
  z-index: -2;
}

/* === Global VHS Overlay === */
.vhs-overlay,
.vhs-gif-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
}
.vhs-overlay {
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.13;
  z-index: 99;
  transition: opacity 0.3s;
}
.vhs-gif-overlay {
  background: url('assets/VHS1.gif') center/cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.11;
  z-index: 98;
  transition: opacity 0.3s;
}

/* === Main Foreground Content === */
.content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.container {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
}

/* === Brutal Horror Title Effect with Rare RGB Split === */
.title {
  font-family: 'WhoAsksSatan', sans-serif;
  font-size: 3rem;
  letter-spacing: 2px;
  color: #fff;
  position: relative;
  margin-bottom: 1.5rem;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom, 
    rgba(255,255,255,0.045) 0px, 
    rgba(255,255,255,0.045) 2px, 
    transparent 2px, 
    transparent 5px
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: horror-flicker 3.4s infinite steps(1), scan-move 0.9s linear infinite;
  text-shadow:
    0 0 1px #000, 0 0 6px #700,
    0 1px 5px #6c001a,
    1px 1px 0 #4d0000;
  overflow: visible;
}

/* RGB ghost layers for split effect */
.title::before,
.title::after,
.title .rgb-glitch {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0; width: 100%;
  pointer-events: none;
  z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
}

.title::before {
  color: #ff2121;
  filter: blur(0.5px);
  mix-blend-mode: lighten;
  opacity: 0.13;
  animation: rgb-red-glitch 8.6s infinite steps(1) alternate;
}
.title::after {
  color: #21fff6;
  filter: blur(0.5px);
  mix-blend-mode: lighten;
  opacity: 0.13;
  animation: rgb-cyan-glitch 10.2s infinite steps(1) alternate;
}
.title .rgb-glitch {
  color: #38ff21;
  filter: blur(0.4px);
  mix-blend-mode: lighten;
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0.11;
  pointer-events: none;
  animation: rgb-green-glitch 13.7s infinite steps(1) alternate;
}

/* Main flicker and scan (keep as before) */
@keyframes horror-flicker {
  0%, 100% { filter: none; transform: none; opacity: 1;}
  3% { opacity: 0.65; transform: skewX(1.5deg);}
  5% { filter: blur(1px); opacity: 0.45; transform: translateX(-1px);}
  7% { filter: blur(0.7px); opacity: 0.85;}
  11% { filter: blur(0.2px); }
  16% { opacity: 0.4; transform: translateY(2px) scaleX(1.05);}
  17% { opacity: 1; filter: none;}
  18% { transform: translateY(-2px);}
  22% { filter: contrast(2.4) brightness(2.1);}
  30% { opacity: 0.9; filter: none;}
  37% { filter: blur(2px); opacity: 0.3;}
  44% { opacity: 0.95;}
  52% { transform: scaleX(1.1);}
  61% { opacity: 0.41; filter: blur(1.4px);}
  69% { filter: none; }
  71% { opacity: 1; filter: none;}
  72% { transform: translateX(4px) skewX(-2deg);}
  77% { opacity: 0.1;}
  80% { opacity: 1; transform: none;}
}
@keyframes scan-move {
  0% { background-position-y: 0px; }
  100% { background-position-y: 5px; }
}

/* Rare, randomized RGB SPLITS */
@keyframes rgb-red-glitch {
  0%,91%,100%   { opacity: 0.07; transform: none;}
  8.5%         { opacity: 0.27; transform: translate(-2px, 0);}
  9.5%         { opacity: 0.36; transform: translate(-6px, 2px) skewY(-2deg) scaleX(1.12);}
  10.4%         { opacity: 0.09; transform: none;}
  32%           { opacity: 0.28; transform: translate(-4px, -1px);}
  34.5%         { opacity: 0.1; transform: none;}
  71%           { opacity: 0.21; transform: translate(-2px, 2px);}
  75.5%         { opacity: 0.07; transform: none;}
}
@keyframes rgb-cyan-glitch {
  0%,95%,100%   { opacity: 0.09; transform: none;}
  7.5%          { opacity: 0.23; transform: translate(3px, -2px);}
  8.7%           { opacity: 0.31; transform: translate(8px, 1px) skewY(2deg);}
  12.3%         { opacity: 0.09; transform: none;}
  46%           { opacity: 0.21; transform: translate(3px, 3px);}
  49%           { opacity: 0.08; transform: none;}
  88%           { opacity: 0.19; transform: translate(2px, -1px);}
  92.5%         { opacity: 0.07; transform: none;}
}
@keyframes rgb-green-glitch {
  0%, 97%, 100% { opacity: 0.08; transform: none;}
  13%           { opacity: 0.26; transform: translate(-3px, -2px) scaleX(1.07);}
  14.5%         { opacity: 0.09; transform: none;}
  58%           { opacity: 0.16; transform: translate(4px, 1px);}
  62.5%         { opacity: 0.08; transform: none;}
  87%           { opacity: 0.15; transform: translate(0px, -3px) scaleX(1.1);}
  91.5%         { opacity: 0.09; transform: none;}
}

/* === Subtitle === */
.subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.2rem;
  margin-bottom: 2rem;
  font-style: italic;
  color: #ddd;
  text-shadow: 0 0 4px black;
}
.whisper {
  color: #fff;
  opacity: 0.5;
  font-style: italic;
  font-family: monospace;
  text-shadow: 0 0 2px #800;
}

/* === Oath Grid === */
.oath-grid {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  max-width: 300px;
}

/* === Oath Seal Buttons === */
.oath-seal {
  font-family: 'Gravedigger', sans-serif;
  padding: 1rem;
  border: 1px solid #bbb;
  background: rgba(30, 30, 30, 0.85);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  backdrop-filter: blur(2px);
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.oath-seal:hover {
  background: rgba(255, 0, 0, 0.1);
  border-color: #ff0000;
  color: #ff0000;
  text-shadow: 0 0 5px #ff0000;
}
.oath-locked {
  pointer-events: none !important;
  filter: grayscale(1) brightness(0.6) blur(0.5px);
  opacity: 0.6;
  cursor: not-allowed !important;
  text-shadow: none !important;
  border-color: #444 !important;
  color: #d44 !important;
  background: rgba(30, 0, 0, 0.66) !important;
}

/* === Dev Hotspot anti-highlight (optional, extra-redundant) === */
#dev-hotspot {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation;
  background: transparent !important;
}