/* A light, progressive-enhancement motion layer. The content works without it. */
canvas[data-network-canvas] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .82;
  contain: strict;
}

.future-site [data-future-tilt].future-tilt {
  position: relative;
  isolation: isolate;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0px));
  transition: transform 220ms cubic-bezier(.2,.75,.2,1), box-shadow 250ms ease, border-color 250ms ease;
}
.future-site [data-future-tilt].future-pointer-active {
  will-change: transform;
  transition-duration: 90ms, 250ms, 250ms;
}
.future-spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(244,144,28,.13), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.path-personal .future-spotlight,
[data-future-color="green"] .future-spotlight {
  background: radial-gradient(340px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(192,215,45,.18), transparent 68%);
}
.future-pointer-active > .future-spotlight { opacity: 1; }

.future-reveal {
  transition: opacity 650ms ease, translate 650ms cubic-bezier(.2,.7,.2,1);
}
.future-reveal-pending {
  opacity: 0;
  translate: 0 18px;
}
.future-reveal-visible { opacity: 1; translate: 0 0; }
/* A focused control is never left hidden while keyboard navigation scrolls it into view. */
.future-reveal-pending:focus-within { opacity: 1; translate: 0 0; }

.future-scroll-progress {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: transparent;
}
.future-scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #f4901c 0%, #f6b753 46%, #c0d72d 100%);
  box-shadow: 0 0 10px rgba(244,144,28,.2);
}
.future-scroll-progress[hidden] { display: none; }

.future-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #d0d4d8;
  border-radius: 100px;
  background: rgba(255,255,255,.96);
  color: #303842;
  box-shadow: 0 5px 24px rgba(48,56,66,.09);
  font: 600 11px/1.25 'DM Sans', Arial, sans-serif;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.future-motion-toggle svg { width: 14px; height: 14px; flex: 0 0 14px; }
.future-motion-toggle:hover { border-color: #8b9735; background: #fff; }
.future-motion-toggle:focus-visible { outline: 3px solid #a34a00; outline-offset: 4px; }

.future-site .site-header {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.future-site .nav > a:not(.nav-cta) { position: relative; }
.future-site .nav > a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f4901c, #c0d72d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.future-site .nav > a:not(.nav-cta):hover::after,
.future-site .nav > a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.future-site .btn-primary:hover,
.future-site .nav-cta:hover { box-shadow: 0 8px 26px rgba(244,144,28,.25); }
.future-site .btn-outline:hover { box-shadow: 0 8px 24px rgba(104,124,26,.1); }

html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] .future-site [data-future-tilt].future-tilt {
  transform: none;
  transition: none;
}
html[data-motion="off"] .future-spotlight { opacity: 0; transition: none; }
html[data-motion="off"] .future-reveal {
  opacity: 1;
  translate: none;
  transition: none;
}
html[data-motion="off"] .future-ambient,
html[data-motion="off"] .future-ambient::before,
html[data-motion="off"] .future-ambient::after { animation-play-state: paused !important; }
html[data-motion="off"] .future-site .btn:hover,
html[data-motion="off"] .future-site .nav-cta:hover { transform: none; }
html[data-motion="off"] .future-site .nav > a::after { transition: none; }

@media (max-width: 560px) {
  .future-motion-toggle { right: 10px; bottom: 10px; min-height: 44px; padding: 9px 11px; font-size: 10px; }
}
@media (hover: none), (pointer: coarse) {
  .future-site [data-future-tilt].future-tilt { transform: none; }
  .future-spotlight { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .future-reveal { opacity: 1; translate: none; transition: none; }
  html:not([data-motion="on"]) .future-site [data-future-tilt].future-tilt { transform: none; transition: none; }
  html:not([data-motion="on"]) .future-ambient { animation: none !important; }
  .future-site .nav > a::after { transition: none; }
}