/* GFL logo — hover reveal. Тільки CSS. Розмір — одна змінна --h.
   .gfl          — ширина лише знака (напис виїжджає поверх, layout не рухається)
   .gfl--reserve — резервує повну ширину логотипу (хедер / ряди логотипів) */

@property --gfl-p{syntax:"<percentage>";inherits:true;initial-value:7%}

.gfl{--h:56px;--w-full:calc(var(--h)*5.2308);--w-sym:calc(var(--h)*1.25);
  --gfl-ease:cubic-bezier(.19,1,.22,1);--gfl-accent:#0046FF;
  display:inline-flex;align-items:center;width:var(--w-sym);color:#0D0D0D;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.gfl--reserve{width:var(--w-full)}
.gfl-inner{--gfl-p:7%;position:relative;height:var(--h);width:var(--w-sym);flex:none;isolation:isolate;
  transition:--gfl-p .95s var(--gfl-ease)}
.gfl .gfl-sym{position:absolute;left:0;top:0;height:calc(var(--h)*.9615);width:var(--w-sym);display:block;
  transform-origin:left center;z-index:2}
.gfl-text{position:absolute;left:0;top:0;height:var(--h);width:var(--w-full);pointer-events:none;
  --gfl-mask:linear-gradient(90deg,#000 0 var(--gfl-p),transparent calc(var(--gfl-p) + 9%));
  -webkit-mask-image:var(--gfl-mask);mask-image:var(--gfl-mask);will-change:mask-image}
.gfl .gfl-full{height:var(--h);width:var(--w-full);display:block}
.gfl-lead{position:absolute;top:11%;left:calc(var(--h)*1.115);width:1.5px;height:78%;z-index:3;
  background:var(--gfl-accent);opacity:0;border-radius:1px;pointer-events:none;
  will-change:transform,opacity}

/* розмиття — одним фільтром на всю групу, не на кожній літері */
.wm{filter:blur(.55px);transition:filter .5s ease;will-change:filter}
.wm path{transform:translateX(-3.4px);will-change:transform;
  transition:transform .85s cubic-bezier(.16,1.18,.3,1);transition-delay:calc(var(--i)*10ms)}
/* тегляйн — одним шаром, не 20 контурів */
.tg{opacity:0;transform:translateX(-2px);will-change:transform,opacity;
  transition:opacity .45s linear,transform .8s var(--gfl-ease)}

/* ——— hover / focus / tap ——— */
.gfl-inner:hover,.gfl:focus-visible .gfl-inner,.gfl:active .gfl-inner{--gfl-p:112%}
:is(.gfl-inner:hover,.gfl:focus-visible .gfl-inner,.gfl:active .gfl-inner) .wm{filter:blur(0)}
:is(.gfl-inner:hover,.gfl:focus-visible .gfl-inner,.gfl:active .gfl-inner) .wm path{
  transform:none;transition-delay:calc(70ms + var(--i)*26ms)}
:is(.gfl-inner:hover,.gfl:focus-visible .gfl-inner,.gfl:active .gfl-inner) .tg{
  opacity:.68;transform:none;transition-delay:.42s}
:is(.gfl-inner:hover,.gfl:focus-visible .gfl-inner,.gfl:active .gfl-inner) .gfl-sym{
  animation:gfl-mark .95s var(--gfl-ease)}
:is(.gfl-inner:hover,.gfl:focus-visible .gfl-inner,.gfl:active .gfl-inner) .gfl-lead{
  animation:gfl-lead .95s var(--gfl-ease) forwards}

@keyframes gfl-mark{0%{transform:translate3d(0,0,0)}18%{transform:translate3d(-1.5%,0,0) scale(.982)}52%{transform:scale(1.035)}100%{transform:translate3d(0,0,0)}}
@keyframes gfl-lead{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:1}72%{opacity:1}100%{transform:translate3d(calc(var(--h)*4.12),0,0);opacity:0}}

.gfl:focus-visible{outline:none}
.gfl:focus-visible .gfl-inner{box-shadow:0 0 0 2px color-mix(in oklch,currentColor 30%,transparent);border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .gfl-inner{--gfl-p:112%;transition:none}
  .wm{filter:none}.wm path{transform:none;transition:none}
  .tg{opacity:.68;transform:none;transition:none}
  .gfl-lead{display:none}
}