/* Shared logo blend rules for all pages */

/* Keep logo wrappers visually transparent without changing layout geometry */
.site-logo,
.logo,
.nav-logo,
nav > a:first-child,
header .logo-wrap,
.logo-splash,
.logo-splash-image,
.hero-top-right-video {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.site-logo:hover,
.site-logo:focus,
.nav-logo:hover,
.nav-logo:focus,
nav > a:first-child:hover,
nav > a:first-child:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Animated hero logo/video blend - scoped to hero asset only */
.hero-top-right-video {
  isolation: isolate;
  overflow: visible !important;
}

.hero-top-right-video::before,
.hero-top-right-video::after {
  display: none !important;
}

.hero-top-right-video .hero-top-video-shot,
video[src*="storywell"] {
  background: transparent !important;
  display: block;
  mix-blend-mode: screen !important;
  -webkit-mask-image: radial-gradient(ellipse 92% 86% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 86% at 50% 50%, #000 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-filter: none;
  filter: none;
}

/* Static splash logo blend */
.logo-splash-image {
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 80% at 50% 50%, #000 58%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Mobile fallback: avoid blend artifacts while preserving feathered edges */
@media (max-width: 900px) {
  .hero-top-right-video .hero-top-video-shot,
  video[src*="storywell"] {
    mix-blend-mode: normal !important;
  }
}