/* ============================================================
   BRAND MOMENTS — logo, splash, wordmark (assets/logos → public/brand)
   ============================================================ */

/* ---------- Launch splash ---------- */
.splash{
  position:absolute; inset:0; z-index:1000; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(170deg, var(--accent) 0%, var(--accent-deep) 55%, var(--accent-ink) 100%);
  transition:opacity var(--dur-3) var(--ease), visibility var(--dur-3);
}
.splash img{
  width:160px; height:160px; border-radius:38px; margin-bottom:14px;
  box-shadow:0 18px 40px rgba(60,10,40,.35), 0 0 0 1px rgba(255,255,255,.12);
  animation:splashPop .6s var(--ease-out) both;
}
.splash-word{
  font-family:var(--font-brand); font-style:italic; font-size:44px; line-height:1;
  color:var(--butter); letter-spacing:.01em; animation:fadeUp .5s var(--ease-out) .12s both;
}
.splash-tag{
  font-size:13px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.88); animation:fadeUp .5s var(--ease-out) .2s both;
}
.splash.gone{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes splashPop{ from{ opacity:0; transform:scale(.86) rotate(-4deg) } to{ opacity:1; transform:none } }

/* ---------- Brand mark in the map search bar ---------- */
.searchbar .brandmark{ width:30px; height:30px; border-radius:9px; flex:none; margin-left:-6px; }

/* ---------- Profile avatar ---------- */
.avatar{
  width:62px; height:62px; border-radius:50%; flex:none;
  background:linear-gradient(140deg, var(--accent), var(--accent-ink));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:32px; color:var(--butter);
}

@media (prefers-reduced-motion: reduce){
  .splash img, .splash-word, .splash-tag{ animation:none; }
}