/* ==========================================================================
   FILE          assets/aes-orbit.css   (with assets/aes-orbit.js)
   UPLOAD TO     public_html/assets/aes-orbit.css
   WHAT IT IS    THE CHERENKOV ORBIT  (REV76)

   Seven electrons in Cherenkov blue orbit a box's border, lit like the
   orbitals of the site's atom: a white-hot core, a blue halo and a trail,
   with the border itself pulsing. Used for the active stage while a CV is
   being built, and — scaled down — round any text box while it is selected
   (the Tailored CV form and the admin pricing pages).

   How it is drawn: one rounded-rectangle path on the box's border, drawn
   five times. With pathLength 700, a dash pattern 100 long repeats exactly
   seven times round the box, so "0.01 99.99" with round caps is seven
   evenly spaced dots; moving the dash offset carries them round, trails and
   all. Colours are the atom's own: glow #3E7BF5, ring #9DC6FF, trail
   #8CB9FF, core white. A separate file, so aes.css stays as it was.
   ========================================================================== */
.aes-orbit{position:absolute;pointer-events:none;overflow:visible;z-index:2;
  filter:drop-shadow(0 0 4px rgba(62,123,245,.9))}
.aes-orbit path{fill:none;stroke-linecap:round}
.aes-orbit__ring{stroke:rgba(157,198,255,.55);stroke-width:1.2;stroke-linecap:butt;animation:aes-orbit-ring 1.6s ease-in-out infinite}
.aes-orbit__trail{stroke:#3E7BF5;stroke-width:4;opacity:.45;stroke-dasharray:16 84;stroke-dashoffset:16;animation:aes-orbit-16 2s linear infinite}
.aes-orbit__tail{stroke:#8CB9FF;stroke-width:3;opacity:.8;stroke-dasharray:7 93;stroke-dashoffset:7;animation:aes-orbit-7 2s linear infinite}
.aes-orbit__halo{stroke:#9DC6FF;stroke-width:13;opacity:.38;stroke-dasharray:.01 99.99;animation:aes-orbit-0 2s linear infinite}
.aes-orbit__e{stroke:#FFFFFF;stroke-width:6;stroke-dasharray:.01 99.99;animation:aes-orbit-0 2s linear infinite}
@keyframes aes-orbit-0{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes aes-orbit-16{from{stroke-dashoffset:16}to{stroke-dashoffset:-84}}
@keyframes aes-orbit-7{from{stroke-dashoffset:7}to{stroke-dashoffset:-93}}
@keyframes aes-orbit-ring{0%,100%{stroke-opacity:.35}50%{stroke-opacity:.95}}

/* Round a selected text box: a lighter orbit that follows the box. */
.aes-orbit--field{position:fixed;z-index:60}
.aes-orbit--field .aes-orbit__e{stroke-width:4.5}
.aes-orbit--field .aes-orbit__halo{stroke-width:10;opacity:.32}
.aes-orbit--field .aes-orbit__tail{stroke-width:2.4}
.aes-orbit--field .aes-orbit__trail{stroke-width:3}
.aes-orbit--field .aes-orbit__e,.aes-orbit--field .aes-orbit__halo{animation-duration:2.6s}
.aes-orbit--field .aes-orbit__tail,.aes-orbit--field .aes-orbit__trail{animation-duration:2.6s}

/* The selected box itself: its Cherenkov-blue edge brightens and pulses like the active stage. */
.aes-cherenkov:focus,.aes-cherenkov:focus-visible{outline:none;animation:aes-cherenkov 1.6s ease-in-out infinite}
@keyframes aes-cherenkov{0%,100%{box-shadow:0 0 0 1px rgba(157,198,255,.30),0 0 14px rgba(62,123,245,.70),0 0 34px rgba(62,123,245,.28),inset 0 0 14px rgba(62,123,245,.24)}
  50%{box-shadow:0 0 0 1px rgba(214,230,255,.55),0 0 22px rgba(62,123,245,.95),0 0 52px rgba(62,123,245,.42),inset 0 0 20px rgba(62,123,245,.34)}}

/* ---- Text boxes in the look of the "AI Search" bar (owner request) --------
   A near-black field, a Cherenkov-blue neon edge that is brighter towards
   each end, a soft blue glow, rounded ends — and the site's own font in bold
   at the size of its bold lead-ins (Rajdhani 700, 18.4px, as "Start with the
   Fee Estimator." on the Commercial Tools page). Applies inside any
   container marked data-aes-orbit-fields. Selecting a box brightens the edge,
   and the seven electrons orbit it (aes-orbit.js). */
[data-aes-orbit-fields] :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=date],input:not([type]),select,textarea){
  box-sizing:border-box;
  font-family:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700;font-size:18.4px;line-height:1.35;letter-spacing:.01em;
  color:#EAF4FF;caret-color:#CFE4FF;
  min-height:50px;padding:11px 22px;
  border:1.5px solid transparent;border-radius:999px;
  background:
    linear-gradient(180deg,#071021,#03070F) padding-box,
    linear-gradient(90deg,rgba(62,123,245,.60),rgba(196,220,255,.95) 16%,rgba(62,123,245,.55) 42%,rgba(62,123,245,.55) 58%,rgba(196,220,255,.95) 84%,rgba(62,123,245,.60)) border-box;
  box-shadow:0 0 10px rgba(62,123,245,.40),0 0 26px rgba(62,123,245,.16),inset 0 0 12px rgba(62,123,245,.16);
  outline:none;transition:box-shadow .2s ease;
}
/* :not([type]) only raises these to the same weight as the rule above, so they win by coming after it. */
[data-aes-orbit-fields] textarea:not([type]){border-radius:20px;padding:14px 22px;line-height:1.5;min-height:110px}
[data-aes-orbit-fields] select:not([type]){-webkit-appearance:none;appearance:none;padding-right:50px;cursor:pointer;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239DC6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center/14px 9px,
    linear-gradient(180deg,#071021,#03070F) padding-box,
    linear-gradient(90deg,rgba(62,123,245,.60),rgba(196,220,255,.95) 16%,rgba(62,123,245,.55) 42%,rgba(62,123,245,.55) 58%,rgba(196,220,255,.95) 84%,rgba(62,123,245,.60)) border-box}
[data-aes-orbit-fields] select option{background:#071021;color:#EAF4FF;font-weight:600}
[data-aes-orbit-fields] :is(input,textarea)::placeholder{color:#8296AD;font-weight:600;opacity:1}
[data-aes-orbit-fields] :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=date],input:not([type]),select,textarea):hover{
  box-shadow:0 0 14px rgba(62,123,245,.55),0 0 32px rgba(62,123,245,.22),inset 0 0 12px rgba(62,123,245,.2)}
[data-aes-orbit-fields] :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=date],input:not([type]),select,textarea):focus{
  box-shadow:0 0 0 1px rgba(157,198,255,.30),0 0 14px rgba(62,123,245,.70),0 0 34px rgba(62,123,245,.28),inset 0 0 14px rgba(62,123,245,.24)}
[data-aes-orbit-fields] :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=date],input:not([type]),textarea):focus{
  background:
    linear-gradient(180deg,#081428,#040A15) padding-box,
    linear-gradient(90deg,#7FB0FF,#FFFFFF 16%,#9DC6FF 42%,#9DC6FF 58%,#FFFFFF 84%,#7FB0FF) border-box}
[data-aes-orbit-fields] select:not([type]):focus{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center/14px 9px,
    linear-gradient(180deg,#081428,#040A15) padding-box,
    linear-gradient(90deg,#7FB0FF,#FFFFFF 16%,#9DC6FF 42%,#9DC6FF 58%,#FFFFFF 84%,#7FB0FF) border-box}
[data-aes-orbit-fields] input[type=number]{padding-right:14px}
/* Chrome replaces the background of an autofilled box: keep it dark, the text white and the edge lit. */
[data-aes-orbit-fields] :is(input,textarea,select):-webkit-autofill,
[data-aes-orbit-fields] :is(input,textarea,select):-webkit-autofill:hover,
[data-aes-orbit-fields] :is(input,textarea,select):-webkit-autofill:focus{
  -webkit-text-fill-color:#EAF4FF;border-color:rgba(157,198,255,.85);
  -webkit-box-shadow:0 0 0 1000px #050B17 inset,0 0 12px rgba(62,123,245,.45);
  box-shadow:0 0 0 1000px #050B17 inset,0 0 12px rgba(62,123,245,.45);
  transition:background-color 99999s ease-out 0s}

@media (prefers-reduced-motion: reduce){
  .aes-orbit path,.aes-cherenkov:focus{animation:none}
  .aes-cherenkov:focus{box-shadow:0 0 0 1px rgba(214,230,255,.55),0 0 20px rgba(62,123,245,.85),inset 0 0 16px rgba(62,123,245,.28)}
}