/* ==========================================================================
   Video Player Container & Responsive Wrapper
   ========================================================================== */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Perfect 16:9 Aspect Ratio */
  height: 0;
  background-color: #111111; /* Sleek dark background while loading */
}

/* The embedded YouTube / Vimeo iframe */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0; /* Hidden initially so user doesn't see a blank white screen */
  will-change: opacity;
  transition: opacity 0.4s ease-in-out;
  z-index: 2;
}

/* ==========================================================================
   Loading Overlay & Error States
   ========================================================================== */
.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #141414;
  color: #ffffff;
  /* Adds a thin, subtle border line around the inside of the loading block */
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* Updated font stack for a classic serif look */
  font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
  font-size: 1.2rem; /* Slightly increased size since serif fonts print a bit smaller */
  font-weight: 500;
  z-index: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

/* Completely hide overlay when JavaScript adds the 'loaded' class */
.video-loading.loaded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.video-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: fadeIn 0.3s ease-out forwards;
}

/* ==========================================================================
   Reload Button Interactive Styling
   ========================================================================== */
.video-reload-button {
  background-color: #00adef; /* Premium Vimeo Blue (Swap to #ff0000 for YouTube Red) */
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  
  /* Hardware-accelerated transitions for smooth animations */
  will-change: transform, background-color, box-shadow;
  transition: 
    background-color 0.2s ease, 
    transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
    box-shadow 0.2s ease;
  
  box-shadow: 0 4px 12px rgba(0, 173, 239, 0.3);
}

/* Hover State */
.video-reload-button:hover {
  background-color: #008ec4; /* Darker blue */
  transform: translateY(-2px); /* Moves up slightly */
  box-shadow: 0 6px 16px rgba(0, 173, 239, 0.45);
}

/* Keyboard Focus State (Accessibility) */
.video-reload-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 0 0 5px #00adef;
}

/* Click/Active State Visualization */
.video-reload-button:active {
  background-color: #00709c; /* Deeper color on depress */
  transform: translateY(1px) scale(0.97); /* Tactile "pressed down" effect */
  box-shadow: 0 2px 6px rgba(0, 173, 239, 0.2);
  transition: transform 0.05s linear; /* Snappy response */
}

/* Simple Keyframe to animate error appearance */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}