/*
Theme Name: Hello Elementor Child Theme Master
Theme URI: 
Description: Child theme for Hello Elementor with custom text animations for exhibition website
Author: Your Name
Author URI: 
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child-master
*/

/* ----------------------------------------------
 * TEXT ANIMATIONS FOR EXHIBITION WEBSITE
 * ---------------------------------------------- */

/* 1. REVEAL TYPE (clip-path slide up) */
.reveal-type {
  display: inline-block;
  overflow: hidden;
  animation: revealText 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes revealText {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. ROTATING WORDS (requires JS) */
.rotate-words {
  display: inline-block;
  position: relative;
  min-width: 120px; /* adjust based on your longest word */
}

.rotate-words span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(20px) rotateX(90deg);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
  white-space: nowrap;
}

.rotate-words span.active {
  position: relative;
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* 3. GLITCH EFFECT (pure CSS) */
.glitch-text {
  position: relative;
  color: white; /* change to match your background */
  letter-spacing: 2px;
  animation: glitch-skew 4s infinite linear alternate-reverse;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black; /* your background color */
  clip: rect(0, 0, 0, 0);
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: 2px 0 #00fff9;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(20px, 9999px, 10px, 0); }
  10% { clip: rect(15px, 9999px, 85px, 0); }
  20% { clip: rect(86px, 9999px, 67px, 0); }
  30% { clip: rect(94px, 9999px, 8px, 0); }
  40% { clip: rect(23px, 9999px, 44px, 0); }
  50% { clip: rect(63px, 9999px, 79px, 0); }
  60% { clip: rect(98px, 9999px, 5px, 0); }
  70% { clip: rect(12px, 9999px, 31px, 0); }
  80% { clip: rect(74px, 9999px, 22px, 0); }
  90% { clip: rect(40px, 9999px, 63px, 0); }
  100% { clip: rect(54px, 9999px, 91px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(65px, 9999px, 40px, 0); }
  10% { clip: rect(91px, 9999px, 56px, 0); }
  20% { clip: rect(39px, 9999px, 71px, 0); }
  30% { clip: rect(82px, 9999px, 9px, 0); }
  40% { clip: rect(17px, 9999px, 34px, 0); }
  50% { clip: rect(56px, 9999px, 77px, 0); }
  60% { clip: rect(29px, 9999px, 92px, 0); }
  70% { clip: rect(11px, 9999px, 18px, 0); }
  80% { clip: rect(47px, 9999px, 62px, 0); }
  90% { clip: rect(68px, 9999px, 53px, 0); }
  100% { clip: rect(73px, 9999px, 84px, 0); }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  10% { transform: skew(1deg); }
  20% { transform: skew(-2deg); }
  30% { transform: skew(3deg); }
  40% { transform: skew(-1deg); }
  50% { transform: skew(2deg); }
  60% { transform: skew(0deg); }
  70% { transform: skew(-3deg); }
  80% { transform: skew(1deg); }
  90% { transform: skew(2deg); }
  100% { transform: skew(0deg); }
}

/* 4. FADE IN LETTERS (each letter fades in) */
.fade-letters {
  display: inline-block;
}

.fade-letters span {
  display: inline-block;
  opacity: 0;
  animation: fadeLetter 0.6s forwards;
  animation-delay: calc(0.05s * var(--letter-index));
}

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

/* 5. MARQUEE LINE (continuous scroll) */
.marquee-line {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee-line span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* 6. SHIMMER (metallic shine) */
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* 7. TYPEWRITER (pure CSS, fixed width) */
.typewriter {
  overflow: hidden;
  border-right: 2px solid orange;
  white-space: nowrap;
  margin: 0 auto;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: orange; }
}

/* 8. FLIP WORD (3D flip on hover) */
.flip-word {
  display: inline-block;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.flip-word:hover {
  transform: rotateX(90deg);
  transform-origin: bottom;
}