{% extends "main.html" %}

{% block content %}
<style>
.typewriter-container {
  min-height: 7.2em; /* Increased to accommodate three lines */
  position: relative;
  margin: 1rem 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  position: relative;
  z-index: 0;

.cursor, #cursor {
  display: inline-block;
  width: 2px;
  background-color: var(--bnk-yellow);
  animation: blink-cursor 0.7s steps(1) infinite;
  height: 1.4em;
  vertical-align: text-top;
  margin-left: 1px;
  position: absolute; /* Make sure it's absolutely positioned */
  z-index: 1; /* Keep it above text */
}

.typewriter-text, #typewriter-text {
  color: var(--bnk-text);
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  min-height: 4.2em; /* Set for three lines of text */
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  display: inline;
}
</style>


<style>
 /* Base styling */
 :root {
   --bnk-dark-bg: #1e2127;
   --bnk-yellow: #ffd700;
   --bnk-text: rgba(255, 255, 255, 0.87);
   --bnk-text-dim: rgba(255, 255, 255, 0.7);
 }

 .md-content {
   background: var(--bnk-dark-bg);
   max-width: 100%;
   padding: 0;
 }

 .md-main {
   background: var(--bnk-dark-bg);
 }

 /* Terminal-style header section */
 .terminal-header {
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 215, 0, 0.1);
   border-radius: 8px;
   padding: 1rem;
   margin: 0 auto 2rem auto;
   max-width: 600px;
   height: 230px;
   overflow: hidden;
   font-family: 'Courier New', monospace;
   position: relative;
 }

 /* Rest of terminal styles remain the same */
 .terminal-header::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 25px;
   background: rgba(255, 215, 0, 0.1);
   border-bottom: 1px solid rgba(255, 215, 0, 0.1);
   border-radius: 8px 8px 0 0;
 }

 .terminal-header::after {
   content: '⚪ ⚪ ⚪';
   position: absolute;
   top: 4px;
   left: 10px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.3);
 }
 .typing-effect {
  position: relative;
  color: var(--bnk-text-dim);
  font-size: 0.8rem; /* Reduced from 0.9rem */
  line-height: 1.2; /* Reduced from 1.5 */
  margin: 0;
  padding: 0;
  opacity: 0;
  margin-top: 5px; /* Reduced from 25px */
  transform: translateY(20px);
}

  .typing-effect.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
  }

  .typing-effect span {
    color: var(--bnk-yellow);
  }

  .typing-effect::before {
    content: '>';
    color: var(--bnk-yellow);
    margin-right: 10px;
  }

  .cursor {
  display: inline-block;
  width: 2px;
  background-color: var(--bnk-yellow);
  animation: blink-cursor 0.7s steps(1) infinite;
  margin-left: 2px;
  height: 1em;
  vertical-align: bottom;
  position: relative; /* Change from absolute to relative */
  transform: translateY(1px); /* Add this to align with text */
}

.typewriter-text {
  color: var(--bnk-text);
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  min-height: 1.4em;
  position: relative; /* Change from absolute to relative */
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  /* Enhanced main title */
  h1 {
    color: var(--bnk-yellow) !important;
    font-weight: normal !important;
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
    text-align: center;
    background: linear-gradient(
      45deg, 
      var(--bnk-yellow), 
      #fff9c4,
      var(--bnk-yellow)
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 
      gradientFlow 8s ease infinite,
      fadeInUp 0.8s ease forwards;
  }

  h2 {
    color: var(--bnk-yellow) !important;
    font-weight: normal !important;
    font-size: 1.5rem !important;
    margin: 1.5rem 0 0.75rem 0 !important;
    opacity: 0;
    transform: translateY(20px);
  }

  /* Text styling */
  p {
    color: var(--bnk-text);
    opacity: 0;
    transform: translateY(20px);
  }

  ul li {
    color: var(--bnk-text);
    opacity: 0;
    transform: translateY(20px);
    margin: 0.5rem 0;
  }

  /* Feature cards */
  .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem auto;
  max-width: 1200px;
  padding: 0 0.75rem;
}


.feature-card {
  background: linear-gradient(
    145deg,
    rgba(255, 215, 0, 0.05),
    rgba(255, 215, 0, 0.02)
  );
  border: 1px solid rgba(255, 215, 0, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

  .feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 215, 0, 0.1),
      transparent
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }

  .feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--bnk-yellow);
    box-shadow: 
      0 10px 20px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 215, 0, 0.2);
  }

  .feature-card:hover::after {
    transform: translateX(100%);
  }

  .feature-card h3 {
    color: var(--bnk-yellow) !important;
    margin: 0 0 0.5rem 0 !important;
    font-size: 1.1rem !important;
  }

  .feature-card p {
    margin: 0;
    color: var(--bnk-text-dim);
  }

  .feature-card a {
    color: var(--bnk-yellow);
    text-decoration: none;
    position: relative;
  }

  .feature-card a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bnk-yellow);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
  }

  .feature-card a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Emoji animation */
  .emoji-float {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
  }

  /* Section styling */
  .section {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.1);
}


  /* Code blocks */
  code {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2em 0.4em;
    border-radius: 3px;
  }

  /* Animations */
  @keyframes gradientFlow {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
  }

  /* Scroll reveal class */
  .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s ease;
  }
</style>

<style>
.highlight-feature {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.savings-card {
  background: linear-gradient(145deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
  border: 1px solid rgba(39, 174, 96, 0.2);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.savings-amount {
  font-size: 1.5rem;
  color: #27AE60;
  font-weight: bold;
}
</style>

<style>
/* Update activist banner spacing */
.activist-banner {
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.activist-grid {
  gap: 1rem;
  margin: 1.5rem 0;
}

.activist-card {
  padding: 1.25rem;
  min-width: 180px;
}

.activist-card .emoji {
  margin-bottom: 0.75rem;
}

.manifesto {
  margin-top: 1.5rem;
}

/* Update highlight feature spacing */
.highlight-feature {
  padding: 1.25rem;
  margin: 1rem 0;
}

.highlight-feature h2 {
  margin: 0 0 0.75rem 0;
}

.savings-card {
  padding: 0.75rem;
  margin: 0.75rem 0;
  gap: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .activist-grid {
    gap: 0.75rem;
  }
  
  .activist-card {
    padding: 1rem;
    max-width: 280px;
  }
}
</style>

<style>
  .power-header {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #333 0%, #555 20%, #ccc 40%, #fff 50%, #ccc 60%, #555 80%, #333 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine 5s linear infinite;
    text-shadow: 
      0 0 1px rgba(255,255,255,0.1),
      0 1px 3px rgba(0,0,0,0.3),
      0 3px 5px rgba(0,0,0,0.2),
      0 5px 10px rgba(0,0,0,0.25),
      0 10px 10px rgba(0,0,0,0.2),
      0 20px 20px rgba(0,0,0,0.15);
  }

  .power-header h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
  }

  .power-header p {
    font-size: 1.8rem;
    opacity: 0.9;
    font-weight: 600;
  }

  @keyframes shine {
    from { background-position: 200% center; }
    to { background-position: -200% center; }
  }
</style>

<!-- Update heading styles -->
<style>
/* Global heading styles to match Why Change Maker */
h1, h2, h3, h4, h5, h6 {
  font-family: system-ui, -apple-system, sans-serif;
  text-align: center;
  background: linear-gradient(135deg, #333 0%, #555 20%, #ccc 40%, #fff 50%, #ccc 60%, #555 80%, #333 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: shine 5s linear infinite;
  text-shadow: 
    0 0 1px rgba(255,255,255,0.1),
    0 1px 3px rgba(0,0,0,0.3),
    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);
}

h1 {
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  margin: 2rem 0 1rem !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin: 1.5rem 0 1rem !important;
  line-height: 1.3 !important;
}

h3 {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  margin: 1rem 0 0.75rem !important;
}

/* Remove the old gradient styles */
.power-header {
  padding: 2rem 1rem;
}

.power-header h1,
.power-header h2,
.power-header p {
  /* Reset any existing styles to use the global heading styles */
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
  animation: inherit;
}

/* Update animation keyframes */
@keyframes shine {
  from { background-position: 200% center; }
  to { background-position: -200% center; }
}
</style>

<style>
/* Update heading styles to be more selective */
.md-content > h1,  /* Only top-level headers */
.md-content > h2,
.md-content > .power-header h1,
.md-content > .power-header h2 {
  font-family: system-ui, -apple-system, sans-serif;
  text-align: center;
  background: linear-gradient(135deg, #FFD700 0%, #FFEC8B 20%, #FFD700 40%, #FFEC8B 50%, #FFD700 60%, #FFEC8B 80%, #FFD700 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: shine 15s linear infinite;
  text-shadow: 
    0 0 1px rgba(255,255,255,0.1),
    0 1px 3px rgba(0,0,0,0.3),
    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  margin: 2rem 0 1rem !important;
  line-height: 1.2 !important;
}

/* Reset container heading styles to original gold */
.highlight-feature h2,
.feature-card h3,
.section h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--bnk-yellow) !important;
  text-shadow: none !important;
  animation: none !important;
  font-size: 1.5rem !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
}

/* Keep original container heading sizes */
.highlight-feature h2 {
  font-size: 1.5rem !important;
  margin: 0 0 0.75rem 0 !important;
}

.feature-card h3 {
  font-size: 1.1rem !important;
  margin: 0 0 0.5rem 0 !important;
}
</style>

<style>
/* Update highlight feature grid layout */
.highlight-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.highlight-feature {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
  border: 1px solid rgba(255, 215, 0, 1);
  padding: 1.25rem;
  border-radius: 8px;
  margin: 0; /* Remove individual margins */
  height: 100%; /* Ensure equal height */
  display: flex;
  flex-direction: column;
}

/* Responsive adjustments */
@media (max-width: 920px) {
  .highlight-features-grid {
    grid-template-columns: 1fr;
  }
  
  .highlight-feature {
    margin: 0.5rem 0;
  }
}
</style>

<style>
  /* Amber gold header with animation */
  .power-header h1, .power-header h2 {
    color: var(--bnk-yellow); /* Amber gold color */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: glow 15s ease-in-out infinite alternate;
  }

  /* Glow animation */
  @keyframes glow {
    from {
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    to {
      text-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }
  }

  /* Animated paragraph container */
  .animated-container {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
  }

  /* Fade-in animation */
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<!-- Add background to the entry header -->
<style>
  .power-header.entry-header {
    position: relative;
    overflow: hidden;
    min-height: 500px; /* Ensure the container is tall enough for the emoji */
  }

  .power-header.entry-header::before {
    content: '✊';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 500px;
    color: rgba(255, 215, 0, 0.5); /* Increase emoji opacity */
    pointer-events: none;
    user-select: none;
    line-height: 1;
  }

  .power-header.entry-header h1 {
    position: relative;
    z-index: 1;
  }

  /* Style for "Bnkops Change Maker" */
  .power-header .highlight-text {
    color: var(--bnk-yellow); /* Shiny gold/amber color */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: shine 15s linear infinite;
  }

  @keyframes shine {
    0% {
      background-position: 200% center;
    }
    50% {
      background-position: -200% center;
    }
    100% {
      background-position: 200% center;
    }
  }
</style>

<!-- Power header styles with metallic effect -->
<style>
.power-header.entry-header h3 {
  /* Welcome to text */
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.5rem !important;
  font-weight: normal !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  animation: none !important;
  margin-bottom: 0.5rem !important;
}

.power-header.entry-header h1.highlight-text {
  /* Metallic gold effect for main title */
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #fff6a9 10%,
    #d4af37 20%,
    #fff6a9 30%,
    #ffd700 40%,
    #fff6a9 50%,
    #d4af37 60%,
    #fff6a9 70%,
    #ffd700 80%,
    #fff6a9 90%,
    #d4af37 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 
    0 0 1px rgba(255, 215, 0, 0.2),
    0 0 15px rgba(255, 215, 0, 0.3),
    0 0 30px rgba(255, 215, 0, 0.1) !important;
  font-weight: 800 !important;
  font-size: 4rem !important;
  letter-spacing: -0.02em !important;
  animation: metallicShine 8s linear infinite !important;
  background-size: 200% auto !important;
}

@keyframes metallicShine {
  to {
    background-position: 200% center;
  }
}
</style>

<div class="md-content">
  <!-- Update the entry header -->
  <div class="power-header entry-header">
    <h3>Welcome to</h3>
    <h1 class="highlight-text">Change Maker</h1>
  </div>

  <!-- Main content with enhanced visual styling -->
  <div class="animated-container hero-content">
    <!-- Wrapper for the two containers -->
    <div class="content-box-wrapper">
      <!-- First paragraph with icon and highlight box -->
      <div class="content-box">
        <div class="icon-wrapper">
          <span class="feature-icon">🚀</span>
        </div>
        <p class="highlight-text">
          Turn any internet connected computer into a website server with open manuals to manage a full digital political campaign. 
          <span class="emphasis" style="font-weight: bold; color: #FFFFFF; text-shadow: 2px 2px 4px rgba(128, 0, 128, 0.5);">Or, you know, just a regular old blog.</span> 
          <a href="https://changemaker.bnkops.com/Free(ish)">For free(ish)</a>. 
          With everything running locally on your machine, there's simply no faster way to develop a website and grow your following.
          <span class="emoji-float">😉</span>
        </p>
            </div>

            <!-- Second paragraph with icon and highlight box -->
            <div class="content-box">
        <div class="icon-wrapper">
          <span class="feature-icon">🔒</span>
        </div>
        <p class="highlight-text">
          Your content is <span class="emphasis" style="font-weight: bold; color: #FFFFFF; text-shadow: 2px 2px 4px rgba(128, 0, 128, 0.5);">locally built, inherently secure, and remotely accessible</span> so you can keep control of your site; right down to the bare code. Never share server space with your competition again and stop 
          <a href="https://changemaker.bnkops.com/Why%20Change%20Maker/">funding corporate software</a> 
          that is antithetical to your morals. Publish your content on your terms; <span class="emphasis" style="font-weight: bold; color: #FFFFFF; text-shadow: 2px 2px 4px rgba(128, 0, 128, 0.5);">true freedom of speech.</span>
        </p>
      </div>
    </div>
  </div>

  <form method="post" action="https://listmonk.bnkops.com/subscription/form" class="listmonk-form">
    <div class="form-content">
        <!-- Orbiting Text Elements -->
        <div class="orbit-text" style="--start-rotation: 0deg;">✨ Stay in the Loop ✨</div>
        <div class="orbit-text" style="--start-rotation: 120deg;">✨ Subscribe for Code ✨</div>
        <div class="orbit-text" style="--start-rotation: 240deg;">✨ Get the Latest ✨</div>
        <!-- Form Inputs -->
        <input type="hidden" name="nonce" />
        <input type="email" name="email" required placeholder="E-mail" />
        <input type="text" name="name" placeholder="Name (optional)" />
        <label>
            <input id="038eb" type="checkbox" name="l" checked value="038eb469-e141-435d-86eb-2ab4df20cf9c" />
            Weekly Releases and Updates
        </label>
        <!-- Subscribe Button -->
        <div class="subscribe-container">
            <input type="submit" value="Subscribe" />
        </div>
    </div>
</form>

  <style>
  .hero-content {
    max-width: 1200px; /* Increased max-width to accommodate side-by-side */
    margin: 2rem auto;
  }

  .content-box-wrapper {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
  }

  .content-box {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0; /* Removed vertical margin */
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform 0.3s ease;
    flex: 1; /* Allow equal growth */
    min-width: 300px; /* Minimum width before stacking */
  }

  .content-box:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.3);
  }

  .icon-wrapper {
    background: rgba(255, 215, 0, 0.1);
    border-radius: 50%;
    padding: 1rem;
    margin-top: 0.5rem;
    flex-shrink: 0; /* Prevent icon from shrinking */
  }

  .feature-icon {
    font-size: 1.5rem;
    animation: float 3s ease-in-out infinite;
  }

  .highlight-text {
    margin: 0;
    line-height: 1.6;
  }

  .emphasis {
    color: var(--bnk-yellow);
    font-weight: 500;
  }

  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
  }

  /* Media query for mobile devices */
  @media (max-width: 768px) {
    .content-box {
      flex: 1 1 100%; /* Take full width on mobile */
      margin: 0.5rem 0; /* Add some vertical spacing when stacked */
    }
  }
  </style>

  <div class="power-header">
    <h1>Build Your Power, Don't Rent It.</h1>
  </div>

  <!-- Moved Terminal Header here -->
  <div class="terminal-header">
    <div class="typing-effect">initializing documentation system<span class="cursor"></span></div>
    <div class="typing-effect">checking dependencies...</div>
    <div class="typing-effect"><span>✓</span> site built ready to serve</div>
    <div class="typing-effect"><span>✓</span> newsletter configured ready</div>
    <div class="typing-effect"><span>✓</span> real-time preview active</div>
    <div class="typing-effect"><span>✓</span> editor built online </div>
    <div class="typing-effect"><span>✨</span> change maker ready!</div>
  </div>


<style>
.activist-banner {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  text-align: center;
}

.activist-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

.activist-card {
  background: rgba(45, 27, 77, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  min-width: 200px;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.activist-card:hover {
  transform: translateY(-5px);
  border-color: var(--bnk-yellow);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.activist-card .emoji {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  animation: float 3s ease-in-out infinite;
}

.activist-card .role {
  color: var(--bnk-yellow);
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.activist-card .action {
  color: var(--bnk-text);
  font-size: 0.9rem;
  opacity: 0.9;
}

.manifesto {
  font-size: 1.1rem;
  color: var(--bnk-text);
  margin-top: 2rem;
  font-style: italic;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@media (max-width: 768px) {
  .activist-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .activist-card {
    width: 100%;
    max-width: 300px;
  }
}
</style>

<div class="highlight-features-grid">
  <div class="highlight-feature">
    <h2>🚀 NEW: Built-in Email, SMS, & Messengers Marketing</h2>
    <p>Now includes Listmonk - a powerful, free alternative to MailChimp and Constant Contact. Send newsletters, manage subscribers, and run email campaigns without monthly fees.</p>
    <div class="savings-card">
      <div>💰</div>
      <div>
        <span class="savings-amount">Save $1,200+/year</span><br>
        <small>vs. commercial email marketing tools</small>
      </div>
    </div>
  </div>

  <div class="highlight-feature">
    <h2>🌐 Website Builder, Server, and Editor Hosting All-In-One.</h2>
    <p>Professional website builder and hosting platform. No more WordPress fees or expensive site builders. Edit your sites code directly on device. Never share server space with your competition again. </p>
    <div class="savings-card">
      <div>💰</div>
      <div>
        <span class="savings-amount">Save $300+/year</span><br>
        <small>vs. WordPress hosting & plugins</small>
      </div>
    </div>
  </div>

  <div class="highlight-feature">
    <h2>📱 Mobile Tools & Apps</h2>
    <p>Mobile-optimized tools for on-the-go campaign management. No app subscriptions needed. Write web pages on the fly on any device.</p>
    <div class="savings-card">
      <div>💰</div>
      <div>
        <span class="savings-amount">Save $500+/year</span><br>
        <small>vs. mobile campaign tools</small>
      </div>
    </div>
  </div>

  <div class="highlight-feature" style="background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.1));">
    <h2>💎 Total Campaign Savings</h2>
    <p>Replace your entire campaign tech stack with one free, open-source platform.</p>
    <div class="savings-card" style="background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));">
      <div>🏆</div>
      <div>
        <span class="savings-amount">Save $2,200+/year</span><br>
        <small>Total savings vs. commercial alternatives</small>
      </div>
    </div>
  </div>
</div>

<style>
  .terminal-window {
    background: rgb(29, 31, 33);
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
    position: relative;
    font-family: monospace;
    width: 100%;
    max-width: 100%;
  }
  
  .terminal-window::before {
    content: "⚪ ⚪ ⚪";
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
  }
  
  .terminal-prompt {
    color: rgb(255, 215, 0);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }
  
  .progress-container {
    width: 100%;
    height: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin: 0.5rem 0;
    position: relative;
    overflow: visible;
  }
  
  .progress-bar {
    height: 100%;
    width: 0%;
    background: rgba(255, 215, 0, 0.15);
    transition: width 0.15s ease-out;
    position: relative;
  }
  
  /* Tron-style grid effect */
  .progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      linear-gradient(90deg, rgba(255, 215, 0, 0.1) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 215, 0, 0.1) 1px, transparent 1px);
    background-size: 8px 8px;
  }
  
  .progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: rgb(255, 215, 0);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  
  .progress-tooltip {
    position: absolute;
    top: -34px;
    left: 75%;
    transform: translateX(-100%);
    background: rgba(29, 31, 33, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    color: rgba(255, 215, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.1);
    z-index: 1000;
    width: max-content;
    max-width: 150px;
  }
  
  /* Mobile-specific tooltip styling */
  @media (max-width: 600px) {
    .progress-tooltip {
      display: flex;
      flex-direction: column;
      font-size: 0.6rem;
      line-height: 1.2;
      top: -38px;
      text-align: left;
    }
    
    .tooltip-line1 {
      margin-bottom: 2px;
    }
  }
  
  .progress-tooltip::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: calc(100% - 10px);
    width: 6px;
    height: 6px;
    background: inherit;
    border-right: 1px solid rgba(255, 215, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    transform: rotate(45deg);
  }
  
  .progress-tooltip.visible {
    opacity: 1;
  }
  
  .progress-info {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 215, 0, 0.8);
    font-size: 0.7rem;
    margin-top: 0.3rem;
  }
  
  .subscribe-text {
    color: rgb(200, 200, 200);
    font-size: 0.7rem;
    margin-top: 0.3rem;
  }
  
  .loading .progress-bar {
    background: linear-gradient(90deg,
      rgba(255, 215, 0, 0.1),
      rgba(255, 215, 0, 0.2)
    );
  }
  </style>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
      const container = document.querySelector('.terminal-window');
      const progressBar = container.querySelector('.progress-bar');
      const progressPercent = container.querySelector('.progress-percent');
      const tooltip = container.querySelector('.progress-tooltip');
      let progress = 0;
      let lastScrollTop = 0;
      let scrollSensitivity = 5;
  
      container.classList.add('loading');
  
      function updateProgress(scrollDelta) {
          const viewportHeight = window.innerHeight;
          const docHeight = document.documentElement.scrollHeight - viewportHeight;
          const increment = (Math.abs(scrollDelta) / docHeight) * 100 * scrollSensitivity;
          
          progress = Math.min(75, progress + (increment * 0.8));
          
          progressBar.style.width = `${progress}%`;
          progressPercent.textContent = `${Math.round(progress)}%`;
          
          if (progress >= 70) {
              tooltip.classList.add('visible');
          } else {
              tooltip.classList.remove('visible');
          }
          
          if (progress > 0) {
              container.classList.remove('loading');
          }
      }
  
      window.addEventListener('scroll', () => {
          const scrollTop = window.scrollY;
          const scrollDelta = Math.abs(scrollTop - lastScrollTop);
          lastScrollTop = scrollTop;
          requestAnimationFrame(() => updateProgress(scrollDelta));
      }, { passive: true });
  
      window.addEventListener('wheel', (e) => {
          const wheelDelta = Math.abs(e.deltaY);
          requestAnimationFrame(() => updateProgress(wheelDelta / 5));
      }, { passive: true });
  });
  </script>
  
  <div class="terminal-window">
    <div class="terminal-prompt">
      > Building Change Maker V3...
    </div>
    <div class="progress-container">
      <div class="progress-tooltip">
        <span class="tooltip-line1">Testing with Partners now.</span>
        <span class="tooltip-line2">Email for Opportunity.</span>
      </div>
      <div class="progress-bar"></div>
    </div>
    <div class="progress-info">
      <span class="progress-percent">0%</</span>
      <span>Target: Late November</span>
    </div>
    <div class="subscribe-text">
      Subscribe to newsletter to get code delivered right to the inbox.
    </div>
  </div>

  <div class="power-header">
    <h1>Not a dime spent on advertising and you still heard of us?</h1>
  </div>

  <form method="post" action="https://listmonk.bnkops.com/subscription/form" class="listmonk-form">
    <div class="form-content">
        <!-- Orbiting Text Elements -->
        <div class="orbit-text" style="--start-rotation: 0deg;">✨ Stay in the Loop ✨</div>
        <div class="orbit-text" style="--start-rotation: 120deg;">✨ Subscribe for Code ✨</div>
        <div class="orbit-text" style="--start-rotation: 240deg;">✨ Get the Latest ✨</div>
        <!-- Form Inputs -->
        <input type="hidden" name="nonce" />
        <input type="email" name="email" required placeholder="E-mail" />
        <input type="text" name="name" placeholder="Name (optional)" />
        <label>
            <input id="038eb" type="checkbox" name="l" checked value="038eb469-e141-435d-86eb-2ab4df20cf9c" />
            Weekly Releases and Updates
        </label>
        <!-- Subscribe Button -->
        <div class="subscribe-container">
            <input type="submit" value="Subscribe" />
        </div>
    </div>
</form>


<div class="section">
  <h2>Some Features</h2>
  <div class="feature-grid">
    <!-- Existing cards -->
    <div class="feature-card">
      <h3><span class="emoji-float">📱</span> Mobile-First Design</h3>
      <p>Responsive layout for both frontend and backend that is optimized for all devices with touch-friendly navigation. Why not write instead of doom scroll? 🤔❤️🤳</p>
    </div>
    
    <div class="feature-card">
      <h3><span class="emoji-float">🔍</span> Instant Search</h3>
      <p>Built-in search with real-time suggestions and keyword highlighting. Get curious visitors instant answers to their questions 🤓🫡.</p>
    </div>
    
    <div class="feature-card">
      <h3><span class="emoji-float">🎨</span> Accessibilty & Dark Mode Support</h3>
      <p>Accessible reading by default & automatic dark/light theme switching based on user preferences ❤️👀</p>
    </div>
    
    <!-- New security-focused cards -->
    <div class="feature-card">
      <h3><span class="emoji-float">🏠</span> Self-Hosted Platform</h3>
      <p>Run everything on your own hardware. No external dependencies or cloud services required. Complete control over your infrastructure and data. 💪</p>
    </div>

    <div class="feature-card">
      <h3><span class="emoji-float">🔐</span> 100% Confidential</h3>
      <p>Your content stays private and secure. No data sharing, tracking, or external connections. Perfect for sensitive campaign materials and strategic planning. 🤫</p>
    </div>

    <div class="feature-card">
      <h3><span class="emoji-float">🌐</span> VPN Compatible</h3>
      <p>Works seamlessly with VPNs and anonymity tools. Enhanced privacy and security for your entire team's communications. 🛡️</p>
    </div>
    
    <!-- Remaining existing cards -->
    <div class="feature-card">
      <h3><span class="emoji-float">🚀</span> Social Cards</h3>
      <p>Automatic social media cards and SEO optimization for better sharing. Like, if thats your thing 🤭</p>
    </div>

    <div class="feature-card">
      <h3><span class="emoji-float">📊</span> Analytics Ready</h3>
      <p>Easy integration with analytics if you so choose. If you like to watch, that's your thing 😆</p>
    </div>

    <div class="feature-card">
      <h3><span class="emoji-float">🔒</span> Privacy Focused</h3>
      <p>No external requests, GDPR compliant, and cookie-free by default. Build a site offline entirely, if you so choose.🙈🙉🙊 </p>
    </div>
  </div>
</div>

<div class="power-header">
  <h2>The Fastest Writing Platform Available</h2>
</div>

  <p>This documentation editor lets you create and manage content using markdown and Obsidian-style features. View, edit, and generate your site <a href="https://changemaker.bnkops.com/Backend%20%26%20Editor/">entirely in plain text.</a> Write and serve your content faster then ever before.</p> 

  <div class="typewriter-container">
    <div id="typewriter-text"></div>
  </div>

  <div class="feature-grid">
    <!-- Simple Markdown Writing -->
    <div class="feature-card">
      <h3><span class="emoji-float">📝</span> Simple Markdown Writing</h3>
      <p>Use <a href="https://changemaker.bnkops.com/Simple%20Markdown%20Guide/">Markdown</a> for easy content creation</p>
    </div>
    
    <!-- Obsidian Integration -->
    <div class="feature-card">
      <h3><span class="emoji-float">🔗</span> Obsidian Integration</h3>
      <p>Open your docs folder in <a href="https://changemaker.bnkops.com/obsidian/">Obsidian</a> for enhanced features</p>
    </div>
    
    <!-- Real-time Preview -->
    <div class="feature-card">
      <h3><span class="emoji-float">👁️</span> Real-time Preview</h3>
      <p>See your changes immediately with live preview</p>
    </div>
    
    <!-- Auto-updating Links -->
    <div class="feature-card">
      <h3><span class="emoji-float">🔄</span> Auto-updating Links</h3>
      <p>Internal links are managed automatically</p>
    </div>
  
    <!-- Custom Landing Page -->
    <div class="feature-card">
      <h3><span class="emoji-float">🎨</span> Custom Landing Page</h3>
      <p>Use <a href="https://changemaker.bnkops.com/Customizing%20Your%20Landing%20Page%20with%20LLMs%20%28Ai%29/">our LLM prompting guide</a> to create beautiful custom landing pages</p>
    </div>

<!-- Blogger Ready -->
<div class="feature-card">
    <h3><span class="emoji-float">📝</span> Blogger Ready</h3>
    <p>Backend builder mkdcos-material offers powerful blogging features with built-in plugins and extensions for a seamless documentation experience</p>
</div>
  </div>


<style>
  @keyframes smokeGlow {
      0% {
          opacity: 0.1;
          filter: blur(15px);
          transform: scale(0.98) translate(0, 0);
      }
      33% {
          opacity: 0.3;
          filter: blur(12px);
          transform: scale(1.01) translate(-2px, 2px);
      }
      66% {
          opacity: 0.2;
          filter: blur(18px);
          transform: scale(1.02) translate(2px, -2px);
      }
      100% {
          opacity: 0.1;
          filter: blur(15px);
          transform: scale(0.98) translate(0, 0);
      }
  }
  
  @keyframes orbit {
      from {
          transform: translate(-50%, -50%) rotate(var(--start-rotation)) translateX(120px) rotate(calc(-1 * var(--start-rotation)));
      }
      to {
          transform: translate(-50%, -50%) rotate(calc(360deg + var(--start-rotation))) translateX(120px) rotate(calc(-360deg - var(--start-rotation)));
      }
  }
  
  .listmonk-form {
      position: relative !important;
      background: rgba(45, 27, 77, 0.7) !important;
      padding: 40px !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 40px 0 !important;
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 15px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      z-index: 1 !important;
      min-height: 300px !important;
  }
  
  .listmonk-form::before,
  .listmonk-form::after {
      content: '' !important;
      position: absolute !important;
      top: -20px !important;
      left: -20px !important;
      right: -20px !important;
      bottom: -20px !important;
      background: rgba(255, 255, 255, 0.15) !important;
      border-radius: 20px !important;
      z-index: -1 !important;
      pointer-events: none !important;
  }
  
  .listmonk-form::before {
      animation: smokeGlow 8s ease-in-out infinite !important;
  }
  
  .listmonk-form::after {
      animation: smokeGlow 8s ease-in-out infinite reverse !important;
      animation-delay: -4s !important;
      background: rgba(255, 255, 255, 0.1) !important;
  }
  
  .form-content {
      position: relative !important; /* Added for orbiting text positioning */
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 15px !important;
      justify-content: center !important;
      align-items: center !important;
      max-width: 600px !important;
      margin: 0 auto !important;
      z-index: 2 !important;
  }
  
  .subscribe-container {
      position: relative !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      z-index: 2 !important;
  }
  
  .listmonk-form input[type="email"],
  .listmonk-form input[type="text"],
  .listmonk-form label,
  .subscribe-container {
      position: relative !important;
      z-index: 2 !important; /* Ensure inputs are above orbiting text */
  }
  
  .listmonk-form input[type="email"],
.listmonk-form input[type="text"] {
    background-color: #6a1b9a !important; /* Solid purple background */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important; /* Brightened text color */
    padding: 12px 15px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: bold !important; /* Increased font weight */
    flex: 1 !important;
    min-width: 150px !important;
    max-width: 250px !important;
    transition: all 0.3s ease !important;
}

.listmonk-form input[type="email"]::placeholder,
.listmonk-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.8) !important; /* Brighter placeholder text color */
}

.listmonk-form input[type="email"]:focus,
.listmonk-form input[type="text"]:focus {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: #7b1fa2 !important; /* Slightly lighter purple on focus */
    color: #FFFFFF !important; /* Ensure text remains bright on focus */
    outline: none !important;

}
  .listmonk-form input[type="submit"] {
      background-color: rgba(255, 255, 255, 0.9) !important;
      color: #2d1b4d !important;
      padding: 12px 25px !important;
      border: none !important;
      border-radius: 6px !important;
      cursor: pointer !important;
      font-weight: bold !important;
      font-size: 16px !important;
      transition: all 0.3s ease !important;
      letter-spacing: 0.5px !important;
      position: relative !important;
      z-index: 2 !important;
  }
  
  .listmonk-form input[type="submit"]:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
      background-color: rgba(240, 240, 240, 0.9) !important;
  }
  
  .listmonk-form label {
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: normal !important;
      font-size: 15px !important;
      display: inline-flex !important;
      align-items: center !important;
      margin-right: 15px !important;
      flex: 1 1 100% !important;
  }
  
  .listmonk-form input[type="checkbox"] {
      margin-right: 8px !important;
      accent-color: #ffffff !important;
  }
  
  .listmonk-form input::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
  }
  
  .orbit-text {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform-origin: center !important;
      margin: 0 !important;
      color: #ffffff !important;
      font-size: 14px !important; /* Further reduced font size */
      font-weight: bold !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
      letter-spacing: 0.5px !important;
      white-space: nowrap !important;
      animation: orbit 12s linear infinite !important; /* Even faster orbit */
      background: rgba(45, 27, 77, 0.5) !important;
      padding: 4px 10px !important; /* Further reduced padding */
      border-radius: 20px !important;
      backdrop-filter: blur(5px) !important;
      pointer-events: none !important;
      z-index: 1 !important;
  }
  
  @keyframes orbit {
      from {
          transform: translate(-50%, -50%) rotate(var(--start-rotation)) translateX(100px) rotate(calc(-1 * var(--start-rotation))); /* Further reduced orbit radius */
      }
      to {
          transform: translate(-50%, -50%) rotate(calc(360deg + var(--start-rotation))) translateX(100px) rotate(calc(-360deg - var(--start-rotation))); /* Further reduced orbit radius */
      }
  }
  </style>
  
  <form method="post" action="https://listmonk.bnkops.com/subscription/form" class="listmonk-form">
    <div class="form-content">
        <!-- Orbiting Text Elements -->
        <div class="orbit-text" style="--start-rotation: 0deg;">✨ Stay in the Loop ✨</div>
        <div class="orbit-text" style="--start-rotation: 120deg;">✨ Subscribe for Code ✨</div>
        <div class="orbit-text" style="--start-rotation: 240deg;">✨ Get the Latest ✨</div>
        <!-- Form Inputs -->
        <input type="hidden" name="nonce" />
        <input type="email" name="email" required placeholder="E-mail" />
        <input type="text" name="name" placeholder="Name (optional)" />
        <label>
            <input id="038eb" type="checkbox" name="l" checked value="038eb469-e141-435d-86eb-2ab4df20cf9c" />
            Weekly Releases and Updates
        </label>
        <!-- Subscribe Button -->
        <div class="subscribe-container">
            <input type="submit" value="Subscribe" />
        </div>
    </div>
</form>


  <div class="section">
    <h2>In Development</h2>
    <p>bnkops is working on Change Maker V4 right now, which will also be free. Features coming include:</p>
    <ul>
      <li>DNS (domain) hosting services under bnkops.com</li>
      <li>One click install script for public access</li>
      <li>Expanded frontend editor with more standard markdown editing features and content management</li> 
<li>Expanded mobile features, such as content uploading and improved ui</li>
      <li>Options to install local newsletter, email targeter, automation systems, and database integrations</li>
<li> Meta properties for documentation for states like draft, publish, author, publication time, etc.
    </ul>
  </div>
</div>

<div class="section" style="padding: 1.25rem; background: linear-gradient(145deg, rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.01)); position: relative; overflow: hidden;">
  <!-- Shimmer effect overlay -->
  <div style="position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 215, 0, 0.1), transparent);"></div>
  
  <div style="position: relative; width: 100%; padding: 1.25rem; background: linear-gradient(145deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.04)); border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.1);">
    <h3 style="text-align: center; font-size: 1.2rem !important; margin-bottom: 0.5rem !important; color: var(--bnk-yellow);">Share the Magic! ✨</h3>
    <p style="text-align: center; margin-bottom: 1rem; font-size: 0.9rem; color: var(--bnk-text-dim);">Want to support bnkops change maker? Help spread the word!</p>
    <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<button onclick="navigator.clipboard.writeText('Have you seen https://changemaker.bnkops.com? A open-source, free, simple, and powerful website generator and server application for running digital campaigns.'); alert('Link copied!');"
        style="flex: 1; min-width: 120px; text-align: center; background: var(--bnk-yellow); color: black; padding: 0.5rem 1rem; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9rem; transition: transform 0.2s ease, box-shadow 0.2s ease;"
        onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(255, 215, 0, 0.3)'"
        onmouseout="this.style.transform='none'; this.style.boxShadow='none'">
  📋 Copy url and short introduction
</button>

    </div>
  </div>
 </div>
 
 <style>
 @keyframes shimmer {
  100% {
    transform: translateX(50%);
  }
}
 }
 </style>
</div>


<script>
// Define the two message arrays
const taglines = [
  "Documentation meets democracy: Professional-grade tools with revolutionary simplicity.",
  "Your campaign's command center: Powerful documentation that adapts as fast as you do.",
  "Secure, simple, sovereign: Documentation built for campaigns that make change.",
  "Where simplicity meets strategy: Professional documentation tools built for changemakers.",
  "Take control of your narrative: Professional documentation that evolves with your campaign."
];

const messages = [
  "The promise is: If you can type, you can make a site.",
  "Create websites effortlessly and itteratively.",
  "Your content, your control.",
  "Welcome to the future of web creation!",
  "Empower your ideas with simplicity."
];

// Setup for both typewriters
const typewriterElement = document.getElementById('typewriter-text');
const cursorElement = document.getElementById('cursor');
const taglineElement = document.querySelector('.typewriter-text');
const taglineCursor = document.querySelector('.cursor');

let messageIndex = 0;
let taglineIndex = 0;
let typewriterIndex = 0;
let taglineTypeIndex = 0;
let isDeleting = false;
let isTaglineDeleting = false;

function getTextWidth(text, element) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const computedStyle = window.getComputedStyle(element);
  context.font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
  return context.measureText(text).width;
}

function updateCursorPosition(textElement, cursorElement) {
  const textNode = textElement.firstChild;
  const range = document.createRange();
  range.selectNodeContents(textElement);
  const textWidth = range.getBoundingClientRect().width;
  cursorElement.style.position = 'absolute';
  cursorElement.style.left = `${textWidth}px`;
  
  // Calculate vertical position based on text height
  const textHeight = textElement.getBoundingClientRect().height;
  const lineHeight = parseInt(window.getComputedStyle(textElement).lineHeight);
  const lines = Math.floor(textHeight / lineHeight);
  
  // Position cursor at the end of text, accounting for multiple lines
  cursorElement.style.top = `${(lines - 1) * lineHeight}px`;
}

function typeTagline() {
  const currentTagline = taglines[taglineIndex];
  
  if (!isTaglineDeleting) {
    if (taglineTypeIndex < currentTagline.length) {
      taglineElement.textContent += currentTagline.charAt(taglineTypeIndex);
      taglineTypeIndex++;
      setTimeout(typeTagline, 50);
    } else {
      setTimeout(() => {
        isTaglineDeleting = true;
        typeTagline();
      }, 3000);
    }
  } else {
    if (taglineTypeIndex > 0) {
      taglineElement.textContent = currentTagline.substring(0, taglineTypeIndex - 1);
      taglineTypeIndex--;
      setTimeout(typeTagline, 30);
    } else {
      isTaglineDeleting = false;
      taglineIndex = (taglineIndex + 1) % taglines.length;
      setTimeout(typeTagline, 500);
    }
  }
}

function typeWriter() {
  const currentMessage = messages[messageIndex];
  
  if (!isDeleting) {
    if (typewriterIndex < currentMessage.length) {
      typewriterElement.textContent += currentMessage.charAt(typewriterIndex);
      typewriterIndex++;
      setTimeout(typeWriter, 50);
    } else {
      setTimeout(() => {
        isDeleting = true;
        typeWriter();
      }, 2000);
    }
  } else {
    if (typewriterIndex > 0) {
      typewriterElement.textContent = currentMessage.substring(0, typewriterIndex - 1);
      typewriterIndex--;
      setTimeout(typeWriter, 30);
    } else {
      isDeleting = false;
      messageIndex = (messageIndex + 1) % messages.length;
      setTimeout(typeWriter, 500);
    }
  }
}

// Start both typewriter effects with a delay
setTimeout(typeTagline, 1000);
setTimeout(typeWriter, 1000);
  
  document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer for scroll animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('reveal');
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    });
  
    // Observe all animated elements
    document.querySelectorAll('h2, p, .feature-card, ul li, .section').forEach(el => {
      observer.observe(el);
    });
  
    // Emoji hover animation
    document.querySelectorAll('.emoji-float').forEach(emoji => {
      emoji.addEventListener('mouseover', () => {
        emoji.style.animation = 'none';
        emoji.offsetHeight; // Trigger reflow
        emoji.style.animation = 'float 3s ease-in-out infinite';
      });
    });
  
    // Terminal animation sequence
    const terminalMessages = document.querySelectorAll('.typing-effect');
    
    function animateMessages(index) {
      if (index >= terminalMessages.length) return;
      
      setTimeout(() => {
        terminalMessages[index].classList.add('active');
        animateMessages(index + 1);
      }, 1000);
    }
  
    animateMessages(0);
  
    // Reset and repeat animation
    setInterval(() => {
      terminalMessages.forEach(msg => {
        msg.classList.remove('active');
      });
      setTimeout(() => {
        animateMessages(0);
      }, 500);
    }, 8000);
  });
  </script>
{% endblock %}

{% block tabs %}
  {{ super() }}
{% endblock %}