/* ==========================================================================
   FILE        assets/aes-hover.css
   UPLOAD TO   public_html/assets/aes-hover.css
   LOAD        last, on every page with the site header
   WHAT IT IS  The cards' mouseovers, as on cutsociety.online (Jace, 31
               October: "use the same colour scheme as has been chosen for Cut
               Society online"; the same idea by page type). Each page names
               its own on <body data-hover="...">:
                 gold       the home page: EdgelitCV's stage at work, a gold
                            edge that flashes twice as each pass begins and a
                            silver light crossing left to right
                 ignite     engineering, the disciplines, BIM, nuclear: the
                            edge runs dark blue, a white flash, then holds
                            Cherenkov blue; the card lifts
                 trace      carbon, cost, the platforms, sign-in and accounts:
                            a gold light runs round the edge
                 spotlight  About: a soft light follows the pointer
                 scan       AI and apps, the roles, insights, legal: a silver
                            line reads the card top to bottom
                 brackets   the downloads: four corner brackets
                            close in, as a viewfinder frames a page
                 edge       Contact: EdgelitCV's white edge light along the top
                            and down the right, with its spark
               Every effect draws in the card's band, <span class="ab-band">
               <i></i></span>, which aes-ui.js adds to each card, so no card's
               own ::before or ::after is touched. aes-ui.js also gives
               spotlight the pointer's place (--mx, --my).
   MASTER      JJMcCaffrey/cutsociety, assets/ab-hover.css at 2129a7a (AB04),
               copied byte for byte below but for one thing: every list of
               cards, :is(.bl-card,.card,.tier), also names AES's own boxes,
               .panel (the side panels of the inner pages: where it sits, how
               it maps to me), .signoff (Contact's card) and .dl-card (a
               download), because most of AES's pages carry those and no
               .card. The tool pages (the tools, the fee estimator, the NEC4
               builder) carry no data-hover: their panels are forms. The class and animation
               names (ab-band, ab-gold-strobe and the rest) are kept, so the
               two sites' copies can be compared line for line.
   VERSION     REV84  (2026-10-31)
   CHANGES     REV84: new.
   ========================================================================== */

/* ---- the master, cutsociety assets/ab-hover.css at 2129a7a, from here (cards: + .panel, .signoff, .dl-card) ---- */
/* ---------------- the band, at rest: every variation draws in it ---------------- */
html body :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card){--sw1:220,232,255;--swp:242,247,255;--gold:255,196,64}
/* The selector names the card as well as the band: edgelit-backlit.css makes every child of a .bl-card relative
   (html body .bl-card > *:not(.aes-atom-cv), 0-2-2), which would put the band in the flow at no height. */
html body :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card) > span.ab-band{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:2}
html body :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card) > span.ab-band i{position:absolute;top:0;bottom:0;left:0;width:40%;mix-blend-mode:screen;transform:translateX(-50%)}
.card,.tier,.bl-card,.panel,.signoff,.dl-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}

/* ---------------- gold (home): EdgelitCV's stage at work, in gold ---------------- */
html [data-hover="gold"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{
  background:linear-gradient(90deg,transparent 0%,rgba(var(--sw1),.24) 26%,rgba(var(--swp),.55) 50%,rgba(var(--sw1),.24) 74%,transparent 100%)}
html [data-hover="gold"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{opacity:1}
html [data-hover="gold"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band i{animation:ab-band 1.6s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes ab-band{from{transform:translateX(-50%)}to{transform:translateX(250%)}}
html [data-hover="gold"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){border-color:rgb(var(--gold));animation:ab-gold-strobe 1.6s linear infinite}
@keyframes ab-gold-strobe{
  0%{border-color:rgba(255,226,154,1);box-shadow:0 0 0 1px rgba(255,226,154,1),0 0 30px rgba(var(--gold),.9),inset 0 0 24px rgba(var(--gold),.3)}
  5%{border-color:rgba(var(--gold),.6);box-shadow:0 0 0 1px rgba(var(--gold),.4),0 0 10px rgba(var(--gold),.3),inset 0 0 10px rgba(var(--gold),.1)}
  10%{border-color:rgba(255,226,154,1);box-shadow:0 0 0 1px rgba(255,226,154,1),0 0 30px rgba(var(--gold),.9),inset 0 0 24px rgba(var(--gold),.3)}
  22%,100%{border-color:rgba(var(--gold),.95);box-shadow:0 0 0 1px rgba(var(--gold),.6),0 0 18px rgba(var(--gold),.4),0 18px 38px rgba(0,0,0,.38),inset 0 0 14px rgba(var(--gold),.14)}
}

/* ---------------- ignite (services): dark blue, a white flash, Cherenkov blue; the card lifts ---------------- */
html [data-hover="ignite"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){
  transform:translateY(-4px);animation:ab-ignite 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes ab-ignite{
  0%{border-color:rgba(10,36,102,.95);box-shadow:0 0 0 1px rgba(10,36,102,.6)}
  30%{border-color:#F2F7FF;box-shadow:0 0 0 1px rgba(242,247,255,.85),0 0 44px rgba(214,230,255,.7),inset 0 0 26px rgba(242,247,255,.22)}
  100%{border-color:#3E7BF5;box-shadow:0 0 0 1px rgba(62,123,245,.55),0 22px 44px rgba(0,0,0,.42),0 0 46px rgba(62,123,245,.5),inset 0 0 22px rgba(62,123,245,.18)}}

/* ---------------- trace (audit): a gold light runs round the edge ---------------- */
@property --ab-a{syntax:"<angle>";inherits:false;initial-value:0deg}
html [data-hover="trace"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band{padding:2px;
  background:conic-gradient(from var(--ab-a),transparent 0 62%,rgba(255,196,64,.35) 72%,#FFE29A 82%,#FFFFFF 85%,#FFC440 88%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html [data-hover="trace"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{display:none}
html [data-hover="trace"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{opacity:1;animation:ab-trace 2.2s linear infinite}
html [data-hover="trace"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none;border-color:rgba(255,196,64,.35);
  box-shadow:0 0 0 1px rgba(255,196,64,.15),0 0 26px rgba(255,196,64,.22),0 18px 38px rgba(0,0,0,.38)}
@keyframes ab-trace{to{--ab-a:360deg}}

/* ---------------- spotlight (about): a soft light follows the pointer ---------------- */
html [data-hover="spotlight"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(220,232,255,.20),rgba(169,210,255,.07) 45%,transparent 70%)}
html [data-hover="spotlight"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{display:none}
html [data-hover="spotlight"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{opacity:1}
html [data-hover="spotlight"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none;border-color:rgba(220,232,255,.7);
  box-shadow:0 0 0 1px rgba(220,232,255,.25),0 0 30px rgba(169,210,255,.28),0 18px 38px rgba(0,0,0,.38)}

/* ---------------- scan (insights): a silver line reads the card top to bottom ---------------- */
html [data-hover="scan"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{left:0;right:0;width:auto;top:0;bottom:auto;height:34%;transform:translateY(-100%);
  background:linear-gradient(180deg,transparent 0%,rgba(var(--sw1),.10) 60%,rgba(var(--swp),.30) 92%,rgba(255,255,255,.95) 97%,transparent 100%)}
html [data-hover="scan"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{opacity:1}
html [data-hover="scan"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band i{animation:ab-scan 1.9s cubic-bezier(.45,.05,.35,1) infinite}
html [data-hover="scan"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none;border-color:rgba(220,232,255,.8);
  box-shadow:0 0 0 1px rgba(220,232,255,.3),0 0 26px rgba(169,210,255,.3),0 18px 38px rgba(0,0,0,.38)}
@keyframes ab-scan{from{transform:translateY(-100%)}to{transform:translateY(300%)}}

/* ---------------- brackets (tax dates): four corner brackets close in ---------------- */
@property --ab-l{syntax:"<length>";inherits:false;initial-value:0px}
html [data-hover="brackets"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band{inset:7px;border-radius:6px;opacity:1;--ab-l:0px;transition:--ab-l .35s cubic-bezier(.2,.7,.2,1);
  background:
    linear-gradient(#FFE29A,#FFE29A) top left/var(--ab-l) 2px no-repeat,linear-gradient(#FFE29A,#FFE29A) top left/2px var(--ab-l) no-repeat,
    linear-gradient(#FFE29A,#FFE29A) top right/var(--ab-l) 2px no-repeat,linear-gradient(#FFE29A,#FFE29A) top right/2px var(--ab-l) no-repeat,
    linear-gradient(#FFE29A,#FFE29A) bottom left/var(--ab-l) 2px no-repeat,linear-gradient(#FFE29A,#FFE29A) bottom left/2px var(--ab-l) no-repeat,
    linear-gradient(#FFE29A,#FFE29A) bottom right/var(--ab-l) 2px no-repeat,linear-gradient(#FFE29A,#FFE29A) bottom right/2px var(--ab-l) no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,196,64,.85))}
html [data-hover="brackets"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{display:none}
html [data-hover="brackets"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{--ab-l:26px}
html [data-hover="brackets"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none;
  box-shadow:0 0 0 1px rgba(255,196,64,.12),0 0 30px rgba(255,196,64,.16),0 18px 38px rgba(0,0,0,.38)}

/* ---------------- edge (contact): EdgelitCV's white edge light, with its spark ---------------- */
html [data-hover="edge"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band{overflow:visible;
  border-top:2px solid #F2F7FF;border-right:2px solid #F2F7FF;
  -webkit-mask:linear-gradient(90deg,transparent 18%,#000 46%);mask:linear-gradient(90deg,transparent 18%,#000 46%);
  filter:drop-shadow(0 0 6px #A9D2FF)}
html [data-hover="edge"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{top:-4px;bottom:auto;left:0;width:8px;height:8px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 8px 3px #DCE8FF,0 0 18px 6px rgba(169,210,255,.8);mix-blend-mode:normal;transform:none;opacity:0}
html [data-hover="edge"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{opacity:1}
html [data-hover="edge"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band i{animation:ab-spark 2.4s cubic-bezier(.45,.05,.35,1) infinite}
html [data-hover="edge"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none;border-color:rgba(220,232,255,.55);
  box-shadow:0 0 0 1px rgba(220,232,255,.2),0 0 32px rgba(169,210,255,.26),0 18px 38px rgba(0,0,0,.38)}
@keyframes ab-spark{0%{left:35%;opacity:0}12%{opacity:1}70%{left:calc(100% - 5px);opacity:1}100%{left:calc(100% - 5px);opacity:0}}

/* ---------------- tilt (the lab): the card tilts towards the pointer, a glint follows ---------------- */
html [data-hover="tilt"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band{
  background:radial-gradient(180px 120px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 70%)}
html [data-hover="tilt"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)) > span.ab-band i{display:none}
html [data-hover="tilt"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band{opacity:1}
html [data-hover="tilt"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);transition:transform .08s linear;
  border-color:rgba(185,194,255,.7);box-shadow:0 0 0 1px rgba(185,194,255,.25),0 0 34px rgba(91,108,255,.3),0 24px 44px rgba(0,0,0,.45)}

/* ---------------- reduced motion: each holds a still, lit state, nothing moves ---------------- */
@media (prefers-reduced-motion:reduce){
  html [data-hover] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){animation:none!important;transform:none!important}
  html [data-hover] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band,
  html [data-hover] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band i{animation:none!important}
  html [data-hover="gold"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){box-shadow:0 0 0 1px rgba(var(--gold),.6),0 0 18px rgba(var(--gold),.4)}
  html [data-hover="gold"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover) > span.ab-band i{transform:translateX(75%)}
  html [data-hover="ignite"] :is(.bl-card,.card,.tier,.panel,.signoff,.dl-card):is(.rv.in,:not(.rv)):is(:hover,:focus-visible,.is-hover){border-color:#3E7BF5;box-shadow:0 0 0 1px rgba(62,123,245,.55),0 0 30px rgba(62,123,245,.4)}
}

/* ---- AES: its boxes hold the band as a card does (aes.css gives .card its place; these have none) ---- */
html body :is(.panel,.signoff,.dl-card){position:relative}