/* fx/header.css — lane 2 (header + nav). Prefix .fxhdr-. Loaded on every page via fx_head. */

/* 1. Ink brushstroke underline: a tapered gold-to-ember stroke laid left to right. */
#main-header .nav-link::after{
  left:.85rem;right:.85rem;bottom:-1px;height:6px;border-radius:0;
  background:linear-gradient(90deg,var(--fx-gold) 0%,#f3b36b 45%,var(--fx-ember) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C9 3.6 22 2.9 38 3.1c20 .3 36-.9 52-.6 12 .2 21 .9 29 1.9-7 .6-15 1.5-27 1.8-17 .4-33-.7-51-.4C26 6 12 6.9 1 5.2z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C9 3.6 22 2.9 38 3.1c20 .3 36-.9 52-.6 12 .2 21 .9 29 1.9-7 .6-15 1.5-27 1.8-17 .4-33-.7-51-.4C26 6 12 6.9 1 5.2z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform:scaleX(0) rotate(-1deg);transform-origin:left center;
  transition:transform 380ms var(--fx-ease-out);
}
#main-header .nav-link:hover::after,
#main-header .nav-link:focus-visible::after,
#main-header .mega-trigger.active::after{transform:scaleX(1) rotate(-1deg)}

/* Visible, on-brand focus for everything in the bar and the panels. */
#main-header a:focus-visible,#main-header button:focus-visible,
#mobile-menu a:focus-visible,#mobile-menu button:focus-visible{
  outline:2px solid var(--fx-gold);outline-offset:3px;border-radius:6px;
}

/* 2. Heat line: scroll progress under the bar, ember at the start, gold at the tip. */
.fxhdr-heat{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;z-index:1;
  opacity:0;transition:opacity var(--fx-med) ease}
#main-header.scrolled .fxhdr-heat{opacity:1}
.fxhdr-heat-bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--fx-ember-deep),var(--fx-ember) 55%,var(--fx-gold));
  will-change:transform}

/* 3. Condensed bar picks up a soft ember glow from below, like iron still warm. */
#main-header::before{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:18px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0,rgba(230,73,37,.2),rgba(230,73,37,0) 70%);
  opacity:0;transition:opacity 600ms ease}
#main-header.scrolled::before{opacity:1}

/* 4. Dropdown items arrive with a short stagger (desktop panels + mobile overlay). */
@keyframes fxhdr-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.mega-panel.active a{animation:fxhdr-rise 340ms var(--fx-ease-out) both;
  animation-delay:calc(var(--fxhdr-i,0) * 22ms + 60ms)}
.ifsm.ifsm-open .ifsm-inner>a,.ifsm.ifsm-open .ifsm-nav>li{animation:fxhdr-rise 380ms var(--fx-ease-out) both;
  animation-delay:calc(var(--fxhdr-i,0) * 35ms + 90ms)}

/* 5. Hidden: linger on the logo and a few embers lift off the metal. */
.fxhdr-logo{position:relative}
.fxhdr-embers{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.fxhdr-ember{position:absolute;width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:radial-gradient(circle,#fff6d8 0,var(--fx-gold) 35%,var(--fx-ember) 75%,rgba(230,73,37,0) 100%);
  box-shadow:0 0 8px 2px rgba(249,150,80,.75),0 0 2px rgba(255,240,200,.9);opacity:0;
  animation:fxhdr-lift var(--d,2200ms) cubic-bezier(.2,.6,.3,1) forwards;animation-delay:var(--w,0ms)}
@keyframes fxhdr-lift{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  12%{opacity:1}
  60%{opacity:.85}
  100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-64px)) scale(.35)}
}

@media (prefers-reduced-motion: reduce){
  #main-header .nav-link::after{transition:none}
  .fxhdr-heat-bar{transition:none}
  .mega-panel.active a,.ifsm.ifsm-open .ifsm-inner>a,.ifsm.ifsm-open .ifsm-nav>li{animation:none}
  .fxhdr-ember{display:none}
  /* Still, but still warm: the logo holds a faint glow when you linger. */
  .fxhdr-logo.fxhdr-warm img{filter:drop-shadow(0 0 10px rgba(230,73,37,.45))}
}