/* ============================================
   TEXT REVEAL ANIMATION
   ============================================ */
.split-text .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.split-text .word-inner {
  display: inline-block;
  transform: translateY(1.3em);
  transition: transform 1.2s var(--ease-text-reveal);
  will-change: transform;
}

.split-text.revealed .word-inner {
  transform: translateY(0);
}

/* Stagger delays for words */
.split-text .word:nth-child(1) .word-inner { transition-delay: 0s; }
.split-text .word:nth-child(2) .word-inner { transition-delay: 0.06s; }
.split-text .word:nth-child(3) .word-inner { transition-delay: 0.12s; }
.split-text .word:nth-child(4) .word-inner { transition-delay: 0.18s; }
.split-text .word:nth-child(5) .word-inner { transition-delay: 0.24s; }

/* ============================================
   FADE IN ANIMATION
   ============================================ */
[data-animation="fade-in"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-general), transform 0.8s var(--ease-general);
}

[data-animation="fade-in"].animated-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-text);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s ease-out;
}

#cursor.hover .cursor-dot {
  transform: translate(-50%, -50%) scale(3);
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  #cursor {
    display: none;
  }
  body, a, button {
    cursor: auto;
  }
}

/* ============================================
   PRELOADER ANIMATION
   ============================================ */
@keyframes preloaderPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

#preloader .preloader-logo {
  animation: preloaderPulse 1.5s ease-in-out infinite;
}

/* ============================================
   PARALLAX
   ============================================ */
.parallax-element {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ============================================
   CLOCK RING (for future use)
   ============================================ */
@keyframes clockRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ============================================
   MASK REVEAL
   ============================================ */
@keyframes maskReveal {
  0% {
    mask-position: 100% 100%;
    -webkit-mask-position: 100% 100%;
  }
  100% {
    mask-position: 0 100%;
    -webkit-mask-position: 0 100%;
  }
}

/* ============================================
   SCRAMBLE TEXT
   ============================================ */
.scramble {
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  cursor: none;
  display: inline-block;
}