/* ============================================================
   MATRIKA STUDIOS — ANIMATIONS CSS
   Keyframes, transition definitions, reveal states
   ============================================================ */

/* ── GRAIN SHIFT ───────────────────────────────────────────── */
@keyframes grain-shift {
  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-2%, -3%);
  }

  20% {
    transform: translate(-4%, 1%);
  }

  30% {
    transform: translate(3%, -2%);
  }

  40% {
    transform: translate(-1%, 4%);
  }

  50% {
    transform: translate(2%, -1%);
  }

  60% {
    transform: translate(-3%, 2%);
  }

  70% {
    transform: translate(1%, -4%);
  }

  80% {
    transform: translate(-2%, 3%);
  }

  90% {
    transform: translate(4%, -1%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ── FADE IN ───────────────────────────────────────────────── */
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── LEGACY INTRO (kept for fallback) ─────────────────────── */
@keyframes intro-symbol-appear {
  0% {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ── MINIMAL INTRO: LOGO REVEAL ───────────────────────────── */
/* Smooth fade-in with a very subtle scale settle */
@keyframes logo-reveal {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── INTRO: EXIT SPLIT ──────────────────────────────────────── */
/* Top and bottom panels slide away — screen splits open */
@keyframes exit-panel-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes exit-panel-down {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

/* ── CURSOR ────────────────────────────────────────────────── */
@keyframes cursor-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}

/* ── MENU STAGGER ──────────────────────────────────────────── */
@keyframes menu-item-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── PAGE TRANSITION CURTAIN ───────────────────────────────── */
@keyframes curtain-in {
  0% {
    transform: scaleY(0);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes curtain-out {
  0% {
    transform: scaleY(1);
    transform-origin: top;
  }

  100% {
    transform: scaleY(0);
    transform-origin: top;
  }
}

/* ── IMAGE CROSSFADE ───────────────────────────────────────── */
@keyframes slide-crossfade-in {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── REVEAL CLASSES (scroll-triggered) ─────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.35s;
}

.reveal-delay-4 {
  transition-delay: 0.5s;
}

.reveal-clip {
  overflow: hidden;
}

.reveal-clip .reveal-inner {
  transform: translateY(105%);
  transition: transform 0.9s var(--ease-out);
}

.reveal-clip.is-visible .reveal-inner {
  transform: translateY(0);
}