/* =====================================================
   NAEU SITE - ОБЩИЕ СТИЛИ
   Шрифты: Georgia (заголовки), Verdana (текст)
   Стиль: small web / indie web 2000s
   ===================================================== */

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- ОБЩИЕ ПЕРЕМЕННЫЕ ---------- */
:root {
  --pink:      #FF69B4;
  --hot-pink:  #FF1493;
  --cyan:      #00FFFF;
  --yellow:    #FFD700;
  --white:     #FFFAF0;
  --border:    3px solid #FF1493;
  --shadow:    4px 4px 0 #000;
}

/* ---------- ТЁМНЫЕ ПЕРЕМЕННЫЕ (для oskolki и dark-lord) ---------- */
.dark-theme {
  --bg:        #0a0005;
  --surface:   #12000d;
  --border-c:  #8B0000;
  --text:      #C0A0B0;
  --accent:    #8B0040;
  --glow:      #FF0044;
}

/* ---------- СВЕТЛЫЕ ПЕРЕМЕННЫЕ (для index и music) ---------- */
.light-theme {
  --bg:        #FFF0F8;
  --surface:   #FFFFFF;
  --border-c:  #FF69B4;
  --text:      #333;
  --accent:    #FF1493;
  --glow:      #FF69B4;
}

/* =====================================================
   НАВИГАЦИЯ (общая)
   ===================================================== */
.nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: #000;
  border-bottom: 3px solid var(--hot-pink);
  justify-content: center;
}

.nav-bar a {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  border: 2px solid var(--hot-pink);
  background: #1a001a;
  transition: background 0.15s, color 0.15s;
}

.nav-bar a:hover {
  background: var(--hot-pink);
  color: #000;
}

.nav-bar a.active {
  background: var(--hot-pink);
  color: #000;
}

/* =====================================================
   ОБЩИЕ БЛОКИ
   ===================================================== */
.site-box {
  border: 3px solid var(--hot-pink);
  padding: 14px 16px;
  margin: 12px 0;
  background: rgba(255,255,255,0.93);
  box-shadow: var(--shadow);
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.85em;
  line-height: 1.7;
  color: #222;
}

.site-box h2 {
  font-family: Georgia, serif;
  color: var(--hot-pink);
  font-size: 1.2em;
  border-bottom: 2px solid var(--hot-pink);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* ---------- КНОПКИ ---------- */
.btn {
  display: inline-block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  padding: 8px 18px;
  border: 2px solid #000;
  text-decoration: none;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: transform 0.07s, box-shadow 0.07s;
}
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }
.btn-pink  { background: var(--hot-pink); color: #fff; }
.btn-cyan  { background: var(--cyan);     color: #000; }
.btn-dark  { background: #1a001a;         color: var(--hot-pink); border-color: var(--hot-pink); }
.btn:hover { opacity: 0.88; }

/* ---------- ЛИНИЯ-РАЗДЕЛИТЕЛЬ ---------- */
.divider {
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--hot-pink) 0,var(--hot-pink) 8px,
    var(--cyan) 8px,var(--cyan) 16px);
  margin: 16px 0;
  border: none;
}

/* ---------- MARQUEE-БЛОК ---------- */
.marquee-wrap {
  background: #000;
  border-top: 2px solid var(--hot-pink);
  border-bottom: 2px solid var(--hot-pink);
  color: var(--hot-pink);
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  padding: 4px 0;
  overflow: hidden;
}

/* ---------- ФОРМА ---------- */
.contact-form label {
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  margin: 10px 0 4px;
  color: #333;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 8px;
  border: 2px solid var(--hot-pink);
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.85em;
  background: #fff8fc;
}
.contact-form textarea { resize: vertical; min-height: 90px; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--cyan); }

/* =====================================================
   АНИМАЦИИ
   ===================================================== */
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes spin       { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes float-up   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-glow { 0%,100%{text-shadow:0 0 4px currentColor} 50%{text-shadow:0 0 18px currentColor,0 0 30px currentColor} }
@keyframes rainbow    {
  0%{color:#FF1493} 16%{color:#FF6600} 33%{color:#FFD700}
  50%{color:#00FF88} 66%{color:#00FFFF} 83%{color:#8800FF} 100%{color:#FF1493}
}
@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100%{ opacity:1 }
  20%,22%,24%,55%{ opacity:0.4 }
}
@keyframes slide-in-left {
  from { transform: translateX(-60px); opacity:0; }
  to   { transform: translateX(0);     opacity:1; }
}
@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.anim-float  { animation: float-up 3s ease-in-out infinite; }
.anim-blink  { animation: blink 1s step-end infinite; }
.anim-spin   { animation: spin 4s linear infinite; }
.anim-pulse  { animation: pulse-glow 2s ease-in-out infinite; }
.anim-rainbow{ animation: rainbow 3s linear infinite; }
.anim-flicker{ animation: flicker 4s infinite; }
.anim-shake  { animation: shake 0.4s ease infinite; }