/* ==================================================================
   assets/css/marks.css
   The brand mark and its animation, on its own so that every surface
   that shows it — the site, /fkiadmin, /meet — animates identically.

   It depends on these variables being defined by whoever loads it:
     --signal --signal-lift --cool --warm --ink --ease --spring
   ================================================================== */

/* ==================================================================
   THE MARK
   ================================================================== */
 .mark{display:block;overflow:visible;flex:0 0 auto;scale:var(--mark-scale,1);opacity:var(--mark-alpha,1);
   filter:drop-shadow(0 0 calc(var(--mark-shadow,0) * .06px) rgba(0,0,0,.42));}

/* ---------- how the mark moves ---------------------------------
   'sweep' is the header motion: the disc slides right and left in a
   continuous loop. Applied to the whole mark rather than to .ec-shadow
   so that it works for all three — the aperture has no disc to move.
   'still' removes movement everywhere for anyone who set it, and the
   reduced-motion query below overrides both. */
 .mark.fk-eclipse{--ec-speed:var(--mark-speed,1);}
 .mark.fk-eclipse .ec-shadow{animation-duration:calc(7s / var(--ec-speed,1));}
 .mark.fk-eclipse .ec-ring{animation-duration:calc(9s / var(--ec-speed,1));}
.mark.fk-still{animation:none !important;}
.mark.fk-still *{animation:none !important;}
@media (prefers-reduced-motion: reduce){
   .mark.fk-eclipse *{animation:none;}
}
.mark .fk-arc{transform-box:view-box;transform-origin:24px 24px;
  animation:markSpin var(--spin,22s) linear infinite;}
.mark .fk-arc-2{--spin:29s;animation-direction:reverse;}
.mark .fk-arc-3{--spin:36s;}
@keyframes markSpin{to{transform:rotate(360deg);}}

.mark .fk-tips circle{transform-box:fill-box;transform-origin:center;
  animation:tipPulse 3.4s var(--ease) infinite;}
.mark .fk-tips circle:nth-child(2){animation-delay:-1.1s;}
.mark .fk-tips circle:nth-child(3){animation-delay:-2.2s;}
@keyframes tipPulse{0%,100%{opacity:.5;transform:scale(.86);}50%{opacity:1;transform:scale(1.12);}}

.mark .fk-rays line{transform-box:view-box;transform-origin:24px 24px;
  animation:rayOut 3.4s var(--ease) infinite;}
.mark .fk-rays line:nth-child(2){animation-delay:-1.1s;}
.mark .fk-rays line:nth-child(3){animation-delay:-2.2s;}
@keyframes rayOut{
  0%,100%{opacity:.2;transform:scale(.86);}
  45%    {opacity:.95;transform:scale(1.1);}
}
.mark .fk-core{transform-box:fill-box;transform-origin:center;
  transition:transform var(--dur) var(--spring);}
.mark .fk-halo{transform-box:fill-box;transform-origin:center;}

.mark.gather .fk-arc{animation-duration:1.4s;}
.mark.gather .fk-core{transform:scale(1.6);}
.mark.fire .fk-arc{animation-duration:.75s;}
.mark.fire .fk-core{transform:scale(2.6);}
.mark.fire .fk-halo{animation:markHalo .95s var(--ease);}
@keyframes markHalo{0%{opacity:.85;transform:scale(.45);}100%{opacity:0;transform:scale(2.6);}}

/* ---------- eclipse — cinematic ---------- */
.mark--eclipse .ec-ring{transform-box:view-box;transform-origin:24px 24px;
  animation:ecRing 9s linear infinite;opacity:.9;}
@keyframes ecRing{to{transform:rotate(360deg);}}
.mark--eclipse .ec-shadow{transform-box:view-box;transform-origin:24px 24px;
  animation:ecSweep 7s var(--ease) infinite;}
@keyframes ecSweep{
  0%   {transform:translateX(-4px);}
  50%  {transform:translateX(20px);}
  100% {transform:translateX(-4px);}
}
.mark--eclipse .ec-spark{transform-box:view-box;transform-origin:24px 24px;
  animation:ecSpark 7s var(--ease) infinite;}
@keyframes ecSpark{
  0%,100%{opacity:.35;transform:rotate(0deg) scale(.8);}
  50%    {opacity:1;transform:rotate(26deg) scale(1.25);}
}
.mark--eclipse.gather .ec-shadow{animation-duration:1.6s;}
.mark--eclipse.fire .ec-shadow{animation-duration:.8s;}
.mark--eclipse.fire .ec-ring{animation-duration:1s;stroke-dasharray:94 26;}

.mark--eclipsefusionki .ef-shadow{transform-box:view-box;transform-origin:24px 24px;
  animation:ecSweep 7s var(--ease) infinite;}
.mark--eclipsefusionki .ef-spark{transform-box:view-box;transform-origin:24px 24px;
  animation:ecSpark 7s var(--ease) infinite;}
/* the whole ribbon turns, so the name revolves around the disc */
.mark--eclipsefusionki .ef-ring{transform-box:view-box;transform-origin:24px 24px;
  animation:efOrbit 16s linear infinite;}
@keyframes efOrbit{to{transform:rotate(360deg);}}
.mark--eclipsefusionki.gather .ef-ring{animation-duration:3s;}
.mark--eclipsefusionki.gather .ef-shadow{animation-duration:1.6s;}
.mark--eclipsefusionki.fire .ef-ring{animation-duration:1.4s;}
.mark--eclipsefusionki.fire .ef-shadow{animation-duration:.8s;}