/* Overlay */
.transition-overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color: black;
  z-index: -1; /* sayfaların arkasında */
}

/* ----- COVER VERTICAL ----- */
.transition-cover-v-in {
  animation: coverVIn 0.4s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.transition-cover-v-out {
  animation: coverVOut 0.4s cubic-bezier(0.25,0.8,0.25,1) forwards;
}

@keyframes coverVIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes coverVOut {
  from { transform: translateZ(0) scale(1); opacity: 1; }
  to   { transform: translateZ(-50px) scale(0.7); opacity: 1; }
}


/* ----- PARALLAX ----- */
.transition-parallax-in { animation: parallaxIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.transition-parallax-out { animation: parallaxOut 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }

@keyframes parallaxIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes parallaxOut {
  from { transform: translateX(0); }
  to   { transform: translateX(-30%); opacity: 0.8; }
}

/* ----- PARALLAX BACK ----- */
.transition-parallax-back-in { animation: parallaxBackIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.transition-parallax-back-out { animation: parallaxBackOut 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }

@keyframes parallaxBackIn {
  from { transform: translateX(-30%); opacity: 0.8; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes parallaxBackOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); opacity: 1; }
}

/* ----- COVER VERTICAL BACK ----- */
.transition-cover-v-back-in {
  animation: coverVBackIn 0.4s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.transition-cover-v-back-out {
  animation: coverVBackOut 0.4s cubic-bezier(0.25,0.8,0.25,1) forwards;
}

@keyframes coverVBackIn {
  from { transform: translateZ(-50px) scale(0.7); opacity: 1; }
  to   { transform: translateZ(0) scale(1); opacity: 1; }
}

@keyframes coverVBackOut {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* ----- COVER HORIZONTAL ----- */
.transition-cover-h-in {
  animation: coverHIn 0.5s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.transition-cover-h-out {
  animation: coverHOut 0.5s cubic-bezier(0.25,0.8,0.25,1) forwards;
}

@keyframes coverHIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes coverHOut {
  from { transform: translateZ(0) scale(1); opacity: 1; }
  to   { transform: translateZ(-50px) scale(0.7); opacity: 1; }
}

/* ----- COVER HORIZONTAL BACK ----- */
.transition-cover-h-back-in {
  animation: coverHBackIn 0.7s cubic-bezier(0.25,0.8,0.25,1) forwards;
  position: absolute;;
}
.transition-cover-h-back-out {
  animation: coverHBackOut 0.5s cubic-bezier(0.25,0.8,0.25,1) forwards;
}

@keyframes coverHBackIn {
  from { transform: translateZ(-50px) scale(0.7); opacity: 1; }
  to   { transform: translateZ(0) scale(1); opacity: 1; }
}

@keyframes coverHBackOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
/* ----- PUSH ----- */
.transition-push-in {
  animation: pushIn 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.transition-push-out {
  animation: pushOut 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes pushIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pushOut {
  from { transform: translateX(0); }
  to   { transform: translateX(-30%); opacity: 0.9; }
}

/* ----- PUSH BACK ----- */
.transition-push-back-in {
  animation: pushBackIn 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.transition-push-back-out {
  animation: pushBackOut 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes pushBackIn {
  from { transform: translateX(-30%); opacity: 0.9; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes pushBackOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); opacity: 1; }
}