/* MatchApp homepage brand lockup.
   Surgical scope: only #home-brand-lockup on index.html.
   The mark is intentionally a little taller than the MatchApp TV name;
   Ai/iA is the largest element and is the only part that opens a fresh chat. */

#home-brand-lockup{
  display:flex!important;
  align-items:center!important;
  gap:.72rem!important;
  min-width:0;
  flex:0 1 auto!important;
}
#home-brand-lockup .home-brand-home{
  display:inline-flex;
  align-items:center;
  gap:.78rem;
  min-width:0;
  text-decoration:none;
  color:inherit;
}
#home-brand-lockup .brand-logo{
  width:4.4rem!important;
  height:4.4rem!important;
  flex:0 0 4.4rem!important;
  clip-path:circle(49% at 50% 50%)!important;
  border-radius:50%!important;
  filter:drop-shadow(0 0 13px rgba(229,193,88,.2));
  transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease!important;
}
#home-brand-lockup .home-brand-home:hover .brand-logo,
#home-brand-lockup .home-brand-home:focus-visible .brand-logo{
  transform:rotate(-4deg) scale(1.045);
  filter:drop-shadow(0 0 18px rgba(229,193,88,.34));
}

#home-brand-lockup .home-brand-name{
  display:inline-flex;
  align-items:baseline;
  gap:.22em;
  min-width:0;
  font-family:'Space Grotesk','Outfit','Inter',system-ui,sans-serif;
  font-size:clamp(2rem,2.55vw,2.55rem);
  line-height:.96;
  font-weight:700;
  letter-spacing:-.055em;
  white-space:nowrap;
  color:#fff9e8;
  text-shadow:0 3px 18px rgba(0,0,0,.32);
}
#home-brand-lockup .home-brand-match{
  background:linear-gradient(105deg,#fff 0%,#fff6cf 42%,#E5C158 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#home-brand-lockup .home-brand-tv{
  font-size:.62em;
  font-weight:600;
  letter-spacing:.045em;
  color:var(--gold,#E5C158);
  text-transform:uppercase;
}

#home-brand-lockup .home-ai-link{
  --ai-accent:#a8f0ff;
  position:relative;
  isolation:isolate;
  display:inline-grid;
  place-items:center;
  min-width:2.2em;
  min-height:1.52em;
  padding:.08em .28em .13em;
  border-radius:.55em;
  color:#f9f5ff;
  text-decoration:none;
  font-family:'Space Grotesk','Outfit','Inter',system-ui,sans-serif;
  font-size:clamp(2.55rem,3.15vw,3.15rem);
  line-height:.92;
  font-weight:700;
  letter-spacing:-.09em;
  text-shadow:0 0 16px rgba(168,240,255,.2),0 0 28px rgba(163,118,182,.2);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease;
}
#home-brand-lockup .home-ai-link::before{
  content:"";
  position:absolute;
  inset:-.08em -.10em;
  z-index:-1;
  border-radius:.6em;
  padding:1px;
  background:conic-gradient(from 10deg,
    transparent 0 18%,rgba(168,240,255,.82) 24%,rgba(229,193,88,.68) 33%,
    transparent 42% 66%,rgba(163,118,182,.75) 74%,transparent 84%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.82;
  animation:homeAiOrbit 4.8s linear infinite;
}
#home-brand-lockup .home-ai-link::after{
  content:"";
  position:absolute;
  width:.14em;
  height:.14em;
  top:-.02em;
  right:.08em;
  border-radius:50%;
  background:var(--ai-accent);
  box-shadow:0 0 .22em var(--ai-accent),0 0 .42em rgba(168,240,255,.78);
  animation:homeAiPulse 1.8s ease-in-out infinite;
}
#home-brand-lockup .home-ai-label{
  position:relative;
  display:inline-block;
  background:linear-gradient(105deg,#fff 0%,#dffcff 35%,#E5C158 62%,#c9a7e8 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:homeAiShimmer 3.6s ease-in-out infinite;
}
#home-brand-lockup .home-ai-pt{display:none}
html[lang="pt-BR"] #home-brand-lockup .home-ai-default{display:none}
html[lang="pt-BR"] #home-brand-lockup .home-ai-pt{display:inline-block}
#home-brand-lockup .home-ai-link:hover,
#home-brand-lockup .home-ai-link:focus-visible{
  transform:translateY(-2px) scale(1.045);
  filter:brightness(1.12);
}
#home-brand-lockup .home-ai-link:focus-visible{
  outline:3px solid var(--theme-second,#87eee0)!important;
  outline-offset:5px;
}
@keyframes homeAiOrbit{to{transform:rotate(360deg)}}
@keyframes homeAiPulse{0%,100%{opacity:.5;transform:scale(.72)}50%{opacity:1;transform:scale(1.18)}}
@keyframes homeAiShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Install remains a real call-to-action instead of blending into utility controls. */
html body .app-header .install-btn:not(.is-app-installed){
  border:1px solid rgba(255,245,195,.9)!important;
  background:linear-gradient(135deg,#8ef2e7 0%,#E5C158 58%,#fff0a8 100%)!important;
  color:#171020!important;
  font-weight:900!important;
  box-shadow:0 5px 18px rgba(229,193,88,.24),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
html body .app-header .install-btn:not(.is-app-installed):hover,
html body .app-header .install-btn:not(.is-app-installed):focus-visible{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
html body .app-header .install-btn.is-app-installed{
  background:rgba(255,255,255,.06)!important;
  color:#cfc6dd!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:none!important;
}

/* A brief nudge every few seconds, then stillness. It attracts attention
   without turning the AI shortcut into a constantly moving distraction. */
body .top-ai-launch:not(:hover):not(:focus-visible){
  animation:topAiAttention 9s ease-in-out 3s infinite;
}
@keyframes topAiAttention{
  0%,72%,100%{transform:translate3d(0,0,0) rotate(0)}
  74%{transform:translate3d(-2px,0,0) rotate(-.45deg)}
  76%{transform:translate3d(2px,0,0) rotate(.45deg)}
  78%{transform:translate3d(-1.5px,0,0) rotate(-.3deg)}
  80%{transform:translate3d(1.5px,0,0) rotate(.3deg)}
  82%{transform:translate3d(0,0,0) rotate(0)}
}

/* Tablet: preserve hierarchy without making the header consume the page. */
@media (max-width:1100px){
  #home-brand-lockup .brand-logo{
    width:4rem!important;height:4rem!important;flex-basis:4rem!important;
  }
  #home-brand-lockup .home-brand-name{font-size:clamp(1.72rem,3.7vw,2.15rem)}
  #home-brand-lockup .home-ai-link{font-size:clamp(2.15rem,4.6vw,2.7rem)}
}

/* Phones/tablets: the brand owns the left side; utilities become a
   compact right-side grid. The logo stays visibly larger than Ai/iA so the
   lettering inside the mark remains readable on a real phone. */
@media (max-width:900px){
  html body .app-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:.7rem!important;
  }
  html body .app-header #home-brand-lockup{
    width:auto!important;
    justify-content:flex-start!important;
    gap:.42rem!important;
    flex:0 1 auto!important;
  }
  html body .app-header>nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    align-items:center!important;
    justify-content:end!important;
    gap:.38rem!important;
    width:min(42vw,10.25rem)!important;
    min-width:8.7rem!important;
    flex:none!important;
  }
  html body .app-header>nav>.install-wrap,
  html body .app-header>nav>#nav-reg-btn,
  html body .app-header>nav>#nav-logout-btn{
    grid-column:1/-1;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  html body .app-header>nav>.install-wrap>.install-btn,
  html body .app-header>nav>.sound-toggle-btn,
  html body .app-header>nav>#quota-badge,
  html body .app-header>nav>#profile-link-tab,
  html body .app-header>nav>#lang-switcher-host{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    justify-content:center!important;
  }
  html body .app-header>nav>#lang-switcher-host select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
}

@media (max-width:720px){
  html body .app-header{
    padding-top:8px!important;
    padding-bottom:8px!important;
    row-gap:.45rem!important;
  }
  #home-brand-lockup .home-brand-home{gap:.42rem}
  #home-brand-lockup .brand-logo{
    width:4.35rem!important;
    height:4.35rem!important;
    flex-basis:4.35rem!important;
  }
  #home-brand-lockup .home-brand-name{
    font-size:clamp(1.05rem,4.35vw,1.35rem);
    letter-spacing:-.05em;
  }
  #home-brand-lockup .home-ai-link{
    font-size:clamp(1.35rem,5.2vw,1.65rem);
    min-width:1.85em;
    min-height:1.42em;
    padding:.06em .2em .1em;
  }
  html body .app-header>nav{
    width:min(43vw,9.5rem)!important;
    min-width:8.15rem!important;
    gap:.34rem!important;
  }
  html body .app-header>nav .sound-toggle-btn,
  html body .app-header>nav .install-btn,
  html body .app-header>nav #nav-reg-btn,
  html body .app-header>nav #nav-logout-btn{
    min-height:2.25rem!important;
    padding:6px 7px!important;
    font-size:10.5px!important;
  }
  html body .app-header>nav #lang-switcher-host select{
    min-height:2.25rem!important;
    padding:5px 4px!important;
    font-size:10px!important;
  }
}

@media (max-width:420px){
  #home-brand-lockup{gap:.3rem!important}
  #home-brand-lockup .home-brand-home{gap:.32rem}
  #home-brand-lockup .brand-logo{
    width:4rem!important;
    height:4rem!important;
    flex-basis:4rem!important;
  }
  #home-brand-lockup .home-brand-name{font-size:.98rem}
  #home-brand-lockup .home-ai-link{font-size:1.28rem;min-width:1.75em}
  html body .app-header>nav{width:8.35rem!important;min-width:8.35rem!important}
}

@media (max-width:350px){
  #home-brand-lockup .home-brand-name{display:none}
  #home-brand-lockup .brand-logo{
    width:3.85rem!important;
    height:3.85rem!important;
    flex-basis:3.85rem!important;
  }
  #home-brand-lockup .home-ai-link{font-size:1.28rem}
}

/* Desktop/TV browsers: scale the lockup with viewing distance, while leaving
   navigation and every non-brand element untouched. */
@media (min-width:1600px){
  #home-brand-lockup .brand-logo{
    width:5rem!important;height:5rem!important;flex-basis:5rem!important;
  }
  #home-brand-lockup .home-brand-name{font-size:2.8rem}
  #home-brand-lockup .home-ai-link{font-size:3.45rem}
}
@media (min-width:2560px){
  #home-brand-lockup .brand-logo{
    width:5.65rem!important;height:5.65rem!important;flex-basis:5.65rem!important;
  }
  #home-brand-lockup .home-brand-name{font-size:3.1rem}
  #home-brand-lockup .home-ai-link{font-size:3.85rem}
}
@media (prefers-reduced-motion:reduce){
  #home-brand-lockup .home-ai-link::before,
  #home-brand-lockup .home-ai-link::after,
  #home-brand-lockup .home-ai-label{animation:none!important}
  #home-brand-lockup .home-ai-link,
  #home-brand-lockup .brand-logo{transition:none!important}
  body .top-ai-launch{animation:none!important}
}