/**
 * Styles for Soda Image Reveal Elementor Widget
 */

.soda-reveal-container {
  position: relative;
  width: 100%;
  height: var(--soda-reveal-height, 450px);
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: var(--soda-reveal-border-radius, 12px);
  cursor: pointer;
  background-color: var(--soda-reveal-underlay-bg, #f5f5f7);
}

/* Underlay (hidden background layer containing the text) */
.soda-reveal-underlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--soda-reveal-padding, 3rem);
  box-sizing: border-box;
  background-color: var(--soda-reveal-underlay-bg, #f5f5f7);
  z-index: 1;
}

/* Text revealed on the right side */
.soda-reveal-text {
  max-width: var(--soda-reveal-text-max-width, 45%);
  text-align: right;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--soda-reveal-transition, 0.6s) cubic-bezier(0.25, 1, 0.5, 1),
    transform var(--soda-reveal-transition, 0.6s) cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 2;
  pointer-events: none;
  /* Let clicks pass through to container */
}

/* Active / Hover text reveal animation */
.soda-reveal-container:hover .soda-reveal-text,
.soda-reveal-container:focus-within .soda-reveal-text,
.soda-reveal-container.active .soda-reveal-text {
  opacity: 1;
  transform: translateX(0);
}

/* Overlay (starts at 100% width, covers the container) */
.soda-reveal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  z-index: 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: max-width var(--soda-reveal-transition, 0.6s) cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.05);
}

/* Background image pseudo-element on the overlay */
.soda-reveal-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--soda-reveal-bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  transform: scale(1);
  transition: transform calc(var(--soda-reveal-transition, 0.6s) * 1.5) cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover/active state: overlay shrinks to 50% max-width, revealing underlay */
.soda-reveal-container:hover .soda-reveal-overlay,
.soda-reveal-container:focus-within .soda-reveal-overlay,
.soda-reveal-container.active .soda-reveal-overlay {
  max-width: 50%;
}

/* Subtle premium hover effects */
.soda-reveal-container:hover .soda-reveal-overlay::after,
.soda-reveal-container:focus-within .soda-reveal-overlay::after {
  transform: scale(1.05);
  /* Soft background zoom */
}

/* Logo centered inside the overlay */
.soda-reveal-logo {
  width: var(--soda-reveal-logo-width, 160px);
  max-width: 80%;
  height: auto;
  object-fit: contain;
  transition: transform var(--soda-reveal-transition, 0.6s) cubic-bezier(0.25, 1, 0.5, 1);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  user-select: none;
  pointer-events: none;
}

.soda-reveal-container:hover .soda-reveal-logo,
.soda-reveal-container:focus-within .soda-reveal-logo {
  transform: scale(var(--soda-reveal-logo-scale-hover, 0.95));
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .soda-reveal-container {
    height: var(--soda-reveal-height-mobile, 350px);
  }

  .soda-reveal-underlay {
    padding: var(--soda-reveal-padding-mobile, 1.5rem);
  }

  .soda-reveal-text {
    max-width: var(--soda-reveal-text-max-width-mobile, 75%);
  }

  .soda-reveal-container:hover .soda-reveal-overlay,
  .soda-reveal-container:focus-within .soda-reveal-overlay,
  .soda-reveal-container.active .soda-reveal-overlay {
    max-width: 50%;
    /* Keeps it 50% but gives more text room */
  }

  .soda-reveal-logo {
    width: var(--soda-reveal-logo-width-mobile, 120px);
  }
}