/* -------------------------------------------------------------
 * PREMIUM ANIMATIONS & SCROLL REVEALS
 * -------------------------------------------------------------
 */

/* Scroll-Triggered Reveal Classes */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.reveal.reveal-left {
  transform: translateX(-12px);
}

.reveal.reveal-right {
  transform: translateX(12px);
}

.reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger delay animations for lists or grids */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Elegant Minimalist Link Underline Transition */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--accent);
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Slow Cinematic Image Zoom (Perfect for Art Galleries) */
.zoom-frame {
  overflow: hidden;
  position: relative;
}

.zoom-frame img {
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom-frame:hover img {
  transform: scale(1.05);
}

/* Core Keyframe Animations */
@keyframes subtleFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.animate-float {
  animation: subtleFloat 6s ease-in-out infinite;
}

@keyframes elegantFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade {
  animation: elegantFade 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Global Dynamic Height Transition (CSS Grid 0fr -> 1fr) ── */
.grid-collapse-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  opacity: 0;
}

.grid-collapse-wrapper.active {
  grid-template-rows: 1fr;
  opacity: 1;
}

.grid-collapse-content {
  min-height: 0;
}