/**
 * Futuristic ambient effects layer: aurora gradient blobs, grid overlay,
 * glow accents, and a cursor-reactive spotlight. Purely decorative — never
 * blocks readability, interaction, or contrast, and stills under
 * prefers-reduced-motion.
 */

.aurora-bg {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aurora-bg::before,
.aurora-bg::after {
  content: '';
  position: absolute;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  will-change: transform;
}

.aurora-bg::before {
  top: -10%;
  left: -5%;
  background: radial-gradient(circle, rgba(49, 130, 206, 0.55), transparent 70%);
  animation: aurora-drift-a 22s ease-in-out infinite alternate;
}

.aurora-bg::after {
  bottom: -15%;
  right: -8%;
  background: radial-gradient(circle, rgba(99, 179, 237, 0.4), transparent 70%);
  animation: aurora-drift-b 26s ease-in-out infinite alternate;
}

@keyframes aurora-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6%, 8%) scale(1.08); }
}

@keyframes aurora-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-7%, -6%) scale(1.05); }
}

.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148, 175, 209, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 175, 209, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 90%);
}

/* Cursor-reactive spotlight — JS sets --spot-x/--spot-y; CSS-only no-op
   fallback keeps it centered and static without JS */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}

[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    480px circle at var(--spot-x, 50%) var(--spot-y, 20%),
    rgba(49, 130, 206, 0.14),
    transparent 65%
  );
  pointer-events: none;
  transition: background var(--duration-fast) linear;
}

[data-spotlight] > * {
  position: relative;
  z-index: 1;
}

/* Glow-on-hover accent for primary buttons */
.btn-primary {
  position: relative;
}

.btn-primary:hover {
  box-shadow: var(--shadow-lg), 0 0 24px rgba(49, 130, 206, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .aurora-bg::before,
  .aurora-bg::after {
    animation: none;
  }
}

/* --- Site-wide ambient background (every page, fixed behind all content) --- */

.site-ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.site-ambient-bg::before,
.site-ambient-bg::after {
  content: '';
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.12;
  will-change: transform;
}

.site-ambient-bg::before {
  top: -20vmax;
  left: -15vmax;
  background: radial-gradient(circle, rgba(49, 130, 206, 0.6), transparent 70%);
  animation: ambient-drift-a 40s ease-in-out infinite alternate;
}

.site-ambient-bg::after {
  bottom: -25vmax;
  right: -20vmax;
  background: radial-gradient(circle, rgba(99, 179, 237, 0.5), transparent 70%);
  animation: ambient-drift-b 46s ease-in-out infinite alternate;
}

@keyframes ambient-drift-a {
  from { transform: translate(0, 0); }
  to { transform: translate(8vmax, 10vmax); }
}

@keyframes ambient-drift-b {
  from { transform: translate(0, 0); }
  to { transform: translate(-9vmax, -8vmax); }
}

/* Circuit-trace pattern — short glowing lines with node points, pulsing
   independently in staggered groups. Modeled on the VULNKON brand's own
   dark background treatment, applied site-wide. */
.circuit-bg__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: drop-shadow(0 0 2.5px rgba(49, 130, 206, 0.6));
}

:root[data-theme='light'] .circuit-bg__svg {
  opacity: 0.42;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .circuit-bg__svg {
    opacity: 0.42;
  }
}

.circuit-bg__svg .trace line {
  stroke: var(--color-accent-blue-strong);
  stroke-width: 1.5;
  opacity: 0.3;
}

.circuit-bg__svg .trace circle {
  fill: var(--color-accent-blue-strong);
  opacity: 0.85;
}

.circuit-bg__svg .trace {
  animation-name: trace-pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center;
  /* animation-duration and animation-delay are set per-line inline, so
     each trace flickers independently instead of breathing in lockstep. */
}

@keyframes trace-pulse {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-ambient-bg::before,
  .site-ambient-bg::after {
    animation: none;
  }

  .circuit-bg__svg .trace {
    animation: none;
    opacity: 0.6;
  }
}

/* --- Journey / story timeline (e.g. About page: Founded -> Today) ---
   Fully visible and readable with no JS/CSS animation support; the line
   "draws in" and nodes settle into place once [data-reveal] is visible. */

.journey__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 56rem) {
  .journey__track {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
  }
}

.journey__line {
  position: absolute;
  background: var(--color-border-strong);
}

@media (max-width: 55.99rem) {
  .journey__line {
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    height: auto;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.1s var(--ease-out);
  }
}

@media (min-width: 56rem) {
  .journey__line {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    width: auto;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.1s var(--ease-out);
  }
}

.journey.is-visible .journey__line {
  transform: none;
  background: var(--color-gradient-brand);
}

.journey__node {
  position: relative;
  flex: 1;
  padding-left: var(--space-lg);
  opacity: 0;
  transform: translateY(10px);
  /* Short duration/delay on purpose — a slow, heavily-staggered reveal left
     a window where the second node sat at a dim, barely-legible opacity
     (especially against a near-black dark-theme background) for over a
     second after the first had already finished. */
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  transition-delay: 0.08s;
}

@media (min-width: 56rem) {
  .journey__node {
    padding-left: 0;
    padding-top: var(--space-lg);
  }
}

.journey.is-visible .journey__node {
  opacity: 1;
  transform: none;
}

.journey__node--end {
  transition-delay: 0.2s;
}

.journey__dot {
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-accent-cyan);
}

/* A quiet "live" pulse on the end node only (Today) — the start node is
   history, fixed; the end node represents the present, so it's the one
   that reads as ongoing/active. Delayed to start only once the line/nodes
   have finished drawing in, not fighting that entrance animation. */
.journey.is-visible .journey__node--end .journey__dot::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent-cyan);
  opacity: 0;
  animation: journey-dot-pulse 2.4s var(--ease-out) 1.1s infinite;
}

@keyframes journey-dot-pulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (min-width: 56rem) {
  .journey__dot {
    top: -0.35rem;
    left: 0;
  }
}

.journey__year {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.journey__label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-3xs);
  max-width: 22rem;
}

@media (prefers-reduced-motion: reduce) {
  .journey__line,
  .journey__node {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .journey__node--end .journey__dot::after {
    animation: none;
  }
}