/* Animated horizon treatment adapted for Homeboard's lightweight CSS grid. */
body::after {
  animation: homeboard-grid-drive 1.1s linear infinite;
  will-change: background-position;
}

.app-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.app-shell > .topbar,
.app-shell > .hero,
.app-shell > .board {
  position: relative;
  z-index: 2;
}

.hero > div:first-child {
  padding: 0.35em 0.8em 0.35em 0.1em;
  overflow: visible;
}

.hero h1 {
  max-width: none;
  padding: 0.08em 0.16em 0.12em 0.04em;
  overflow: visible;
  line-height: 1.18;
}

.app-shell::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 43vh;
  z-index: 0;
  height: 2px;
  background: #ff3cac;
  box-shadow: 0 0 12px #ff3cac, 0 0 36px #9b5cff;
  opacity: 0.72;
  pointer-events: none;
}

.app-shell::after {
  content: "";
  position: fixed;
  left: -18%;
  right: -18%;
  bottom: -20vh;
  z-index: 0;
  height: 68vh;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: center bottom;
  background-color: #050819;
  background-image:
    linear-gradient(#ff3cacc7 2px, transparent 2px),
    linear-gradient(90deg, #22f0ffad 2px, transparent 2px);
  background-size: 72px 48px;
  box-shadow: inset 0 12px 50px #9b5cff42;
  mask-image: linear-gradient(to top, #000 28%, #000c 64%, transparent 100%);
  animation: homeboard-grid-drive-main 900ms linear infinite;
  will-change: background-position;
  pointer-events: none;
}

.widget-shell::after {
  animation: homeboard-grid-drive-widget 900ms linear infinite;
  will-change: background-position;
}

.hero h1,
.widget-head h1,
.login-card h1 {
  background-size: 100% 220%;
  animation: homeboard-title-shimmer 4.8s ease-in-out infinite;
}

.brand-mark {
  animation: homeboard-neon-pulse 2.8s ease-in-out infinite;
}

@keyframes homeboard-grid-drive {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 42px, 0 0; }
}

@keyframes homeboard-grid-drive-widget {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 38px, 0 0; }
}

@keyframes homeboard-grid-drive-main {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 48px, 0 0; }
}

@keyframes homeboard-title-shimmer {
  0%, 32%, 100% { background-position: 50% 0%; }
  48%, 58% { background-position: 50% 100%; }
}

@keyframes homeboard-neon-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .app-shell::after,
  .widget-shell::after,
  .hero h1,
  .widget-head h1,
  .login-card h1,
  .brand-mark { animation: none; }
}