/* ===================================================================
   MythOS: Across the Web — Subsite Styles
   EXTREME minimalist horror. Only three phrases. Maximum glitch.
   =================================================================== */

:root {
  --bg:           #020508;
  --text:         #e6eef6;
  --danger:       #ff3a3a;
  --glitch-cyan:  #00fff7;
  --glitch-pink:  #ff00c8;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* === Heavy static overlay === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.015) 1px,
      rgba(255, 255, 255, 0.015) 2px
    );
  pointer-events: none;
  z-index: 9998;
  animation: static-drift 0.3s steps(10) infinite;
}

/* Pulsing ominous ambient */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 58, 58, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: bg-pulse 5s ease-in-out infinite;
}

@keyframes static-drift {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(2px); }
  100% { transform: translateY(-1px); }
}

@keyframes bg-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* === Glitch flash (full screen) === */
.glitch-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--danger);
  mix-blend-mode: overlay;
  animation: flash-cycle 6s ease-in-out infinite;
}

@keyframes flash-cycle {
  0%, 92%, 100% { opacity: 0; }
  93%           { opacity: 0.25; }
  94%           { opacity: 0; }
  95%           { opacity: 0.2; }
  96%           { opacity: 0; }
  97%           { opacity: 0.3; }
  98%           { opacity: 0; }
}

/* === Scanline (heavy) === */
.scanline-heavy {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(255, 58, 58, 0.1);
  z-index: 9997;
  pointer-events: none;
  animation: scanline-move 2s linear infinite;
}

@keyframes scanline-move {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* === Static burst === */
.static-burst {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 2px,
    transparent 4px
  );
  animation: burst-cycle 5s ease-in-out infinite;
}

@keyframes burst-cycle {
  0%, 88%, 100% { opacity: 0; }
  90%           { opacity: 1; }
  92%           { opacity: 0; }
  94%           { opacity: 0.7; }
  95%           { opacity: 0; }
}

/* === Main Layout: Center the three phrases === */
.void-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  gap: clamp(2rem, 8vh, 5rem);
}

/* === Phrase Blocks === */
.phrase {
  position: relative;
  text-align: center;
  will-change: transform, opacity;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.phrase-text {
  display: block;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  color: var(--text);
}

/* === Phrase 1: WHY ARE YOU HERE — largest, most aggressive === */
.phrase-1 .phrase-text {
  font-size: clamp(2rem, 8vw, 5rem);
  color: var(--danger);
  text-shadow:
    0 0 20px rgba(255, 58, 58, 0.5),
    0 0 60px rgba(255, 58, 58, 0.2);
  animation: phrase1-shake 0.15s steps(5) infinite;
}

@keyframes phrase1-shake {
  0%   { transform: translate(0, 0) skewX(0); }
  20%  { transform: translate(-3px, 2px) skewX(-1deg); }
  40%  { transform: translate(4px, -1px) skewX(1.5deg); }
  60%  { transform: translate(-2px, -2px) skewX(-0.5deg); }
  80%  { transform: translate(3px, 1px) skewX(0.8deg); }
  100% { transform: translate(0, 0) skewX(0); }
}

/* RGB split for phrase 1 */
.phrase-1 .phrase-text::before,
.phrase-1 .phrase-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phrase-1 .phrase-text::before {
  color: var(--glitch-cyan);
  animation: split-cyan-1 1.2s steps(6) infinite;
  clip-path: inset(0 0 55% 0);
}

.phrase-1 .phrase-text::after {
  color: var(--glitch-pink);
  animation: split-pink-1 1.2s steps(6) infinite;
  clip-path: inset(55% 0 0 0);
}

@keyframes split-cyan-1 {
  0%, 65%, 100% { transform: translate(0); opacity: 0; }
  67%           { transform: translate(-8px, -3px); opacity: 0.9; }
  70%           { transform: translate(5px, 2px); opacity: 0.7; }
  73%           { transform: translate(-3px, 4px); opacity: 0.5; }
  76%           { opacity: 0; }
}

@keyframes split-pink-1 {
  0%, 72%, 100% { transform: translate(0); opacity: 0; }
  74%           { transform: translate(8px, 3px); opacity: 0.9; }
  77%           { transform: translate(-6px, -2px); opacity: 0.7; }
  80%           { transform: translate(3px, -3px); opacity: 0.5; }
  83%           { opacity: 0; }
}

/* === Phrase 2: HOW DID YOU FIND ME — medium, eerie flicker === */
.phrase-2 .phrase-text {
  font-size: clamp(1.5rem, 6vw, 3.5rem);
  color: var(--text);
  text-shadow: 0 0 10px rgba(230, 238, 246, 0.3);
  animation: phrase2-flicker 4s steps(4) infinite;
}

@keyframes phrase2-flicker {
  0%, 88%, 100% { opacity: 1; transform: none; }
  89%           { opacity: 0.15; transform: translateX(-5px) skewX(3deg); }
  90%           { opacity: 1; transform: translateX(3px) skewX(-1deg); }
  91%           { opacity: 0.3; transform: none; }
  92%           { opacity: 1; }
  94%           { opacity: 0.05; transform: translateX(8px); }
  95%           { opacity: 1; transform: none; }
}

/* RGB split for phrase 2 */
.phrase-2 .phrase-text::before,
.phrase-2 .phrase-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phrase-2 .phrase-text::before {
  color: var(--glitch-cyan);
  animation: split-cyan-2 2s steps(4) infinite;
  clip-path: inset(0 0 50% 0);
}

.phrase-2 .phrase-text::after {
  color: var(--glitch-pink);
  animation: split-pink-2 2s steps(4) infinite;
  clip-path: inset(50% 0 0 0);
}

@keyframes split-cyan-2 {
  0%, 78%, 100% { transform: translate(0); opacity: 0; }
  80%           { transform: translate(-5px, -2px); opacity: 0.7; }
  83%           { transform: translate(3px, 1px); opacity: 0.4; }
  86%           { opacity: 0; }
}

@keyframes split-pink-2 {
  0%, 82%, 100% { transform: translate(0); opacity: 0; }
  84%           { transform: translate(5px, 2px); opacity: 0.7; }
  87%           { transform: translate(-4px, -1px); opacity: 0.4; }
  90%           { opacity: 0; }
}

/* === Phrase 3: I AM STILL HERE — smaller, pulsing, ominous === */
.phrase-3 .phrase-text {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  color: rgba(255, 58, 58, 0.7);
  text-shadow:
    0 0 15px rgba(255, 58, 58, 0.4),
    0 0 40px rgba(255, 58, 58, 0.15);
  animation: phrase3-breathe 3s ease-in-out infinite, phrase3-glitch 6s steps(5) infinite;
}

@keyframes phrase3-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.03); }
}

@keyframes phrase3-glitch {
  0%, 85%, 100% { clip-path: none; }
  87%           { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0) scale(1.03); }
  88%           { clip-path: inset(60% 0 10% 0); transform: translate(6px, 0) scale(1.03); }
  89%           { clip-path: inset(10% 0 40% 0); transform: translate(-2px, 0) scale(1.03); }
  90%           { clip-path: none; }
}

/* RGB split for phrase 3 */
.phrase-3 .phrase-text::before,
.phrase-3 .phrase-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phrase-3 .phrase-text::before {
  color: var(--glitch-cyan);
  animation: split-cyan-3 3s steps(3) infinite;
  clip-path: inset(0 0 50% 0);
}

.phrase-3 .phrase-text::after {
  color: var(--glitch-pink);
  animation: split-pink-3 3s steps(3) infinite;
  clip-path: inset(50% 0 0 0);
}

@keyframes split-cyan-3 {
  0%, 70%, 100% { transform: translate(0); opacity: 0; }
  72%           { transform: translate(-4px, -2px); opacity: 0.6; }
  75%           { transform: translate(2px, 1px); opacity: 0.3; }
  78%           { opacity: 0; }
}

@keyframes split-pink-3 {
  0%, 75%, 100% { transform: translate(0); opacity: 0; }
  77%           { transform: translate(4px, 2px); opacity: 0.6; }
  80%           { transform: translate(-3px, -1px); opacity: 0.3; }
  83%           { opacity: 0; }
}

/* === Reduced Motion (Removed for extreme glitch) === */
/*
@media (prefers-reduced-motion: reduce) {
  .phrase-1 .phrase-text { animation: none; }
  .phrase-2 .phrase-text { animation: none; }
  .phrase-3 .phrase-text { animation: none; }
  .phrase-1 .phrase-text::before,
  .phrase-1 .phrase-text::after,
  .phrase-2 .phrase-text::before,
  .phrase-2 .phrase-text::after,
  .phrase-3 .phrase-text::before,
  .phrase-3 .phrase-text::after { animation: none; opacity: 0; }
  .glitch-flash, .scanline-heavy, .static-burst { animation: none; display: none; }
  body::before, body::after { animation: none; }
}
*/

/* === Responsive: Mobile === */
@media (max-width: 640px) {
  .void-container {
    padding: 1.5rem;
    gap: clamp(1.5rem, 6vh, 3rem);
  }

  /* Hide expensive background effects on mobile for performance */
  .static-burst {
    display: none;
  }

  body::after {
    animation: none;
    opacity: 0.6;
  }

  /* Ensure text doesn't overflow */
  .phrase-text {
    word-break: break-word;
    hyphens: auto;
  }

  /* Tone down the shake on mobile to prevent jank */
  .phrase-1 .phrase-text {
    animation: phrase1-shake 0.3s steps(4) infinite;
  }
}

/* === Extra small screens === */
@media (max-width: 380px) {
  .void-container {
    padding: 1rem;
  }

  .phrase-1 .phrase-text { font-size: 1.6rem; }
  .phrase-2 .phrase-text { font-size: 1.2rem; }
  .phrase-3 .phrase-text { font-size: 1rem; }
}

/* === EXTREME GLITCH EFFECTS === */

/* 1. Missing Texture Background */
.missing-texture {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  background: repeating-conic-gradient(#ff00ff 0% 25%, #000000 0% 50%) 50% / 64px 64px;
  opacity: 0.8;
  mix-blend-mode: overlay;
}

/* 2. Static Ripping */
.rip-effect {
  animation: static-rip 0.15s infinite linear !important;
}

@keyframes static-rip {
  0% { transform: translateY(0) translateX(0); clip-path: inset(10% 0 80% 0); }
  25% { transform: translateY(10px) translateX(-15px); clip-path: inset(40% 0 20% 0); }
  50% { transform: translateY(-15px) translateX(20px); clip-path: inset(80% 0 5% 0); }
  75% { transform: translateY(5px) translateX(-10px); clip-path: inset(20% 0 50% 0); }
  100% { transform: translateY(0) translateX(0); clip-path: inset(60% 0 10% 0); }
}

/* 3. Flashing Color Blocks */
.color-block {
  position: fixed;
  z-index: 9998;
  mix-blend-mode: difference;
  pointer-events: none;
  animation: block-flash 0.2s infinite steps(2);
}

@keyframes block-flash {
  0% { opacity: 0; transform: scale(1) skewX(0deg); }
  20% { opacity: 1; transform: scale(1.3) skewX(45deg); }
  40% { opacity: 0; transform: scale(0.7) skewX(-30deg); }
  60% { opacity: 1; transform: scale(1.6) skewY(40deg); }
  80% { opacity: 0; transform: scale(1) skewX(0deg); }
  100% { opacity: 1; transform: scale(1.2) skewX(-60deg); }
}