/**
 * StageZone – Creative Text styles
 * Creative Text element styles
 */

/* ─── Container & Lines ──────────────────────────────────── */

.sz-creative-text {
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
}

.sz-ct-line {
  display: block;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  font-size: var(--fit-size) !important;
  line-height: var(--fit-line-height) !important;
  text-shadow: var(--glitch-shadow, none);
}

.sz-ct-measure {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  white-space: nowrap;
  display: inline-block;
  padding: 0;
  margin: 0;
}

/* ─── CSS Animations ─────────────────────────────────────── */

@keyframes sz-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sz-slide-up {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sz-slide-down {
  from { opacity: 0; transform: translateY(-0.4em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sz-slide-left {
  from { opacity: 0; transform: translateX(0.6em); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sz-slide-right {
  from { opacity: 0; transform: translateX(-0.6em); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sz-scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sz-blur-in {
  from { opacity: 0; filter: blur(0.3em); }
  to   { opacity: 1; filter: blur(0); }
}

.sz-anim-fade-in    { opacity: 0; animation: sz-fade-in ease forwards; }
.sz-anim-slide-up   { opacity: 0; animation: sz-slide-up ease forwards; }
.sz-anim-slide-down { opacity: 0; animation: sz-slide-down ease forwards; }
.sz-anim-slide-left { opacity: 0; animation: sz-slide-left ease forwards; }
.sz-anim-slide-right{ opacity: 0; animation: sz-slide-right ease forwards; }
.sz-anim-scale-in   { opacity: 0; animation: sz-scale-in ease forwards; }
.sz-anim-blur-in    { opacity: 0; animation: sz-blur-in ease forwards; }

/* ─── Reveal ─────────────────────────────────────────────── */

@keyframes sz-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: 1; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

.sz-anim-reveal {
  opacity: 0;
  animation: sz-reveal cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

/* ─── Flip ───────────────────────────────────────────────── */

@keyframes sz-flip {
  from { opacity: 0; transform: rotateX(-90deg); }
  to   { opacity: 1; transform: rotateX(0deg); }
}

.sz-creative-text:has(.sz-anim-flip) {
  perspective: 600px;
}

.sz-anim-flip {
  opacity: 0;
  transform-origin: top center;
  animation: sz-flip cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* ─── Letter wave ────────────────────────────────────────── */

@keyframes sz-letter-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.35em); }
}

@keyframes sz-letter-fade {
  from { opacity: 0; transform: translateY(0.2em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sz-typewriter-char {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sz-ct-char {
  display: inline-block;
}

.sz-anim-letter-wave .sz-ct-char {
  animation: sz-letter-wave ease-in-out;
}

.sz-anim-letter-fade .sz-ct-char {
  opacity: 0;
  animation: sz-letter-fade ease forwards;
}

.sz-ct-char--fade {
  animation: sz-typewriter-char var(--typewriter-fade, 200ms) ease both;
}