/* Formula Unit — custom animated header logo
   Inspired by the supplied logo animation: reveal, glow, floating motion and light sweep.
   Uses the real Formula Unit logo with a transparent background; no black video box. */
.fu-animated-logo{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:68px;
  flex:0 0 220px;
  overflow:visible;
  isolation:isolate;
  transform-origin:center;
  animation:fuLogoReveal 1.05s cubic-bezier(.16,1,.3,1) both, fuLogoFloat 5.2s 1.1s ease-in-out infinite;
  will-change:transform,filter,opacity;
}
.fu-animated-logo::before{
  content:"";
  position:absolute;
  inset:7px 3px;
  border-radius:18px;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,20,120,.28) 0%, rgba(255,20,120,.13) 35%, rgba(255,255,255,0) 72%);
  filter:blur(10px);
  opacity:.85;
  z-index:-2;
  animation:fuLogoGlow 2.8s 1.1s ease-in-out infinite;
}
.fu-animated-logo::after{
  content:"";
  position:absolute;
  top:7%;
  bottom:7%;
  left:-18%;
  width:16%;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(255,125,190,.55), transparent);
  filter:blur(.4px);
  opacity:0;
  z-index:3;
  transform:skewX(-16deg);
  pointer-events:none;
  animation:fuLogoShine 3.7s 1.45s ease-in-out infinite;
}
.fu-animated-logo-img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  opacity:0;
  animation:fuLogoImageIn 1.05s .05s cubic-bezier(.16,1,.3,1) both, fuLogoBreath 3.8s 1.35s ease-in-out infinite;
  will-change:transform,filter,opacity;
}
.fu-animated-logo:hover{
  animation:fuLogoHover .65s cubic-bezier(.2,.8,.2,1) both;
}
.fu-animated-logo:hover .fu-animated-logo-img{
  filter:drop-shadow(0 0 7px rgba(255,40,140,.55)) drop-shadow(0 0 15px rgba(255,255,255,.18));
}

@keyframes fuLogoReveal{
  0%{opacity:0;transform:translateY(-13px) scale(.78) rotate(-3deg);filter:blur(5px) drop-shadow(0 0 0 rgba(255,30,140,0));}
  58%{opacity:1;transform:translateY(2px) scale(1.035) rotate(.6deg);filter:blur(.2px) drop-shadow(0 0 15px rgba(255,30,140,.26));}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0) drop-shadow(0 0 10px rgba(255,30,140,.18));}
}
@keyframes fuLogoImageIn{
  0%{opacity:0;transform:scale(.72);}
  55%{opacity:1;transform:scale(1.04);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes fuLogoFloat{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-3px) rotate(.25deg);}
}
@keyframes fuLogoBreath{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,30,140,.14));}
  50%{transform:scale(1.018);filter:drop-shadow(0 0 11px rgba(255,30,140,.32)) drop-shadow(0 0 3px rgba(255,255,255,.18));}
}
@keyframes fuLogoGlow{
  0%,100%{opacity:.38;transform:scale(.92);}
  50%{opacity:.9;transform:scale(1.04);}
}
@keyframes fuLogoShine{
  0%,43%{left:-18%;opacity:0;}
  51%{opacity:1;}
  68%,100%{left:112%;opacity:0;}
}
@keyframes fuLogoHover{
  0%{transform:scale(1);}
  45%{transform:scale(1.055) rotate(-1deg);}
  100%{transform:scale(1.018) rotate(0);}
}

@media (max-width:1000px){
  .fu-animated-logo{width:190px;height:62px;flex-basis:190px;}
}
@media (max-width:700px){
  .fu-animated-logo{width:165px;height:54px;flex-basis:165px;}
  .fu-animated-logo::before{inset:5px 1px;filter:blur(8px);}
}
@media (prefers-reduced-motion:reduce){
  .fu-animated-logo,.fu-animated-logo::before,.fu-animated-logo::after,.fu-animated-logo-img{animation:none!important;}
  .fu-animated-logo{opacity:1;transform:none;filter:none;}
  .fu-animated-logo-img{opacity:1;transform:none;}
}

/* ===== Readability + richer Formula Unit header motion ===== */
.fu-animated-logo{
  width:228px;
  height:70px;
  flex-basis:228px;
  animation:
    fuLogoReveal 1.15s cubic-bezier(.16,1,.3,1) both,
    fuLogoFloat 4.4s 1.15s ease-in-out infinite;
}
.fu-animated-logo::before{
  inset:4px 0;
  background:
    radial-gradient(ellipse at 48% 50%, rgba(255,20,120,.36) 0%, rgba(255,20,120,.17) 34%, rgba(255,255,255,.06) 52%, transparent 75%);
  filter:blur(12px);
  opacity:.95;
  animation:fuLogoGlow 2.35s 1.05s ease-in-out infinite;
}
.fu-animated-logo::after{
  top:3%;
  bottom:3%;
  width:18%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.98), rgba(255,75,165,.72), transparent);
  filter:blur(.6px);
  animation:fuLogoShine 3.05s 1.2s ease-in-out infinite;
}
.fu-animated-logo-img{
  filter:drop-shadow(0 0 5px rgba(255,25,135,.16));
  animation:
    fuLogoImageIn 1.05s .05s cubic-bezier(.16,1,.3,1) both,
    fuLogoBreath 3.2s 1.25s ease-in-out infinite,
    fuLogoSparkle 5.5s 2s ease-in-out infinite;
}
@keyframes fuLogoBreath{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,25,135,.12)) brightness(1);}
  50%{transform:scale(1.024);filter:drop-shadow(0 0 13px rgba(255,25,135,.38)) drop-shadow(0 0 4px rgba(255,255,255,.2)) brightness(1.07);}
}
@keyframes fuLogoSparkle{
  0%,72%,100%{filter:drop-shadow(0 0 5px rgba(255,25,135,.12)) brightness(1);}
  78%{filter:drop-shadow(0 0 15px rgba(255,25,135,.5)) drop-shadow(0 0 5px rgba(255,255,255,.28)) brightness(1.13);}
  84%{filter:drop-shadow(0 0 8px rgba(255,25,135,.24)) brightness(1.03);}
}
@media (max-width:1000px){
  .fu-animated-logo{width:198px;height:64px;flex-basis:198px;}
}
@media (max-width:700px){
  .fu-animated-logo{width:172px;height:56px;flex-basis:172px;}
}