/* ═══════════════════════════════════════════════════════════ */
/* FILE: styles/animations.css                                */
/* JURI PROJE — Interior Architecture                          */
/* Keyframes, transitions, page wipe, scroll reveal           */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Scroll Reveal Base ───────────────────────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-reveal),
    transform var(--duration-slow) var(--ease-reveal);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Stagger Delays ───────────────────────────────────────── */
.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; }

/* ─── Keyframes ────────────────────────────────────────────── */
@keyframes fadeReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes indexReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollLineExtend {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ─── Page Transition Overlay ──────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background-color: var(--color-bg-deep);
  transform: translateX(100%);
  transition: transform var(--duration-page) var(--ease-mechanical);
  pointer-events: none;
}

.page-transition.active {
  transform: translateX(0);
  pointer-events: all;
}

.page-transition.exit {
  transform: translateX(-100%);
}

/* ─── Floating Image (works hover) ─────────────────────────── */
.floating-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 360px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  pointer-events: none;
  z-index: var(--z-floating);
  opacity: 0;
  transform: translate(-100%, -100%);
  transition: opacity var(--duration-base) var(--ease-mechanical);
  background-color: var(--color-bg-deep);
}

.floating-image.is-active {
  opacity: 1;
}

.floating-image img,
.floating-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5 {
    transition-delay: 0ms;
  }

  .page-transition {
    transition: none;
  }

  .floating-image {
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}