/**
 * Video Cache Component Styles
 */

/* Container */
.ph-video-cache {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* Video element */
.ph-video-cache video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  position: absolute;
}

/* Hidden states */
.ph-video-cache video.video-cache-hidden,
.ph-video-cache.video-cache-initial-hidden video {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
}

.ph-video-cache.video-cache-initial-hidden,
.ph-video-cache.video-cache-first-load {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Loaded state */
.ph-video-cache video.video-cache-loaded {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  z-index: 2 !important;
}

/* Fade out animation - tempo dinâmico via variável CSS */
/* .ph-video-cache video.video-cache-fade-out {
  --fade-duration: 4s;
  animation: videoFadeOut var(--fade-duration) steps(4) forwards;
} */

/* @keyframes videoFadeOut {
  0% { opacity: 1; }
  25% { opacity: 0.75; }
  50% { opacity: 0.5; }
  75% { opacity: 0.25; }
  100% { opacity: 0; }
} */

/* Estado após fade out completo */
.ph-video-cache video.video-cache-hidden-after-fade {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Smooth transition for cached videos */
.ph-video-cache video.video-cache-smooth-transition {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.ph-video-cache video.video-cache-smooth-transition.video-cache-loaded {
  opacity: 1;
}

/* Fullscreen */
.ph-video-cache.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

/* Overlay */
.ph-video-cache .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.ph-video-cache .video-overlay > * {
  pointer-events: auto;
}

/* Loading overlay */
.ph-video-cache .loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: opacity 0.3s ease-out;
}

.ph-video-cache .loader-overlay.hide {
  opacity: 0;
  pointer-events: none;
  display: none;
}

/* Loading spinner */
.loader-container {
  --uib-size: 45px;
  --uib-color: white;
  --uib-speed: 1.75s;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: var(--uib-size);
  height: calc(var(--uib-size) * 0.6);
}

.cube {
  flex-shrink: 0;
  width: calc(var(--uib-size) * 0.2);
  height: calc(var(--uib-size) * 0.2);
  animation: jump var(--uib-speed) ease-in-out infinite;
}

.cube__inner {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 25%;
  background-color: var(--uib-color);
  transform-origin: center bottom;
  animation: morph var(--uib-speed) ease-in-out infinite;
  transition: background-color 0.3s ease;
}

.cube:nth-child(2),
.cube:nth-child(2) .cube__inner {
  animation-delay: calc(var(--uib-speed) * -0.36);
}

.cube:nth-child(3),
.cube:nth-child(3) .cube__inner {
  animation-delay: calc(var(--uib-speed) * -0.2);
}

@keyframes jump {
  0%, 30% { transform: translateY(0); }
  30% { animation-timing-function: ease-out; }
  50% { 
    transform: translateY(-200%);
    animation-timing-function: ease-in;
  }
  75% { 
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
}

@keyframes morph {
  0%, 10%, 40%, 70%, 85%, 100% { transform: scaleY(1); }
  20%, 25% { 
    transform: scaleY(0.6) scaleX(1.3);
    animation-timing-function: ease-in-out;
  }
  30% { 
    transform: scaleY(1.15) scaleX(0.9);
    animation-timing-function: ease-in-out;
  }
  75% { transform: scaleY(0.8) scaleX(1.2); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ph-video-cache video { transition: none; }
  .cube, .cube__inner { animation: none; }
}

.video-cache-dropzone > div > * {
  opacity: 0;
}

video.video-cache-hidden-after-fade + .video-cache-dropzone > div > * {
  opacity: 1;
}

.video-cache-dropzone {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}