/**
 * Site-wide coding / terminal ambience.
 * Respects prefers-reduced-motion.
 */

@media (prefers-reduced-motion: reduce) {
  .coder-fx,
  .coder-fx *,
  .typing-cursor::after,
  .cursor-blink,
  .hero-card--pulse,
  .surface-pulse,
  .mini-console--glow,
  .article-shell .code-block,
  .site-header-glow::before,
  .brand-title-code,
  .brand-title-code::after,
  .tagline-faint-pulse {
    animation: none !important;
  }
  .coder-fx-grid {
    transform: none !important;
  }
  .brand-title-code::after {
    opacity: 1;
  }
}

body.has-coder-animations {
  position: relative;
}

body.has-coder-animations > main {
  position: relative;
  z-index: 1;
}

.coder-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.coder-fx-grid {
  position: absolute;
  inset: -60%;
  background-image:
    linear-gradient(rgba(52, 211, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: coder-grid-drift 90s linear infinite;
  opacity: 0.55;
}

@keyframes coder-grid-drift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(56px, 56px);
  }
}

.coder-fx-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 5px
  );
  animation: coder-scan 12s linear infinite;
  opacity: 0.4;
}

@keyframes coder-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(6px);
  }
}

.coder-fx-token {
  position: absolute;
  font-size: clamp(0.65rem, 1.8vw, 0.9rem);
  color: rgba(52, 211, 255, 0.14);
  font-family: Consolas, "Courier New", monospace;
  white-space: nowrap;
  user-select: none;
  animation: coder-float 22s ease-in-out infinite;
}

.coder-fx-token:nth-child(3) {
  left: 6%;
  top: 18%;
  animation-delay: 0s;
}

.coder-fx-token:nth-child(4) {
  right: 8%;
  top: 28%;
  animation-delay: -5s;
  color: rgba(141, 125, 255, 0.16);
}

.coder-fx-token:nth-child(5) {
  left: 14%;
  bottom: 22%;
  animation-delay: -9s;
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
}

.coder-fx-token:nth-child(6) {
  right: 18%;
  bottom: 30%;
  animation-delay: -3s;
  color: rgba(126, 231, 135, 0.12);
}

.coder-fx-token:nth-child(7) {
  left: 42%;
  top: 12%;
  animation-delay: -12s;
}

@keyframes coder-float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.2;
  }
  33% {
    transform: translate(10px, -16px) rotate(-0.5deg);
    opacity: 0.38;
  }
  66% {
    transform: translate(-8px, 10px) rotate(0.5deg);
    opacity: 0.26;
  }
}

.typing-cursor::after {
  content: "";
  display: inline-block;
  width: 0.45ch;
  min-width: 6px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--accent, #34d3ff);
  animation: cursor-blink 1s step-end infinite;
  box-shadow: 0 0 12px rgba(52, 211, 255, 0.45);
}

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

.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--accent, #34d3ff);
  animation: cursor-blink 1s step-end infinite;
  box-shadow: 0 0 10px rgba(52, 211, 255, 0.4);
}

.hero-card--pulse,
.surface-pulse {
  animation: card-glow-pulse 7s ease-in-out infinite;
}

@keyframes card-glow-pulse {
  0%,
  100% {
    box-shadow: 0 20px 60px rgba(2, 6, 18, 0.45);
  }
  50% {
    box-shadow:
      0 22px 70px rgba(2, 6, 18, 0.5),
      0 0 0 1px rgba(52, 211, 255, 0.12),
      0 0 48px rgba(52, 211, 255, 0.06);
  }
}

.mini-console--glow {
  animation: console-inner-glow 5s ease-in-out infinite;
}

@keyframes console-inner-glow {
  0%,
  100% {
    border-color: rgba(155, 168, 206, 0.25);
    box-shadow: inset 0 0 0 rgba(52, 211, 255, 0);
  }
  50% {
    border-color: rgba(52, 211, 255, 0.22);
    box-shadow: inset 0 0 28px rgba(52, 211, 255, 0.04);
  }
}

.terminal-dots .dot {
  animation: terminal-dot 1.4s ease-in-out infinite;
  opacity: 0.3;
}
.terminal-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.terminal-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes terminal-dot {
  0%,
  80%,
  100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.article-card--hover-glow {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.article-card--hover-glow:hover {
  box-shadow:
    0 14px 40px rgba(2, 6, 18, 0.4),
    0 0 0 1px rgba(52, 211, 255, 0.15);
}

/* Article code samples: soft border “breathing” */
.article-shell .code-block {
  animation: console-inner-glow 6s ease-in-out infinite;
}

/* ----- Header & site title (programming vibe) ----- */

.site-header-glow {
  position: relative;
  overflow: hidden;
}

.site-header-glow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(52, 211, 255, 0.2) 25%,
    rgba(141, 125, 255, 0.45) 50%,
    rgba(52, 211, 255, 0.2) 75%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: header-edge-flow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes header-edge-flow {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.65;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

.brand-title-code {
  position: relative;
  display: inline-block;
  animation: brand-glow-pulse 3.5s ease-in-out infinite;
}

@keyframes brand-glow-pulse {
  0%,
  100% {
    text-shadow:
      0 0 6px rgba(52, 211, 255, 0.2),
      0 0 20px rgba(52, 211, 255, 0.06);
  }
  50% {
    text-shadow:
      0 0 12px rgba(52, 211, 255, 0.4),
      0 0 28px rgba(141, 125, 255, 0.15);
  }
}

/* Blinking “terminal cursor” after the JSX-style brand */
.brand-title-code::after {
  content: "_";
  display: inline-block;
  margin-left: 1px;
  color: var(--accent, #34d3ff);
  font-weight: 400;
  animation: cursor-blink 1s step-end infinite;
}

.tagline-faint-pulse {
  animation: tagline-breathe 6s ease-in-out infinite;
}

@keyframes tagline-breathe {
  0%,
  100% {
    opacity: 0.88;
  }
  50% {
    opacity: 1;
  }
}

/* ----- Responsive layout (Bootstrap flex cols + long monospace copy) ----- */

.site-header nav .nav {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.site-header .d-flex > div:first-child {
  min-width: 0;
  max-width: 100%;
}

.site-header .tagline {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Let grid columns shrink so headings wrap instead of forcing horizontal scroll */
body.has-coder-animations main .row > [class*="col-"] {
  min-width: 0;
}

body.has-coder-animations .hero-card,
body.has-coder-animations .about-card,
body.has-coder-animations .list-hero,
body.has-coder-animations .article-shell {
  min-width: 0;
  max-width: 100%;
}

body.has-coder-animations .hero-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

body.has-coder-animations .mini-console {
  max-width: 100%;
  overflow-x: auto;
}

body.has-coder-animations .mini-console > div:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ----- Site footer ----- */

.site-footer {
  background: rgba(11, 16, 32, 0.96);
  border-color: rgba(155, 168, 206, 0.22) !important;
}

.site-footer .footer-brand {
  color: #eaf0ff;
  letter-spacing: 0.04em;
}

.site-footer .footer-muted {
  color: #9ba8ce;
}

.site-footer .footer-section-title {
  color: #34d3ff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  font-weight: 700;
}

.site-footer .footer-prose {
  color: #c5d0ef;
  line-height: 1.65;
  max-width: 52rem;
}

.site-footer .footer-prose strong {
  color: #eaf0ff;
  font-weight: 600;
}

.site-footer .footer-rule {
  border: 0;
  border-top: 1px solid rgba(155, 168, 206, 0.2);
  opacity: 1;
}

.site-footer .footer-link {
  color: #9ba8ce;
  text-decoration: none;
}

.site-footer .footer-link:hover {
  color: #34d3ff;
}