/* CSS for Opera Homepage Logo Overlay */
/* Add this to your ds-theme-customizations plugin or theme */

.opera-logo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.3); /* Subtle dark overlay */
  backdrop-filter: blur(2px);
  pointer-events: none; /* Allows interaction to pass through to trigger the shrink */
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.opera-logo-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.3);
}

.opera-logo-overlay .logo-container {
  width: 50vw;
  height: auto;
  max-width: 600px;
  min-width: 300px;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

.opera-logo-overlay .logo-container svg,
.opera-logo-overlay .logo-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Ensure the overlay shows initially */
body.opera-homepage {
  overflow: hidden; /* Prevent scrolling during logo display */
}

body.opera-homepage.logo-hidden {
  overflow: auto; /* Restore scrolling after logo hides */
}

/* Optional: Add a subtle animation to the logo itself */
@keyframes logoEntrance {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.opera-logo-overlay .logo-container {
  animation: logoEntrance 1s ease-out 0.2s both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .opera-logo-overlay .logo-container {
    width: 70vw;
    max-width: 400px;
    min-width: 250px;
  }
}

@media (max-width: 480px) {
  .opera-logo-overlay .logo-container {
    width: 80vw;
    max-width: 300px;
    min-width: 200px;
  }
}
/* Site Sponsor Display - Homepage Bottom Right */
/* Follows same show/hide behavior as logo overlay and menu */

.ovp-site-sponsor {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900; /* Below menu/logo but above content */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.6s ease-in-out;
}

/* Show sponsor when logo is hidden (same timing as header reveal) */
body.logo-hidden .ovp-site-sponsor {
  opacity: 0.9;
  visibility: visible;
  transform: translateY(0);
}

.ovp-site-sponsor:hover {
  opacity: 1;
}

.ovp-sponsor-link {
  display: block;
  text-decoration: none;
}

.ovp-sponsor-logo {
  max-width: 150px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.ovp-sponsor-link:hover .ovp-sponsor-logo {
  transform: scale(1.05);
}

/* Ensure sponsor is hidden during logo overlay */
body.opera-homepage:not(.logo-hidden) .ovp-site-sponsor {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ovp-site-sponsor {
    bottom: 1rem;
    right: 1rem;
  }
  
  .ovp-sponsor-logo {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .ovp-site-sponsor {
    bottom: 0.5rem;
    right: 0.5rem;
  }
  
  .ovp-sponsor-logo {
    max-width: 80px;
  }
}