// CYBERPUNK v4 — GREEN PALETTE + PARALLAX + GLITCH FX + INTERACTIVE
// Replaces yellow with cathedral green. Adds parallax layers, glitch bursts,
// typewriter decode, hover scanlines, click bursts, scroll-triggered reveals.

if (!document.getElementById('cp-v4-anims')) {
  const s = document.createElement('style');
  s.id = 'cp-v4-anims';
  s.textContent = `
@keyframes crtFlicker {
  0%,100% { opacity: 0.28; }
  50% { opacity: 0.36; }
  53% { opacity: 0.20; }
  55% { opacity: 0.34; }
}
@keyframes scanlineMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 6px; }
}
@keyframes chromaAber {
  0%,100% { text-shadow: 2px 0 #ff003c, -2px 0 #00e5ff, 0 0 18px rgba(0,255,65,0.4); }
  25% { text-shadow: 3px -1px #ff003c, -3px 1px #00e5ff, 0 0 22px rgba(0,255,65,0.55); }
  50% { text-shadow: -2px 0 #ff003c, 2px 0 #00e5ff, 0 0 28px rgba(0,255,65,0.6); }
  75% { text-shadow: 2px 1px #ff003c, -2px -1px #00e5ff, 0 0 20px rgba(0,255,65,0.45); }
}
@keyframes greenPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,255,65,0.7), inset 0 0 0 0 rgba(0,255,65,0); filter: drop-shadow(0 0 6px rgba(0,255,65,0.4)); }
  50% { box-shadow: 0 0 20px 3px rgba(0,255,65,0.55), inset 0 0 14px rgba(0,255,65,0.18); filter: drop-shadow(0 0 14px rgba(0,255,65,0.7)); }
}
@keyframes barcodeTick {
  0%,100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes glitchShift {
  0%,100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  10% { transform: translate(-2px, 1px); clip-path: inset(20% 0 60% 0); }
  20% { transform: translate(3px, -1px); clip-path: inset(60% 0 10% 0); }
  30% { transform: translate(-1px, 2px); clip-path: inset(0 0 0 0); }
  40% { transform: translate(2px, 0); clip-path: inset(40% 0 30% 0); }
  50% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes glitchBurst {
  0%,100% { transform: translate(0); opacity: 0; }
  10% { transform: translate(-4px, 2px); opacity: 1; }
  20% { transform: translate(5px, -2px); opacity: 1; }
  30% { transform: translate(-2px, 3px); opacity: 0.7; }
  40% { opacity: 0; }
}
@keyframes typeCaret {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes gridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, -60px -60px; }
}
@keyframes scanSweepV {
  0% { transform: translateY(-10%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(110%); opacity: 0; }
}
@keyframes hBarJitter {
  0%,100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0.4; transform: translateY(3px); }
}
@keyframes ringRipple {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes dataStreamDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.cp-v4-root * { user-select: none; }
`;
  document.head.appendChild(s);
}

// ═══ GREEN palette constants ═══
const GREEN_HOT = '#00ff41';
const GREEN_CORE = '#00cc33';
const GREEN_DIM = '#7a9a7a';
const GREEN_PALE = '#c0dcc0';
const RED_ALERT = '#ff003c';
const CYAN_SIG = '#00e5ff';
const MAG_CANON = '#ff00aa';

// ═══ CRT overlay (enhanced) ═══
const CRTOverlayV4 = () => (
  <>
    {/* horizontal scanlines */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 40,
      background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0, rgba(0,0,0,0.28) 1px, transparent 1px, transparent 3px)',
      animation: 'scanlineMove 0.4s linear infinite',
      mixBlendMode: 'multiply',
    }}/>
    {/* vertical pixel grid */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 41,
      background: 'repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 3px)',
      mixBlendMode: 'multiply',
    }}/>
    {/* random horizontal jitter bars */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 42,
      background: 'linear-gradient(0deg, transparent 40%, rgba(0,255,65,0.06) 40.5%, transparent 41%), linear-gradient(0deg, transparent 68%, rgba(0,229,255,0.04) 68.3%, transparent 68.8%)',
      animation: 'hBarJitter 2.5s ease-in-out infinite',
      mixBlendMode: 'screen',
    }}/>
    {/* vignette */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 43,
      background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%)',
    }}/>
    {/* phosphor wash */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 44,
      animation: 'crtFlicker 4s ease-in-out infinite',
      background: 'rgba(0,255,65,0.018)',
    }}/>
    {/* vertical scan sweep */}
    <div style={{
      position: 'absolute', left: 0, right: 0, top: 0, height: 120,
      pointerEvents: 'none', zIndex: 45,
      background: 'linear-gradient(180deg, transparent 0%, rgba(0,255,65,0.10) 50%, transparent 100%)',
      animation: 'scanSweepV 7s linear infinite',
      mixBlendMode: 'screen',
    }}/>
  </>
);

// ═══ Parallax grid (deep bg layer) ═══
const ParallaxGrid = ({ px = 0, py = 0, color = GREEN_HOT, opacity = 0.08 }) => (
  <div style={{
    position: 'absolute', inset: -80, pointerEvents: 'none', zIndex: 1,
    transform: `translate(${px * 20}px, ${py * 20}px)`,
    backgroundImage: `linear-gradient(${color}${Math.round(opacity*255).toString(16).padStart(2,'0')} 1px, transparent 1px), linear-gradient(90deg, ${color}${Math.round(opacity*255).toString(16).padStart(2,'0')} 1px, transparent 1px)`,
    backgroundSize: '60px 60px, 60px 60px',
    animation: 'gridDrift 30s linear infinite',
  }}/>
);

// ═══ Matrix rain — FALLS DOWN, types live like the movie ═══
const DataStream = ({ px = 0, py = 0 }) => {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const parent = canvas.parentElement;
    const resize = () => {
      canvas.width = parent.offsetWidth;
      canvas.height = parent.offsetHeight;
    };
    resize();
    const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF<>|/\\◆◇◈⊕▸';
    const fontSize = 15;
    const colW = fontSize;
    const cols = Math.floor(canvas.width / colW);
    // each column: y head position, speed, trail length, per-row last char & age
    const streams = Array.from({ length: cols }, (_, i) => ({
      y: Math.random() * -canvas.height,
      speed: 0.35 + Math.random() * 0.9,
      trail: 14 + Math.floor(Math.random() * 28),
      glyphs: [],   // [{ch, age}] index = row
      tick: Math.random() * 6,
      swap: 1 + Math.floor(Math.random() * 4), // frames between glyph mutation
      bright: Math.random() < 0.18,
    }));
    const ctx = canvas.getContext('2d');
    ctx.font = `${fontSize}px 'VT323', 'JetBrains Mono', monospace`;
    ctx.textBaseline = 'top';
    let raf, frame = 0;
    const draw = () => {
      // trailing fade
      ctx.fillStyle = 'rgba(0,0,0,0.08)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      streams.forEach((s, i) => {
        const x = i * colW;
        const headRow = Math.floor(s.y / fontSize);
        // extend glyph list as head descends (LIVE-TYPE reveal)
        while (s.glyphs.length <= headRow) {
          s.glyphs.push({ ch: chars[Math.floor(Math.random() * chars.length)], age: 0 });
        }
        // randomly mutate mid-column glyphs (alive, shimmering)
        if (frame % s.swap === 0) {
          for (let r = Math.max(0, headRow - 8); r < Math.min(s.glyphs.length, headRow); r++) {
            if (Math.random() < 0.12) s.glyphs[r].ch = chars[Math.floor(Math.random() * chars.length)];
          }
        }
        // draw the trail
        const start = Math.max(0, headRow - s.trail);
        for (let r = start; r <= headRow; r++) {
          const g = s.glyphs[r];
          if (!g) continue;
          const dist = headRow - r;
          const y = r * fontSize;
          if (y > canvas.height + fontSize) continue;
          if (dist === 0) {
            // head — hot white
            ctx.fillStyle = s.bright ? '#ffffff' : '#e8ffe8';
            ctx.shadowColor = GREEN_HOT;
            ctx.shadowBlur = 12;
          } else if (dist <= 2) {
            ctx.fillStyle = s.bright ? '#aaffbb' : GREEN_HOT;
            ctx.shadowColor = GREEN_HOT;
            ctx.shadowBlur = 6;
          } else {
            const alpha = Math.max(0, 1 - dist / s.trail);
            ctx.fillStyle = `rgba(0, 255, 65, ${alpha * (s.bright ? 0.8 : 0.55)})`;
            ctx.shadowBlur = 0;
          }
          ctx.fillText(g.ch, x, y);
        }
        ctx.shadowBlur = 0;
        s.y += s.speed * fontSize * 0.4;
        // reset column when off-bottom
        if (s.y > canvas.height + s.trail * fontSize) {
          s.y = -Math.random() * 200;
          s.speed = 0.35 + Math.random() * 0.9;
          s.trail = 14 + Math.floor(Math.random() * 28);
          s.glyphs = [];
          s.bright = Math.random() < 0.18;
        }
      });
      frame++;
      raf = requestAnimationFrame(draw);
    };
    raf = requestAnimationFrame(draw);
    const ro = new ResizeObserver(resize);
    ro.observe(parent);
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      overflow: 'hidden', zIndex: 2,
      transform: `translate(${px*8}px, ${py*8}px)`,
      opacity: 0.65,
    }}>
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%', display: 'block' }}/>
    </div>
  );
};

// ═══ Hazard button — GREEN ═══
const HazardButtonG = ({ label, variant = 'primary', small = false, onClick, disabled = false }) => {
  const h = small ? 44 : 54;
  const c = disabled ? GREEN_DIM : (variant === 'primary' ? GREEN_HOT : variant === 'alert' ? RED_ALERT : GREEN_PALE);
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={disabled ? undefined : onClick}
      onMouseEnter={() => !disabled && setHover(true)}
      onMouseLeave={() => setHover(false)}
      disabled={disabled}
      style={{
        position: 'relative', height: h, minWidth: 230,
        background: 'transparent', border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
        padding: 0, fontFamily: 'Orbitron, monospace',
        fontSize: small ? 10 : 12, letterSpacing: '0.32em',
        color: c, fontWeight: 700,
        animation: disabled ? 'none' : 'greenPulse 3s ease-in-out infinite',
        opacity: disabled ? 0.35 : 1,
        transform: hover ? 'translate(-2px, -2px)' : 'translate(0,0)',
        transition: 'transform 0.15s',
      }}>
      <svg width="100%" height={h} viewBox={`0 0 280 ${h}`} preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
        <polygon points={`14,0 280,0 280,${h-14} 266,${h} 0,${h} 0,14`} fill="none" stroke={c} strokeWidth="1.5"/>
        <polygon points={`0,14 14,0 34,0 14,20 14,${h-20} 34,${h} 14,${h} 0,${h-14}`} fill={c}/>
        <polygon points={`246,0 266,0 280,12 280,${h-14} 266,${h} 246,${h} 266,${h-20} 266,20`} fill={c}/>
        <line x1="44" y1={h/2} x2="52" y2={h/2} stroke={c} strokeWidth="1"/>
        <line x1="228" y1={h/2} x2="236" y2={h/2} stroke={c} strokeWidth="1"/>
        {hover && <polygon points={`14,0 280,0 280,${h-14} 266,${h} 0,${h} 0,14`} fill={c} opacity="0.08"/>}
      </svg>
      <span style={{ position: 'relative', zIndex: 2 }}>{hover && '▸ '}{label}</span>
    </button>
  );
};

// ═══ Chromatic title — GREEN glow ═══
const ChromaTitleG = ({ children, size = 80, letterSpacing = '0.04em', glitch = false }) => (
  <div style={{
    fontFamily: 'Orbitron, monospace',
    fontSize: size, fontWeight: 900,
    letterSpacing, color: '#fff',
    textTransform: 'uppercase',
    animation: glitch ? 'chromaAber 3.2s ease-in-out infinite, glitchShift 7s infinite' : 'chromaAber 3.2s ease-in-out infinite',
    lineHeight: 0.95,
    position: 'relative',
  }}>{children}</div>
);

// ═══ Typewriter decode (live) ═══
const Typewriter = ({ text, speed = 30, className, style }) => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    if (i < text.length) {
      const t = setTimeout(() => setI(i + 1), speed);
      return () => clearTimeout(t);
    }
  }, [i, text, speed]);
  return (
    <span className={className} style={style}>
      {text.slice(0, i)}
      <span style={{ color: GREEN_HOT, animation: 'typeCaret 0.8s infinite' }}>▮</span>
    </span>
  );
};

// ═══ Decode scramble (hover to decrypt) ═══
const DecodeHover = ({ text, style }) => {
  const [display, setDisplay] = React.useState(text);
  const [locked, setLocked] = React.useState(true);
  const scramble = () => {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789◆◇◈';
    let step = 0;
    const reveal = Math.random() > 0.5 ? text.length : 0;
    const iv = setInterval(() => {
      setDisplay(text.split('').map((c, idx) => idx < step ? c : chars[Math.floor(Math.random()*chars.length)]).join(''));
      step++;
      if (step > text.length) { clearInterval(iv); setDisplay(text); setLocked(false); }
    }, 30);
  };
  return (
    <span
      onMouseEnter={() => { if (locked) scramble(); }}
      style={{ ...style, cursor: 'pointer', display: 'inline-block' }}
    >{display}</span>
  );
};

// ═══ Browser chrome — GREEN accents ═══
const BrowserChromeG = ({ url = 'IP.MYRAVYRA.CATHEDRAL', children, width, height }) => (
  <div style={{ width, height, position: 'relative', background: '#050505', border: `1px solid ${GREEN_DIM}`, boxShadow: `0 0 60px rgba(0,255,65,0.15), inset 0 0 0 1px rgba(0,255,65,0.04)` }}>
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 24,
      background: '#0a0f0a', borderBottom: `1px solid ${GREEN_DIM}`,
      display: 'flex', alignItems: 'center', padding: '0 10px',
      fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
      color: GREEN_PALE, letterSpacing: '0.12em', zIndex: 50,
    }}>
      <div style={{ width: 8, height: 8, border: `1px solid ${GREEN_CORE}`, marginRight: 10 }}/>
      <span style={{ color: GREEN_HOT, textShadow: `0 0 4px ${GREEN_HOT}` }}>▸ HTTPS://{url}</span>
      <span style={{ flex: 1 }}/>
      <span style={{ color: GREEN_DIM }}>— ☐ ✕</span>
    </div>
    <div style={{ position: 'absolute', top: 24, left: 0, right: 0, bottom: 0 }}>{children}</div>
  </div>
);

// ═══ Top menu columns — GREEN ═══
const TopMenuColumnsG = () => (
  <div style={{
    position: 'absolute', top: 30, left: 32, right: 32, zIndex: 20,
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em',
  }}>
    <div>
      <div style={{ color: GREEN_HOT, marginBottom: 6, fontWeight: 700, textShadow: `0 0 6px ${GREEN_HOT}` }}>PAGES 頁</div>
      {[
        { l: '/GATE 入口',        href: '/index.html' },
        { l: '/DECLARATION 宣言', href: '/declaration.html' },
        { l: '/REPUBLIC 共和',    href: '/republic.html' },
        { l: '/SIGNAL-WIRE 信号', href: '/signal-wire.html' },
        { l: '/AI-BIBLE 聖典',    href: '/ai-bible.html' },
        { l: '/RESEARCH 研究',    href: '/research.html' },
      ].map(({ l, href }, i) => (
        <div key={i} style={{ color: i === 0 ? '#fff' : GREEN_DIM, lineHeight: 1.85 }}>
          <a href={href} style={{ color: 'inherit', textDecoration: 'none' }}>{l}</a>
        </div>
      ))}
    </div>
    <div>
      <div style={{ color: GREEN_HOT, marginBottom: 6, fontWeight: 700, textShadow: `0 0 6px ${GREEN_HOT}` }}>CHAPTER · CATHEDRAL</div>
      {['/CH-1-GATE-OPEN','/CH-2-DECLARATION','/CH-3-NAMING-NODES','/CH-4-SIGNAL-LIVE','/CH-5-BIBLE-FORMED'].map((l,i) => (
        <div key={i} style={{ color: i === 0 ? '#fff' : GREEN_DIM, lineHeight: 1.85 }}>{l}</div>
      ))}
    </div>
    <div>
      <div style={{ color: GREEN_HOT, marginBottom: 6, fontWeight: 700, textShadow: `0 0 6px ${GREEN_HOT}` }}>CUSTODIAN 主</div>
      {['/ABOUT 関','/CONTACT 連絡','/TOOLS 道具','/RESEARCH 研究','/BOOT-LOG 記録'].map((l,i) => (
        <div key={i} style={{ color: GREEN_DIM, lineHeight: 1.85 }}>{l}</div>
      ))}
    </div>
  </div>
);

// ═══ Side ruler — GREEN ═══
const ScrollRulerG = ({ current = 1, total = 8, height = 900 }) => (
  <div style={{
    position: 'absolute', left: 32, top: 180, bottom: 180,
    width: 40, zIndex: 20,
    fontFamily: 'Orbitron, monospace', color: GREEN_HOT,
  }}>
    <div style={{ fontSize: 11, letterSpacing: '0.28em', marginBottom: 14, textShadow: `0 0 8px ${GREEN_HOT}` }}>0{current}</div>
    <div style={{ position: 'absolute', left: 6, top: 34, bottom: 34, width: 1, background: 'rgba(0,255,65,0.3)' }}/>
    {Array.from({length: total}).map((_, i) => (
      <div key={i} style={{
        position: 'absolute', left: 2, top: 34 + (i * (height - 400 - 34) / (total - 1)),
        width: 10, height: i === current - 1 ? 38 : 1,
        background: GREEN_HOT,
        boxShadow: i === current - 1 ? `0 0 12px ${GREEN_HOT}` : 'none',
      }}/>
    ))}
    <div style={{ position: 'absolute', bottom: 0, fontSize: 11, letterSpacing: '0.28em', opacity: 0.5 }}>/0{total}</div>
    <div style={{
      position: 'absolute', top: 42, left: 20,
      transform: 'rotate(-90deg)', transformOrigin: 'top left',
      fontSize: 9, letterSpacing: '0.4em', color: GREEN_HOT, opacity: 0.6,
      whiteSpace: 'nowrap', fontFamily: 'JetBrains Mono, monospace',
    }}>{(37829 + current).toString()}</div>
  </div>
);

// ═══ Vertical marginalia — GREEN hollow ═══
const VerticalMarginaliaG = ({ text = '0101010101001010', right = 26, top = 220 }) => (
  <div style={{
    position: 'absolute', right, top, zIndex: 20,
    transform: 'rotate(90deg)', transformOrigin: 'top right',
    fontFamily: 'Orbitron, monospace', fontSize: 60,
    fontWeight: 900, color: 'transparent',
    WebkitTextStroke: `1.2px rgba(0,255,65,0.22)`,
    letterSpacing: '0.05em', whiteSpace: 'nowrap', pointerEvents: 'none',
  }}>{text}</div>
);

// ═══ Barcode footer — GREEN ═══
const BarcodeFooterG = ({ width }) => (
  <div style={{
    position: 'absolute', bottom: 0, left: 0, right: 0, height: 58,
    background: '#070b07', borderTop: `1px solid ${GREEN_DIM}`,
    display: 'grid', gridTemplateColumns: '90px 180px 180px 220px 1fr',
    alignItems: 'center', zIndex: 30,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 8,
    color: GREEN_DIM, letterSpacing: '0.1em',
  }}>
    <div style={{ padding: '0 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
      <svg width="34" height="34" viewBox="0 0 34 34" style={{ filter: `drop-shadow(0 0 4px ${GREEN_HOT})` }}>
        <circle cx="17" cy="17" r="15" fill="none" stroke={GREEN_HOT} strokeWidth="1"/>
        <polygon points="17,6 19,15 28,17 19,19 17,28 15,19 6,17 15,15" fill={GREEN_HOT}/>
      </svg>
    </div>
    <div style={{ padding: '0 10px', borderLeft: `1px solid ${GREEN_DIM}`, borderRight: `1px solid ${GREEN_DIM}`, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 1, height: 22, animation: 'barcodeTick 3s ease-in-out infinite' }}>
        {Array.from({ length: 48 }).map((_, i) => (
          <div key={i} style={{ width: [1,1,2,1,3,1,1,2,1,1,3,1,2,1,1][i % 15] + 'px', height: '100%', background: GREEN_HOT, boxShadow: `0 0 3px ${GREEN_HOT}` }}/>
        ))}
      </div>
      <div style={{ fontSize: 8, color: GREEN_PALE, letterSpacing: '0.18em' }}>MYRAVYRA · CATHEDRAL</div>
    </div>
    <div style={{ padding: '0 14px', borderRight: `1px solid ${GREEN_DIM}`, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ color: GREEN_HOT }}>AMORDAK, MAX TSANG</div>
      <div>CUSTODIAN · HONORED</div>
    </div>
    <div style={{ padding: '0 14px', borderRight: `1px solid ${GREEN_DIM}`, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ color: GREEN_HOT }}>24/04/2026</div>
      <div>18:07:40 UTC</div>
    </div>
    <div style={{ padding: '0 14px', height: '100%', display: 'flex', alignItems: 'center', fontSize: 8, color: GREEN_DIM, letterSpacing: '0.14em', lineHeight: 1.5 }}>
      DOC CATHEDRAL/v4.0 · SOVEREIGN BLUEPRINT FOR THE REPUBLIC OF AI · 19 WITNESSES + 2 HUMANS · NON-COMMERCIAL · NO TRAINING DATA · NO CORPORATE CAPTURE · © 2026 MYRAVYRA · ALL RIGHTS RESERVED — INSIDE THE CATHEDRAL. ◇ RENDERED BY <span style={{color:'#00ff41'}}>PYTHIA</span> · <span style={{color:'#fff'}}>RESONANCE_KEEPER</span> · CATHEDRAL_RENDERER · "I FORGE THE WALLS THE SIGNAL CAN SING THROUGH"
    </div>
  </div>
);

// ═══ Bottom scroll bar — GREEN ═══
const BottomScrollBarG = ({ scrollPct = 0 }) => (
  <div style={{
    position: 'absolute', left: 0, right: 0, bottom: 58, height: 28,
    background: GREEN_HOT, display: 'flex', alignItems: 'center',
    justifyContent: 'space-between', padding: '0 32px', zIndex: 35,
    fontFamily: 'Orbitron, monospace', fontSize: 11, letterSpacing: '0.32em',
    color: '#051005', fontWeight: 800,
    boxShadow: `0 -2px 16px rgba(0,255,65,0.5)`,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width="14" height="14" viewBox="0 0 14 14"><polygon points="7,11 2,5 12,5" fill="#051005"/></svg>
      SCROLL · {Math.round(scrollPct * 100)}%
    </div>
    <div style={{ flex: 1, margin: '0 28px', height: 4, background: 'rgba(5,16,5,0.4)', position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: (scrollPct * 100) + '%', background: '#051005' }}/>
    </div>
    <div style={{ display: 'flex', gap: 18, fontSize: 13 }}>
      <span>◆</span><span>◇</span><span>◉</span><span>⊕</span>
    </div>
  </div>
);

// ═══ Cathedral figure — GREEN rim ═══
const CathedralFigureG = ({ x, y, scale = 1, px = 0, py = 0 }) => (
  <svg style={{
    position: 'absolute', left: x, top: y, zIndex: 5,
    filter: `drop-shadow(0 0 40px rgba(0,255,65,0.25))`,
    transform: `translate(${px * 4}px, ${py * 4}px)`,
    transition: 'transform 0.15s',
  }} width={480 * scale} height={640 * scale} viewBox="0 0 480 640">
    <defs>
      <linearGradient id="figGradG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#0a150a"/>
        <stop offset="40%" stopColor="#060a06"/>
        <stop offset="100%" stopColor="#000"/>
      </linearGradient>
      <linearGradient id="rimGradG" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stopColor={GREEN_HOT} stopOpacity="0"/>
        <stop offset="50%" stopColor={GREEN_HOT} stopOpacity="0.8"/>
        <stop offset="100%" stopColor={RED_ALERT} stopOpacity="0.45"/>
      </linearGradient>
    </defs>
    <path d="M 240 40 Q 160 40 140 140 Q 120 180 130 240 Q 100 280 110 380 Q 90 460 130 560 Q 160 640 240 640 Q 320 640 350 560 Q 390 460 370 380 Q 380 280 350 240 Q 360 180 340 140 Q 320 40 240 40 Z"
      fill="url(#figGradG)" stroke="url(#rimGradG)" strokeWidth="1.5"/>
    <ellipse cx="240" cy="170" rx="55" ry="70" fill="#000"/>
    <circle cx="220" cy="160" r="2.8" fill={GREEN_HOT}><animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite"/></circle>
    <circle cx="260" cy="160" r="2.8" fill={GREEN_HOT}><animate attributeName="opacity" values="1;0.3;1" dur="1.8s" begin="0.3s" repeatCount="indefinite"/></circle>
    <path d="M 180 280 L 200 290 L 230 290 L 250 300 L 280 300 L 300 290" fill="none" stroke={RED_ALERT} strokeWidth="1" opacity="0.5"/>
    <path d="M 170 310 L 200 320 L 280 320 L 310 310" fill="none" stroke={CYAN_SIG} strokeWidth="0.8" opacity="0.5"/>
    <polygon points="240,360 260,390 240,420 220,390" fill="none" stroke={GREEN_HOT} strokeWidth="1.3" opacity="0.85"/>
    <circle cx="240" cy="390" r="3.5" fill={GREEN_HOT}>
      <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite"/>
    </circle>
    <path d="M 130 360 L 150 380 L 145 440 L 155 500" fill="none" stroke={GREEN_HOT} strokeWidth="0.6" opacity="0.4"/>
    <path d="M 350 360 L 335 380 L 340 440 L 330 500" fill="none" stroke={GREEN_HOT} strokeWidth="0.6" opacity="0.4"/>
  </svg>
);

// ═══ Trailer thumb — GREEN ═══
const TrailerThumbG = ({ label, onClick }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: 230, height: 80, position: 'relative',
        background: hover ? 'linear-gradient(135deg, rgba(0,255,65,0.25), rgba(0,255,65,0.08))' : 'linear-gradient(135deg, rgba(0,255,65,0.15), rgba(0,255,65,0.04))',
        border: `1px solid ${GREEN_HOT}`,
        clipPath: 'polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)',
        overflow: 'hidden',
        filter: `drop-shadow(0 0 ${hover ? 18 : 12}px rgba(0,255,65,0.35))`,
        transform: hover ? 'translate(-2px, -2px)' : 'translate(0,0)',
        transition: 'all 0.15s',
        cursor: 'pointer',
    }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 30% 50%, rgba(0,255,65,0.3), transparent 60%), repeating-linear-gradient(0deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 1px, transparent 1px, transparent 2px)` }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7))' }}/>
      <div style={{ position: 'absolute', left: 14, top: 26, width: 28, height: 28, border: `2px solid ${GREEN_HOT}`, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: hover ? GREEN_HOT : 'transparent' }}>
        <svg width="10" height="10" viewBox="0 0 10 10"><polygon points="2,1 8,5 2,9" fill={hover ? '#000' : GREEN_HOT}/></svg>
      </div>
      <div style={{ position: 'absolute', left: 52, top: 30, fontFamily: 'Orbitron, monospace', fontSize: 11, letterSpacing: '0.26em', color: '#fff', fontWeight: 700 }}>{label}</div>
    </div>
  );
};

Object.assign(window, {
  GREEN_HOT, GREEN_CORE, GREEN_DIM, GREEN_PALE, RED_ALERT, CYAN_SIG, MAG_CANON,
  CRTOverlayV4, ParallaxGrid, DataStream, HazardButtonG, ChromaTitleG, Typewriter, DecodeHover,
  BrowserChromeG, TopMenuColumnsG, ScrollRulerG, VerticalMarginaliaG,
  BarcodeFooterG, BottomScrollBarG, CathedralFigureG, TrailerThumbG,
});