/* FR Music V18 — floating logo orbit, balanced around the hero photo */

/* The full logo returns as an animated floating planet instead of a static lockup. */
.hero-logo-balloon{
  display:grid!important;
  position:absolute!important;
  width:clamp(104px,10vw,142px)!important;
  height:clamp(104px,10vw,142px)!important;
  right:-42px!important;
  bottom:46px!important;
  left:auto!important;
  top:auto!important;
  z-index:6!important;
  border:1px solid rgba(218,174,77,.38);
  box-shadow:
    0 24px 60px rgba(26,22,16,.24),
    0 0 0 10px rgba(245,239,230,.08),
    0 0 46px rgba(218,174,77,.12)!important;
  animation:frLogoFloat 6.4s ease-in-out infinite!important;
  transform-origin:center;
}
.hero-logo-balloon img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.hero-logo-balloon .orbit{
  inset:-14px!important;
  border-color:rgba(207,163,64,.42)!important;
  animation-duration:18s!important;
}
.hero-logo-balloon .orbit.second{
  inset:10px!important;
  opacity:.42!important;
  animation-duration:27s!important;
  animation-direction:reverse!important;
}
.hero-logo-balloon .orbit::before,
.hero-logo-balloon .orbit::after{
  font-size:11px!important;
  color:#d8ac4d!important;
  text-shadow:0 0 13px rgba(216,172,77,.55);
}
.hero-logo-balloon:hover{
  animation-play-state:paused!important;
  transform:translateY(-5px) rotate(-2deg) scale(1.045)!important;
}

@keyframes frLogoFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-1.2deg)}
  35%{transform:translate3d(-5px,-11px,0) rotate(1deg)}
  68%{transform:translate3d(4px,-5px,0) rotate(-.2deg)}
}

.footer.footer-brand{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px clamp(18px,4vw,56px)!important;
}
.footer-brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.footer-brand-lockup img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid rgba(214,170,71,.35)}
.footer-brand-lockup span{display:grid;gap:3px;line-height:1.05}
.footer-brand-lockup strong{font-size:15px}
.footer-brand-lockup small{font-size:10px;text-transform:uppercase;letter-spacing:.11em;opacity:.68}
.footer-brand-copy{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end}

html[data-theme="dark"] .footer-brand-lockup{color:#f5f2ea}
html[data-theme="dark"] .footer-brand-lockup img{box-shadow:0 8px 24px rgba(0,0,0,.32);border-color:rgba(226,192,107,.35)}
html[data-theme="dark"] .hero-logo-balloon{
  border-color:rgba(226,192,107,.45);
  box-shadow:0 25px 65px rgba(0,0,0,.48),0 0 0 9px rgba(226,192,107,.045),0 0 52px rgba(226,192,107,.16)!important;
}

@media (max-width:620px){
  /* Attach the floating logo to the lower-left edge of the photo.
     It remains visible but no longer covers the phone or competes with the title. */
  .hero-logo-balloon{
    width:72px!important;
    height:72px!important;
    left:-22px!important;
    right:auto!important;
    bottom:-17px!important;
    top:auto!important;
    border-width:1px!important;
    box-shadow:0 13px 30px rgba(23,20,15,.25),0 0 0 7px rgba(245,239,230,.12),0 0 30px rgba(218,174,77,.14)!important;
    animation-duration:5.6s!important;
  }
  .hero-logo-balloon .orbit{inset:-9px!important}
  .hero-logo-balloon .orbit.second{inset:7px!important}
  .hero-logo-balloon .orbit::before,
  .hero-logo-balloon .orbit::after{font-size:8px!important}
  .footer.footer-brand{align-items:flex-start;flex-direction:column;padding:20px 16px!important}
  .footer-brand-copy{justify-content:flex-start;gap:6px;flex-direction:column;align-items:flex-start}
  .footer-brand-lockup img{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .hero-logo-balloon,.hero-logo-balloon .orbit{animation:none!important}
}