.animation-icon-base {
  display: flex;
  align-items: center;
  gap: 0.25em;
  pointer-events: none;
  z-index: 200;
}

:root {
  --bg-color: #000;
  --text-color: #f0f0f0;
  --border-color: rgb(255 255 255 / 10%);
  --spinner-border: rgb(255 255 255 / 30%);
  --spinner-border-width: 8px;
  --hue: 320;
  --primary-rgb: 15, 210, 255;
  --primary: rgb(var(--primary-rgb));
  --secondary: var(--primary);
  --primary-glow: rgb(var(--primary-rgb), 0.4);
  --primary-transparent: rgb(var(--primary-rgb), 0.2);
  --background: var(--bg-color);
  --spinner-glow: 0 0 8px rgb(var(--primary-rgb), 0.4), 0 0 12px rgb(var(--primary-rgb), 0.3);
  --control-bg-unified: rgb(0 0 0 / 75%);
  --control-bg-darker: rgb(0 0 0 / 85%);
  --control-border-unified: 1px solid rgb(var(--primary-rgb), 0.4);
  --control-shadow-unified: 0 0 2px rgb(var(--primary-rgb), 0.3), 0 0 4px rgb(var(--primary-rgb), 0.2);
  --control-blur-unified: blur(6px);
  --neon-shadow: var(--control-shadow-unified);
  --icon-glow: var(--animation-glow-filter-base);
  --vh: 1vh;
  --sidebar-width: 300px;
  --startup-size: 320px;
  --animation-icon-size: 128px;
  --startup-anim-duration: 1.111s;
  --swipe-min-distance: 50px;
  --swipe-max-time: 500ms;
  --swipe-reload-distance: 150px;
  --ui-autohide-delay: 4444ms;
  --transform-will-change: transform;
  --opacity-will-change: opacity;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background: linear-gradient(#813b97, #463c96);
}

body {
  background: linear-gradient(135deg, var(--background) 0%, var(--bg-color) 100%);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100%;
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 100vw;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}

.video-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  background: #000;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

#video-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: object-fit 0.3s ease;
  will-change: var(--transform-will-change);
}

#video-player.fill {
  object-fit: cover;
}

.unified-control-style {
  background: var(--control-bg-unified);
  backdrop-filter: var(--control-blur-unified);
  border: var(--control-border-unified);
  box-shadow: var(--control-shadow-unified);
  border-radius: var(--control-radius-round);
}

#startup-animation {
  position: absolute;
  width: var(--startup-size);
  height: var(--startup-size);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--startup-anim-duration) ease-in,
    transform var(--startup-anim-duration) ease-in,
    visibility 0s var(--startup-anim-duration) linear;
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 15%;
  color: var(--primary);
}

#startup-animation.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

#startup-animation svg#startup-logo-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: currentcolor;
  opacity: 1;
  filter: var(--icon-glow);
}

.animation-icon svg g {
  display: none;
  width: 100%;
  height: 100%;
}

#startup-animation svg#startup-logo-svg g {
  transition:
    transform calc(var(--startup-anim-duration) * 0.7) ease-out,
    opacity calc(var(--startup-anim-duration) * 0.7) ease-out;
  animation-fill-mode: forwards;
}

#logo-g-play {
  transform: scale(1) rotate(90deg);
  transform-origin: 50% 50%;
}

#logo-g-left {
  transform: translateX(-35%) scale(0.8);
  opacity: 0;
}

#logo-g-right {
  transform: translateX(35%) scale(0.8);
  opacity: 0;
}

#logo-g-center-dot {
  transform: scale(0.8);
  opacity: 0;
}

#logo-g-right-dot {
  transform: translateX(45%) scale(0.8);
  opacity: 0;
}

#startup-animation.visible #logo-g-play,
#startup-animation.visible #logo-g-left,
#startup-animation.visible #logo-g-right,
#startup-animation.visible #logo-g-center-dot,
#startup-animation.visible #logo-g-right-dot {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

#startup-animation.visible #logo-g-play {
  transform: scale(1) rotate(90deg);
}

#startup-animation.visible #logo-g-left {
  transform: translateX(0%) scale(1);
}

#startup-animation.visible #logo-g-right {
  transform: translateX(0%) scale(1);
}

#startup-animation.visible #logo-g-center-dot {
  transform: scale(1);
}

#startup-animation.visible #logo-g-right-dot {
  transform: translateX(0%) scale(1);
}

#startup-animation.rolled-in #logo-g-play {
  transform: rotate(90deg) scale(1);
  opacity: 1;
  transition:
    transform calc(var(--startup-anim-duration) * 0.5) ease-out calc(var(--startup-anim-duration) * 0.5),
    opacity calc(var(--startup-anim-duration) * 0.7) ease-out;
}

#startup-animation.rolled-in #logo-g-left,
#startup-animation.rolled-in #logo-g-right,
#startup-animation.rolled-in #logo-g-center-dot,
#startup-animation.rolled-in #logo-g-right-dot {
  transform: scale(0.1);
  opacity: 0;
}

#startup-animation.rolled-in #logo-g-left {
  transform: translateX(-20%) scale(0.1) rotate(-90deg);
}

#startup-animation.rolled-in #logo-g-right {
  transform: translateX(20%) scale(0.1) rotate(90deg);
}

#startup-animation.rolled-in #logo-g-right-dot {
  transform: scale(0.1) rotate(180deg);
}

#startup-animation.pulsating {
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  transition: border-radius 0.3s ease;
  transition-delay: calc(var(--startup-anim-duration) * 0.5);
}

#startup-animation.pulsating #logo-g-play {
  animation: pulse-startup 1.5s infinite ease-in-out;
  animation-delay: var(--startup-anim-duration);
  transform-origin: 50% 50%;
}

@keyframes pulse-startup {
  0%,
  100% {
    transform: rotate(90deg) scale(1);
    opacity: 1;
  }

  50% {
    transform: rotate(90deg) scale(1.05);
    opacity: 0.9;
  }
}

#startup-animation.fading-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out,
    visibility 0s 0.3s linear;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border: none;
}

.animation-icon {
  position: absolute;
  width: var(--animation-icon-size);
  height: var(--animation-icon-size);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.animation-icon svg {
  width: 70%;
  height: 70%;
  fill: currentcolor;
  filter: none;
  overflow: visible;
}

#startup-animation.fading-out svg {
  opacity: 0 !important;
  transition: opacity 0.2s ease-out !important;
}

#startup-animation.fading-out svg#startup-logo-svg g {
  animation: none !important;
}
.seek-left-container,
.seek-right-container,
.switch-left-container,
.switch-right-container,
.play-container,
.pause-container,
.volume-mute-container,
.volume-low-container,
.volume-medium-container,
.volume-high-container,
.volume-max-container {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.rewind-icon-img,
.forward-icon-img,
.back-icon-img,
.forward-arrow-img,
.play-icon-img,
.pause-icon-img,
.volume-icon-img,
.videofit-icon-img {
  width: var(--animation-icon-size);
  height: var(--animation-icon-size);
  filter: none;
}

#fast-seek-animation.state-seek-left .seek-left-container,
#fast-seek-animation.state-seek-right .seek-right-container,
#switch-animation.state-switch-left .switch-left-container,
#switch-animation.state-switch-right .switch-right-container,
#play-pause-animation.state-play .play-container,
#play-pause-animation.state-pause .pause-container,
#volume-animation.volume-level-mute .volume-mute-container,
#volume-animation.volume-level-low .volume-low-container,
#volume-animation.volume-level-medium .volume-medium-container,
#volume-animation.volume-level-high .volume-high-container,
#volume-animation.volume-level-max .volume-max-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.animation-icon.visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  visibility: visible;
}

#fast-seek-animation.state-seek-left .rewind-icon-img,
#fast-seek-animation.state-seek-right .forward-icon-img,
#switch-animation.state-switch-left .back-icon-img,
#switch-animation.state-switch-right .forward-arrow-img,
#play-pause-animation.state-play .play-icon-img,
#play-pause-animation.state-pause .pause-icon-img,
#volume-animation .volume-icon-img {
  display: block;
}

.top-gradient,
.bottom-gradient {
  position: absolute;
  left: 0;
  right: 0;
  height: 15%;
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.top-gradient {
  top: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 70%), transparent);
}

.bottom-gradient {
  bottom: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 70%), transparent);
}

.hidden {
  opacity: 0;
  pointer-events: none;
}