.winstongfx-custom-video {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.winstongfx-custom-video video {
  width: 100%;
  height: 100%;
  display: block;
}

.winstongfx-custom-player {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.winstongfx-play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.winstongfx-play-overlay__shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  line-height: 0;
}

.winstongfx-play-overlay__icon {
  display: block;
  width: var(--winstongfx-overlay-icon-size, 44px);
  height: var(--winstongfx-overlay-icon-size, 44px);
  line-height: 0;
}

.winstongfx-play-overlay:focus-visible .winstongfx-play-overlay__shape {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.winstongfx-custom-player video::-webkit-media-controls-start-playback-button,
.winstongfx-custom-player video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

.winstongfx-custom-player.has-play-overlay video::-webkit-media-controls-play-button {
  display: none !important;
}

.winstongfx-custom-player.overlay-played .winstongfx-play-overlay,
.winstongfx-custom-player[data-overlay-played="true"] .winstongfx-play-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.winstongfx-custom-player.overlay-played .winstongfx-loading-overlay,
.winstongfx-custom-player[data-video-loading="false"] .winstongfx-loading-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.winstongfx-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: var(--winstongfx-loading-backdrop, rgba(0, 0, 0, 0.45));
  transition: opacity 0.2s ease, visibility 0.2s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

.winstongfx-custom-player[data-video-loading="true"] .winstongfx-loading-overlay {
  opacity: 1;
  visibility: visible;
}

.winstongfx-loading-indicator__inner {
  width: calc(var(--winstongfx-loading-size, 64px) * var(--winstongfx-loading-scale, 1));
  height: calc(var(--winstongfx-loading-size, 64px) * var(--winstongfx-loading-scale, 1));
  display: grid;
  place-items: center;
  opacity: var(--winstongfx-loading-opacity, 1);
}

.winstongfx-loading-visual {
  width: 100%;
  height: 100%;
  color: var(--winstongfx-loading-primary, #8acca1);
  position: relative;
}

.winstongfx-loading-visual.is-spinner span {
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  border-radius: 999px;
  border: 4px solid var(--winstongfx-loading-secondary, rgba(255, 255, 255, 0.35));
  border-top-color: var(--winstongfx-loading-primary, #8acca1);
  animation: winstongfx-spin 1s linear infinite;
}

.winstongfx-loading-visual.is-pulse {
  display: flex;
  align-items: center;
  justify-content: center;
}

.winstongfx-loading-visual.is-pulse .dot {
  width: 55%;
  height: 55%;
  display: block;
  border-radius: 999px;
  position: absolute;
  background: var(--winstongfx-loading-primary, #8acca1);
  opacity: 0.8;
  animation: winstongfx-pulse 1.4s ease-in-out infinite;
}

.winstongfx-loading-visual.is-pulse .dot-2 {
  animation-delay: -0.5s;
  background: var(--winstongfx-loading-secondary, rgba(255, 255, 255, 0.75));
}

.winstongfx-loading-visual.is-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 6%;
}

.winstongfx-loading-visual.is-bars span {
  display: block;
  width: 100%;
  height: 40%;
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    var(--winstongfx-loading-primary, #8acca1),
    var(--winstongfx-loading-secondary, #252a36)
  );
  animation: winstongfx-bars 0.9s ease-in-out infinite;
  transform-origin: center bottom;
}

.winstongfx-loading-visual.is-bars span:nth-child(2) {
  animation-delay: -0.22s;
}

.winstongfx-loading-visual.is-bars span:nth-child(3) {
  animation-delay: -0.44s;
}

.winstongfx-loading-visual.is-rings {
  position: relative;
  display: grid;
  place-items: center;
}

.winstongfx-loading-visual.is-rings .ring {
  position: absolute;
  border-radius: 999px;
  border-style: solid;
  border-color: transparent;
  box-sizing: border-box;
}

.winstongfx-loading-visual.is-rings .ring.outer {
  width: 100%;
  height: 100%;
  border-width: 8px;
  border-top-color: var(--winstongfx-loading-primary, #8acca1);
  border-right-color: var(--winstongfx-loading-secondary, rgba(255, 255, 255, 0.55));
  animation: winstongfx-spin 1.25s linear infinite;
}

.winstongfx-loading-visual.is-rings .ring.inner {
  width: 65%;
  height: 65%;
  border-width: 8px;
  border-bottom-color: var(--winstongfx-loading-secondary, rgba(255, 255, 255, 0.55));
  border-left-color: var(--winstongfx-loading-primary, #8acca1);
  animation: winstongfx-spin-reverse 1s linear infinite;
}

.winstongfx-loading-visual.is-layered-arc {
  position: relative;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
}

.winstongfx-loading-visual.is-layered-arc .arc-band {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(
    --winstongfx-arc-gradient,
    conic-gradient(
      var(--winstongfx-loading-secondary, #252a36) 0deg var(--winstongfx-arc-length-1, 240deg),
      transparent var(--winstongfx-arc-length-1, 240deg) 360deg
    )
  );
  mask-image: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--winstongfx-loading-arc-thickness, 48px) - 1px),
    #000 calc(100% - var(--winstongfx-loading-arc-thickness, 48px)),
    #000 100%
  );
  -webkit-mask-image: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--winstongfx-loading-arc-thickness, 48px) - 1px),
    #000 calc(100% - var(--winstongfx-loading-arc-thickness, 48px)),
    #000 100%
  );
  animation: winstongfx-arc-band-spin 2.4s infinite;
  animation-timing-function: var(--winstongfx-loading-ease-in, var(--winstongfx-loading-ease, cubic-bezier(0.52, 0.12, 0.18, 0.94)));
  transform-origin: 50% 50%;
}

.winstongfx-loading-visual.is-layered-arc .arc-band-2 {
  background: var(
    --winstongfx-arc-gradient,
    conic-gradient(
      var(--winstongfx-loading-primary, #8acca1) 0deg var(--winstongfx-arc-length-2, 225deg),
      transparent var(--winstongfx-arc-length-2, 225deg) 360deg
    )
  );
  opacity: 1;
  animation-duration: 2.7s;
  animation-delay: -0.35s;
  animation-timing-function: var(--winstongfx-loading-ease-out, var(--winstongfx-loading-ease, cubic-bezier(0.52, 0.12, 0.18, 0.94)));
}

.winstongfx-loading-visual.is-layered-arc .arc-band-3 {
  background: var(
    --winstongfx-arc-gradient,
    conic-gradient(
      rgba(255, 255, 255, 0.7) 0deg var(--winstongfx-arc-length-3, 215deg),
      transparent var(--winstongfx-arc-length-3, 215deg) 360deg
    )
  );
  opacity: 1;
  animation-duration: 3s;
  animation-delay: -0.7s;
  animation-timing-function: var(--winstongfx-loading-ease-in, var(--winstongfx-loading-ease, cubic-bezier(0.52, 0.12, 0.18, 0.94)));
}

.winstongfx-loading-visual.is-layered-arc .arc-band-4 {
  background: var(
    --winstongfx-arc-gradient,
    conic-gradient(
      rgba(255, 255, 255, 0.45) 0deg var(--winstongfx-arc-length-4, 205deg),
      transparent var(--winstongfx-arc-length-4, 205deg) 360deg
    )
  );
  opacity: 1;
  animation-duration: 3.4s;
  animation-delay: -1s;
  animation-timing-function: var(--winstongfx-loading-ease-out, var(--winstongfx-loading-ease, cubic-bezier(0.52, 0.12, 0.18, 0.94)));
}

/* Brand bars (uses brand primary/secondary palette) */
.winstongfx-loading-visual.is-brand-bars {
  width: 100%;
  height: 12px;
  --_bar: no-repeat linear-gradient(
    to bottom,
    var(--winstongfx-loading-secondary, #252a36),
    var(--winstongfx-loading-primary, #8acca1)
  );
  background: var(--_bar), var(--_bar), var(--_bar), var(--_bar);
  background-size: 24% 100%;
  animation: winstongfx-brand-bars 1.2s infinite ease-in-out;
  border-radius: 999px;
  overflow: hidden;
}

@keyframes winstongfx-brand-bars {
  0%,
  70%,
  100% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 100%;
  }
  16% {
    background-position:
      calc(0 * 100% / 3) 0%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 100%;
  }
  32% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 0%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 100%;
  }
  48% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 0%,
      calc(3 * 100% / 3) 100%;
  }
  64% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 0%;
  }
}

/* Dual orbiting orbs (two-arc feel) */
.winstongfx-loading-visual.is-dual-orb {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.winstongfx-loading-visual.is-dual-orb::before,
.winstongfx-loading-visual.is-dual-orb::after {
  content: '';
  position: absolute;
  width: 62%;
  height: 62%;
  border-radius: 999px;
  border: calc(var(--winstongfx-loading-arc-thickness, 18px) / 3) solid
    var(--winstongfx-loading-primary, #8acca1);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.12);
  transform-origin: center;
  animation: winstongfx-dual-orb-spin 1.2s infinite;
}

.winstongfx-loading-visual.is-dual-orb::after {
  width: 78%;
  height: 78%;
  border-color: var(--winstongfx-loading-secondary, #252a36);
  animation-duration: 1.6s;
  animation-direction: reverse;
  opacity: 0.82;
}

@keyframes winstongfx-dual-orb-spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(190deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Steps bars */
.winstongfx-loading-visual.is-brand-steps {
  height: 12px;
  width: 100%;
  --_bar: no-repeat linear-gradient(
    to bottom,
    var(--winstongfx-loading-secondary, #252a36),
    var(--winstongfx-loading-primary, #8acca1)
  );
  background: var(--_bar), var(--_bar), var(--_bar), var(--_bar);
  background-size: 26% 4px;
  animation: winstongfx-steps 1s infinite;
  border-radius: 999px;
}

@keyframes winstongfx-steps {
  0%,
  70%,
  100% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 100%;
  }
  14% {
    background-position:
      calc(0 * 100% / 3) 0%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 100%;
  }
  28% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 0%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 100%;
  }
  42% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 0%,
      calc(3 * 100% / 3) 100%;
  }
  56% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 0%;
  }
}

/* Wave bars */
.winstongfx-loading-visual.is-brand-wave {
  height: 12px;
  width: 100%;
  --_bar: no-repeat linear-gradient(
    to bottom,
    var(--winstongfx-loading-secondary, #252a36),
    var(--winstongfx-loading-primary, #8acca1)
  );
  background: var(--_bar), var(--_bar), var(--_bar), var(--_bar);
  background-size: 26% 4px;
  animation: winstongfx-wave 1s infinite;
  border-radius: 999px;
}

@keyframes winstongfx-wave {
  0%,
  70%,
  100% {
    background-position:
      calc(0 * 100% / 3) 50%,
      calc(1 * 100% / 3) 50%,
      calc(2 * 100% / 3) 50%,
      calc(3 * 100% / 3) 50%;
  }
  23.33% {
    background-position:
      calc(0 * 100% / 3) 0%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 0%,
      calc(3 * 100% / 3) 100%;
  }
  46.67% {
    background-position:
      calc(1 * 100% / 3) 0%,
      calc(0 * 100% / 3) 100%,
      calc(3 * 100% / 3) 0%,
      calc(2 * 100% / 3) 100%;
  }
  69.99% {
    background-position:
      calc(1 * 100% / 3) 50%,
      calc(0 * 100% / 3) 50%,
      calc(3 * 100% / 3) 50%,
      calc(2 * 100% / 3) 50%;
  }
}

/* Scanline bar */
.winstongfx-loading-visual.is-brand-scan {
  height: 6px;
  width: 100%;
  --_bar: no-repeat linear-gradient(
    to right,
    var(--winstongfx-loading-secondary, #252a36),
    var(--winstongfx-loading-primary, #8acca1)
  );
  background: var(--_bar), var(--_bar), var(--_bar), var(--_bar);
  background-size: 21% 100%;
  animation: winstongfx-scan 1s infinite alternate;
  border-radius: 6px;
}

@keyframes winstongfx-scan {
  0%,
  20% {
    background-position:
      calc(0 * 100% / 4) 0,
      calc(1 * 100% / 4) 0,
      calc(2 * 100% / 4) 0,
      calc(3 * 100% / 4) 0;
  }
  35% {
    background-position:
      calc(0 * 100% / 4) 0,
      calc(1 * 100% / 4) 0,
      calc(2 * 100% / 4) 0,
      calc(4 * 100% / 4) 0;
  }
  50% {
    background-position:
      calc(0 * 100% / 4) 0,
      calc(1 * 100% / 4) 0,
      calc(3 * 100% / 4) 0,
      calc(4 * 100% / 4) 0;
  }
  65% {
    background-position:
      calc(0 * 100% / 4) 0,
      calc(2 * 100% / 4) 0,
      calc(3 * 100% / 4) 0,
      calc(4 * 100% / 4) 0;
  }
  80%,
  100% {
    background-position:
      calc(1 * 100% / 4) 0,
      calc(2 * 100% / 4) 0,
      calc(3 * 100% / 4) 0,
      calc(4 * 100% / 4) 0;
  }
}

/* Glow dots (blur/contrast pulses) */
.winstongfx-loading-visual.is-brand-glow-dots {
  height: 50px;
  width: 100%;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(
    farthest-side,
    var(--winstongfx-loading-primary, #8acca1) 90%,
    #0000
  );
  background:
    var(--_g),
    var(--_g),
    var(--_g),
    var(--_g);
  background-size: 20% 50%;
  animation: winstongfx-glow-dots 1s infinite linear;
  filter: blur(3px) contrast(10);
}

@keyframes winstongfx-glow-dots {
  0% {
    background-position:
      calc(0 * 100% / 3) 50%,
      calc(1 * 100% / 3) 50%,
      calc(2 * 100% / 3) 50%,
      calc(3 * 100% / 3) 50%;
  }
  16.67% {
    background-position:
      calc(0 * 100% / 3) 0%,
      calc(1 * 100% / 3) 50%,
      calc(2 * 100% / 3) 50%,
      calc(3 * 100% / 3) 50%;
  }
  33.33% {
    background-position:
      calc(0 * 100% / 3) 100%,
      calc(1 * 100% / 3) 0%,
      calc(2 * 100% / 3) 50%,
      calc(3 * 100% / 3) 50%;
  }
  50% {
    background-position:
      calc(0 * 100% / 3) 50%,
      calc(1 * 100% / 3) 100%,
      calc(2 * 100% / 3) 0%,
      calc(3 * 100% / 3) 50%;
  }
  66.67% {
    background-position:
      calc(0 * 100% / 3) 50%,
      calc(1 * 100% / 3) 50%,
      calc(2 * 100% / 3) 100%,
      calc(3 * 100% / 3) 0%;
  }
  83.33% {
    background-position:
      calc(0 * 100% / 3) 50%,
      calc(1 * 100% / 3) 50%,
      calc(2 * 100% / 3) 50%,
      calc(3 * 100% / 3) 100%;
  }
  100% {
    background-position:
      calc(0 * 100% / 3) 50%,
      calc(1 * 100% / 3) 50%,
      calc(2 * 100% / 3) 50%,
      calc(3 * 100% / 3) 50%;
  }
}

/* Ripple stripe (blurred stripe) */
.winstongfx-loading-visual.is-brand-ripple {
  display: inline-grid;
  padding: 5px;
  background: var(--winstongfx-loading-secondary, #252a36);
  filter: blur(4px) contrast(12);
  width: 100%;
}

.winstongfx-loading-visual.is-brand-ripple::before {
  content: '';
  height: 40px;
  aspect-ratio: 3;
  --c-main: var(--winstongfx-loading-primary, #8acca1);
  --c-sec: var(--winstongfx-loading-secondary, #252a36);
  --c: #0000 64%, var(--c-sec) 66% 98%, #0000 101%;
  background:
    radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0,
    radial-gradient(35% 146% at 50% -59%, var(--c)) 100% 100%;
  background-size: calc(200% / 3) 50%;
  background-repeat: repeat-x;
  animation: winstongfx-ripple 0.8s infinite linear;
}

@keyframes winstongfx-ripple {
  to {
    background-position: -200% 0, -100% 100%;
  }
}

/* Masked ring */
.winstongfx-loading-visual.is-brand-mask-ring {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--winstongfx-loading-primary, #8acca1);
  --_m:
    conic-gradient(#0000 10%, #000),
    linear-gradient(var(--winstongfx-loading-secondary, #252a36) 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: winstongfx-mask-ring 1s infinite linear;
}

@keyframes winstongfx-mask-ring {
  to {
    transform: rotate(1turn);
  }
}

/* Clip ring (polygon reveal with flip) */
.winstongfx-loading-visual.is-clip-ring {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: calc(var(--winstongfx-loading-arc-thickness, 14px) / 1.2) solid
    var(--winstongfx-loading-secondary, #252a36);
  animation:
    winstongfx-clip-ring-1 0.8s infinite linear alternate,
    winstongfx-clip-ring-2 1.6s infinite linear;
  box-sizing: border-box;
}

@keyframes winstongfx-clip-ring-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
  }
  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  }
  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);
  }
}

@keyframes winstongfx-clip-ring-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

.winstongfx-loading-visual.is-gif,
.winstongfx-loading-visual.is-lottie,
.winstongfx-loading-visual.is-rive {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 640px) {
  .winstongfx-loading-indicator__inner {
    width: calc(var(--winstongfx-loading-size, 64px) * var(--winstongfx-loading-scale, 1) * 0.5);
    height: calc(var(--winstongfx-loading-size, 64px) * var(--winstongfx-loading-scale, 1) * 0.5);
  }
}

@keyframes winstongfx-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes winstongfx-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes winstongfx-arc-band-spin {
  0% {
    transform: rotate(0deg) scale(0.97);
  }
  38% {
    transform: rotate(170deg) scale(1.04);
  }
  62% {
    transform: rotate(270deg) scale(0.98);
  }
  100% {
    transform: rotate(360deg) scale(0.95);
  }
}

@keyframes winstongfx-pulse {
  0% {
    transform: scale(0.75);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.35;
  }
  100% {
    transform: scale(0.75);
    opacity: 0.9;
  }
}

@keyframes winstongfx-bars {
  0%,
  100% {
    transform: scaleY(0.45);
    filter: brightness(0.85);
  }
  50% {
    transform: scaleY(1);
    filter: brightness(1.05);
  }
}

/* Brand-forward control colors */
.winstongfx-custom-player video {
  accent-color: #8acca1;
}

.winstongfx-custom-player video::-webkit-media-controls-enclosure {
  background-color: transparent;
}

.winstongfx-custom-player video::-webkit-media-controls-timeline,
.winstongfx-custom-player video::-webkit-media-controls-progress-bar,
.winstongfx-custom-player video::-webkit-media-controls-volume-slider {
  accent-color: #8acca1;
  background-color: transparent;
}

.winstongfx-custom-player video::-webkit-media-controls-current-time-display,
.winstongfx-custom-player video::-webkit-media-controls-time-remaining-display {
  color: #f7fcf8;
}