* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  overflow: hidden;
}

/* === Верхняя панель === */
#top-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  z-index: 20;
  background: rgba(10,10,20,0.30);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(150,120,255,0.30);
  box-shadow: 0 0 15px rgba(150,120,255,0.20), inset 0 0 25px rgba(0,255,255,0.05);
}
#top-bar::after{
  content:"";
  position:absolute; left:0; bottom:0; width:100%; height:2px;
  background: linear-gradient(90deg,#00ffff,#b38aff,#00ffff);
  background-size: 200% 100%;
  animation: barFlow 3s linear infinite;
  opacity:.65;
}
@keyframes barFlow{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

#top-bar .logo{
  font-family:'Orbitron',sans-serif;
  font-size:1.5rem; letter-spacing:2px;
  color:#b18cff;
  text-shadow:0 0 12px rgba(200,160,255,0.7),0 0 25px rgba(150,120,255,0.3);
}
#top-bar .nav a{
  margin-left:24px; text-decoration:none;
  color:#cba6ff; font-weight:500; letter-spacing:.5px;
  transition: color .25s ease, text-shadow .25s ease;
}
#top-bar .nav a:hover{ color:#fff; text-shadow:0 0 10px rgba(203,166,255,.8),0 0 20px rgba(203,166,255,.6) }

/* === Сцена (фон) === */
#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; outline: none;
  z-index: 0; /* фон под контентом */
}

/* === Прелоадер === */
#preloader {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: #000; font-weight: 600; letter-spacing: .04em;
  opacity: 1; transition: opacity .45s ease; z-index: 10;
}
#preloader.hidden { opacity: 0; pointer-events: none; }

/* === Логотип PULSEMATRIX (fallback) === */
#title {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 8rem);
  letter-spacing: .25em; color: #00ffff;
  text-shadow: 0 0 30px rgba(0,255,255,.6), 0 0 60px rgba(0,255,255,.3);
  opacity: 0; transform: scale(.95);
  transition: opacity 1.5s ease-out, transform 2s ease-out;
  pointer-events: none; user-select: none; z-index: 5;
}
#title.visible { opacity:1; transform:scale(1); animation:pulseGlow 3s ease-in-out infinite }
@keyframes pulseGlow{0%,100%{text-shadow:0 0 25px rgba(0,255,255,.6)}50%{text-shadow:0 0 45px rgba(0,255,255,.9)}}

/* === Слоган (левая панель) === */
#slogan-container{
  position:fixed; top: 10%; left: 5%; width: 30%;
  color:#e0b3ff;
  font-family:'Segoe UI',Roboto,sans-serif;
  font-size:1.1rem; line-height:1.8; letter-spacing:.5px;
  white-space: pre-line;
  z-index:6; opacity:0; transition:opacity 1s ease;
  padding:12px 16px;
  background: linear-gradient(90deg, rgba(10,0,20,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
  border:1px solid rgba(224,179,255,.2); border-radius:10px;
  box-shadow:0 4px 18px rgba(224,179,255,.1), inset 0 0 24px rgba(224,179,255,.1);
  text-shadow:0 0 10px rgba(224,179,255,.7), 0 0 25px rgba(190,150,255,.4);
}
#slogan-container.visible{ opacity:1 }

/* === ОБО МНЕ (правая панель) === */
#about {
  position: fixed;
  top: calc(10% + 20px);
  right: 5%;
  width: 35%;
  color: #a8fff7;
  font-family:'Segoe UI',Roboto,sans-serif;
  font-size:1rem; line-height:1.7;
  white-space: pre-line;
  letter-spacing:.5px;
  z-index:6; opacity:0; transition:opacity 1.2s ease;
  padding:12px 16px;
  background: linear-gradient(270deg, rgba(10,0,30,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
  border:1px solid rgba(185,255,250,.2);
  border-radius:10px;
  box-shadow:0 4px 18px rgba(185,255,250,.1), inset 0 0 30px rgba(120,255,230,.1);
  text-shadow:0 0 10px rgba(150,255,250,.7), 0 0 30px rgba(100,255,220,.4);
  background-clip: padding-box;
}
#about.visible { opacity: 1; }

/* === Футер === */
#footer{
  position:fixed; bottom:10px; left:0; width:100%;
  text-align:center; z-index:6; pointer-events:none;
  color: rgba(180,255,255,0.65);
  font-size:.85rem; letter-spacing:1px;
  text-shadow:0 0 6px rgba(180,255,255,.4);
}

/* === 📱 Адаптация под мобильные === */
@media (max-width: 1024px) {
  #slogan-container { width: 40%; font-size: 1rem; }
  #about { width: 45%; font-size: 0.95rem; }
}

@media (max-width: 768px) {
  /* даём странице прокручиваться и учитываем safe-area */
  html, body {
    overflow-y: auto; overflow-x: hidden;
    height: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* топ-бар компактнее */
  #top-bar { height: 55px; padding: 0 20px; }
  #top-bar .logo { font-size: 1.2rem; }
  #top-bar .nav a { font-size: 0.9rem; margin-left: 10px; }

  /* контент переводим в нормальный поток */
  #slogan-container, #about {
    position: static !important;   /* критично */
    left: auto; top: auto; transform: none;
    display: block;
    width: 92%;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 16px;
    opacity: 1;
    text-align: center;
    /* отключаем узкую колонку */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
    hyphens: auto; -webkit-hyphens: auto;
    line-height: 1.6;
    z-index: 5;
  }

  /* первый блок ниже топ-бара */
  #slogan-container { 
    margin-top: calc(55px + 20px);
    font-size: 1rem;
    background: rgba(20, 0, 35, 0.72);
    padding: 12px 16px;
    border-radius: 10px;
  }

  #about {
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.58);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  /* волны остаются фоном и не перекрывают текст */
  #scene {
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    /* чуть опускаем визуально: */
    transform: translateY(40px);
  }

  /* футер в потоке */
  #footer {
    position: relative;
    margin: 16px 0 24px;
    font-size: 0.75rem;
    color: rgba(160,255,255,0.75);
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  #slogan-container, #about {
    width: 94%;
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 10px 12px;
  }
  #top-bar .logo { font-size: 1rem; }
}