/* Custom styles for Life as a Puzzle essay */

/* Sparkle effect for the word "hyperstition" */
.hyperstition {
  position: relative;
  background: linear-gradient(
    45deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sparkleGradient 3s ease-in-out infinite;
  font-weight: bold;
}

@keyframes sparkleGradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes sparkleFloat {
  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px) scale(1.2);
    opacity: 0.7;
  }
}

/* Mountain effect for the word "mountains" */
.mountains {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 1.1em;
  vertical-align: baseline;
}

.mountains .mountain-letter {
  display: inline-block;
  position: relative;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 50%,
    #8b4513 50%,
    #8b4513 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  vertical-align: baseline;
}

/* Creating a single mountain peak with 't' at the highest point, using negative values to go up from baseline */
/* m-o-u-n-t-a-i-n-s positions: baseline, rising, higher, higher, peak, falling, lower, lower, baseline */
.mountains .mountain-letter:nth-child(1) {
  transform: translateY(0px);
} /* m - baseline */
.mountains .mountain-letter:nth-child(2) {
  transform: translateY(-2px);
} /* o - rising */
.mountains .mountain-letter:nth-child(3) {
  transform: translateY(-5px);
} /* u - higher */
.mountains .mountain-letter:nth-child(4) {
  transform: translateY(-7px);
} /* n - higher */
.mountains .mountain-letter:nth-child(5) {
  transform: translateY(-8px);
} /* t - peak (highest) */
.mountains .mountain-letter:nth-child(6) {
  transform: translateY(-6px);
} /* a - falling */
.mountains .mountain-letter:nth-child(7) {
  transform: translateY(-4px);
} /* i - lower */
.mountains .mountain-letter:nth-child(8) {
  transform: translateY(-2px);
} /* n - lower */
.mountains .mountain-letter:nth-child(9) {
  transform: translateY(0px);
} /* s - baseline */

/* Beach effect for the word "beach" */
.beach {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 1.1em;
  vertical-align: baseline;
}

.beach .beach-letter {
  display: inline-block;
  position: relative;
  font-weight: bold;
  vertical-align: baseline;
}

/* Creating a beach scene - sunset gradient (yellow to orange), water (blue) - 60/40 split */
.beach .beach-letter:nth-child(1) {
  background: linear-gradient(
    to bottom,
    #ffdb00 0%,
    #ffcc00 21%,
    #ffb000 41%,
    #ff8c00 62%,
    #1e90ff 62%,
    #1e90ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} /* b - pure yellow top, blue water bottom */

.beach .beach-letter:nth-child(2) {
  background: linear-gradient(
    to bottom,
    #ffcc00 0%,
    #ffcc00 21%,
    #ffb000 41%,
    #ff8c00 62%,
    #1e90ff 62%,
    #1e90ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} /* e - yellow to orange sunset top, blue water bottom */

.beach .beach-letter:nth-child(3) {
  background: linear-gradient(
    to bottom,
    #ffcc00 0%,
    #ffcc00 21%,
    #ffb000 41%,
    #ff8c00 62%,
    #1e90ff 62%,
    #1e90ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} /* a - yellow to orange sunset top, blue water bottom */

.beach .beach-letter:nth-child(4) {
  background: linear-gradient(
    to bottom,
    #ffcc00 0%,
    #ffcc00 21%,
    #ffb000 41%,
    #ff8c00 62%,
    #1e90ff 62%,
    #1e90ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} /* c - yellow to orange sunset top, blue water bottom */

.beach .beach-letter:nth-child(5) {
  background: linear-gradient(
    to bottom,
    #ffcc00 0%,
    #ffcc00 21%,
    #ffb000 41%,
    #ff8c00 62%,
    #1e90ff 62%,
    #1e90ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} /* h - yellow to orange sunset top, blue water bottom */

/* Gentle wind effect - letters blow gently to the right while staying in place */
.gentle-wind {
  position: relative;
  display: inline-block;
  font-weight: normal;
  vertical-align: baseline;
}

.gentle-wind .wind-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  animation: gentleBlowing 4s ease-in-out infinite;
}

/* Stagger the animation delays for each letter */
.gentle-wind .wind-letter:nth-child(1) {
  animation-delay: 0s;
}
.gentle-wind .wind-letter:nth-child(2) {
  animation-delay: 0.1s;
}
.gentle-wind .wind-letter:nth-child(3) {
  animation-delay: 0.2s;
}
.gentle-wind .wind-letter:nth-child(4) {
  animation-delay: 0.3s;
}
.gentle-wind .wind-letter:nth-child(5) {
  animation-delay: 0.4s;
}
.gentle-wind .wind-letter:nth-child(6) {
  animation-delay: 0.5s;
}
.gentle-wind .wind-letter:nth-child(7) {
  animation-delay: 0.6s;
}
.gentle-wind .wind-letter:nth-child(8) {
  animation-delay: 0.7s;
}
.gentle-wind .wind-letter:nth-child(9) {
  animation-delay: 0.8s;
}
.gentle-wind .wind-letter:nth-child(10) {
  animation-delay: 0.9s;
}
.gentle-wind .wind-letter:nth-child(11) {
  animation-delay: 1s;
}

@keyframes gentleBlowing {
  0%,
  100% {
    transform: translateX(-1px) rotate(0deg);
  }
  25% {
    transform: translateX(1px) rotate(1deg);
  }
  50% {
    transform: translateX(2px) rotate(1.5deg);
  }
  75% {
    transform: translateX(0px) rotate(0.5deg);
  }
}

/* Brown and tan color cycling effect */
.brown-tan {
  position: relative;
  display: inline-block;
  font-weight: normal;
  vertical-align: baseline;
}

.brown-tan .brown-tan-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: bold;
}

/* Each letter cycles through different brown/tan colors with different timing */
.brown-tan .brown-tan-letter:nth-child(1) {
  animation: brownTanCycle1 3s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(2) {
  animation: brownTanCycle2 3.2s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(3) {
  animation: brownTanCycle3 3.4s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(4) {
  animation: brownTanCycle4 3.6s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(5) {
  animation: brownTanCycle5 3.8s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(6) {
  animation: brownTanCycle6 4s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(7) {
  animation: brownTanCycle7 4.2s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(8) {
  animation: brownTanCycle8 4.4s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(9) {
  animation: brownTanCycle9 4.6s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(10) {
  animation: brownTanCycle10 4.8s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(11) {
  animation: brownTanCycle11 5s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(12) {
  animation: brownTanCycle12 5.2s ease-in-out infinite;
}
.brown-tan .brown-tan-letter:nth-child(13) {
  animation: brownTanCycle13 5.4s ease-in-out infinite;
}

/* Different keyframes for each letter with various brown/tan shades */
@keyframes brownTanCycle1 {
  0% {
    color: #8b4513;
  }
  25% {
    color: #a0522d;
  }
  50% {
    color: #d2b48c;
  }
  75% {
    color: #deb887;
  }
  100% {
    color: #8b4513;
  }
}

@keyframes brownTanCycle2 {
  0% {
    color: #deb887;
  }
  25% {
    color: #8b4513;
  }
  50% {
    color: #cd853f;
  }
  75% {
    color: #d2b48c;
  }
  100% {
    color: #deb887;
  }
}

@keyframes brownTanCycle3 {
  0% {
    color: #a0522d;
  }
  25% {
    color: #d2b48c;
  }
  50% {
    color: #8b4513;
  }
  75% {
    color: #f5deb3;
  }
  100% {
    color: #a0522d;
  }
}

@keyframes brownTanCycle4 {
  0% {
    color: #cd853f;
  }
  25% {
    color: #f5deb3;
  }
  50% {
    color: #deb887;
  }
  75% {
    color: #8b4513;
  }
  100% {
    color: #cd853f;
  }
}

@keyframes brownTanCycle5 {
  0% {
    color: #d2b48c;
  }
  25% {
    color: #8b4513;
  }
  50% {
    color: #a0522d;
  }
  75% {
    color: #cd853f;
  }
  100% {
    color: #d2b48c;
  }
}

@keyframes brownTanCycle6 {
  0% {
    color: #f5deb3;
  }
  25% {
    color: #deb887;
  }
  50% {
    color: #8b4513;
  }
  75% {
    color: #a0522d;
  }
  100% {
    color: #f5deb3;
  }
}

@keyframes brownTanCycle7 {
  0% {
    color: #8b4513;
  }
  25% {
    color: #cd853f;
  }
  50% {
    color: #f5deb3;
  }
  75% {
    color: #d2b48c;
  }
  100% {
    color: #8b4513;
  }
}

@keyframes brownTanCycle8 {
  0% {
    color: #deb887;
  }
  25% {
    color: #a0522d;
  }
  50% {
    color: #d2b48c;
  }
  75% {
    color: #8b4513;
  }
  100% {
    color: #deb887;
  }
}

@keyframes brownTanCycle9 {
  0% {
    color: #a0522d;
  }
  25% {
    color: #f5deb3;
  }
  50% {
    color: #cd853f;
  }
  75% {
    color: #deb887;
  }
  100% {
    color: #a0522d;
  }
}

@keyframes brownTanCycle10 {
  0% {
    color: #cd853f;
  }
  25% {
    color: #d2b48c;
  }
  50% {
    color: #8b4513;
  }
  75% {
    color: #f5deb3;
  }
  100% {
    color: #cd853f;
  }
}

@keyframes brownTanCycle11 {
  0% {
    color: #f5deb3;
  }
  25% {
    color: #8b4513;
  }
  50% {
    color: #a0522d;
  }
  75% {
    color: #deb887;
  }
  100% {
    color: #f5deb3;
  }
}

@keyframes brownTanCycle12 {
  0% {
    color: #d2b48c;
  }
  25% {
    color: #cd853f;
  }
  50% {
    color: #deb887;
  }
  75% {
    color: #a0522d;
  }
  100% {
    color: #d2b48c;
  }
}

@keyframes brownTanCycle13 {
  0% {
    color: #8b4513;
  }
  25% {
    color: #f5deb3;
  }
  50% {
    color: #d2b48c;
  }
  75% {
    color: #cd853f;
  }
  100% {
    color: #8b4513;
  }
}

/* Cradled effect - upward bend like a smiley face with rocking motion */
.cradled {
  position: relative;
  display: inline-block;
  font-weight: normal;
  vertical-align: baseline;
  animation: rockingCradle 3s ease-in-out infinite;
}

.cradled .cradle-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: bold;
}

/* Creating an upward bend like a smiley face - letters go down towards middle, up at ends */
/* c-r-a-d-l-e-d positions: start high, lower, lowest, lowest (middle), lowest, lower, end high */
.cradled .cradle-letter:nth-child(1) {
  transform: translateY(-3px);
} /* c - start high */
.cradled .cradle-letter:nth-child(2) {
  transform: translateY(-1px);
} /* r - lower */
.cradled .cradle-letter:nth-child(3) {
  transform: translateY(2px);
} /* a - lowest */
.cradled .cradle-letter:nth-child(4) {
  transform: translateY(3px);
} /* d - lowest (middle) */
.cradled .cradle-letter:nth-child(5) {
  transform: translateY(2px);
} /* l - lowest */
.cradled .cradle-letter:nth-child(6) {
  transform: translateY(-1px);
} /* e - lower */
.cradled .cradle-letter:nth-child(7) {
  transform: translateY(-3px);
} /* d - end high */

/* Gentle rocking motion for the whole word */
@keyframes rockingCradle {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

/* Shimmering blue and yellow rainbow effect */
.rainbow-text {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.rainbow-text .rainbow-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: bold;
  color: #90e0ef; /* Fallback color */
  background: linear-gradient(
    90deg,
    #90e0ef,
    #7dd3fc,
    #f4d35e,
    #fbbf24,
    #90e0ef,
    #7dd3fc,
    #f4d35e,
    #fbbf24,
    #90e0ef,
    #7dd3fc,
    #f4d35e,
    #fbbf24
  );
  background-size: 1200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShimmer 2.5s linear infinite;
}

/* Ensure fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
  .rainbow-text .rainbow-letter {
    color: #90e0ef;
    -webkit-text-fill-color: #90e0ef;
  }
}

/* Stagger the shimmer animation for each letter with tighter timing */
.rainbow-text .rainbow-letter:nth-child(1) {
  animation-delay: 0s;
}
.rainbow-text .rainbow-letter:nth-child(2) {
  animation-delay: 0.03s;
}
.rainbow-text .rainbow-letter:nth-child(3) {
  animation-delay: 0.06s;
}
.rainbow-text .rainbow-letter:nth-child(4) {
  animation-delay: 0.09s;
}
.rainbow-text .rainbow-letter:nth-child(5) {
  animation-delay: 0.12s;
}
.rainbow-text .rainbow-letter:nth-child(6) {
  animation-delay: 0.15s;
}
.rainbow-text .rainbow-letter:nth-child(7) {
  animation-delay: 0.18s;
}
.rainbow-text .rainbow-letter:nth-child(8) {
  animation-delay: 0.21s;
}

/* Seamlessly continuous emphatic shimmer animation */
@keyframes rainbowShimmer {
  0% {
    background-position: 0% 50%;
    transform: scale(1.05) rotate(0deg);
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 4px #90e0ef);
  }
  16.67% {
    background-position: 16.67% 50%;
    transform: scale(1.15) rotate(1.5deg);
    filter: brightness(1.8) saturate(2) drop-shadow(0 0 8px #90e0ef);
  }
  33.33% {
    background-position: 33.33% 50%;
    transform: scale(1.05) rotate(0deg);
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 4px #7dd3fc);
  }
  50% {
    background-position: 50% 50%;
    transform: scale(1.15) rotate(-1.5deg);
    filter: brightness(1.8) saturate(2) drop-shadow(0 0 8px #f4d35e);
  }
  66.67% {
    background-position: 66.67% 50%;
    transform: scale(1.05) rotate(0deg);
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 4px #fbbf24);
  }
  83.33% {
    background-position: 83.33% 50%;
    transform: scale(1.15) rotate(1.5deg);
    filter: brightness(1.8) saturate(2) drop-shadow(0 0 8px #90e0ef);
  }
  100% {
    background-position: 100% 50%;
    transform: scale(1.05) rotate(0deg);
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 4px #90e0ef);
  }
}

/* Firm tugs effect - continuously tugged left and right */
.firm-tugs {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  animation: tugLeftRight 2s ease-in-out infinite;
}

.firm-tugs .tug-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: bold;
}

/* Letters compress and stretch during tugging */
.firm-tugs .tug-letter:nth-child(1) {
  animation: letterCompress 2s ease-in-out infinite;
  animation-delay: 0s;
}
.firm-tugs .tug-letter:nth-child(2) {
  animation: letterCompress 2s ease-in-out infinite;
  animation-delay: 0.05s;
}
.firm-tugs .tug-letter:nth-child(3) {
  animation: letterCompress 2s ease-in-out infinite;
  animation-delay: 0.1s;
}
.firm-tugs .tug-letter:nth-child(4) {
  animation: letterCompress 2s ease-in-out infinite;
  animation-delay: 0.15s;
}

/* Main tugging animation - pulls words left toward "the", right toward "of" */
@keyframes tugLeftRight {
  0% {
    transform: translateX(0px) scaleX(1);
  }
  25% {
    transform: translateX(-8px) scaleX(0.85);
  }
  50% {
    transform: translateX(0px) scaleX(1);
  }
  75% {
    transform: translateX(8px) scaleX(0.85);
  }
  100% {
    transform: translateX(0px) scaleX(1);
  }
}

/* Individual letter compression effect during tugs */
@keyframes letterCompress {
  0% {
    transform: scaleX(1) skewX(0deg);
  }
  25% {
    transform: scaleX(0.7) skewX(-3deg);
  }
  50% {
    transform: scaleX(1) skewX(0deg);
  }
  75% {
    transform: scaleX(0.7) skewX(3deg);
  }
  100% {
    transform: scaleX(1) skewX(0deg);
  }
}

/* Salty effect - random flashing salt particles around the word */
.salty {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.salty .salt-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: normal;
}

/* Random salt particles that flash in and out */
.salty .salt-letter::before,
.salty .salt-letter::after {
  content: "•";
  position: absolute;
  color: #ffffff;
  font-size: 0.25em;
  animation: saltFlash 2s infinite;
}

.salty .salt-letter:nth-child(1)::before {
  top: -0.6em;
  left: -0.4em;
  animation-delay: 0.3s;
}
.salty .salt-letter:nth-child(1)::after {
  bottom: -0.4em;
  right: -0.3em;
  animation-delay: 1.7s;
}

.salty .salt-letter:nth-child(2)::before {
  top: -0.3em;
  right: -0.5em;
  animation-delay: 0.8s;
}
.salty .salt-letter:nth-child(2)::after {
  bottom: -0.6em;
  left: -0.2em;
  animation-delay: 1.2s;
}

.salty .salt-letter:nth-child(3)::before {
  top: -0.5em;
  left: -0.3em;
  animation-delay: 0.1s;
}
.salty .salt-letter:nth-child(3)::after {
  bottom: -0.2em;
  right: -0.4em;
  animation-delay: 1.9s;
}

.salty .salt-letter:nth-child(4)::before {
  top: -0.2em;
  right: -0.2em;
  animation-delay: 1.4s;
}
.salty .salt-letter:nth-child(4)::after {
  bottom: -0.5em;
  left: -0.5em;
  animation-delay: 0.6s;
}

.salty .salt-letter:nth-child(5)::before {
  top: -0.4em;
  left: -0.1em;
  animation-delay: 1.1s;
}
.salty .salt-letter:nth-child(5)::after {
  bottom: -0.3em;
  right: -0.6em;
  animation-delay: 0.4s;
}

/* Simple flash animation for salt particles */
@keyframes saltFlash {
  0%,
  80% {
    opacity: 0;
  }
  85%,
  95% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

/* Fleeting effect - letters gradually fade away like something fleeting */
.fleeting {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.fleeting .fleet-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: normal;
  animation: fleetingFade 4s ease-in-out infinite;
}

/* Stagger the fading so letters disappear one by one */
.fleeting .fleet-letter:nth-child(1) {
  animation-delay: 0s;
}
.fleeting .fleet-letter:nth-child(2) {
  animation-delay: 0.1s;
}
.fleeting .fleet-letter:nth-child(3) {
  animation-delay: 0.2s;
}
.fleeting .fleet-letter:nth-child(4) {
  animation-delay: 0.3s;
}
.fleeting .fleet-letter:nth-child(5) {
  animation-delay: 0.4s;
}
.fleeting .fleet-letter:nth-child(6) {
  animation-delay: 0.5s;
}
.fleeting .fleet-letter:nth-child(7) {
  animation-delay: 0.6s;
}
.fleeting .fleet-letter:nth-child(8) {
  animation-delay: 0.7s;
}

/* Animation that makes letters fade away and come back */
@keyframes fleetingFade {
  0%,
  20% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  40%,
  60% {
    opacity: 0.1;
    transform: translateY(-2px) scale(0.95);
  }
  80%,
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

/* Kinked effect - sultry, seductive curves and warmth */
.kinked {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.kinked .kink-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: bold;
  color: #dc143c;
  text-shadow: 0 0 3px rgba(220, 20, 60, 0.5), 0 0 6px rgba(255, 69, 0, 0.3);
  animation: kinkyCurve 3s ease-in-out infinite;
}

/* Stagger the curves for a wave-like sensual motion */
.kinked .kink-letter:nth-child(1) {
  animation-delay: 0s;
}
.kinked .kink-letter:nth-child(2) {
  animation-delay: 0.1s;
}
.kinked .kink-letter:nth-child(3) {
  animation-delay: 0.2s;
}
.kinked .kink-letter:nth-child(4) {
  animation-delay: 0.3s;
}
.kinked .kink-letter:nth-child(5) {
  animation-delay: 0.4s;
}
.kinked .kink-letter:nth-child(6) {
  animation-delay: 0.5s;
}
.kinked .kink-letter:nth-child(7) {
  animation-delay: 0.6s;
}
.kinked .kink-letter:nth-child(8) {
  animation-delay: 0.7s;
}
.kinked .kink-letter:nth-child(9) {
  animation-delay: 0.8s;
}
.kinked .kink-letter:nth-child(10) {
  animation-delay: 0.9s;
}
.kinked .kink-letter:nth-child(11) {
  animation-delay: 1s;
}
.kinked .kink-letter:nth-child(12) {
  animation-delay: 1.1s;
}
.kinked .kink-letter:nth-child(13) {
  animation-delay: 1.2s;
}

/* Sultry curves and sensual movement */
@keyframes kinkyCurve {
  0% {
    transform: translateY(0px) skewX(0deg) scale(1);
    color: #dc143c;
    text-shadow: 0 0 3px rgba(220, 20, 60, 0.5), 0 0 6px rgba(255, 69, 0, 0.3);
  }
  25% {
    transform: translateY(-2px) skewX(3deg) scale(1.05);
    color: #ff1493;
    text-shadow: 0 0 5px rgba(255, 20, 147, 0.7), 0 0 10px rgba(255, 69, 0, 0.5);
  }
  50% {
    transform: translateY(1px) skewX(-2deg) scale(1.02);
    color: #ff4500;
    text-shadow: 0 0 4px rgba(255, 69, 0, 0.6), 0 0 8px rgba(220, 20, 60, 0.4);
  }
  75% {
    transform: translateY(-1px) skewX(2deg) scale(1.03);
    color: #ff1493;
    text-shadow: 0 0 6px rgba(255, 20, 147, 0.8), 0 0 12px rgba(255, 69, 0, 0.6);
  }
  100% {
    transform: translateY(0px) skewX(0deg) scale(1);
    color: #dc143c;
    text-shadow: 0 0 3px rgba(220, 20, 60, 0.5), 0 0 6px rgba(255, 69, 0, 0.3);
  }
}

/* Existentially kinked link styling */
.kinked-link {
  text-decoration: none;
  cursor: pointer;
}

.kinked-link:hover .kinked .kink-letter {
  animation-duration: 1.5s;
}

/* Smirk emoji pulse effect */
.smirk-emoji {
  display: inline-block;
  animation: emojiPulse 2s ease-in-out infinite;
}

/* Simple pulse animation */
@keyframes emojiPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* Delayed timing for second emoji */
.smirk-delayed {
  animation-delay: 1s;
}

/* Growing words - gradual font size increase from left to right */
.growing-word {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}

.growing-word .grow-letter {
  display: inline-block;
  vertical-align: baseline;
  font-weight: bold;
  line-height: 1;
}

/* Gradual size increase for strength (8 letters) */
.growing-word .grow-letter:nth-child(1) {
  font-size: 0.85em;
} /* s or c */
.growing-word .grow-letter:nth-child(2) {
  font-size: 0.92em;
} /* t or o */
.growing-word .grow-letter:nth-child(3) {
  font-size: 0.99em;
} /* r or u */
.growing-word .grow-letter:nth-child(4) {
  font-size: 1.06em;
} /* e or r */
.growing-word .grow-letter:nth-child(5) {
  font-size: 1.13em;
} /* n or a */
.growing-word .grow-letter:nth-child(6) {
  font-size: 1.2em;
} /* g or g */
.growing-word .grow-letter:nth-child(7) {
  font-size: 1.27em;
} /* t or e */
.growing-word .grow-letter:nth-child(8) {
  font-size: 1.34em;
} /* h */

/* Dropped effect - letters fall with gravity */
.dropped {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.dropped .drop-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: normal;
  animation: letterDrop 3s ease-out infinite;
}

/* Stagger the drop timing for each letter */
.dropped .drop-letter:nth-child(1) {
  animation-delay: 0s;
}
.dropped .drop-letter:nth-child(2) {
  animation-delay: 0.1s;
}
.dropped .drop-letter:nth-child(3) {
  animation-delay: 0.2s;
}
.dropped .drop-letter:nth-child(4) {
  animation-delay: 0.3s;
}
.dropped .drop-letter:nth-child(5) {
  animation-delay: 0.4s;
}
.dropped .drop-letter:nth-child(6) {
  animation-delay: 0.5s;
}
.dropped .drop-letter:nth-child(7) {
  animation-delay: 0.6s;
}

/* Dropping animation with gravity effect */
@keyframes letterDrop {
  0% {
    transform: translateY(-20px);
    opacity: 0.3;
  }
  20% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* Heavenly effect - soft divine glow with ethereal floating */
.heavenly {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.heavenly .heaven-letter {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-weight: normal;
  color: #f8f9fa;
  background: linear-gradient(
    45deg,
    #ffffff,
    #f0f8ff,
    #e6f3ff,
    #fff8dc,
    #fffacd,
    #f5f5dc
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 0 4px rgba(255, 255, 255, 0.6),
    0 0 8px rgba(240, 248, 255, 0.4),
    0 0 12px rgba(255, 255, 255, 0.2);
  animation: heavenlyGlow 4s ease-in-out infinite;
}

/* Stagger the heavenly animation for each letter */
.heavenly .heaven-letter:nth-child(1) { animation-delay: 0s; }
.heavenly .heaven-letter:nth-child(2) { animation-delay: 0.1s; }
.heavenly .heaven-letter:nth-child(3) { animation-delay: 0.2s; }
.heavenly .heaven-letter:nth-child(4) { animation-delay: 0.3s; }
.heavenly .heaven-letter:nth-child(5) { animation-delay: 0.4s; }
.heavenly .heaven-letter:nth-child(6) { animation-delay: 0.5s; }

/* Heavenly glow animation - gentle pulsing glow with no movement */
@keyframes heavenlyGlow {
  0% {
    background-position: 0% 50%;
    text-shadow: 
      0 0 3px rgba(255, 255, 255, 0.5),
      0 0 6px rgba(240, 248, 255, 0.3),
      0 0 9px rgba(255, 255, 255, 0.15);
  }
  12.5% {
    background-position: 12.5% 50%;
    text-shadow: 
      0 0 3.5px rgba(255, 255, 255, 0.55),
      0 0 7px rgba(240, 248, 255, 0.35),
      0 0 10.5px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-position: 25% 50%;
    text-shadow: 
      0 0 4px rgba(255, 255, 255, 0.6),
      0 0 8px rgba(240, 248, 255, 0.4),
      0 0 12px rgba(255, 255, 255, 0.25);
  }
  37.5% {
    background-position: 37.5% 50%;
    text-shadow: 
      0 0 4.5px rgba(255, 255, 255, 0.65),
      0 0 9px rgba(240, 248, 255, 0.45),
      0 0 13.5px rgba(255, 255, 255, 0.3);
  }
  50% {
    background-position: 50% 50%;
    text-shadow: 
      0 0 5px rgba(255, 255, 255, 0.7),
      0 0 10px rgba(240, 248, 255, 0.5),
      0 0 15px rgba(255, 255, 255, 0.35);
  }
  62.5% {
    background-position: 62.5% 50%;
    text-shadow: 
      0 0 4.5px rgba(255, 255, 255, 0.65),
      0 0 9px rgba(240, 248, 255, 0.45),
      0 0 13.5px rgba(255, 255, 255, 0.3);
  }
  75% {
    background-position: 75% 50%;
    text-shadow: 
      0 0 4px rgba(255, 255, 255, 0.6),
      0 0 8px rgba(240, 248, 255, 0.4),
      0 0 12px rgba(255, 255, 255, 0.25);
  }
  87.5% {
    background-position: 87.5% 50%;
    text-shadow: 
      0 0 3.5px rgba(255, 255, 255, 0.55),
      0 0 7px rgba(240, 248, 255, 0.35),
      0 0 10.5px rgba(255, 255, 255, 0.2);
  }
  100% {
    background-position: 100% 50%;
    text-shadow: 
      0 0 3px rgba(255, 255, 255, 0.5),
      0 0 6px rgba(240, 248, 255, 0.3),
      0 0 9px rgba(255, 255, 255, 0.15);
  }
}