/* myBudgie v1.1.26: Premium Hero Brand Composition & Ambient Internal Motion */

.topbar > div:first-of-type{
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  inline-size:min(100%,680px)!important;
  margin-inline:auto!important;
  transform:translateY(-2px)!important;
}

.hero-brand-lockup{
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(6px,1.45vw,10px)!important;
  margin-inline:auto!important;
  transform:translateY(1px)!important;
}

.hero-brand-budgie{
  block-size:clamp(40px,8.3vw,58px)!important;
  max-inline-size:clamp(44px,9.2vw,64px)!important;
  transform:translateY(2px)!important;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.2))!important;
}

.hero-brand-name,
.topbar .subtitle{
  --brand-base-a:rgba(34,49,62,.94);
  --brand-base-b:rgba(58,76,90,.9);
  --brand-soft:color-mix(in srgb,var(--accent),var(--brand-base-a) 72%);
  --brand-warm:color-mix(in srgb,var(--accent),#a7b7c2 34%);
  --brand-light:color-mix(in srgb,var(--accent),#d6e2ea 44%);
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  text-rendering:geometricPrecision;
}

.hero-brand-name{
  font-size:clamp(34px,8.6vw,60px)!important;
  line-height:.94!important;
  background-image:
    radial-gradient(120% 82% at 18% 28%, color-mix(in srgb,var(--brand-light),transparent 58%) 0 20%, transparent 46%),
    radial-gradient(92% 78% at 78% 64%, color-mix(in srgb,var(--brand-soft),transparent 52%) 0 18%, transparent 48%),
    radial-gradient(70% 58% at 46% 42%, color-mix(in srgb,var(--brand-warm),transparent 62%) 0 16%, transparent 42%),
    linear-gradient(112deg, var(--brand-base-a) 0%, var(--brand-base-b) 34%, color-mix(in srgb,var(--brand-soft),var(--brand-base-b) 42%) 58%, var(--brand-base-a) 100%)!important;
  background-size:218% 168%, 190% 156%, 150% 132%, 100% 100%!important;
  background-position:14% 38%, 82% 54%, 46% 58%, 0 0!important;
  animation:brandAmbientPrimary 29s cubic-bezier(.42,0,.28,1) infinite!important;
  text-shadow:0 1px 2px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.2)!important;
}

.topbar .subtitle{
  display:block!important;
  inline-size:fit-content!important;
  max-inline-size:min(31rem,calc(100vw - 46px))!important;
  margin-block-start:clamp(6px,1.1vw,10px)!important;
  margin-inline:auto!important;
  line-height:1.32!important;
  text-align:center!important;
  background-image:
    radial-gradient(130% 92% at 72% 36%, color-mix(in srgb,var(--brand-light),transparent 70%) 0 18%, transparent 50%),
    radial-gradient(105% 86% at 22% 68%, color-mix(in srgb,var(--brand-soft),transparent 66%) 0 16%, transparent 48%),
    radial-gradient(82% 72% at 48% 44%, color-mix(in srgb,var(--brand-warm),transparent 74%) 0 15%, transparent 44%),
    linear-gradient(112deg, var(--brand-base-a) 0%, var(--brand-base-b) 34%, color-mix(in srgb,var(--brand-soft),var(--brand-base-b) 50%) 58%, var(--brand-base-a) 100%)!important;
  background-size:246% 188%, 218% 172%, 172% 148%, 100% 100%!important;
  background-position:78% 42%, 18% 64%, 52% 46%, 0 0!important;
  animation:brandAmbientSubtitle 41s cubic-bezier(.38,0,.27,1) infinite!important;
  text-shadow:0 1px 2px rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.16)!important;
}

.topbar .kicker{
  justify-self:center!important;
  margin-block-start:clamp(6px,1vw,9px)!important;
  font-size:clamp(12px,2.8vw,14px)!important;
  opacity:.82!important;
  text-shadow:0 1px 5px rgba(0,0,0,.18)!important;
}

html[data-theme="dark"] .hero-brand-name,
html[data-theme="dark"] .topbar .subtitle{
  --brand-base-a:rgba(192,204,215,.9);
  --brand-base-b:rgba(136,153,166,.88);
  --brand-soft:color-mix(in srgb,var(--accent),#9fb2bd 34%);
  --brand-warm:color-mix(in srgb,var(--accent),#cbd8df 28%);
  --brand-light:color-mix(in srgb,var(--accent),#e2ebef 24%);
}

html[data-theme="light"] .hero-brand-name,
html[data-theme="light"] .topbar .subtitle{
  --brand-base-a:rgba(20,36,50,.96);
  --brand-base-b:rgba(48,68,82,.92);
  --brand-soft:color-mix(in srgb,var(--accent),#27485a 42%);
  --brand-warm:color-mix(in srgb,var(--accent),#5f7888 24%);
  --brand-light:color-mix(in srgb,var(--accent),#93a8b4 18%);
  text-shadow:0 1px 2px rgba(255,255,255,.24),0 3px 8px rgba(0,0,0,.1)!important;
}

html[data-theme="dark"] .hero-brand-name,
html[data-theme="light"] .hero-brand-name{
  background-image:
    radial-gradient(120% 82% at 18% 28%, color-mix(in srgb,var(--brand-light),transparent 58%) 0 20%, transparent 46%),
    radial-gradient(92% 78% at 78% 64%, color-mix(in srgb,var(--brand-soft),transparent 52%) 0 18%, transparent 48%),
    radial-gradient(70% 58% at 46% 42%, color-mix(in srgb,var(--brand-warm),transparent 62%) 0 16%, transparent 42%),
    linear-gradient(112deg, var(--brand-base-a) 0%, var(--brand-base-b) 34%, color-mix(in srgb,var(--brand-soft),var(--brand-base-b) 42%) 58%, var(--brand-base-a) 100%)!important;
  background-size:218% 168%, 190% 156%, 150% 132%, 100% 100%!important;
  background-position:14% 38%, 82% 54%, 46% 58%, 0 0!important;
  animation:brandAmbientPrimary 29s cubic-bezier(.42,0,.28,1) infinite!important;
}

html[data-theme="dark"] .topbar .subtitle,
html[data-theme="light"] .topbar .subtitle{
  background-image:
    radial-gradient(130% 92% at 72% 36%, color-mix(in srgb,var(--brand-light),transparent 70%) 0 18%, transparent 50%),
    radial-gradient(105% 86% at 22% 68%, color-mix(in srgb,var(--brand-soft),transparent 66%) 0 16%, transparent 48%),
    radial-gradient(82% 72% at 48% 44%, color-mix(in srgb,var(--brand-warm),transparent 74%) 0 15%, transparent 44%),
    linear-gradient(112deg, var(--brand-base-a) 0%, var(--brand-base-b) 34%, color-mix(in srgb,var(--brand-soft),var(--brand-base-b) 50%) 58%, var(--brand-base-a) 100%)!important;
  background-size:246% 188%, 218% 172%, 172% 148%, 100% 100%!important;
  background-position:78% 42%, 18% 64%, 52% 46%, 0 0!important;
  animation:brandAmbientSubtitle 41s cubic-bezier(.38,0,.27,1) infinite!important;
}

@keyframes brandAmbientPrimary{
  0%{background-position:14% 38%,82% 54%,46% 58%,0 0;background-size:218% 168%,190% 156%,150% 132%,100% 100%}
  19%{background-position:32% 48%,68% 39%,54% 47%,0 0;background-size:229% 176%,182% 162%,158% 138%,100% 100%}
  43%{background-position:24% 63%,76% 66%,37% 42%,0 0;background-size:211% 160%,202% 148%,146% 142%,100% 100%}
  67%{background-position:44% 35%,58% 58%,62% 61%,0 0;background-size:234% 170%,188% 170%,154% 128%,100% 100%}
  100%{background-position:14% 38%,82% 54%,46% 58%,0 0;background-size:218% 168%,190% 156%,150% 132%,100% 100%}
}

@keyframes brandAmbientSubtitle{
  0%{background-position:78% 42%,18% 64%,52% 46%,0 0;background-size:246% 188%,218% 172%,172% 148%,100% 100%}
  23%{background-position:66% 55%,31% 51%,44% 61%,0 0;background-size:236% 178%,226% 184%,166% 154%,100% 100%}
  51%{background-position:84% 61%,24% 36%,59% 38%,0 0;background-size:254% 196%,208% 166%,180% 142%,100% 100%}
  74%{background-position:70% 33%,12% 58%,49% 53%,0 0;background-size:240% 184%,232% 176%,169% 151%,100% 100%}
  100%{background-position:78% 42%,18% 64%,52% 46%,0 0;background-size:246% 188%,218% 172%,172% 148%,100% 100%}
}

@media (prefers-reduced-motion:reduce){
  .hero-brand-name,
  .topbar .subtitle{
    animation:none!important;
  }
  .hero-brand-name{
    background-position:28% 48%,72% 52%,48% 52%,0 0!important;
  }
  .topbar .subtitle{
    background-position:72% 45%,24% 58%,52% 48%,0 0!important;
  }
}

@media (max-width:460px){
  .topbar > div:first-of-type{
    transform:translateY(0)!important;
  }
  .hero-brand-lockup{
    gap:6px!important;
  }
  .hero-brand-budgie{
    block-size:clamp(37px,10vw,44px)!important;
    max-inline-size:clamp(39px,10.8vw,48px)!important;
  }
  .hero-brand-name{
    font-size:clamp(31px,10vw,40px)!important;
    max-inline-size:calc(100vw - 112px)!important;
  }
  .topbar .subtitle{
    max-inline-size:calc(100vw - 42px)!important;
    font-size:clamp(12px,3.35vw,13px)!important;
    margin-block-start:5px!important;
  }
}

@media (orientation:landscape) and (max-height:540px){
  .topbar > div:first-of-type{
    transform:translateY(-1px)!important;
  }
  .hero-brand-budgie{
    block-size:38px!important;
    max-inline-size:42px!important;
  }
  .hero-brand-name{
    font-size:36px!important;
  }
  .topbar .subtitle{
    max-inline-size:28rem!important;
    margin-block-start:4px!important;
  }
  .topbar .kicker{
    margin-block-start:4px!important;
  }
}