@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100');

.e-con .elementor-widget.elementor-widget-text_scramble  {
  min-width: 100% !important;
}


.ets-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 10;
  /* No fixed height on desktop - let content determine height */
  min-height: auto;
  height: auto;
}

.ets-wrapper {
  font-family: 'Roboto Mono', monospace;
  font-weight: 100;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  line-height: 1.4em;
  overflow: visible;
  text-transform: none !important;
  position: relative;
  z-index: 9999;
  /* No fixed height on desktop - let content determine height */
  min-height: auto;
  height: auto;
}

.ets-text,
.ets-static-before,
.ets-static-after {
  display: inline-block;
  line-height: 1.4em;
  overflow: visible;
  text-transform: none !important;
  position: relative;
  z-index: 9999;
  /* Ensure static text uses wrapper color, not animated text color */
  color: inherit;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  text-fill-color: initial;
  /* Only break at whole words, never in the middle of a word */
  word-break: normal;
  overflow-wrap: normal;
  word-wrap: normal;
}

.ets-static-before:not(:empty) {
  margin-right: 0.25em;
}

.ets-static-after:not(:empty) {
  margin-left: 0.25em;
}

/* Ensure static text elements are isolated from animated text styling */
.ets-wrapper .ets-static-before,
.ets-wrapper .ets-static-after {
  /* Reset any inherited styles from animated text */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  text-fill-color: initial !important;
  /* Use the wrapper's color */
  color: inherit;
}

/* Same responsive band as text-scramble.js (1024px–1350px → 40px animated text) */
@media (min-width: 1024px) and (max-width: 1350px) {
  .ets-wrapper .ets-static-before,
  .ets-wrapper .ets-static-after {
    font-size: 40px !important;
  }
}


/* SVG container for stroke animations */
.ets-stroke-container {
  position: relative;
  z-index: 9999;
  /* Ensure proper middle alignment with static text on desktop */
  vertical-align: middle;
  display: inline-block;
}

.ets-stroke-container svg {
  position: relative;
  z-index: 9999;
  /* block removes baseline gap under inline-block SVG (extra space under text on tablet) */
  vertical-align: top;
  display: block;
}

/* Scramble animation */
.ets-dud {
  color: #757575;
}

/* Typewriter cursor */
.ets-cursor {
  display: inline-block;
  animation: ets-blink 1s infinite;
  margin-left: 0.1em;
}

/* Console/Terminal cursor */
.ets-console-cursor {
  display: inline-block;
  margin-left: 0.1em;
  font-weight: 100;
  transition: opacity 0.1s;
}

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

/* Transitions for fade/slide animations */
.ets-text {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  z-index: 9999;
  /* No fixed height on desktop - let content determine height */
  min-height: auto;
  height: auto;
}

/* Prevent layout shift during typewriter animation */
.ets-wrapper {
  white-space: nowrap;
}

.ets-text[data-animation-type="typewriter"] {
  min-width: 10ch;
  text-align: left;
}

/* Glitch Animation */
.ets-glitch {
  position: relative;
  z-index: 9999;
  animation: ets-glitch-skew 1s linear infinite;
  display: inline-block;
  /* Ensure no max-width or overflow restrictions on desktop */
  max-width: none !important;
  overflow: visible !important;
}

.ets-glitch.ets-glitch-active {
  animation: ets-glitch-skew 1s linear infinite;
}

.ets-glitch:before,
.ets-glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ets-glitch:before {
  animation: ets-glitch-top 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  text-shadow: -0.05em 0 #ff00de;
}

.ets-glitch:after {
  animation: ets-glitch-bottom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  text-shadow: 0.05em 0 #00fff9;
}

@keyframes ets-glitch-skew {
  2%, 64% {
    transform: translate(0.05em, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-0.05em, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(5deg);
  }
}

@keyframes ets-glitch-top {
  2%, 64% {
    transform: translate(0.05em, -0.05em);
  }
  4%, 60% {
    transform: translate(-0.05em, 0.05em);
  }
  62% {
    transform: translate(0.3em, -0.03em) skew(-13deg);
  }
}

@keyframes ets-glitch-bottom {
  2%, 64% {
    transform: translate(-0.05em, 0);
  }
  4%, 60% {
    transform: translate(-0.05em, 0);
  }
  62% {
    transform: translate(-0.5em, 0.12em) skew(21deg);
  }
}



/* Ensure proper cleanup between different animation types */
.ets-text.ets-animation-cleanup {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.ets-text.ets-animation-cleanup .ets-glitch:before,
.ets-text.ets-animation-cleanup .ets-glitch:after {
  display: none;
}

/* Smooth transitions between different animation types */
.ets-text {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Ensure proper baseline alignment for mixed animations */
.ets-wrapper {
  vertical-align: baseline;
  display: inline-flex;
  align-items: baseline;
}

/* Prevent word breaking - only break at whole words, never in the middle */
.ets-wrapper,
.ets-wrapper *,
.ets-text,
.ets-text *,
.ets-static-before,
.ets-static-before *,
.ets-static-after,
.ets-static-after *,
.ets-text span,
.ets-text > span {
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
}

/* Prevent scale animation from breaking words/contractions */
.ets-scale-letter {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Prevent breaking contractions like "what's" in scale animation */
.ets-text[data-animation-type="scale"] .ets-scale-letter {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Scale animation wraps words - allow wrapping at word boundaries */
.ets-text[data-animation-type="scale"] {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  display: block !important;
}

/* Scale animation words should stay together (each word is wrapped in a span) */
.ets-text[data-animation-type="scale"] .ets-scale-letter {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Ensure scale animation wrapper allows word wrapping but keeps words intact */
.ets-wrapper:has(.ets-text[data-animation-type="scale"]) {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* ========================================
   CODE SYNTAX HIGHLIGHTING (VS Code Style)
   ======================================== */

/* Code style text should be smaller to reduce rows */
.ets-code-text {
  font-size: 0.7em !important;
  line-height: 1.2 !important;
  /* Ignore Elementor panel colors - use IDE colors only */
  /* Remove any color set by Elementor - IDE color classes will handle coloring */
  color: unset !important;
}

.ets-code-syntax {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-weight: 400;
  text-transform: none !important;
}

/* Code style uses IDE colors - no override needed */

.ets-code-object {
  color: #66D9EF !important;
  text-transform: none !important;
}

.ets-code-dot {
  color: #000000 !important;
  text-transform: none !important;
}

.ets-code-method {
  color: #A6E22E !important;
  text-transform: none !important;
}

.ets-code-paren {
  color: #E6DB74 !important;
  text-transform: none !important;
}

.ets-code-string {
  color: #F92672 !important;
  text-transform: none !important;
}

.ets-code-quote {
  color: #333333 !important;
  text-transform: none !important;
}

.ets-code-semicolon {
  color: #333333 !important;
  text-transform: none !important;
}

.ets-code-bracket {
  color: #5A5A5A !important;
  text-transform: none !important;
}

.ets-code-keyword {
  color: #4B5563 !important; /* Dark blue-grey for keywords */
  text-transform: none !important;
}

.ets-code-number {
  color: #DF631C !important;
  text-transform: none !important;
}

.ets-code-comment {
  color: #ACACAC !important;
  font-style: italic;
  text-transform: none !important;
}

/* Dark theme background (optional) */
.ets-code-dark-bg {
  background: #282c34;
  padding: 0.5em 1em;
  border-radius: 0.25em;
}

/* ========================================
   GRADIENT TEXT SUPPORT
   ======================================== */

.ets-gradient-text {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-fill-color: transparent !important;
  display: inline-block;
}

/* Ensure gradient text works with animations */
.ets-text.ets-gradient-text {
  position: relative;
  z-index: 1;
}


/* Gradient text with scramble animation - apply to characters */
.ets-gradient-text .ets-dud {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  opacity: 0.5;
}

/* Gradient text with glitch animation */
.ets-glitch.ets-gradient-text:before,
.ets-glitch.ets-gradient-text:after {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}


/* Ensure gradient stays during typewriter animation */
.ets-text.ets-gradient-text .ets-cursor,
.ets-text.ets-gradient-text .ets-console-cursor {
  -webkit-text-fill-color: currentColor;
  text-fill-color: currentColor;
  background: none;
}

/* Fix for Safari gradient rendering */
@supports (-webkit-background-clip: text) {
  .ets-gradient-text {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Mobile devices (portrait phones, 576px and down) */
@media (max-width: 576px) {
  .e-con .elementor-widget.elementor-widget-text_scramble  {
    min-width: 100% !important;
  }
  .ets-container {
    overflow: visible;
    align-items: center !important;
    justify-content: center !important;
    /* Fixed min-height to prevent layout shifts when text is removed (especially during typewriter deletion) */
    min-height: 210px !important;
    height: 210px !important;
  }
  
  .ets-wrapper {
    font-size: 3.2em !important;
    display: flex !important;
    flex-direction: column !important;
    white-space: normal;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    flex-wrap: nowrap;
    justify-content: center !important;
    align-items: stretch !important;
    text-align: center;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100%;
    min-height: 210px;
    box-sizing: border-box;
  }
  
  /* Keep static text aligned properly in column layout - always centered independently */
  .ets-wrapper .ets-static-before,
  .ets-wrapper .ets-static-after {
    align-self: stretch !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    margin-bottom: 0.25em;
    box-sizing: border-box;
    display: block !important;
    /* Ensure static text stays centered regardless of ets-text state */
    min-width: 100% !important;
  }
  
  /* Adjust margins for column layout - static-before has bottom margin, static-after has top margin */
  .ets-wrapper .ets-static-before:not(:empty) {
    margin-bottom: 0.25em !important;
  }
  
  .ets-wrapper .ets-static-after:not(:empty) {
    margin-top: 0.25em !important;
  }
  
  /* Keep animated text centered and always maintain full width to prevent layout shifts */
  .ets-wrapper .ets-text {
    justify-content: center;
    align-items: center;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
    min-height: 130px !important;
    height: 130px !important;
    flex: 1 1 auto;
    /* Ensure it maintains its full width even when empty to keep static text centered */
    min-width: 100% !important;
    display: block !important;
    box-sizing: border-box;
    /* Prevent width changes from affecting static text */
    position: relative;
    /* Only break at whole words, never in the middle of a word */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  
  /* Ensure empty ets-text maintains its full width to prevent static text shifting */
  .ets-wrapper .ets-text:empty {
    min-height: 130px !important;
    height: 130px !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    visibility: visible;
  }
  
  /* Ensure ets-text inner spans don't affect the container width */
  .ets-wrapper .ets-text > * {
    max-width: 100%;
    box-sizing: border-box;
    /* Only break at whole words, never in the middle of a word */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  
  /* Override wrap behavior if disabled */
  .ets-wrapper.ets-no-wrap-mobile {
    white-space: nowrap;
    word-wrap: normal;
    overflow-wrap: normal;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .ets-text {
    max-width: 100%;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
  }
  
  .ets-text[data-animation-type="typewriter"] {
    min-width: auto;
    max-width: 100%;
  }
  
  /* Prevent scale animation from breaking words/contractions on mobile */
  .ets-text[data-animation-type="scale"] {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    display: block !important;
  }
  
  /* Scale animation wraps words, not letters - ensure words stay together */
  .ets-text[data-animation-type="scale"] .ets-scale-letter {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  
  /* Ensure scale animation wrapper allows word wrapping but keeps words intact */
  .ets-wrapper:has(.ets-text[data-animation-type="scale"]) {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  
  /* Code style text smaller on mobile to prevent 3 lines */
  .ets-code-text {

    line-height: 1.1 !important;
  }
  
  /* Force line break after method name for code style on mobile */
  /* The break span creates a zero-width break point that forces wrapping */
  .ets-code-text .ets-code-line-break {
    display: inline-block !important;
    width: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }
  
  /* Scramble animation text smaller on mobile to prevent 3 lines */
  .ets-text .ets-dud,
  .ets-wrapper .ets-dud {
    font-size: 0.85em !important;
  }
  
  /* Reduce scramble animation font size on mobile to prevent 3 lines */
  .ets-wrapper .ets-text:not([data-animation-type="typewriter"]):not([data-animation-type="scale"]):not(.ets-code-text) {
    font-size: 0.85em !important;
    line-height: 1.2 !important;
  }
  
  /* Reduce glitch effect intensity on mobile */
  .ets-glitch:before {
    text-shadow: -0.03em 0 #ff00de;
  }
  
  .ets-glitch:after {
    text-shadow: 0.03em 0 #00fff9;
  }
  
  @keyframes ets-glitch-top {
    2%, 64% {
      transform: translate(0.03em, -0.03em);
    }
    4%, 60% {
      transform: translate(-0.03em, 0.03em);
    }
    62% {
      transform: translate(0.2em, -0.02em) skew(-10deg);
    }
  }
  
  @keyframes ets-glitch-bottom {
    2%, 64% {
      transform: translate(-0.03em, 0);
    }
    4%, 60% {
      transform: translate(-0.03em, 0);
    }
    62% {
      transform: translate(-0.3em, 0.08em) skew(15deg);
    }
  }
}

/* Small tablets and large phones (landscape, 577px to 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  
  .ets-wrapper {
    white-space: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: normal !important;
    flex-wrap: wrap;
    max-width: 100%;
  }
  
  .ets-text {
    max-width: 100%;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
  }
  
}

/* Tablets (769px to 992px) */
@media (min-width: 769px) and (max-width: 992px) {
  
  .ets-wrapper {
    max-width: 100%;
  }
  
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  
  .ets-static-before:not(:empty),
  .ets-static-after:not(:empty) {
    margin: 0 0.15em;
  }
  
  /* Stack elements vertically on very small screens if needed */
  .ets-wrapper.ets-stack-mobile {
    flex-direction: column;
    align-items: center;
  }
  
  .ets-wrapper.ets-stack-mobile .ets-static-before,
  .ets-wrapper.ets-stack-mobile .ets-static-after {
    margin: 0.25em 0;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 896px) and (orientation: landscape) {
  .ets-container {
    min-height: auto;
  }
  
  .ets-wrapper {
    white-space: nowrap;
  }
}

/* High DPI displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ets-glitch:before,
  .ets-glitch:after {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .ets-text,
  .ets-cursor,
  .ets-glitch {
    animation: none !important;
    transition: none !important;
  }
  
  .ets-glitch:before,
  .ets-glitch:after {
    display: none;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .ets-container {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* Ensure text is readable on touch devices */
  .ets-wrapper {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}