/* ==========================================================================
   FILE        assets/aes-fx.css
   UPLOAD TO   public_html/assets/aes-fx.css
   WHAT IT IS  The buttons' and the menu's mouseovers, as on cutsociety.online
               (Jace, 31 October: "use the same colour scheme as has been
               chosen for Cut Society online"). Six effects adapted from
               Hover.css 2.3.1 by Ian Lunn (MIT licence), four drawn in the
               Cherenkov ramp, and the menu's silvery-blue underline with a
               light crossing it, as EdgelitCV's progress band:
                 fx-sweep, fx-shutter, fx-radial, fx-ripple, fx-float,
                 fx-icon, fx-trace, fx-shine, fx-bloom, fx-scan, fx-under.
               aes-btn-colours.css then lights each in its button's colour.
               aes-ui.js gives every button its effect and colour, and every
               menu link fx-under, so no page is tagged by hand.
   MASTER      JJMcCaffrey/cutsociety, assets/ab-fx.css at 2129a7a (AB02),
               copied byte for byte below the Cherenkov colours. Those come
               from the same repository's assets/ab-cherenkov.css (:root),
               which AES does not load, and are named here so the effects
               draw in them.
   VERSION     REV84  (2026-10-31)
   CHANGES     REV84: new.
   ========================================================================== */

/* The Cherenkov colours the effects draw in (cutsociety ab-cherenkov.css, :root). */
:root{
  --ck-abyss:#040A1A; --ck-deep:#0A2466; --ck-mid:#1A3A74; --ck-white:#F2F7FF;
  --ck-hot:#D6E6FF; --ck-ring:#9DC6FF; --ck-core:#3E7BF5; --ck-tail:#5B6CFF;
  --ck-core-rgb:62,123,245; --ck-ring-rgb:157,198,255;
}

/* ---- the master, cutsociety assets/ab-fx.css at 2129a7a, from here to the end ---- */
.btn[class*="fx-"],a.card[class*="fx-"]{position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent}
.btn[class*="fx-"] > *{position:relative}
.btn[class*="fx-"] > canvas.aes-atom-cv{position:absolute}

/* ---- Sweep To Right (Hover.css), the fill runs the ramp ---- */
.btn.fx-sweep::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ck-deep),var(--ck-core) 55%,var(--ck-ring));transition:transform .38s ease-out}
.btn.fx-sweep:hover::before,.btn.fx-sweep.is-hover::before,.btn.fx-sweep:focus-visible::before{transform:scaleX(1)}
.btn.fx-sweep:hover,.btn.fx-sweep.is-hover{border-color:var(--ck-ring);box-shadow:0 0 22px rgba(62,123,245,.55)}

/* ---- Shutter Out Horizontal (Hover.css) ---- */
.btn.fx-shutter::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:scaleX(0);transform-origin:50%;
  background:radial-gradient(60% 120% at 50% 50%,var(--ck-white),var(--ck-core) 55%,var(--ck-deep));transition:transform .32s ease-out}
.btn.fx-shutter:hover::before,.btn.fx-shutter.is-hover::before{transform:scaleX(1)}
.btn.fx-shutter:hover,.btn.fx-shutter.is-hover{color:#04112A;text-shadow:0 0 6px rgba(255,255,255,.7)}

/* ---- Radial Out (Hover.css) ---- */
.btn.fx-radial{background:var(--panel)}
.btn.fx-radial::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:scale(0);
  background:radial-gradient(circle,var(--ck-white) 0%,var(--ck-core) 45%,var(--ck-deep) 100%);transition:transform .38s ease-out}
.btn.fx-radial:hover::before,.btn.fx-radial.is-hover::before{transform:scale(1)}

/* ---- Ripple Out (Hover.css), a Cherenkov ring leaves the button ---- */
.btn.fx-ripple::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--ck-core);opacity:0;pointer-events:none}
.btn.fx-ripple:hover::after,.btn.fx-ripple.is-hover::after{animation:fx-ripple 1s ease-out infinite}
@keyframes fx-ripple{0%{inset:0;opacity:1;border-color:var(--ck-white)}40%{border-color:var(--ck-core)}100%{inset:-12px;opacity:0;border-color:var(--ck-deep)}}

/* ---- Float Shadow (Hover.css) ---- */
.btn.fx-float{transition:transform .3s,box-shadow .3s}
.btn.fx-float::after{content:"";position:absolute;left:5%;right:5%;top:100%;height:12px;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(62,123,245,.65) 0%,transparent 75%);transition:transform .3s,opacity .3s}
.btn.fx-float:hover,.btn.fx-float.is-hover{transform:translateY(-6px)}
.btn.fx-float:hover::after,.btn.fx-float.is-hover::after{opacity:1;transform:translateY(6px)}

/* ---- Icon Forward (Hover.css) ---- */
.btn.fx-icon .fx-arr{display:inline-block;transition:transform .25s ease-out}
.btn.fx-icon:hover .fx-arr,.btn.fx-icon.is-hover .fx-arr{transform:translateX(6px);color:var(--ck-ring);text-shadow:0 0 10px var(--ck-core)}

/* ---- Trace (new): a light runs the border in the ramp ---- */
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn.fx-trace::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:10px;padding:2px;opacity:0;
  background:conic-gradient(from var(--fx-a),var(--ck-deep) 0%,var(--ck-mid) 30%,var(--ck-white) 42%,var(--ck-core) 52%,var(--ck-deep) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .25s}
.btn.fx-trace:hover::before,.btn.fx-trace.is-hover::before{opacity:1;animation:fx-trace 1.4s linear infinite}
.btn.fx-trace:hover,.btn.fx-trace.is-hover{box-shadow:0 0 24px rgba(62,123,245,.45)}
@keyframes fx-trace{to{--fx-a:360deg}}

/* ---- Shine (new): a white glint crosses the face ---- */
.btn.fx-shine{background-image:linear-gradient(105deg,transparent 38%,rgba(242,247,255,.0) 40%,rgba(242,247,255,.75) 50%,rgba(242,247,255,0) 60%,transparent 62%);
  background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat}
.btn.fx-shine:hover,.btn.fx-shine.is-hover{animation:fx-shine 1.1s ease forwards;box-shadow:0 0 22px rgba(157,198,255,.45)}
@keyframes fx-shine{to{background-position:-30% 0}}

/* ---- Bloom (new): dark blue, white flash, settles Cherenkov blue ---- */
.btn.fx-bloom:hover,.btn.fx-bloom.is-hover{animation:fx-bloom 1.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fx-bloom{
  0%  {background:var(--ck-deep);border-color:var(--ck-mid);box-shadow:0 0 0 rgba(0,0,0,0)}
  35% {background:#DCEBFF;border-color:#FFFFFF;color:#04112A;box-shadow:0 0 0 2px rgba(242,247,255,.6),0 0 46px rgba(214,230,255,.85)}
  100%{background:var(--ck-core);border-color:var(--ck-ring);color:#FFFFFF;box-shadow:0 0 0 1px rgba(157,198,255,.6),0 0 34px rgba(62,123,245,.75),inset 0 0 16px rgba(242,247,255,.25)}}

/* ---- Scan (new): a lit band rises through the face ---- */
.btn.fx-scan::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:linear-gradient(0deg,transparent 0%,rgba(62,123,245,.0) 30%,rgba(157,198,255,.75) 48%,rgba(242,247,255,.9) 50%,rgba(62,123,245,.5) 54%,transparent 75%);
  background-size:100% 300%;background-position:0 0}
.btn.fx-scan:hover::before,.btn.fx-scan.is-hover::before{opacity:1;animation:fx-scan 1.3s linear infinite}
@keyframes fx-scan{to{background-position:0 100%}}

/* ---- The menu's underline (AB02, Jace, 31 October) ----
   One silvery-blue line, grown from the centre as Hover.css's Underline From Center. AES's red underline
   (aes.css and aes-nav.css: a red bottom border on hover and on the current page) is taken away here, so
   only this line shows. On mouseover a light crosses the line from left to right, again and again, as
   EdgelitCV's progress band crosses the stage at work while it reads the LinkedIn profile (edgelit.css,
   .stages .band: 40% of the width, 1.6 s a pass, cubic-bezier(.45,.05,.35,1)). The current page keeps
   the line, still. */
header.nav .nav-links a.fx-under:is(:hover,:focus-visible,.is-hover,[aria-current]){border-bottom-color:transparent}
header.nav .nav-links a.fx-under::after{content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:2px;border-radius:1px;
  background:
    linear-gradient(90deg,rgba(242,247,255,0),rgba(242,247,255,.95) 50%,rgba(242,247,255,0)) no-repeat,
    linear-gradient(90deg,#6E86AE,#DCE8FF 50%,#9FB4D6);
  background-size:40% 100%,100% 100%;background-position:-70% 0,0 0;
  box-shadow:0 0 8px rgba(169,210,255,.55);transition:left .3s ease-out,right .3s ease-out}
header.nav .nav-links a.fx-under:is(:hover,:focus-visible,.is-hover,[aria-current])::after{left:0;right:0}
header.nav .nav-links a.fx-under:is(:hover,:focus-visible,.is-hover)::after{box-shadow:0 0 10px rgba(169,210,255,.8),0 0 2px #DCE8FF;
  animation:fx-under-band 1.6s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes fx-under-band{from{background-position:-70% 0,0 0}to{background-position:170% 0,0 0}}

@media (prefers-reduced-motion:reduce){
  .btn[class*="fx-"]::before,.btn[class*="fx-"]::after,.btn[class*="fx-"]{animation:none!important;transition:none!important}
  header.nav .nav-links a.fx-under::after{animation:none!important;transition:none}
}