/**
 * Újrafelhasználható kétszlopos elrendezés: bal kép / jobb szöveg,
 * görgetéskor balról és jobbról beúszó animáció (data-split-reveal).
 *
 * Használat:
 *   <div class="split-reveal-layout" data-split-reveal>
 *     <div class="split-reveal-side split-reveal-side--enter-left">… kép …</div>
 *     <div class="split-reveal-side split-reveal-side--enter-right">… szöveg …</div>
 *   </div>
 *   + js/split-reveal.js
 *
 * Fordított sorrend (szöveg bal, kép jobb): cseréld fel a két oszlop
 * sorrendjét a HTML-ben, és a class neveket is: bal oszlop = --enter-left,
 * jobb = --enter-right (így az animáció iránya továbbra is a pozícióhoz igazodik).
 */

.split-reveal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  text-align: left;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .split-reveal-layout {
    grid-template-columns: 1fr;
  }
}

/* Alap: látható (JS nélkül, prefers-reduced-motion) */
[data-split-reveal] .split-reveal-side--enter-left,
[data-split-reveal] .split-reveal-side--enter-right {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.split-reveal--enhanced .split-reveal-side--enter-left,
.split-reveal--enhanced .split-reveal-side--enter-right {
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-reveal--enhanced.split-reveal--await .split-reveal-side--enter-left {
  opacity: 0;
  transform: translate3d(-2.25rem, 0, 0);
}

.split-reveal--enhanced.split-reveal--await .split-reveal-side--enter-right {
  opacity: 0;
  transform: translate3d(2.25rem, 0, 0);
}

.split-reveal--enhanced.split-reveal--inview .split-reveal-side--enter-left,
.split-reveal--enhanced.split-reveal--inview .split-reveal-side--enter-right {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.split-reveal--enhanced.split-reveal--inview .split-reveal-side--enter-right {
  transition-delay: 0.14s;
}

@media (prefers-reduced-motion: reduce) {
  .split-reveal--enhanced .split-reveal-side--enter-left,
  .split-reveal--enhanced .split-reveal-side--enter-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* --- Alulról beúszó blokk (pl. #blog-galeria .section-inner) --- */
[data-reveal-rise] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-rise--enhanced[data-reveal-rise] {
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-rise--enhanced.reveal-rise--await[data-reveal-rise] {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
}

.reveal-rise--enhanced.reveal-rise--inview[data-reveal-rise] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-rise--enhanced[data-reveal-rise] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
