/* Keep the same header geometry on Home and every other page. */
.app-header[data-home-header] {
  position:relative;
  z-index:1
}

/* The ball may enter above the frame without moving the shared header. */
.app-frame.brand-intro-active {
  overflow:visible
}

.brand-intro-pending .wordmark-line:first-child {
  color:var(--paper)
}

.wordmark-char {
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  transform-origin:center 90%
}

.wordmark-ink {
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
  background-repeat:no-repeat;
  text-shadow:none
}

.wordmark-x-part {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform-origin:center
}

.wordmark-x-top {
  clip-path:polygon(0 0,100% 0,100% 42%,68% 45%,74% 53%,42% 47%,32% 56%,0 51%)
}

.wordmark-x-bottom {
  clip-path:polygon(0 51%,32% 56%,42% 47%,74% 53%,68% 45%,100% 42%,100% 100%,0 100%)
}

.wordmark-baseline {
  display:inline-block;
  vertical-align:baseline;
  width:0;
  height:0
}

.brand-ball-stage {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:2;
  pointer-events:none;
  overflow:visible
}

.brand-ball {
  position:absolute;
  top:0;
  left:0;
  background:url('../../assets/brand/basketball-intro.webp') center/contain no-repeat;
  opacity:0;
  filter:drop-shadow(1px 2px 1.5px #00152555);
  will-change:transform
}

.brand-ball-shadow {
  position:absolute;
  top:0;
  left:0;
  width:18px;
  height:2px;
  border-radius:50%;
  background:#001525b3;
  opacity:0;
  filter:blur(.7px);
  will-change:transform,opacity
}

@container app (max-width:370px) {
  .wordmark { width:169px }
}

@media (prefers-reduced-motion:reduce) {
  .brand-ball-stage { display:none }
  .brand-intro-pending .wordmark-line:first-child { color:#79a9c2 }
}