/* Finger hover letter animation — shared across marketing pages */

.letter {
  display: inline-block;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-style: preserve-3d;
  overflow: hidden;
  vertical-align: bottom;
}

.letter-inner {
  display: block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.letter-secondary {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.letter.animate-up .letter-inner {
  transform: translateY(-100%);
}

.letter.animate-down .letter-inner {
  animation: sxFingerReverseFlip 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes sxFingerReverseFlip {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

[data-animation="finger"] {
  perspective: 1000px;
  display: inline-block;
}

/* Avoid transform clashes between finger letters and button scale/opacity hovers */
[data-animation="finger"]:hover {
  transform: none !important;
  opacity: 1 !important;
}

[data-animation="finger"].sx-btn-start:hover,
[data-animation="finger"].sx-not-found__btn:hover,
[data-animation="finger"].hero-start-btn-v3:hover,
[data-animation="finger"].imagination-section__start-button:hover,
[data-animation="finger"].view-service-btn:hover {
  transform: none !important;
  opacity: 1 !important;
}

.sx-not-found__btn[data-animation="finger"],
.sx-btn-start[data-animation="finger"] {
  vertical-align: middle;
  line-height: 1.15;
  min-height: 1.15em;
  overflow: hidden;
}

.sx-not-found__btn[data-animation="finger"] .letter,
.sx-btn-start[data-animation="finger"] .letter {
  vertical-align: bottom;
}