/* aes.css: the AES word, shared by the landing hero, /b, /c and the choosers. AES is set in a narrow, sharp, high
   contrast italic serif (Instrument Serif Italic) against a heavy upright sans word, the "Insight lab." pairing.
   Markup: <abbr class="aes" title="Agentic engagement systems"><span class="aes-in"><span class="aes-lv">A</span>...</span></abbr> <span class="aes-heavy">are taking over.</span>

   LIQUID FIRST. Since 2026-09-22 the word is filled with moving liquid (js/aes-liquid.js and the LIQUID block
   below): mercury, metal, bloom, ink, marble, caustics; the default is set in js/aes-variant.js. The CSS textures
   here stay selectable, and pulse is what the word wears until the liquid's first frame and wherever the liquid
   cannot run (no WebGL, a failed video, forced colours).

   TEXTURES. The CSS fills are gradients moving inside the letters. Seven are defined here; pick one with
   data-aes="<name>" on the .aes itself or on any ancestor (js/aes-variant.js puts it on <html> from ?aes=<name>,
   and /aes-styles shows them side by side):
     pulse   (the CSS default) logo blue on a diagonal current, a short purple flare every 4.2 s in a new place
     aurora  broad blue ribbons that sway and drift, one violet band passing through
     plasma  soft blue blobs merging and parting, one purple blob that blooms and fades
     chrome  deep blue with a rolling horizon line and a bright sheen crossing the word
     nebula  deep blue clouds, a fine drifting grain, a violet glow that comes and goes
     swirl   a slow turning light around the E, a violet beam passing each letter in turn
     lava    the orange lava this word shipped with, kept for comparison (per letter, not per word)

   WHY PULSE IS THE CSS DEFAULT (and so the fallback). It is the brief said plainly: the word reads as the logo
   blue at every moment, and the purple arrives as a short flare (half a second up, a second and a half down,
   then two seconds of plain blue) that lands somewhere new each time, so it catches the eye without ever owning
   the word. The current underneath is a soft diagonal streak leaning with the italic, so the word always moves
   in one direction and never sloshes, which is a new motion as the brief asked (plasma is the lava's motion in blue).
   It had the lowest main-thread cost of the six blue textures on the full page in the throttled runs.

   COST. Every blue texture lives on .aes-in (one box for the whole word, so the field runs continuously across
   the three letters) and animates only background-position and registered custom properties feeding gradient
   centres, sizes, angles and alpha. That is one repaint of the word box per frame, the same kind of work the lava
   always did (it painted three boxes); no filter, blur, layout or canvas is animated. The drop-shadow glow is
   static after the entrance.

   FALLBACKS. background-color under every texture is the solid colour of the word, and it is clipped to the text
   too, so if a gradient ever fails to parse the letters are solid blue, never invisible. Every custom property a
   gradient reads is declared on the element (that declared set is also the still frame reduced motion shows).
   Where @property is unsupported, --aes-run below is not registered, var() falls back to "paused", and the word
   holds one still frame instead of flipping between keyframes. Where background-clip:text is unsupported, the
   @supports block is skipped and the word is plain color. Contrast on #FFFFFF: #2457FF is 5.4:1, the purples 3.4:1
   (#D946EF) to 4.0:1 (#A855F7). Measured inside the glyphs over 52 frames each (2026-09-22), the share of letter
   pixels at 3:1 or better in the worst frame: pulse 99.9%, aurora, plasma, nebula and swirl 100%, chrome 99.8%
   (a thin sliver of the sheen core dips to 2.65:1 as it passes), lava 69.9% (the orange never cleared it). */
@font-face{font-family:'AES Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-italic.woff2') format('woff2')}

/* the play gate: registered, so it resolves to "running"; unregistered (no @property), it falls back to "paused" */
@property --aes-run{syntax:'<custom-ident>';inherits:true;initial-value:running}
/* texture inputs for the blue set. inherits:false keeps each animated value on the one box that paints it */
@property --aes-x1{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-y1{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-x2{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-y2{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-x3{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-y3{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-x4{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-y4{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --aes-r{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --aes-k{syntax:'<number>';inherits:false;initial-value:0}
@property --aes-a{syntax:'<angle>';inherits:false;initial-value:0deg}
/* lava */
@property --l1x{syntax:'<percentage>';inherits:false;initial-value:15%}
@property --l1y{syntax:'<percentage>';inherits:false;initial-value:70%}
@property --l2x{syntax:'<percentage>';inherits:false;initial-value:60%}
@property --l2y{syntax:'<percentage>';inherits:false;initial-value:25%}
@property --l3x{syntax:'<percentage>';inherits:false;initial-value:85%}
@property --l3y{syntax:'<percentage>';inherits:false;initial-value:75%}
@property --l4x{syntax:'<percentage>';inherits:false;initial-value:40%}
@property --l4y{syntax:'<percentage>';inherits:false;initial-value:50%}

/* --aes-glow is never declared on .aes itself, so a data-aes on an ancestor can set it by inheritance */
.aes{display:inline-block;text-decoration:none;border:0;cursor:inherit;margin:0 .02em 0 .1em;filter:drop-shadow(0 10px 26px var(--aes-glow,rgba(36,87,255,.22)));animation:aes-in 1.3s cubic-bezier(.16,1,.3,1) .25s both}
.aes-in{display:inline-block;font-family:'AES Serif','Instrument Serif','Times New Roman',serif;font-style:italic;font-weight:400;font-size:1.2em;line-height:.8;letter-spacing:-.01em;color:#2457FF}
.aes-lv{display:inline-block;padding:.1em .18em .14em .12em;margin:-.1em -.18em -.14em -.12em}
.aes-heavy{font-weight:800;letter-spacing:-.055em}
@keyframes aes-in{from{transform:translateY(.2em) scale(.9) rotate(-5deg);filter:drop-shadow(0 10px 26px rgba(36,87,255,0)) blur(8px)}to{transform:none;filter:drop-shadow(0 10px 26px var(--aes-glow,rgba(36,87,255,.22))) blur(0)}}

[data-aes="aurora"]{--aes-glow:rgba(52,80,255,.22)}
[data-aes="plasma"]{--aes-glow:rgba(66,72,245,.22)}
[data-aes="chrome"]{--aes-glow:rgba(16,42,190,.24)}
[data-aes="nebula"]{--aes-glow:rgba(62,54,225,.22)}
[data-aes="swirl"]{--aes-glow:rgba(40,84,255,.22)}
[data-aes="lava"]{--aes-glow:rgba(217,72,15,.2)}
[data-aes="lava"] .aes-in{color:#C2410C}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* the word box grows by the letters' own overhang padding (and gives it straight back as negative margin, so
     layout does not move) so the italic tails sit inside the painted area */
  .aes-in{padding:.1em .18em .14em .12em;margin:-.1em -.18em -.14em -.12em;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-repeat:no-repeat}

  /* 1. pulse (default). Top: the flare, a violet-to-magenta bloom whose size (--aes-r) and strength (--aes-k)
     rise fast and fall slow; its centre hops (step-end) only while it is dark, 70% into each cycle. Middle: a
     static shade toward the foot. Bottom: repeating 115deg streaks, period .9em, slid by exactly one period
     horizontally (.9em / sin 115deg = .993em) so the loop has no seam. */
  .aes-in{--aes-k:.8;--aes-r:22%;--aes-x1:58%;--aes-y1:44%;background-color:#2457FF;
    background-image:
      radial-gradient(var(--aes-r) calc(var(--aes-r) * 1.7) at var(--aes-x1) var(--aes-y1),rgb(217 70 239 / calc(var(--aes-k) * .95)) 0%,rgb(168 85 247 / calc(var(--aes-k) * .8)) 30%,rgb(124 58 237 / calc(var(--aes-k) * .38)) 62%,rgb(124 58 237 / 0) 100%),
      linear-gradient(180deg,rgb(8 22 120 / 0) 42%,rgb(8 22 120 / .26) 100%),
      repeating-linear-gradient(115deg,#2457FF 0em,#2457FF .12em,#5585FF .33em,#2457FF .54em,#1636D2 .73em,#2457FF .9em);
    background-size:100% 100%,100% 100%,calc(100% + 1em) 100%;
    background-position:0 0,0 0,-.4em 0;
    animation:aes-current 5.6s linear infinite,aes-flare 4.2s infinite,aes-hop 21s step-end -1.26s infinite}

  /* 2. aurora. A wide 13-stop band (one violet ribbon) drifts end to end while its angle sways on its own
     period, so the ribbons never repeat the same way twice; a pale veil wanders across the top. */
  [data-aes="aurora"] .aes-in{--aes-a:110deg;--aes-x1:30%;--aes-y1:18%;background-color:#2457FF;
    background-image:
      radial-gradient(55% 62% at var(--aes-x1) var(--aes-y1),rgb(92 134 255 / .5) 0%,rgb(92 134 255 / 0) 100%),
      linear-gradient(var(--aes-a),#1A3FE6 0%,#2457FF 10%,#4474FF 17%,#2457FF 25%,#2F52FB 33%,#6547F1 39%,#8B5CF6 42%,#5B4EF6 45.5%,#2457FF 53%,#1436D2 64%,#2E62FF 74%,#4A78FF 81%,#2457FF 88%,#1A3FE6 100%);
    background-size:100% 100%,260% 100%;background-position:0 0,38% 0;
    animation:aes-drift 16s ease-in-out infinite alternate,aes-sway 9s ease-in-out infinite alternate,aes-veil 13s ease-in-out infinite}

  /* 3. plasma. Three blue blobs on closed paths of different periods; the fourth is the purple one, which
     wanders on its own long loop and blooms on a shorter one, so each burst shows up somewhere else. */
  [data-aes="plasma"] .aes-in{--aes-x1:22%;--aes-y1:32%;--aes-x2:74%;--aes-y2:72%;--aes-x3:52%;--aes-y3:22%;--aes-x4:40%;--aes-y4:58%;--aes-k:.7;background-color:#2457FF;
    background-image:
      radial-gradient(24% 46% at var(--aes-x4) var(--aes-y4),rgb(206 62 236 / calc(var(--aes-k) * .92)) 0%,rgb(150 80 245 / calc(var(--aes-k) * .6)) 42%,rgb(124 58 237 / 0) 100%),
      radial-gradient(36% 64% at var(--aes-x1) var(--aes-y1),rgb(91 134 255 / .95) 0%,rgb(91 134 255 / .5) 40%,rgb(91 134 255 / 0) 100%),
      radial-gradient(42% 76% at var(--aes-x2) var(--aes-y2),rgb(12 34 168 / .9) 0%,rgb(12 34 168 / .45) 45%,rgb(12 34 168 / 0) 100%),
      radial-gradient(34% 60% at var(--aes-x3) var(--aes-y3),rgb(58 106 255 / .9) 0%,rgb(58 106 255 / 0) 100%),
      linear-gradient(180deg,#2457FF,#1C47E6);
    animation:aes-p1 10s ease-in-out infinite,aes-p2 13s ease-in-out infinite,aes-p3 8.5s ease-in-out infinite,aes-p4 15.3s ease-in-out infinite,aes-burst 5.3s infinite}

  /* 4. chrome. A metal reflection: sky above, a dark horizon line that rolls slowly (--aes-hz via --aes-y1),
     ground below; a sheen with a violet leading edge sweeps left to right in 3.2 s, then rests off the word.
     The sheen image is 260% wide with the band at its middle, so the band is on the word for most of the sweep. */
  [data-aes="chrome"] .aes-in{--aes-y1:54%;background-color:#1D46E8;
    background-image:
      linear-gradient(104deg,rgb(124 58 237 / 0) 44%,rgb(139 92 246 / .5) 47.4%,rgb(104 136 255 / .9) 49.4%,rgb(108 141 255 / .92) 50.1%,rgb(84 124 255 / .5) 52%,rgb(84 124 255 / 0) 55%),
      linear-gradient(180deg,#2A5CFF 0%,#4474FF calc(var(--aes-y1) - 16%),#5B86FF calc(var(--aes-y1) - 3%),#0B2192 var(--aes-y1),#1435CC calc(var(--aes-y1) + 11%),#2457FF 84%,#3A6AFF 100%);
    background-size:260% 100%,100% 100%;background-position:0% 0,0 0;
    animation:aes-sheen 7s infinite,aes-tide 7s ease-in-out infinite alternate}

  /* 5. nebula. A tiling fractal-noise grain (rastered once, then only moved by exactly one tile so it loops)
     laid over the clouds with soft-light, two blue clouds on slow paths, and a violet dust that swells. */
  [data-aes="nebula"] .aes-in{--aes-x1:30%;--aes-y1:36%;--aes-x2:72%;--aes-y2:66%;--aes-x3:56%;--aes-y3:34%;--aes-k:.6;background-color:#1D46E8;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.75'/%3E%3C/svg%3E"),
      radial-gradient(30% 56% at var(--aes-x3) var(--aes-y3),rgb(168 85 247 / calc(var(--aes-k) * .85)) 0%,rgb(124 58 237 / calc(var(--aes-k) * .42)) 50%,rgb(124 58 237 / 0) 100%),
      radial-gradient(44% 80% at var(--aes-x1) var(--aes-y1),rgb(66 110 255 / .85) 0%,rgb(66 110 255 / 0) 100%),
      radial-gradient(50% 90% at var(--aes-x2) var(--aes-y2),rgb(10 28 140 / .85) 0%,rgb(10 28 140 / 0) 100%),
      linear-gradient(160deg,#1D46E8,#2457FF 45%,#1632BE);
    background-size:140px 140px,100% 100%,100% 100%,100% 100%,100% 100%;
    background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-blend-mode:soft-light,normal,normal,normal,normal;
    animation:aes-grain 22s linear infinite,aes-n1 17s ease-in-out infinite,aes-n2 21s ease-in-out infinite,aes-dust 9s ease-in-out infinite}

  /* 6. swirl. A conic light turning once every 12 s around a point in the E, softened at its centre (so there
     is no pinch) and darkened toward the edges; the violet beam is a 45deg slice of the turn. */
  [data-aes="swirl"] .aes-in{--aes-a:40deg;background-color:#2457FF;
    background-image:
      radial-gradient(16% 30% at 47% 56%,#2457FF 0%,rgb(36 87 255 / 0) 100%),
      radial-gradient(75% 110% at 47% 56%,rgb(12 32 160 / 0) 55%,rgb(12 32 160 / .36) 100%),
      conic-gradient(from var(--aes-a) at 47% 56%,#2457FF,#3E6CFF 45deg,#2457FF 90deg,#1638D6 130deg,#4F5FF8 158deg,#8B5CF6 172deg,#C04BF0 179deg,#7C3AED 188deg,#2B52FA 205deg,#2457FF 240deg,#4A78FF 290deg,#1C44E4 330deg,#2457FF);
    animation:aes-spin 12s linear infinite}

  /* 7. lava, as it shipped: each letter carries its own lava, blobs of heat drifting on separate paths and
     periods, offset per letter. The word box paints nothing so the letters show through. */
  [data-aes="lava"] .aes-in{background-image:none;background-color:transparent;animation:none}
  [data-aes="lava"] .aes-lv{--l1x:15%;--l1y:70%;--l2x:60%;--l2y:25%;--l3x:85%;--l3y:75%;--l4x:40%;--l4y:50%;background-color:#D9480F;
    background-image:
      radial-gradient(44% 46% at var(--l1x) var(--l1y),#FF8A1F 0%,rgba(255,138,31,.6) 40%,rgba(255,138,31,0) 100%),
      radial-gradient(48% 50% at var(--l2x) var(--l2y),#F25C05 0%,rgba(242,92,5,.55) 45%,rgba(242,92,5,0) 100%),
      radial-gradient(38% 40% at var(--l3x) var(--l3y),#FFA53A 0%,rgba(255,165,58,.5) 35%,rgba(255,165,58,0) 100%),
      radial-gradient(54% 58% at var(--l4x) var(--l4y),#7A1D03 0%,rgba(122,29,3,.6) 45%,rgba(122,29,3,0) 100%),
      linear-gradient(180deg,#D9480F,#A8320A);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:aes-lava1 6.1s ease-in-out infinite,aes-lava2 8.3s ease-in-out infinite,aes-lava3 10.7s ease-in-out infinite,aes-lava4 12.9s ease-in-out infinite}
  [data-aes="lava"] .aes-lv:nth-child(2){animation-duration:7.4s,6.6s,12.2s,9.8s;animation-delay:-2.3s,-5.1s,-1.7s,-7.2s}
  [data-aes="lava"] .aes-lv:nth-child(3){animation-duration:8.9s,10.1s,7.3s,14.6s;animation-delay:-4.6s,-1.2s,-6.4s,-3.9s}

  /* the gate (see FALLBACKS above). !important because every texture sets the animation shorthand, which
     resets play-state; it only ever resolves to "running" where @property works. */
  .aes-in,.aes-lv{animation-play-state:var(--aes-run,paused)!important}
}

/* LIQUID (js/aes-liquid.js): ink, metal and caustics drawn live, bloom, mercury and marble filmed. Until the
   first liquid frame is ready, and whenever the liquid cannot run (no WebGL, a failed video, forced colours),
   the word wears the texture above: a liquid name has no rules of its own there, so that is pulse.
   Live mode (.aes-live, set by the script in the same task that draws the first frame) is a knockout: the box
   is white with the letters in black, and the liquid (.aes-fx, a canvas or video filling the box) lies on top
   with screen, so it shows only through the glyphs and an edge pixel of coverage c is c x liquid + (1 - c) x
   white, the browser's own anti-aliasing. The box is multiplied onto what lies under it, and so is the whole
   word onto the page: white is neutral, so the box hides nothing it overlaps and needs no matching ground.
   THE GLOW. The drop-shadow would outline the box, so for the liquid names it is off (--aes-glow transparent,
   which keeps the entrance blur running). A text-shadow inside the box would be screened with the liquid and
   show a ghost of it, so the glow comes from a copy of the letters under the box instead: ::before, transparent,
   same face and size, in the same grid cell as the word so its letters sit exactly under the real ones, its
   content given empty alt text so it is never announced, never selectable. It is there from the first paint,
   not only in live mode: painted later it became a new, larger text paint and moved the page's largest
   contentful paint to the moment the liquid arrived. The box multiplies onto the glow, so it reads as before.
   The white reaches 3px past the box (box-shadow): a video is its own compositor layer and can snap a device
   pixel past the box, and that sliver must land on white or it shows as a line under the word.
   Nothing here animates: the canvas or video is the only thing that changes per frame. */
:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"]){--aes-glow:transparent}
.aes:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"]),:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"]) .aes{display:inline-grid}
.aes:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"])>.aes-in,:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"]) .aes>.aes-in{grid-area:1/1}
.aes:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"])::before,:is([data-aes="mercury"],[data-aes="metal"],[data-aes="bloom"],[data-aes="ink"],[data-aes="marble"],[data-aes="caustics"]) .aes::before{content:"AES" / "";grid-area:1/1;padding:.1em .18em .14em .12em;margin:-.1em -.18em -.14em -.12em;
  font-family:'AES Serif','Instrument Serif','Times New Roman',serif;font-style:italic;font-weight:400;font-size:1.2em;line-height:.8;letter-spacing:-.01em;
  font-kerning:none;font-variant-ligatures:none;white-space:nowrap;color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 10px 26px rgba(36,87,255,.22);pointer-events:none;-webkit-user-select:none;user-select:none}
.aes-fx{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;padding:0;border:0;pointer-events:none;mix-blend-mode:screen;object-fit:cover;visibility:hidden}
.aes.aes-live{mix-blend-mode:multiply}
.aes.aes-live .aes-in{position:relative;isolation:isolate;mix-blend-mode:multiply;padding:.1em .18em .14em .12em;margin:-.1em -.18em -.14em -.12em;
  background:#fff;-webkit-background-clip:border-box;background-clip:border-box;color:#000;-webkit-text-fill-color:#000;animation:none;
  box-shadow:0 0 0 3px #fff}
.aes.aes-live .aes-fx{visibility:visible}

@keyframes aes-current{from{background-position:0 0,0 0,-.993em 0}to{background-position:0 0,0 0,0 0}}
@keyframes aes-flare{
  0%{--aes-k:0;--aes-r:9%;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  11%{--aes-k:1;--aes-r:21%;animation-timing-function:cubic-bezier(.45,0,.6,1)}
  46%,100%{--aes-k:0;--aes-r:34%}}
@keyframes aes-hop{0%{--aes-x1:22%;--aes-y1:62%}20%{--aes-x1:79%;--aes-y1:34%}40%{--aes-x1:50%;--aes-y1:30%}60%{--aes-x1:31%;--aes-y1:38%}80%{--aes-x1:70%;--aes-y1:66%}100%{--aes-x1:22%;--aes-y1:62%}}
@keyframes aes-drift{from{background-position:0 0,0% 0}to{background-position:0 0,100% 0}}
@keyframes aes-sway{from{--aes-a:96deg}to{--aes-a:128deg}}
@keyframes aes-veil{0%,100%{--aes-x1:18%;--aes-y1:14%}50%{--aes-x1:82%;--aes-y1:30%}}
@keyframes aes-p1{0%,100%{--aes-x1:15%;--aes-y1:30%}33%{--aes-x1:55%;--aes-y1:76%}66%{--aes-x1:86%;--aes-y1:26%}}
@keyframes aes-p2{0%,100%{--aes-x2:80%;--aes-y2:76%}40%{--aes-x2:30%;--aes-y2:66%}70%{--aes-x2:56%;--aes-y2:18%}}
@keyframes aes-p3{0%,100%{--aes-x3:50%;--aes-y3:18%}50%{--aes-x3:18%;--aes-y3:80%}}
@keyframes aes-p4{0%,100%{--aes-x4:20%;--aes-y4:66%}25%{--aes-x4:62%;--aes-y4:30%}50%{--aes-x4:84%;--aes-y4:62%}75%{--aes-x4:44%;--aes-y4:74%}}
@keyframes aes-burst{0%{--aes-k:0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}14%{--aes-k:1;animation-timing-function:cubic-bezier(.45,0,.6,1)}48%,100%{--aes-k:0}}
@keyframes aes-sheen{0%{background-position:100% 0,0 0;animation-timing-function:cubic-bezier(.4,0,.25,1)}45%,100%{background-position:0% 0,0 0}}
@keyframes aes-tide{from{--aes-y1:47%}to{--aes-y1:61%}}
@keyframes aes-grain{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:140px 140px,0 0,0 0,0 0,0 0}}
@keyframes aes-n1{0%,100%{--aes-x1:22%;--aes-y1:30%}50%{--aes-x1:62%;--aes-y1:70%}}
@keyframes aes-n2{0%,100%{--aes-x2:78%;--aes-y2:70%}50%{--aes-x2:38%;--aes-y2:24%}}
@keyframes aes-dust{0%,100%{--aes-k:.15;--aes-x3:30%;--aes-y3:60%}50%{--aes-k:.9;--aes-x3:64%;--aes-y3:32%}}
@keyframes aes-spin{from{--aes-a:0deg}to{--aes-a:360deg}}
@keyframes aes-lava1{0%,100%{--l1x:10%;--l1y:85%}30%{--l1x:40%;--l1y:15%}55%{--l1x:80%;--l1y:45%}80%{--l1x:25%;--l1y:95%}}
@keyframes aes-lava2{0%,100%{--l2x:70%;--l2y:10%}35%{--l2x:95%;--l2y:70%}65%{--l2x:45%;--l2y:95%}85%{--l2x:15%;--l2y:35%}}
@keyframes aes-lava3{0%,100%{--l3x:90%;--l3y:80%}25%{--l3x:50%;--l3y:50%}60%{--l3x:5%;--l3y:15%}82%{--l3x:65%;--l3y:5%}}
@keyframes aes-lava4{0%,100%{--l4x:40%;--l4y:50%}40%{--l4x:5%;--l4y:65%}70%{--l4x:90%;--l4y:25%}}

/* still frames: the declared values above are each texture's composed frame */
@media (prefers-reduced-motion:reduce){.aes,.aes-in,.aes-lv{animation:none!important}}
/* forced colours drop backgrounds; give the letters back a system text colour */
@media (forced-colors:active){.aes-in,.aes-lv{-webkit-text-fill-color:CanvasText;background:none!important}.aes-fx{display:none!important}.aes.aes-live{mix-blend-mode:normal}}
@media print{.aes-fx{display:none!important}.aes::before{content:none!important}}

/* "agentic engagement system" in the hero: bold, on a soft cobalt highlight. The neon wave that was here
   first was rejected as unattractive; this is quieter and reads at small sizes. */
.aes-neon{font-weight:700;color:var(--ink,#0D0D0D);background:linear-gradient(180deg,rgba(36,87,255,.10),rgba(36,87,255,.14));
  padding:.06em .28em;margin:0 -.1em;border-radius:.34em;-webkit-box-decoration-break:clone;box-decoration-break:clone}