/* ==========================================================================
   YARA MUR — EDITORIAL ANIMATIONS
   GPU-Accelerated Scroll Reveals, Clip-Path Shifts & Micro-Interactions
   ========================================================================== */

/* Fade & Slide Reveal Observer Base Classes */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-editorial), transform 1s var(--ease-editorial);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* Clip Path Image Unveil */
.clip-reveal {
  position: relative;
  overflow: hidden;
}

.clip-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--bg-primary);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1.2s var(--ease-out-expo);
  z-index: 2;
}

.clip-reveal.revealed::after {
  transform: scaleY(0);
}

/* Text Line Masking */
.line-mask {
  overflow: hidden;
  display: block;
}

.line-mask-inner {
  display: block;
  transform: translateY(100%);
  transition: transform 1s var(--ease-editorial);
}

.line-mask.revealed .line-mask-inner {
  transform: translateY(0);
}

/* Subtle Zoom Reveal on Hover */
.zoom-on-hover {
  overflow: hidden;
}

.zoom-on-hover img {
  transition: transform 1.2s var(--ease-editorial);
}

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

/* Shimmer Loading Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-loading {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}