/* Fixed red/blue disk; the white letters fall like a split-flap display. */
.site-logo {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, #E30613 50%, #004170 50%);
}
.site-logo > img {
  display: block;
  width: 100%;
  height: 100%;
}
.logo-letter { display: none; }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .site-logo > img { visibility: hidden; }
  .logo-letter {
    display: block;
    position: absolute;
    top: 27.777778%;
    width: 35.925926%;
    height: 44.444444%;
    perspective: 400px;
    --flap-delay: 0s;
  }
  .logo-letter--s { left: 12.222222%; --letter-mask: url("/img/sportsical-logo-s.svg"); }
  .logo-letter--c { left: 51.851852%; --letter-mask: url("/img/sportsical-logo-c.svg"); --flap-delay: 0.12s; }
  .logo-half {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #fff;
    -webkit-mask-image: var(--letter-mask);
    mask-image: var(--letter-mask);
    -webkit-mask-size: 100% 200%;
    mask-size: 100% 200%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-duration: 5s;
    animation-delay: var(--flap-delay);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .logo-half--top {
    top: 0;
    -webkit-mask-position: center top;
    mask-position: center top;
    transform-origin: center bottom;
  }
  .logo-half--bottom {
    bottom: 0;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    transform-origin: center top;
  }
  .logo-base--top { animation-name: sportsical-flap-top-base; animation-timing-function: linear; }
  .logo-base--bottom { animation-name: sportsical-flap-bottom-base; animation-timing-function: linear; }
  .logo-fall--top { animation-name: sportsical-flap-top; z-index: 2; }
  .logo-fall--bottom { animation-name: sportsical-flap-bottom; z-index: 2; }
}
@keyframes sportsical-flap-top-base {
  0%, 7% { opacity: 0; }
  9.28%, 100% { opacity: 1; }
}
@keyframes sportsical-flap-bottom-base {
  0%, 7.68% { opacity: 1; }
  10.08%, 16.64% { opacity: 0; }
  18.56%, 100% { opacity: 1; }
}
@keyframes sportsical-flap-top {
  0% { transform: rotateX(0deg); opacity: 1; animation-timing-function: cubic-bezier(.45,0,.85,.45); }
  7.68% { transform: rotateX(-90deg); opacity: 1; }
  7.6864%, 100% { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes sportsical-flap-bottom {
  0%, 7.68% { transform: rotateX(90deg); opacity: 0; }
  7.6864% { transform: rotateX(90deg); opacity: 1; animation-timing-function: cubic-bezier(.12,.55,.3,1); }
  16.64% { transform: rotateX(-6deg); opacity: 1; animation-timing-function: ease-out; }
  18.56% { transform: rotateX(0deg); opacity: 1; }
  18.5664%, 100% { transform: rotateX(0deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-logo-motion="play"]) .logo-half { animation: none; }
  :root:not([data-logo-motion="play"]) .logo-fall--top,
  :root:not([data-logo-motion="play"]) .logo-fall--bottom { display: none; }
}
/* Shared SportsiCal branding. */
.brand-badge--logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  animation: none;
}
.brand-badge--logo img,
.site-brand img {
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
}
.site-header {
  margin-bottom: 24px;
}
.brand-eyebrow--name {
  font-size: 20px;
  letter-spacing: -0.04em;
  text-transform: none;
  line-height: 1.1;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .site-brand:hover { opacity: 0.85; text-decoration: none; }
}
.site-brand:active { opacity: 0.7; }