[html] <!-- 🕯️ CYBER GOTHIC WELCOME 🕯️ -->
<div class="cg-wrapper">
  <div class="cg-container">
   
    <!-- Декоративные элементы фона -->
    <div class="cg-bg-effect"></div>
    <div class="cg-particles" id="particles"></div>
   
    <!-- Рамка с глитч-эффектом -->
    <div class="cg-frame">
      <div class="cg-frame-corner tl"></div>
      <div class="cg-frame-corner tr"></div>
      <div class="cg-frame-corner bl"></div>
      <div class="cg-frame-corner br"></div>
     
      <!-- Центральное изображение -->
      <div class="cg-art-container">
        <div class="cg-glow-ring"></div>
        <img src="https://upforme.ru/uploads/001c/1f/11/2/94660.png"
             alt="Mystic Guardian"
             class="cg-art"
             id="mainArt">
        <div class="cg-art-overlay"></div>
      </div>
     
      <!-- Приветствие -->
      <div class="cg-text-block">
        <h1 class="cg-title" data-text="Путник, войди...">Путник, войди...</h1>
        <div class="cg-divider"></div>
        <p class="cg-greeting">
          <span class="cg-typewriter">Тени шепчут твоё имя...</span>
        </p>
        <p class="cg-message">
          Здесь, на стыке <span class="cg-neon">цифровых кошмаров</span> и
          <span class="cg-gothic">древних пророчеств</span>,
          рождаются легенды.<br>
          Твой путь только начинается.
        </p>
       
        <!-- Интерактивная кнопка -->
        <button class="cg-btn" id="acceptBtn">
          <span class="cg-btn-text">✦ Принять призыв ✦</span>
          <span class="cg-btn-glow"></span>
        </button>
       
        <!-- Скрытое послание -->
        <div class="cg-secret" id="secretMsg">
          <p>🗝️ <em>Тени признали тебя. Добро пожаловать в Хроники...</em></p>
        </div>
      </div>
    </div>
   
    <!-- Нижняя декоративная строка -->
    <div class="cg-footer">
      <span class="cg-rune">ᚠ</span>
      <span class="cg-rune">ᚢ</span>
      <span class="cg-rune">ᚦ</span>
      <span class="cg-rune">ᚨ</span>
      <span class="cg-rune">ᚱ</span>
      <span class="cg-copyright">© Echoes of the Digital Abyss</span>
    </div>
   
  </div>
</div>

<style>
/* ===== BASE STYLES ===== */
.cg-wrapper {
  --cg-dark: #0a0a0f;
  --cg-deep: #120a1a;
  --cg-purple: #6b2d5c;
  --cg-neon: #b967ff;
  --cg-cyan: #00f5ff;
  --cg-blood: #8a0303;
  --cg-text: #e0d6eb;
  --cg-dim: #7a6d85;
 
  font-family: 'Cinzel', 'Uncial Antiqua', Georgia, serif;
  background: var(--cg-dark);
  color: var(--cg-text);
  padding: 20px;
  position: relative;
  overflow: hidden;
  line-height: 1.6;
}

.cg-container {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ===== BACKGROUND EFFECTS ===== */
.cg-bg-effect {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(107,45,92,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0,245,255,0.08) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(10,10,15,0.9) 0px, rgba(10,10,15,0.9) 2px, transparent 2px, transparent 4px);
  pointer-events: none;
  z-index: 0;
}

.cg-particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.cg-particle {
  position: absolute;
  width: 2-4px;
  height: 2-4px;
  background: var(--cg-neon);
  border-radius: 50%;
  opacity: 0.6;
  animation: float 8s infinite ease-in-out;
  box-shadow: 0 0 6px var(--cg-neon);
}

@keyframes float {
  0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-20px) scale(1); opacity: 0; }
}

/* ===== FRAME & BORDER ===== */
.cg-frame {
  position: relative;
  border: 1px solid rgba(185,103,255,0.3);
  background: linear-gradient(135deg, var(--cg-deep), var(--cg-dark), var(--cg-deep));
  padding: 30px 25px;
  margin: 20px 0;
  box-shadow:
    0 0 30px rgba(107,45,92,0.4),
    inset 0 0 60px rgba(0,0,0,0.6);
  border-radius: 8px;
}

.cg-frame-corner {
  position: absolute;
  width: 30px; height: 30px;
  border: 2px solid var(--cg-neon);
  opacity: 0.7;
  z-index: 3;
}
.cg-frame-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.cg-frame-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.cg-frame-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.cg-frame-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.cg-frame::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, transparent, var(--cg-cyan), transparent, var(--cg-neon), transparent);
  background-size: 400% 400%;
  border-radius: 10px;
  z-index: -1;
  animation: borderGlow 8s ease infinite;
  opacity: 0.4;
}

@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== ART CONTAINER ===== */
.cg-art-container {
  position: relative;
  margin: 25px auto;
  width: fit-content;
  display: flex;
  justify-content: center;
}

.cg-glow-ring {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--cg-neon);
  border-bottom-color: var(--cg-cyan);
  animation: spin 12s linear infinite;
  filter: blur(1px);
  opacity: 0.6;
  z-index: 1;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.cg-art {
  position: relative;
  max-width: 260px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(185,103,255,0.5));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.cg-art:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 35px rgba(185,103,255,0.8));
}

.cg-art-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,15,0.7) 100%);
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
}

/* ===== TEXT STYLES ===== */
.cg-text-block {
  text-align: center;
  padding: 10px 15px;
  position: relative;
}

.cg-title {
  font-size: 2.1em;
  font-weight: normal;
  letter-spacing: 4px;
  margin: 15px 0 10px;
  color: var(--cg-text);
  text-shadow: 0 0 15px rgba(185,103,255,0.7);
  position: relative;
  animation: titlePulse 4s ease-in-out infinite;
}

.cg-title::before,
.cg-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; right: 0;
  clip-path: inset(0 0 0 0);
}

.cg-title::before {
  color: var(--cg-cyan);
  animation: glitch-1 3s infinite linear alternate-reverse;
  z-index: -1;
}

.cg-title::after {
  color: var(--cg-blood);
  animation: glitch-2 2.5s infinite linear alternate-reverse;
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(1px, -1px); }
}
@keyframes glitch-2 {
  0%, 90%, 100% { transform: translate(0); }
  91% { transform: translate(2px, -1px); }
  95% { transform: translate(-1px, 2px); }
}

@keyframes titlePulse {
  0%, 100% { text-shadow: 0 0 15px rgba(185,103,255,0.7); }
  50% { text-shadow: 0 0 25px rgba(185,103,255,1), 0 0 40px rgba(0,245,255,0.5); }
}

.cg-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cg-neon), transparent);
  margin: 15px auto;
  width: 60%;
  position: relative;
}
.cg-divider::after {
  content: '✦';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cg-dark);
  padding: 0 10px;
  color: var(--cg-cyan);
  font-size: 0.9em;
}

.cg-greeting {
  font-size: 1.3em;
  font-style: italic;
  color: var(--cg-dim);
  margin: 10px 0;
  min-height: 1.6em;
}

.cg-typewriter {
  border-right: 2px solid var(--cg-neon);
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3.5s steps(30) forwards, blink 0.7s infinite;
  display: inline-block;
  max-width: 0;
  animation-fill-mode: forwards;
}

@keyframes typing {
  from { max-width: 0 }
  to { max-width: 100% }
}
@keyframes blink {
  50% { border-color: transparent; }
}

.cg-message {
  font-size: 1.05em;
  margin: 20px 0 25px;
  color: var(--cg-text);
  opacity: 0.95;
}

.cg-neon {
  color: var(--cg-cyan);
  text-shadow: 0 0 8px rgba(0,245,255,0.6);
  font-weight: bold;
}

.cg-gothic {
  color: var(--cg-neon);
  text-shadow: 0 0 8px rgba(185,103,255,0.6);
  font-weight: bold;
}

/* ===== BUTTON ===== */
.cg-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--cg-neon);
  color: var(--cg-text);
  padding: 12px 35px;
  font-size: 1em;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  margin: 10px 0;
  border-radius: 4px;
}

.cg-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(185,103,255,0.4), transparent);
  transition: left 0.5s ease;
}

.cg-btn:hover {
  background: rgba(185,103,255,0.15);
  box-shadow: 0 0 20px rgba(185,103,255,0.5);
  border-color: var(--cg-cyan);
}

.cg-btn:hover::before {
  left: 100%;
}

.cg-btn:active {
  transform: scale(0.98);
}

.cg-btn-glow {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(185,103,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cg-btn:hover .cg-btn-glow {
  opacity: 1;
}

/* ===== SECRET MESSAGE ===== */
.cg-secret {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  margin-top: 15px;
  padding: 0 10px;
}

.cg-secret.revealed {
  max-height: 100px;
  opacity: 1;
}

.cg-secret p {
  font-size: 0.95em;
  color: var(--cg-cyan);
  text-shadow: 0 0 10px rgba(0,245,255,0.5);
  font-style: italic;
}

/* ===== FOOTER ===== */
.cg-footer {
  text-align: center;
  padding: 15px 0 5px;
  font-size: 0.85em;
  color: var(--cg-dim);
  letter-spacing: 3px;
  border-top: 1px solid rgba(185,103,255,0.2);
  margin-top: 10px;
}

.cg-rune {
  margin: 0 4px;
  color: var(--cg-neon);
  opacity: 0.8;
  display: inline-block;
  animation: runeGlow 3s ease-in-out infinite;
}
.cg-rune:nth-child(2) { animation-delay: 0.3s; }
.cg-rune:nth-child(3) { animation-delay: 0.6s; }
.cg-rune:nth-child(4) { animation-delay: 0.9s; }
.cg-rune:nth-child(5) { animation-delay: 1.2s; }

@keyframes runeGlow {
  0%, 100% { opacity: 0.5; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 8px var(--cg-neon); }
}

.cg-copyright {
  display: block;
  margin-top: 8px;
  font-size: 0.8em;
  opacity: 0.6;
  letter-spacing: 1px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .cg-title { font-size: 1.7em; letter-spacing: 2px; }
  .cg-art { max-width: 220px; }
  .cg-glow-ring { width: 240px; height: 240px; }
  .cg-frame { padding: 25px 20px; }
  .cg-frame-corner { width: 24px; height: 24px; }
}

/* ===== DARK SCROLLBAR ===== */
.cg-wrapper ::-webkit-scrollbar {
  width: 8px;
}
.cg-wrapper ::-webkit-scrollbar-track {
  background: var(--cg-dark);
}
.cg-wrapper ::-webkit-scrollbar-thumb {
  background: var(--cg-purple);
  border-radius: 4px;
}
.cg-wrapper ::-webkit-scrollbar-thumb:hover {
  background: var(--cg-neon);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ===== PARTICLE SYSTEM =====
  const particlesContainer = document.getElementById('particles');
  const particleCount = 25;
 
  for (let i = 0; i < particleCount; i++) {
    createParticle();
  }
 
  function createParticle() {
    const p = document.createElement('div');
    p.className = 'cg-particle';
    p.style.left = Math.random() * 100 + '%';
    p.style.animationDuration = (6 + Math.random() * 8) + 's';
    p.style.animationDelay = Math.random() * 5 + 's';
    p.style.width = p.style.height = (2 + Math.random() * 3) + 'px';
   
    // Random color variant
    if (Math.random() > 0.7) {
      p.style.background = '#00f5ff';
      p.style.boxShadow = '0 0 6px #00f5ff';
    }
   
    particlesContainer.appendChild(p);
   
    // Remove and recreate for infinite effect
    setTimeout(() => {
      p.remove();
      createParticle();
    }, 14000);
  }
 
  // ===== BUTTON INTERACTION =====
  const btn = document.getElementById('acceptBtn');
  const secret = document.getElementById('secretMsg');
  const art = document.getElementById('mainArt');
 
  btn.addEventListener('click', function(e) {
    // Ripple effect
    const ripple = document.createElement('span');
    ripple.className = 'cg-btn-glow';
    this.appendChild(ripple);
    setTimeout(() => ripple.remove(), 600);
   
    // Reveal secret message
    secret.classList.add('revealed');
   
    // Art pulse effect
    art.style.animation = 'none';
    setTimeout(() => {
      art.style.animation = 'titlePulse 1.5s ease-out';
    }, 10);
   
    // Subtle haptic feedback simulation (visual)
    this.style.transform = 'scale(0.95)';
    setTimeout(() => {
      this.style.transform = '';
    }, 100);
  });
 
  // ===== SUBTLE HOVER PARALLAX ON ART =====
  const artContainer = document.querySelector('.cg-art-container');
  artContainer.addEventListener('mousemove', function(e) {
    const rect = this.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
   
    art.style.transform = `translate(${x * 8}px, ${y * 8}px) scale(1.03)`;
  });
 
  artContainer.addEventListener('mouseleave', function() {
    art.style.transform = 'scale(1)';
  });
 
  // ===== OPTIONAL: Auto-type effect restart on focus =====
  const typewriter = document.querySelector('.cg-typewriter');
  if (typewriter) {
    const originalText = typewriter.textContent;
    typewriter.textContent = '';
   
    // Restart animation after delay for demo purposes
    setTimeout(() => {
      typewriter.style.animation = 'none';
      typewriter.offsetHeight; // reflow
      typewriter.textContent = originalText;
      typewriter.style.animation = '';
    }, 4000);
  }
});
</script> [/html]