/**
 * Typewriter Text Effect Styles
 *
 * CSS styles for the typewriter animation effect
 */

/* Main wrapper styles */
.typewriter-text-effect-wrapper {
  display: block;
  width: 100%;
}

/* Typewriter text element */
.typewriter-text-effect {
  display: inline-block;
  position: relative;
  font-family: inherit;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Text content container */
.typewriter-text-content {
  display: inline;
  white-space: pre-wrap;
}

/* Cursor styles */
.typewriter-cursor {
  display: inline-block;
  color: currentColor;
  font-weight: normal;
  animation: typewriter-blink 500ms infinite;
  margin-left: 1px;
}

/* Cursor blinking animation */
@keyframes typewriter-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Alternative cursor styles */
.typewriter-cursor.solid {
  animation: none;
  opacity: 1;
}

.typewriter-cursor.smooth-blink {
  animation: typewriter-smooth-blink 1s infinite;
}

@keyframes typewriter-smooth-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .typewriter-text-effect {
    font-size: 0.9em;
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .typewriter-text-effect {
    font-size: 0.8em;
    line-height: 1.2;
  }

  .typewriter-cursor {
    margin-left: 0.5px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .typewriter-cursor {
    font-weight: bold;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor {
    animation: none;
    opacity: 1;
  }
}

/* Print styles */
@media print {
  .typewriter-text-effect {
    animation: none;
  }

  .typewriter-cursor {
    display: none;
  }
}

/* RTL support */
[dir="rtl"] .typewriter-cursor {
  margin-left: 0;
  margin-right: 1px;
}

/* Focus and accessibility */
.typewriter-text-effect:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Loading state */
.typewriter-text-effect.loading .typewriter-text-content {
  opacity: 0;
}

.typewriter-text-effect.loading .typewriter-cursor {
  animation: typewriter-loading 1s infinite;
}

@keyframes typewriter-loading {
  0%,
  33% {
    opacity: 1;
  }
  34%,
  66% {
    opacity: 0.5;
  }
  67%,
  100% {
    opacity: 0;
  }
}

/* Elementor editor specific styles */
.elementor-editor-active .typewriter-text-effect .typewriter-text-content {
  opacity: 1;
}

.elementor-editor-active .typewriter-cursor {
  animation: typewriter-blink 500ms infinite;
}

/* Performance optimizations */
.typewriter-text-effect {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Custom cursor variations */
.typewriter-cursor.block {
  background-color: currentColor;
  color: transparent;
  width: 0.6em;
  height: 1em;
  display: inline-block;
  vertical-align: baseline;
}

.typewriter-cursor.underline {
  border-bottom: 2px solid currentColor;
  background: transparent;
  color: transparent;
  width: 0.6em;
  height: 1em;
  display: inline-block;
  vertical-align: baseline;
}

/* Smooth typing effect */
.typewriter-text-effect.smooth .typewriter-text-content {
  transition: none;
}

/* Color scheme support */
@media (prefers-color-scheme: dark) {
  .typewriter-text-effect {
    color: inherit;
  }
}

/* Animation performance */
.typewriter-text-effect * {
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

/* Fallback for older browsers */
.no-js .typewriter-text-effect .typewriter-text-content {
  opacity: 1;
}

.no-js .typewriter-cursor {
  display: none;
}