{{template "base/head" .}}
<style>
  :root {
    --bg-color: #0f1217;
    --text-color: #b0ffb0;
    --accent-color: #4af030;
    --secondary-color: #2a3a2a;
    --glow: 0 0 10px rgba(74, 240, 48, 0.5);
  }
  body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-family: 'Courier New', monospace;
    animation: fadeIn 1.5s ease-in-out; /* плавное появление всей страницы */
  }
  .home {
    background: transparent !important;
  }
  .logo {
    filter: drop-shadow(0 0 20px #4af030);
    border-radius: 50%;
    background: #0a0e12;
    padding: 10px;
    animation: glowPulse 3s infinite ease-in-out; /* пульсация свечения */
  }
  .hero h1, .hero h2 {
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color) !important;
    text-shadow: var(--glow);
  }
  .hero h1 {
    font-size: 3rem;
    animation: textFlicker 4s infinite; /* мерцание неона */
  }
  .page-grid {
    border: 1px solid var(--secondary-color);
    box-shadow: inset 0 0 50px rgba(0,255,0,0.1);
    padding: 2rem;
    margin: 1rem 0;
    background: rgba(0,10,0,0.3);
    backdrop-filter: blur(2px);
    animation: slideUp 1s ease-out; /* появление снизу */
  }
  .column h1 {
    color: var(--accent-color) !important;
    font-size: 1.8rem;
    border-bottom: 1px dashed var(--secondary-color);
    padding-bottom: 0.5rem;
  }
  .column p {
    color: #aaa;
    line-height: 1.8;
    animation: fadeIn 2s ease-in; /* текст проявляется чуть позже */
  }
  .column a {
    color: var(--accent-color) !important;
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-color);
    transition: text-shadow 0.3s;
  }
  .column a:hover {
    text-shadow: var(--glow);
  }
  .footer-cursor {
    text-align: center;
    margin-top: 2rem;
    color: var(--accent-color);
    animation: blink 1s step-end infinite;
  }

  /* Ключевые кадры */
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes glowPulse {
    0% { filter: drop-shadow(0 0 15px #4af030); transform: scale(1); }
    50% { filter: drop-shadow(0 0 30px #4af030); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 15px #4af030); transform: scale(1); }
  }

  @keyframes textFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 5px #4af030, 0 0 15px #4af030; }
    20%, 24%, 55% { opacity: 0.7; text-shadow: none; }
  }

  @keyframes slideUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes blink {
    0%,100% { opacity: 1; }
    50% { opacity: 0; }
  }
</style>

<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
  <div class="tw-mb-8 tw-px-8">
    <div class="center">
      <img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.png" alt="{{ctx.Locale.Tr "logo"}}">
      <div class="hero">
        <h1 class="ui icon header title tw-text-balance">
          {{if .IsSigned}}АГЕНТ {{.SignedUser.Name}} В СЕТИ{{else}}ТРЕТИЙ ЭШЕЛОН / GIT{{end}}
        </h1>
        <h2 class="tw-text-balance">
          {{if .IsSigned}}Журналы миссий{{else}}Частный репозиторий{{end}}
        </h2>
      </div>
    </div>
  </div>
  <div class="ui stackable middle very relaxed page grid">
    <div class="eight wide center column">
      <h1 class="hero ui icon header">
        {{svg "octicon-flame"}} МИССИЯ: УСТАНОВЛЕН
      </h1>
      <p class="large tw-text-balance">
        Развернут в режиме скрытности.
      </p>
    </div>
    <div class="eight wide center column">
      <h1 class="hero ui icon header">
        {{svg "octicon-device-desktop"}} ОПЕРАЦИОННАЯ ПЛАТФОРМА
      </h1>
      <p class="large tw-text-balance">
        Внедрён в UBUNTU 24 LTS.
      </p>
      <p class="large tw-text-balance" style="margin-top: 1rem;">
        <span style="opacity:0.7;">Оперативник</span> <strong style="color:var(--accent-color);"><a href="https://t.me/Y0zhyck">Yozhyck</a></strong>
      </p>
    </div>
  </div>
  <div class="ui stackable middle very relaxed page grid">
    <div class="eight wide center column">
      <h1 class="hero ui icon header">
        {{svg "octicon-rocket"}} СКРЫТЫЕ ОПЕРАЦИИ
      </h1>
      <p class="large tw-text-balance">
        Лёгкий и незаметный. Минимальное воздействие, максимальная производительность. Никаких следов.
      </p>
    </div>
  </div>
  <div class="footer-cursor">_</div>
</div>
{{template "base/footer" .}}