/* ===================================================
   Responsive Typography
=================================================== */
@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }
}

/* ===================================================
   Mobile / Tablet Adjustments (max-width: 1044px)
=================================================== */
@media (max-width: 1044px) {

  /* Swiji title at top center */
  #toolbarTitle {
    position: fixed;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem; /* slightly bigger on mobile */
    z-index: 1100;
    pointer-events: none;
    user-select: none;
  }

  /* Hamburger menu toggle button */
  #menuToggle {
    display: flex;               /* always visible on mobile */
    position: fixed;
    top: 0.75rem;                /* back to top */
    right: 0.75rem;
    width: 2rem;                 /* thinner */
    height: 2rem;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    border: none;
    background: none;
    z-index: 1200;
    padding: 0;
  }

  /* Hamburger bars */
  #menuToggle .bar {
    display: block;
    width: 100%;
    height: 2px;                 /* thinner bars */
    background-color: var(--text);
    border-radius: 1px;
    transition: all 0.3s ease;
  }

  /* Hamburger X animation */
  #menuToggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  #menuToggle.active .bar:nth-child(2) {
    opacity: 0;
  }
  #menuToggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* Collapsed navigation */
  #navButtons {
    flex-direction: column;
    gap: 0.5rem;
    position: fixed;
    top: 3.5rem;               /* below toolbar */
    left: 0;
    width: 90%;                /* slightly narrower panels */
    max-width: 400px;
    margin: auto;
    right: 0;
    max-height: 0;             /* hidden initially */
    overflow: hidden;
    background-color: var(--bg);
    padding: 0;
    z-index: 1100;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  /* Show nav when active */
  #navButtons.show {
    max-height: 500px;
    padding: 1rem 0;
  }

  /* Mobile panel links */
  #navButtons a {
    width: 100%;
    min-width: auto;
    padding: 0.6rem 1rem;      /* shorter height */
    text-align: center;
    font-size: 0.95rem;
  }
}

/* =========================
   Hero Intro & Glitch
========================= */

/* Container for hero text */
#heroIntro h1 {
  font-family: 'Share Tech Mono', monospace;
  font-weight: 400;
  font-size: 2.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  margin: 2rem 0;
  position: relative;
}

/* Dynamic text with glitch effect */
#dynamic.glitch {
  position: relative;
  display: inline-block;
  font-weight: 400;
}

/* Watch Dogs-style glitch overlay using ::before and ::after */
#dynamic.glitch::before,
#dynamic.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.6;
  mix-blend-mode: lighten; /* gives the “digital flicker” look */
}

/* Left flicker */
#dynamic.glitch::before {
  color: var(--accent);
  transform: translate(-2px, 0);
  animation: glitchShiftLeft 0.5s steps(3) 1 forwards;
}

/* Right flicker */
#dynamic.glitch::after {
  color: var(--text);
  transform: translate(2px, 0);
  animation: glitchShiftRight 0.5s steps(3) 1 forwards;
}

/* Glitch keyframes */
@keyframes glitchShiftLeft {
  0% { clip-path: inset(0 0 90% 0); transform: translate(-2px, 0); }
  25% { clip-path: inset(10% 0 80% 0); transform: translate(-3px, -1px); }
  50% { clip-path: inset(20% 0 70% 0); transform: translate(-1px, 1px); }
  75% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, -2px); }
  100% { clip-path: inset(0 0 90% 0); transform: translate(-2px, 0); }
}

@keyframes glitchShiftRight {
  0% { clip-path: inset(0 0 90% 0); transform: translate(2px, 0); }
  25% { clip-path: inset(10% 0 80% 0); transform: translate(3px, 1px); }
  50% { clip-path: inset(20% 0 70% 0); transform: translate(1px, -1px); }
  75% { clip-path: inset(10% 0 80% 0); transform: translate(2px, 2px); }
  100% { clip-path: inset(0 0 90% 0); transform: translate(2px, 0); }
}

/* =========================
   Light / Dark Theme Colors
========================= */
/* Default glitch colors (light mode) */
body {
  --glitch-left: #ff0000;   /* red flicker for light mode */
  --glitch-right: #0000ff;  /* blue flicker for light mode */
  --text: #111111;
  background-color: var(--bg);
  color: var(--text);
}

/* Dark mode glitch colors */
body.dark {
  --glitch-left: #ff4d4d;   /* softer red for dark mode */
  --glitch-right: #00ffff;  /* cyan for dark mode */
  --text: #eeeeee;
}

/* Glitch pseudo-elements */
#dynamic.glitch::before {
  color: var(--glitch-left);
}

#dynamic.glitch::after {
  color: var(--glitch-right);
}


/* Footer container */
footer#siteFooter {
  background: var(--bg);
  color: var(--text);
  text-align: center;
  padding: 2rem 1rem 1rem 1rem;
  border-top: 1px solid #eee;
  font-size: 1rem;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

/* Footer link animation */
.footer-links a {
  position: relative;
  color: var(--accent);
  margin: 0 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Subtle flicker on hover */
.footer-links a:hover {
  animation: footerGlitch 0.6s steps(3, end) 1;
}

@keyframes footerGlitch {
  0%, 100% { text-shadow: 1px 0 #ff00ff, -1px 0 #00ffff; }
  25% { text-shadow: -1px 0 #ff00ff, 1px 0 #00ffff; }
  50% { text-shadow: 1px 0 #ff00ff, -1px 0 #00ffff; }
  75% { text-shadow: -1px 0 #ff00ff, 1px 0 #00ffff; }
}