/* The greeting keeps its layout while the launch wordmark occupies the same space. */
/* This display-only layer spans behind the avatar and notification controls. */
#s-home .home-brand-slot { position: relative; pointer-events: none; }
#s-home .home-brand-logo {
  position: absolute;
  inset: 0 108px 0 0;
  display: flex;
  align-items: center;
  color: #c1c6d0;
  color: oklch(82% .014 265);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html[data-theme="light"] #s-home .home-brand-logo {
  color: #424752;
  color: oklch(40% .018 265);
}
#s-home .home-brand-logo svg {
  display: block;
  width: 112px;
  height: auto;
  max-width: 100%;
  overflow: visible;
  flex: 0 1 112px;
}
#s-home .home-brand-slot[data-intro="playing"] .home-brand-logo {
  opacity: 1;
  visibility: visible;
}
#s-home .home-brand-slot[data-intro="playing"] .home-brand-greeting { opacity: 0; }
#s-home .home-brand-slot[data-intro="revealing"] .home-brand-logo {
  visibility: visible;
  animation: home-brand-away 380ms cubic-bezier(.22,1,.36,1) both;
}
#s-home .home-brand-slot[data-intro="revealing"] .home-greeting-line {
  animation: home-greeting-in 560ms cubic-bezier(.22,1,.36,1) 70ms both;
}
#s-home .home-brand-slot[data-intro="revealing"] .home-date {
  animation: home-greeting-in 560ms cubic-bezier(.22,1,.36,1) 130ms both;
}
.home-brand-logo .hub-letter-u-tilt { transform-origin: 55px 60px; transform: rotate(-16deg); }
.home-brand-logo .hub-dot { transform-origin: 410px 148px; }
[data-intro="playing"] .hub-letter-h { animation: hub-intro-h 2s ease-in-out both; }
[data-intro="playing"] .hub-letter-u-move { animation: hub-intro-u 2s ease-in-out both; }
[data-intro="playing"] .hub-letter-u-tilt { animation: hub-intro-tilt 2s ease-in-out both; }
[data-intro="playing"] .hub-letter-b { animation: hub-intro-b 2s ease-in-out both; }
[data-intro="playing"] .hub-dot { animation: hub-intro-dot 2s ease-in-out both; }
@keyframes hub-intro-h {
  0%,11%,65%,100% { transform: translateX(0); }
  22.5% { transform: translateX(17px); }
  27.5% { transform: translateX(8px); }
  32.5% { transform: translateX(5px); }
  42% { transform: translateX(-6px); }
  52% { transform: translateX(2px); }
}
@keyframes hub-intro-u {
  0%,22.5%,65%,100% { transform: translate(0,0); }
  27.5% { transform: translate(12px,-2px); }
  32.5% { transform: translate(9px,-5px); }
  42% { transform: translate(-3px,-1px); }
  52% { transform: translate(1px,0); }
}
@keyframes hub-intro-tilt {
  0%,22.5% { transform: rotate(0); }
  27.5% { transform: rotate(-8deg); }
  32.5% { transform: rotate(-23deg); }
  42% { transform: rotate(-10deg); }
  52% { transform: rotate(-19deg); }
  65%,100% { transform: rotate(-16deg); }
}
@keyframes hub-intro-b {
  0%,27.5%,65%,100% { transform: translateX(0); }
  32.5% { transform: translateX(11px); }
  42% { transform: translateX(18px); }
  52% { transform: translateX(-2px); }
}
@keyframes hub-intro-dot {
  0%,71.5% { transform: scale(0); }
  82% { transform: scale(1.13); }
  88.5% { transform: scale(.97); }
  92.5%,100% { transform: scale(1); }
}
@keyframes home-brand-away {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}
@keyframes home-greeting-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #s-home .home-brand-logo { display: none; }
  #s-home .home-brand-slot .home-brand-greeting { opacity: 1; }
  #s-home .home-brand-slot .home-greeting-line,
  #s-home .home-brand-slot .home-date { animation: none; }
}