/* Motion layer that mimics the Base44 reveal behavior */

.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0 !important;
  transition-property: opacity, transform;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* HERO fades/slides are intentionally slower */
#hero .reveal-up {
  transition-duration: 2s;
}

.reveal-up {
  transform: translateY(28px) !important;
}

.reveal-left {
  transform: translateX(-36px) !important;
}

.reveal-right {
  transform: translateX(36px) !important;
}

.reveal-scale {
  transform: scale(0.9) !important;
}

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero CTA hover behavior */
#hero .cta-button {
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  transform-origin: center;
}

#hero .cta-button:hover {
  transform: scale(1.04);
}

#hero .cta-primary:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 18px 40px rgba(239, 68, 68, 0.45);
  filter: saturate(1.06);
}

#hero .cta-secondary:hover {
  box-shadow: 0 14px 28px rgba(255, 255, 255, 0.14);
}

/* Gallery SHARE action visibility */
.gallery-share-btn {
  background-color: rgba(56, 189, 248, 0.45) !important;
  border: 1px solid rgba(186, 230, 253, 0.75) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.gallery-share-btn:hover {
  background-color: rgba(239, 68, 68, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 10px 22px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  #hero .cta-button {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}