/* ==========================================================================
   SXPRESS FESTIVAL 2026 — MOTION DESIGN SYSTEM
   Brutal/acid transitions, reveals, and interactive effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REVEAL ANIMATIONS — Keyframes
   -------------------------------------------------------------------------- */

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

@keyframes revealDown {
  from { opacity: 0; transform: translateY(-60px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes revealRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes revealScale {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes clipReveal {
  from { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); }
  to   { -webkit-clip-path: inset(0); clip-path: inset(0); }
}

@keyframes maskReveal {
  from { -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  to   { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

/* --------------------------------------------------------------------------
   2. SCROLL-TRIGGERED CLASSES
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

[data-reveal="up"] {
  transform: translateY(40px);
}
[data-reveal="up"].is-visible {
  transform: translateY(0);
}

[data-reveal="down"] {
  transform: translateY(-40px);
}
[data-reveal="down"].is-visible {
  transform: translateY(0);
}

[data-reveal="left"] {
  transform: translateX(-60px);
}
[data-reveal="left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(60px);
}
[data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.85);
}
[data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

[data-reveal="clip"] {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  transform: none;
  opacity: 1;
  transition: -webkit-clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="clip"].is-visible {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

[data-reveal="mask"] {
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transform: none;
  opacity: 1;
  transition: -webkit-clip-path 1s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="mask"].is-visible {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* Staggered delays */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

/* --------------------------------------------------------------------------
   3. PARALLAX
   -------------------------------------------------------------------------- */

[data-parallax] {
  will-change: transform;
}

.parallax-layer {
  transition: transform 0.1s linear;
  will-change: transform;
}

.parallax-container {
  overflow: hidden;
  position: relative;
}

/* --------------------------------------------------------------------------
   4. MARQUEE ANIMATION
   -------------------------------------------------------------------------- */

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-scroll-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-track {
  animation: marquee-scroll 20s linear infinite;
  display: flex;
  width: max-content;
}

.marquee-track--reverse {
  animation-name: marquee-scroll-reverse;
}

.marquee-track--slow {
  animation-duration: 35s;
}

.marquee-track--fast {
  animation-duration: 12s;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   5. GRAIN ANIMATION
   -------------------------------------------------------------------------- */

@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  10%  { transform: translate(-5%, -10%); }
  20%  { transform: translate(-15%, 5%); }
  30%  { transform: translate(3%, -15%); }
  40%  { transform: translate(-7%, 12%); }
  50%  { transform: translate(12%, 9%); }
  60%  { transform: translate(-9%, -3%); }
  70%  { transform: translate(9%, 4%); }
  80%  { transform: translate(14%, -7%); }
  90%  { transform: translate(-1%, 7%); }
}

.grain-animated::before {
  animation: grain-shift 8s steps(10) infinite;
}

/* --------------------------------------------------------------------------
   6. HOVER EFFECTS
   -------------------------------------------------------------------------- */

.hover-glitch {
  position: relative;
  transition: all 0.3s;
}

.hover-glitch:hover {
  text-shadow: -2px 0 #BBFF00, 2px 0 #FF3333, 0 0 0 transparent;
  animation: hoverGlitch 0.3s ease-in-out;
}

@keyframes hoverGlitch {
  0%   { text-shadow: -2px 0 #BBFF00, 2px 0 #FF3333; transform: translate(0); }
  20%  { text-shadow: 2px 0 #BBFF00, -2px 0 #FF3333; transform: translate(-2px, 1px); }
  40%  { text-shadow: -1px 0 #BBFF00, 1px 0 #FF3333; transform: translate(1px, -1px); }
  60%  { text-shadow: 2px 0 #BBFF00, -1px 0 #FF3333; transform: translate(2px, 0); }
  80%  { text-shadow: -1px 0 #BBFF00, 2px 0 #FF3333; transform: translate(-1px, 1px); }
  100% { text-shadow: 0 0 transparent, 0 0 transparent; transform: translate(0); }
}

.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(187, 255, 0, 0.1);
}

.hover-acid-glow {
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-acid-glow:hover {
  box-shadow: 0 0 30px rgba(187, 255, 0, 0.3);
}

.hover-underline-acid {
  position: relative;
  display: inline-block;
}
.hover-underline-acid::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #BBFF00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-underline-acid:hover::after {
  transform: scaleX(1);
}

.magnetic {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   7. PAGE TRANSITIONS
   -------------------------------------------------------------------------- */

.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 400ms ease, transform 400ms ease;
}

/* --------------------------------------------------------------------------
   8. TITLE EFFECTS
   -------------------------------------------------------------------------- */

.title-split span {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.title-split[data-reveal] span {
  opacity: 0;
  transform: translateY(100%);
}

.title-split[data-reveal].is-visible span {
  opacity: 1;
  transform: translateY(0);
}

.title-split span:nth-child(1)  { transition-delay: 0ms; }
.title-split span:nth-child(2)  { transition-delay: 30ms; }
.title-split span:nth-child(3)  { transition-delay: 60ms; }
.title-split span:nth-child(4)  { transition-delay: 90ms; }
.title-split span:nth-child(5)  { transition-delay: 120ms; }
.title-split span:nth-child(6)  { transition-delay: 150ms; }
.title-split span:nth-child(7)  { transition-delay: 180ms; }
.title-split span:nth-child(8)  { transition-delay: 210ms; }
.title-split span:nth-child(9)  { transition-delay: 240ms; }
.title-split span:nth-child(10) { transition-delay: 270ms; }
.title-split span:nth-child(11) { transition-delay: 300ms; }
.title-split span:nth-child(12) { transition-delay: 330ms; }

.title-stroke {
  -webkit-text-stroke: 2px #BBFF00;
  color: transparent;
}

.title-fill-on-scroll {
  -webkit-text-stroke: 2px #BBFF00;
  color: transparent;
  transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-text-stroke-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.title-fill-on-scroll.is-visible {
  color: #BBFF00;
  -webkit-text-stroke-color: transparent;
}

/* --------------------------------------------------------------------------
   9. LOADING
   -------------------------------------------------------------------------- */

@keyframes pulse-acid {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes loading-progress {
  0%   { width: 0; }
  100% { width: 100%; }
}

.loading-bar {
  height: 3px;
  background-color: #BBFF00;
  animation: loading-progress 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.loading-pulse {
  animation: pulse-acid 1.5s ease-in-out infinite;
}

.preloader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background-color: #0A0A0A;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.preloader-bar {
  width: 120px;
  height: 3px;
  background-color: #1E1E1E;
  position: relative;
  overflow: hidden;
}

.preloader-bar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background-color: #BBFF00;
  animation: loading-progress 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   10. PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .marquee-track {
    animation: none;
  }

  .hover-glitch:hover {
    text-shadow: none;
    animation: none;
  }

  .preloader {
    display: none;
  }
}