/* BACKGROUND GRID WITH CROSSES */
.grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    /* crosses */
    radial-gradient(circle, rgba(255,255,255,0.15) 1.5px, transparent 1.5px),
    /* vertical lines */
    linear-gradient(to right, rgba(255,255,255,0.12) 1px, transparent 1px),
    /* horizontal lines */
    linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px);

  background-size:
    70px 70px,   /* crosses */
    70px 70px,   /* vertical lines */
    70px 70px;   /* horizontal lines */

  /* ✅ keep pattern centred for all three layers */
  background-position:
    center center,
    center center,
    center center;

  /* just to be explicit */
  background-repeat: repeat;

  pointer-events: none;
}

/* DYNAMICALLY INCREASE GRID SPACING */
@media (min-width: 768px) {
  .grid-bg {
    background-size: 100px 100px, 100px 100px, 100px 100px;
  }
}

@media (min-width: 1280px) {
  .grid-bg {
    background-size: 140px 140px, 140px 140px, 140px 140px;
  }
}

.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.animate-bounce-slow {
  animation: bounce-slow 2s infinite ease-in-out;
}