/* myBudgie v1.1.23: compact Hero branding and timed internal lighting */
.app-header{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
}
.app-header-brand,
.app-header-bird{
  display:none!important;
}
.hero-brand-lockup{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(7px,1.8vw,12px)!important;
  min-height:auto!important;
  margin:0!important;
  max-inline-size:100%!important;
  direction:rtl!important;
}
.topbar h1.hero-brand-lockup::after{
  content:none!important;
}
.hero-brand-lockup .hero-wordmark{
  display:none!important;
}
.hero-brand-budgie{
  flex:0 0 auto;
  inline-size:auto;
  block-size:clamp(42px,9vw,62px);
  max-inline-size:clamp(46px,10vw,68px);
  object-fit:contain;
  object-position:center;
  transform:translateY(1px);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}
.hero-brand-name{
  display:inline-block;
  flex:0 1 auto;
  min-inline-size:0;
  max-inline-size:calc(100vw - 132px);
  white-space:nowrap;
  overflow:visible;
  font-family:"Arial Rounded MT Bold","Nunito",Arial,sans-serif;
  font-size:clamp(36px,9vw,64px);
  font-weight:900;
  line-height:.96;
  letter-spacing:0;
  color:rgba(255,255,255,.96);
  background:
    linear-gradient(105deg,
      color-mix(in srgb,#ffffff,var(--accent) 8%) 0%,
      color-mix(in srgb,#ffffff,var(--accent) 8%) 28%,
      color-mix(in srgb,var(--accent),#ffffff 62%) 43%,
      color-mix(in srgb,#f5fbff,var(--accent) 18%) 50%,
      color-mix(in srgb,var(--accent),#ffffff 54%) 57%,
      color-mix(in srgb,#ffffff,var(--accent) 8%) 72%,
      color-mix(in srgb,#ffffff,var(--accent) 8%) 100%);
  background-size:260% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.24);
  animation:brandPulseRest 10s cubic-bezier(.25,.1,.2,1) infinite;
}
html[data-theme="light"] .hero-brand-name{
  color:#133247;
  background:
    linear-gradient(105deg,
      #123144 0%,
      #123144 30%,
      color-mix(in srgb,var(--accent),#244b61 40%) 45%,
      #315d72 50%,
      color-mix(in srgb,var(--accent),#123144 28%) 57%,
      #123144 72%,
      #123144 100%);
  background-size:240% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 2px 8px rgba(10,28,42,.13);
}
.topbar .subtitle{
  display:block!important;
  max-inline-size:min(34rem,100%)!important;
  margin-block-start:clamp(4px,.8vw,8px)!important;
  color:rgba(255,255,255,.92)!important;
  background:
    linear-gradient(105deg,
      currentColor 0%,
      currentColor 32%,
      color-mix(in srgb,currentColor,var(--accent) 24%) 46%,
      color-mix(in srgb,currentColor,#ffffff 10%) 52%,
      color-mix(in srgb,currentColor,var(--accent) 18%) 58%,
      currentColor 72%,
      currentColor 100%);
  background-size:220% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:brandPulseRest 10s cubic-bezier(.25,.1,.2,1) infinite;
  animation-delay:160ms;
}
html[data-theme="light"] .topbar .subtitle{
  color:rgba(255,255,255,.94)!important;
}
@keyframes brandPulseRest{
  0%{background-position:100% 50%}
  6%{background-position:76% 50%}
  14%{background-position:42% 50%}
  20%{background-position:0% 50%}
  32%{background-position:100% 50%}
  100%{background-position:100% 50%}
}
@media(prefers-reduced-motion:reduce){
  .hero-brand-name,
  .topbar .subtitle{
    animation:none!important;
    background-position:62% 50%!important;
  }
}
@media(max-width:460px){
  .topbar>div:first-of-type{
    gap:5px!important;
  }
  .hero-brand-lockup{
    gap:7px!important;
  }
  .hero-brand-budgie{
    block-size:clamp(38px,10.2vw,46px);
    max-inline-size:clamp(40px,11vw,50px);
  }
  .hero-brand-name{
    font-size:clamp(32px,10.4vw,42px);
    max-inline-size:calc(100vw - 122px);
  }
}
@media(orientation:landscape) and (max-height:540px){
  .hero-brand-budgie{
    block-size:40px;
    max-inline-size:44px;
  }
  .hero-brand-name{
    font-size:38px;
  }
  .topbar .subtitle{
    max-inline-size:30rem!important;
  }
}
