/* ===================================================
   UPE Hover Scroll Screenshot (CINEMATIC VERSION)
   Premium + Auto-moving + Parallax
   =================================================== */

.upe-hoverscroll-card {
  --card-h: 300px; /* ✅ Smaller height (adjust between 260-340px) */
  --radius: 18px;
  --shadow: 0 16px 50px rgba(0, 0, 0, 0.14);
  --border: rgba(35, 31, 32, 0.1); /* UPE dark color base */

  width: 100%;
  max-width: 460px; /* Slightly narrower for compact look */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #fff;
  position: relative;
  transform: translateZ(0);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Premium hover lift with parallax shadow */
.upe-hoverscroll-card:hover {
  transform: translateY(-6px) translateZ(0);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(35, 31, 32, 0.05);
}

.upe-hoverscroll-frame {
  height: var(--card-h);
  overflow: hidden;
  position: relative;
}

/* The tall screenshot image - CINEMATIC AUTO-SCROLL */
.upe-hoverscroll-img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  will-change: transform;
  filter: saturate(1.05) contrast(1.05);
  animation: upe-cinematic-scroll 20s ease-in-out infinite alternate;
}

/* Cinematic auto-scroll keyframes */
@keyframes upe-cinematic-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1 * var(--img-overflow, 0px) * 0.3));
  }
}

/* On hover = accelerate to full scroll + faster */
.upe-hoverscroll-card:hover .upe-hoverscroll-img {
  animation: upe-hover-accelerate 4.5s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
}

@keyframes upe-hover-accelerate {
  from {
    transform: translateY(var(--current-pos, 0));
  }
  to {
    transform: translateY(calc(-1 * var(--img-overflow, 0px)));
  }
}

/* Top subtle shade with parallax */
.upe-hoverscroll-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent);
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.upe-hoverscroll-card:hover::before {
  opacity: 0.25;
}

/* Enhanced glow with parallax movement */
.upe-hoverscroll-card::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(252, 177, 86, 0.28),
    transparent 55%
  );
  opacity: 0;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  pointer-events: none;
  z-index: 1;
  transform: scale(0.98);
}

.upe-hoverscroll-card:hover::after {
  opacity: 0.9;
  transform: scale(1.02);
}

/* ===================================================
   Plus Overlay (Elementor-style) - Cinematic Version
   =================================================== */

.upe-hoverscroll-plus {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  pointer-events: none; /* Doesn't block hover - change if you want it clickable */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease 0.2s,
    transform 0.4s ease 0.2s;
}

.upe-hoverscroll-card:hover .upe-hoverscroll-plus {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.upe-plus-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(35, 31, 32, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  transform: scale(0.96);
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.upe-hoverscroll-card:hover .upe-plus-btn {
  transform: scale(1);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.upe-plus-icon {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: #231f20; /* UPE dark color */
  transition: transform 0.3s ease;
}

.upe-hoverscroll-card:hover .upe-plus-icon {
  transform: rotate(90deg);
}

/* ===================================================
   CUSTOMIZATION TIPS - CINEMATIC VERSION
   =================================================== */

/* To change card size:
   --card-h: 300px;     // visible height (260-340px recommended)
   max-width: 460px;    // card width
*/

/* To adjust auto-scroll speed:
   animation: upe-cinematic-scroll 20s ... 
   - 15s = faster auto-scroll
   - 25s = slower auto-scroll (more dramatic)
*/

/* To adjust hover acceleration:
   animation: upe-hover-accelerate 4.5s ...
   - 3s = fast acceleration
   - 6s = slow, smooth acceleration
*/

/* To disable auto-scroll (keep hover only):
   Remove or comment out: animation: upe-cinematic-scroll ...
*/

/* To make the plus button clickable:
   1. In HTML, change: <div class="upe-hoverscroll-plus">
      to: <a class="upe-hoverscroll-plus" href="YOUR-LINK">
   2. Remove: pointer-events: none; from .upe-hoverscroll-plus
*/

/* Want even more dramatic parallax lift on hover?
   Change: transform: translateY(-6px) ...
   To: transform: translateY(-10px) ...
*/

/* ===================================================
   RESPONSIVE & ACCESSIBILITY
   =================================================== */

/* Mobile: no hover capability => disable auto-animation */
@media (hover: none) {
  .upe-hoverscroll-img {
    animation: none;
    transform: none !important;
  }

  .upe-hoverscroll-plus {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .upe-hoverscroll-img {
    animation: none !important;
    transition: none;
    transform: none !important;
  }

  .upe-hoverscroll-card::after,
  .upe-hoverscroll-card::before {
    transition: none;
  }

  .upe-plus-btn,
  .upe-plus-icon,
  .upe-hoverscroll-plus {
    transition: none;
  }
}

/* Optional: Smaller cards on mobile screens */
@media (max-width: 768px) {
  .upe-hoverscroll-card {
    --card-h: 240px; /* Smaller on mobile */
    max-width: 100%;
  }

  .upe-plus-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .upe-plus-icon {
    font-size: 18px;
  }
}

/* ===================================================
   Grid Layout (2×2 Cards like Theme Demos)
   =================================================== */

.upe-hoverscroll-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  justify-content: center;
  max-width: 100%;
}

/* Mobile: Single column */
@media (max-width: 768px) {
  .upe-hoverscroll-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}