/* Extra signal gestures. Motion is enabled only while motion.js permits it. */
.ag-crt-layer {
  position: fixed;
  z-index: 29;
  inset: -12px 0;
  pointer-events: none;
  opacity: .075;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(238, 226, 194, .28) 4px, transparent 5px);
  mix-blend-mode: screen;
  animation: ag-crt-drift 13s linear infinite;
}

.ag-intro-line {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold), #ecf1e4, transparent);
  box-shadow: 0 0 18px rgba(216, 180, 126, .65);
  animation: ag-intro-pass 1050ms cubic-bezier(.2, .65, .25, 1) both;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background: linear-gradient(100deg, transparent 35%, rgba(216, 180, 126, .16) 48%, rgba(233, 240, 218, .2) 50%, transparent 64%);
  transform: translate3d(-110%, 0, 0);
  animation: ag-hero-pass 17s ease-in-out infinite;
}

.page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4%;
  pointer-events: none;
  opacity: .2;
  background: url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg") center / cover no-repeat;
  mix-blend-mode: screen;
  animation: ag-texture-drift 18s ease-in-out infinite alternate;
}

.page-hero-inner { z-index: 1; }

main > .section,
main > .statement { position: relative; }

main > .section::before,
main > .statement::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left center;
}

.ag-motion-ready main > .ag-section-entered::before {
  animation: ag-section-sweep 900ms ease-out both;
}

.ag-motion-ready [data-glitch].ag-glitching {
  animation: ag-ink .65s steps(2, end) both, ag-title-slice .65s steps(1, end) both;
}

.ag-motion-ready .main-nav a:hover,
.ag-motion-ready .main-nav a:focus-visible,
.ag-motion-ready .social-list a:hover,
.ag-motion-ready .social-list a:focus-visible {
  animation: ag-link-jitter .28s steps(2, end) both;
  text-shadow: 1px 0 rgba(33, 185, 193, .55), -1px 0 rgba(226, 141, 94, .45);
}

.ag-motion-ready .button { position: relative; overflow: hidden; }
.ag-motion-ready .button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 30%;
  pointer-events: none;
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-23deg);
  transition: translate .55s ease-out;
}
.ag-motion-ready .button:hover::before,
.ag-motion-ready .button:focus-visible::before { translate: 470% 0; }

.ag-motion-ready .video-image img {
  transition: transform .38s ease-out, filter .38s ease-out;
}
.ag-motion-ready .video-card:hover .video-image img,
.ag-motion-ready .video-card:focus-visible .video-image img {
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.14);
}
.video-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(238, 226, 194, .23) 6px, transparent 8px);
  mix-blend-mode: screen;
}
.ag-motion-ready .video-card:hover .video-image::after,
.ag-motion-ready .video-card:focus-visible .video-image::after {
  opacity: .65;
  animation: ag-thumbnail-scan .7s steps(7, end) both;
}

.ag-motion-ready .logo-sound:hover img,
.ag-motion-ready .logo-sound:focus-visible img {
  animation: ag-logo-shift .54s steps(2, end) both;
}
.ag-motion-ready .ag-tape-switch { animation: ag-tape-switch .52s steps(2, end) both; }
.ag-motion-ready .ag-impact { animation: ag-impact .42s steps(2, end) both; }
.ag-motion-ready .site-header.ag-header-flash { animation: ag-header-flash .48s ease-out both; }

@keyframes ag-crt-drift { to { transform: translate3d(0, 12px, 0); } }
@keyframes ag-intro-pass { 0% { opacity: 0; transform: translate3d(0, -4vh, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate3d(0, 105vh, 0); } }
@keyframes ag-hero-pass { 0%, 69%, 100% { transform: translate3d(-110%, 0, 0); } 82% { transform: translate3d(110%, 0, 0); } }
@keyframes ag-texture-drift { to { transform: translate3d(2%, -1%, 0) scale(1.04); } }
@keyframes ag-section-sweep { 0% { opacity: 0; transform: scaleX(0); } 25% { opacity: .8; } 75% { opacity: .65; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ag-title-slice { 0%, 100% { clip-path: inset(0); transform: translateX(0); } 17% { clip-path: inset(8% 0 69% 0); transform: translateX(3px); } 28% { clip-path: inset(61% 0 12% 0); transform: translateX(-3px); } 43% { clip-path: inset(0); transform: translateX(0); } 72% { clip-path: inset(38% 0 40% 0); transform: translateX(2px); } 80% { clip-path: inset(0); transform: translateX(0); } }
@keyframes ag-link-jitter { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(2px); } 65% { transform: translateX(-1px); } }
@keyframes ag-thumbnail-scan { 0% { clip-path: inset(0 0 88% 0); } 28% { clip-path: inset(26% 0 54% 0); } 64% { clip-path: inset(61% 0 19% 0); } 100% { clip-path: inset(0); } }
@keyframes ag-logo-shift { 0%, 100% { filter: none; } 22% { filter: contrast(1.3) hue-rotate(8deg); } 42% { filter: contrast(1.5) saturate(1.4); } 68% { filter: contrast(1.15) hue-rotate(-6deg); } }
@keyframes ag-tape-switch { 0%, 100% { filter: none; } 20% { filter: contrast(1.5) saturate(.45); } 48% { filter: contrast(1.2) hue-rotate(10deg); } 72% { filter: contrast(1.4) saturate(1.3); } }
@keyframes ag-impact { 0%, 100% { filter: none; box-shadow: none; } 30% { filter: brightness(1.23); box-shadow: 2px 0 rgba(24, 180, 190, .8), -2px 0 rgba(229, 143, 94, .8); } 68% { filter: brightness(.92); box-shadow: -2px 0 rgba(24, 180, 190, .6), 2px 0 rgba(229, 143, 94, .6); } }
@keyframes ag-header-flash { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 2px 18px rgba(216, 180, 126, .5); } }

.motion-off .ag-crt-layer,
.ag-system-motion-off .ag-crt-layer,
.motion-off .ag-intro-line,
.ag-system-motion-off .ag-intro-line,
.motion-off .hero::after,
.ag-system-motion-off .hero::after { display: none !important; }
.motion-off .page-hero::after,
.ag-system-motion-off .page-hero::after { animation: none; transform: none; }

@media (max-width: 740px) {
  .ag-crt-layer { opacity: .04; animation-duration: 18s; }
  .page-hero::after { opacity: .13; }
}

@media (max-width: 380px) {
  .header-tools { gap: 4px; }
  .motion-toggle {
    display: grid;
    place-items: center;
    width: 29px;
    min-width: 29px;
    height: 32px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  .motion-toggle::after { content: "⏸"; font: 600 13px var(--mono); line-height: 1; }
  .motion-toggle[aria-pressed="false"]::after { content: "▶"; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-crt-layer,
  .ag-intro-line,
  .hero::after { display: none !important; }
  .page-hero::after { animation: none !important; transform: none !important; }
}

/* Signal faults: chromatic edges, scan masks, torn frames, and pointer instruments. */
.ag-motion-ready .hero h1,
.ag-motion-ready .page-hero h1 { position: relative; isolation: isolate; }

.ag-motion-ready .hero h1::before,
.ag-motion-ready .page-hero h1::before {
  content: "";
  position: absolute;
  inset: 42% 0 43%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(24, 185, 190, .5), transparent 35%, rgba(229, 143, 94, .42) 70%, transparent);
  mix-blend-mode: screen;
}

.ag-motion-ready .hero h1.ag-hover-fault::before,
.ag-motion-ready .page-hero h1.ag-hover-fault::before,
.ag-motion-ready .hero h1.ag-glitching::before,
.ag-motion-ready .page-hero h1.ag-glitching::before {
  animation: ag-title-band .48s steps(5, end) both;
}

.ag-motion-ready .ag-hover-fault,
.ag-motion-ready .ag-focus-fault { animation: ag-channel-slip .42s steps(3, end) both; }
.ag-motion-ready .feature-card.ag-hover-fault,
.ag-motion-ready .route-card.ag-hover-fault,
.ag-motion-ready .project-card.ag-hover-fault,
.ag-motion-ready .video-card.ag-hover-fault { animation: ag-border-fault .48s steps(3, end) both; }

.ag-motion-ready .ag-hover-fault .ag-card-noise,
.ag-motion-ready .ag-focus-fault .ag-card-noise {
  opacity: .52;
  animation: ag-noise-gate .62s steps(5, end) both;
}

.ag-motion-ready .player-disc { animation: ag-disc-wobble 9s ease-in-out infinite; }
.ag-motion-ready .track.is-selected strong { animation: ag-channel-text 4.8s steps(2, end) infinite; }
.ag-motion-ready .video-card:hover .play-icon,
.ag-motion-ready .video-card:focus-visible .play-icon { animation: ag-play-pulse .62s steps(3, end) both; }
.ag-motion-ready .contact-symbol:hover,
.ag-motion-ready .feature-art:hover { animation: ag-image-misregister .55s steps(4, end) both; }
.ag-motion-ready .social-list a:hover span:last-child,
.ag-motion-ready .social-list a:focus-visible span:last-child { animation: ag-arrow-skip .34s steps(3, end) both; }
.ag-motion-ready .hero-art:hover .art-halo { animation: ag-halo-interference .8s steps(4, end) both; }

.ag-signal-tear {
  position: fixed;
  z-index: 95;
  left: -5vw;
  width: 110vw;
  height: 6px;
  pointer-events: none;
  opacity: .75;
  background: linear-gradient(90deg, transparent 0 8%, rgba(22, 195, 201, .55) 15%, rgba(230, 222, 195, .65) 51%, rgba(219, 128, 91, .5) 78%, transparent 94%);
  box-shadow: 0 -9px 0 -7px rgba(24, 185, 190, .65), 0 8px 0 -7px rgba(229, 143, 94, .7);
  mix-blend-mode: screen;
  animation: ag-tear .5s steps(5, end) both;
}
.ag-signal-tear-strong { height: 9px; opacity: .92; }

.ag-signal-cursor,
.ag-cursor-trail,
.ag-click-bit { position: fixed; z-index: 100; pointer-events: none; }
.ag-signal-cursor { inset: 0; visibility: hidden; }
.ag-cursor-visible .ag-signal-cursor { visibility: visible; }
.ag-cursor-glow,
.ag-cursor-beam,
.ag-cursor-echo,
.ag-cursor-ring,
.ag-cursor-core,
.ag-cursor-tick { position: absolute; display: block; }
.ag-cursor-glow {
  left: var(--ag-lx, -100px);
  top: var(--ag-ly, -100px);
  width: 164px;
  height: 164px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251, 224, 166, .43) 0 4%, rgba(24, 193, 199, .25) 15%, rgba(221, 143, 91, .15) 31%, transparent 68%);
  filter: blur(5px);
  mix-blend-mode: screen;
}
.ag-cursor-beam {
  left: var(--ag-cx, -100px);
  top: var(--ag-cy, -100px);
  width: var(--ag-beam-length, 0px);
  height: 2px;
  transform: rotate(var(--ag-beam-angle, 0rad));
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(251, 224, 166, .95), rgba(27, 204, 208, .75) 38%, transparent);
  box-shadow: 0 0 8px rgba(27, 204, 208, .8), 0 0 17px rgba(232, 187, 116, .55);
  mix-blend-mode: screen;
}
.ag-cursor-echo {
  left: var(--ag-lx, -100px);
  top: var(--ag-ly, -100px);
  width: 24px;
  height: 24px;
  border: 1px dashed rgba(27, 204, 208, .8);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(12deg);
  box-shadow: -3px 0 rgba(27, 204, 208, .5), 3px 0 rgba(231, 143, 96, .6), 0 0 13px rgba(27, 204, 208, .55);
  opacity: .85;
}
.ag-cursor-echo::before,
.ag-cursor-echo::after {
  content: "";
  position: absolute;
  height: 2px;
  background: #f4d7a2;
  box-shadow: 0 0 9px #f4d7a2;
}
.ag-cursor-echo::before { width: 15px; top: 5px; left: -8px; }
.ag-cursor-echo::after { width: 12px; bottom: 4px; right: -7px; }
.ag-cursor-ring {
  left: var(--ag-rx, -100px);
  top: var(--ag-ry, -100px);
  width: 28px;
  height: 28px;
  border: 2px solid rgba(244, 215, 162, .95);
  border-right-color: rgba(27, 204, 208, .95);
  border-bottom-color: rgba(231, 143, 96, .95);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(244, 215, 162, .7), -3px 0 rgba(27, 204, 208, .55), 3px 0 rgba(231, 143, 96, .55);
  transform: translate(calc(-50% + var(--ag-fault-x, 0px)), calc(-50% + var(--ag-fault-y, 0px))) rotate(-12deg);
  transition: width .16s steps(2, end), height .16s steps(2, end), rotate .16s steps(2, end);
}
.ag-cursor-core {
  left: var(--ag-cx, -100px);
  top: var(--ag-cy, -100px);
  width: 8px;
  height: 8px;
  background: #ffe9bb;
  box-shadow: 3px 0 #17b4bd, -3px 0 #d98263, 0 0 9px #ffe9bb, 0 0 24px rgba(244, 215, 162, .9);
  transform: translate(-50%, -50%);
}
.ag-cursor-tick { background: rgba(244, 215, 162, .8); opacity: .8; box-shadow: 0 0 8px rgba(244, 215, 162, .9); }
.ag-cursor-tick-x { left: var(--ag-rx, -100px); top: var(--ag-ry, -100px); width: 50px; height: 1px; transform: translate(-50%, -50%); }
.ag-cursor-tick-y { left: var(--ag-rx, -100px); top: var(--ag-ry, -100px); width: 1px; height: 50px; transform: translate(-50%, -50%); }
.ag-cursor-link .ag-cursor-ring { width: 42px; height: 42px; rotate: 45deg; background: rgba(27, 204, 208, .12); }
.ag-cursor-link .ag-cursor-glow { filter: blur(7px) saturate(1.35); }
.ag-cursor-media .ag-cursor-ring { width: 54px; height: 54px; border-style: dashed; animation: ag-cursor-spin 2.8s linear infinite; }
.ag-cursor-media .ag-cursor-glow { filter: blur(8px) saturate(1.6); }
.ag-cursor-media .ag-cursor-core { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #e8d2a7; background: none; box-shadow: none; }
.ag-cursor-surface .ag-cursor-ring { width: 47px; height: 47px; rotate: 20deg; }
.ag-cursor-text .ag-cursor-ring,
.ag-cursor-text .ag-cursor-tick { display: none; }
.ag-cursor-visible .ag-signal-cursor.ag-cursor-text { visibility: hidden; }
.ag-cursor-click .ag-cursor-ring { width: 18px; height: 18px; background: rgba(244, 215, 162, .4); }
.ag-cursor-click .ag-cursor-glow { filter: blur(4px) brightness(1.8); }
.ag-cursor-trail { width: var(--ag-trail-width, 12px); height: 2px; background: rgba(244, 215, 162, .95); box-shadow: 3px 0 rgba(19, 178, 191, .9), -3px 0 rgba(230, 139, 87, .8), 0 0 12px rgba(244, 215, 162, .9); transform: rotate(var(--ag-trail-turn)); animation: ag-trail-fade .48s steps(5, end) both; }
.ag-click-bit { width: 7px; height: 2px; background: #e8d2a7; box-shadow: 2px 0 #18b9be, -2px 0 #de8968; animation: ag-click-bit .5s ease-out both; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ag-motion-ready.ag-cursor-on.ag-cursor-visible,
  .ag-motion-ready.ag-cursor-on.ag-cursor-visible body,
  .ag-motion-ready.ag-cursor-on.ag-cursor-visible a,
  .ag-motion-ready.ag-cursor-on.ag-cursor-visible button,
  .ag-motion-ready.ag-cursor-on.ag-cursor-visible [role="button"] { cursor: none !important; }
  .ag-cursor-on input, .ag-cursor-on textarea, .ag-cursor-on select,
  .ag-cursor-on [contenteditable="true"] { cursor: text !important; }
}

@keyframes ag-title-band { 0%,100%{opacity:0;clip-path:inset(0 0 100% 0)} 18%{opacity:.8;clip-path:inset(0 0 62% 0);transform:translateX(4px)} 43%{opacity:.35;clip-path:inset(27% 0 30% 0);transform:translateX(-5px)} 66%{opacity:.75;clip-path:inset(55% 0 4% 0);transform:translateX(2px)} }
@keyframes ag-channel-slip { 0%,100%{filter:none} 20%{filter:drop-shadow(2px 0 rgba(20,186,193,.7)) drop-shadow(-2px 0 rgba(228,139,91,.65))} 52%{filter:brightness(1.18) contrast(1.1)} 74%{filter:drop-shadow(-2px 0 rgba(20,186,193,.65)) drop-shadow(2px 0 rgba(228,139,91,.65))} }
@keyframes ag-border-fault { 0%,100%{box-shadow:none} 25%{box-shadow:3px 0 0 rgba(23,180,189,.7),-3px 0 0 rgba(221,132,90,.6)} 55%{box-shadow:-2px 0 0 rgba(23,180,189,.55),2px 0 0 rgba(221,132,90,.5)} }
@keyframes ag-noise-gate { 0%,100%{clip-path:inset(0 0 100% 0)} 20%{clip-path:inset(9% 0 72% 0)} 48%{clip-path:inset(50% 0 22% 0)} 75%{clip-path:inset(72% 0 5% 0)} }
@keyframes ag-disc-wobble { 0%,82%,100%{transform:rotate(0)} 86%{transform:rotate(3deg)} 91%{transform:rotate(-2deg)} 95%{transform:rotate(1deg)} }
@keyframes ag-channel-text { 0%,89%,100%{text-shadow:none} 91%{text-shadow:2px 0 #18b9be,-2px 0 #de8968} 94%{text-shadow:none} 97%{text-shadow:-1px 0 #18b9be,1px 0 #de8968} }
@keyframes ag-play-pulse { 0%,100%{box-shadow:0 0 0 10px rgba(216,180,126,.2)} 35%{box-shadow:2px 0 0 13px rgba(20,186,193,.3),-2px 0 0 9px rgba(228,139,91,.3)} }
@keyframes ag-image-misregister { 0%,100%{filter:none} 25%{filter:drop-shadow(3px 0 rgba(20,186,193,.5))} 55%{filter:drop-shadow(-3px 0 rgba(228,139,91,.5))} }
@keyframes ag-arrow-skip { 0%,100%{transform:translateX(0)} 30%{transform:translateX(5px)} 65%{transform:translateX(-2px)} }
@keyframes ag-halo-interference { 0%,100%{filter:none} 25%{filter:hue-rotate(18deg) contrast(1.4)} 60%{filter:hue-rotate(-15deg) contrast(1.2)} }
@keyframes ag-tear { 0%{opacity:0;transform:translateX(0) scaleX(.2)} 20%{opacity:.9;transform:translateX(var(--ag-tear-shift)) scaleX(.8)} 45%{opacity:.45;transform:translateX(-4px) scaleX(1)} 75%{opacity:.7;transform:translateX(2px) scaleX(.65)} 100%{opacity:0;transform:translateX(0) scaleX(1)} }
@keyframes ag-cursor-spin { to { transform:translate(calc(-50% + var(--ag-fault-x, 0px)), calc(-50% + var(--ag-fault-y, 0px))) rotate(348deg); } }
@keyframes ag-trail-fade { 0%{opacity:1;clip-path:inset(0 0 0 0)} 35%{opacity:.95;clip-path:inset(0 18% 0 8%)} 65%{opacity:.55;clip-path:inset(0 3% 0 42%)} 100%{opacity:0;transform:translate(var(--ag-trail-shift, -12px), 7px) rotate(var(--ag-trail-turn));clip-path:inset(0 100% 0 0)} }
@keyframes ag-click-bit { to { opacity:0; transform:translate(var(--ag-bit-x), var(--ag-bit-y)) scale(.3); } }

.motion-off .ag-signal-cursor, .ag-system-motion-off .ag-signal-cursor,
.motion-off .ag-signal-tear, .ag-system-motion-off .ag-signal-tear,
.motion-off .ag-cursor-trail, .ag-system-motion-off .ag-cursor-trail,
.motion-off .ag-click-bit, .ag-system-motion-off .ag-click-bit { display:none !important; }
@media (prefers-reduced-motion: reduce) {
  .ag-signal-cursor, .ag-signal-tear, .ag-cursor-trail, .ag-click-bit { display:none !important; }
}

/* Four language buttons still leave the motion control reachable on narrow screens. */
@media (max-width: 420px) {
  .lang-switch button { padding-inline: 4px; font-size: .58rem; }
  .header-tools { gap: 3px; }
  .brand-logo { width: 31px; height: 31px; }
}