/* Progressive motion: content is visible before and without JavaScript. */
.header-inner { gap: 24px; }
.primary-nav { gap: 22px; }
.motion-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #355576;
  border-radius: 11px;
  background: #101e32;
  color: #a5d5ff;
  transition: border-color .2s, background .2s;
}
.motion-toggle:hover:not(:disabled) { border-color: #71dcf5; background: #15364b; }
.motion-toggle[aria-pressed=true] { color: #71dcf5; border-color: #71dcf570; }
.motion-toggle:disabled { opacity: .65; cursor: default; }
.motion-toggle .icon { width: 17px; height: 17px; }
.motion-toggle[aria-pressed=true] .motion-play,
.motion-toggle[aria-pressed=false] .motion-pause { display: none; }
.motion-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(90deg, #80b7ff, #71dcf5, #a5edff);
  box-shadow: 0 0 12px #71dcf550;
  transform: scaleX(0);
  transform-origin: left;
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 680px;
  height: 580px;
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
}
.hero::before { top: -200px; right: -130px; background: radial-gradient(ellipse, #1d8cbe36, transparent 66%); }
.hero::after { bottom: -300px; left: -220px; background: radial-gradient(ellipse, #3262bc38, transparent 68%); }
.hero-grid, .foundation-strip { z-index: 2; }
.motion-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mask-image: linear-gradient(90deg, transparent 25%, #000 75%);
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 75%);
}
.network-link { fill: none; stroke: #71dcf5; stroke-width: 1; stroke-opacity: .35; stroke-dasharray: 10 24; }
.network-node { fill: #a5edff; opacity: .65; }
html[data-motion=on] .hero[data-motion-visible=true]::before { opacity: 1; animation: agi-aurora 19s ease-in-out infinite alternate; }
html[data-motion=on] .hero[data-motion-visible=true]::after { opacity: 1; animation: agi-aurora 23s ease-in-out -7s infinite alternate-reverse; }
html[data-motion=on] .hero[data-motion-visible=true] .motion-network { opacity: .55; }
html[data-motion=on] .hero[data-motion-visible=true] .network-link { animation: agi-network-flow 16s linear infinite; }
html[data-motion=on] .hero[data-motion-visible=true] .network-node { animation: agi-node 6s ease-in-out var(--node-delay, 0s) infinite alternate; }
html[data-motion=on] .hero[data-motion-visible=true] .orbit-one { animation: agi-orbit 52s linear infinite; }
html[data-motion=on] .hero[data-motion-visible=true] .orbit-two { animation: agi-orbit 38s linear infinite reverse; }
html[data-motion=on] .visual-orbit::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a5edff;
  box-shadow: 0 0 16px #71dcf590, 0 0 35px #71dcf530;
}
html[data-motion=on] .orbit-two::after { width: 6px; height: 6px; top: -3px; background: #80b7ff; }
html[data-motion=on] .hero[data-motion-visible=true] .visual-star { animation: agi-star 34s linear infinite; }
html[data-motion=on] .hero[data-motion-visible=true] .search-window { animation: agi-console 7s ease-in-out infinite; }
html[data-motion=on] .hero[data-motion-visible=true] .intent-label { animation: agi-label 6s ease-in-out infinite; }
html[data-motion=on] .hero[data-motion-visible=true] .customer-label { animation: agi-label-alt 8s ease-in-out -2s infinite; }
html[data-motion=on] .hero[data-motion-visible=true] .search-window::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #71dcf5a0, transparent);
  box-shadow: 0 0 14px #71dcf540;
  animation: agi-scan 7s ease-in-out infinite;
}
html[data-motion=on] .hero[data-motion-visible=true] h1 .serif-accent {
  background-size: 220% 100%;
  animation: agi-text-light 10s ease-in-out infinite;
}
html[data-motion=on] .hero[data-motion-visible=true] .hero-actions>.button { animation: agi-cta-glow 4s ease-in-out infinite; }
.button { position: relative; overflow: hidden; }
.button::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -80%;
  width: 45%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff24, transparent);
  transform: skewX(-20deg);
}
html[data-motion=on] .button:hover::after { animation: agi-shine .85s ease-out; }
.motion-spotlight { position: relative; }
.motion-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--glow-x, 50%) var(--glow-y, 50%), #71dcf515, transparent 72%);
  opacity: 0;
  transition: opacity .3s;
}
html[data-motion=on] .motion-spotlight:hover::before { opacity: 1; }
html[data-motion=on] .motion-tilt {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .25s ease-out, border-color .25s, box-shadow .25s;
}
html[data-motion=on] .motion-tilt:hover { border-color: #71dcf57a; box-shadow: 0 18px 42px #02071166, 0 0 25px #71dcf509; }
html[data-motion=on] .motion-reveal {
  animation: agi-reveal .8s cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms) both;
}
.primary-nav>a:not(.button) { position: relative; }
.primary-nav>a:not(.button)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: #71dcf5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.primary-nav>a:not(.button):hover::after { transform: scaleX(1); }
html[data-motion=on] .project-image-link:hover .project-image { transform: scale(1.025); }
html[data-motion=on] .project-slider-dot.is-active>span { transition: width .35s, background .35s; }

@keyframes agi-aurora { from { transform: translate3d(-25px, -20px, 0) scale(.92); } to { transform: translate3d(55px, 35px, 0) scale(1.08); } }
@keyframes agi-orbit { to { transform: rotate(360deg); } }
@keyframes agi-star { from { transform: rotate(12deg); } to { transform: rotate(372deg); } }
@keyframes agi-network-flow { to { stroke-dashoffset: -136; } }
@keyframes agi-node { from { opacity: .35; } to { opacity: .9; } }
@keyframes agi-console { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes agi-label { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(-1deg); } }
@keyframes agi-label-alt { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(8px) rotate(1deg); } }
@keyframes agi-scan { 0% { top: 12%; opacity: 0; } 20% { opacity: .65; } 75% { opacity: .65; } 100% { top: 95%; opacity: 0; } }
@keyframes agi-text-light { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes agi-cta-glow { 0%, 100% { box-shadow: 0 5px 24px #d5203e20, inset 0 1px 0 #ffffff20; } 50% { box-shadow: 0 8px 36px #d5203e46, inset 0 1px 0 #ffffff30; } }
@keyframes agi-shine { to { left: 130%; } }
@keyframes agi-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .header-inner { gap: 16px; }
  .primary-nav { gap: 14px; }
  .motion-toggle { width: 36px; height: 36px; }
}
@media (max-width: 800px) {
  .header-inner { gap: 10px; }
  .menu-toggle { margin-left: auto; }
  .primary-nav { gap: 0; }
  .primary-nav>a:not(.button)::after { display: none; }
  .motion-network { mask-image: linear-gradient(to bottom, transparent 15%, #000 65%); -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 65%); }
  .hero::before, .hero::after { width: 470px; height: 470px; }
}
@media (hover: none), (pointer: coarse) {
  .motion-spotlight::before { display: none; }
  html[data-motion=on] .motion-tilt { transform: none; }
  html[data-motion=on] .motion-tilt:hover { box-shadow: inset 0 1px 0 #ffffff0d; }
  html[data-motion=on] .hero[data-motion-visible=true] .network-link { animation: none; }
  html[data-motion=on] .hero[data-motion-visible=true] .network-node { animation: none; }
}
html[data-motion=paused], html[data-motion=paused] * { scroll-behavior: auto; }
html[data-motion=paused] *, html[data-motion=paused] *::before, html[data-motion=paused] *::after { animation: none !important; transition: none !important; }
html[data-motion=paused] .motion-reveal { animation: none; opacity: 1; }
html[data-motion=paused] .motion-spotlight::before { opacity: 0; }
html[data-motion=paused] .motion-tilt { transform: none; }
html[data-motion=paused] .project-image-link:hover .project-image,
html[data-motion=paused] .button:hover { transform: none; }
html[data-motion=paused] .text-link:hover .icon { transform: none; }
html[data-motion=paused] .primary-nav>a:not(.button)::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-network, .hero::before, .hero::after, .motion-spotlight::before { display: none; }
  .motion-reveal { opacity: 1; transform: none; }
  .motion-tilt, .project-image-link:hover .project-image { transform: none !important; }
}
@media (forced-colors: active) {
  .motion-network, .hero::before, .hero::after, .motion-spotlight::before, .motion-progress { display: none; }
  .motion-toggle { border-color: ButtonText; color: ButtonText; }
}