#route-poem {
  font-family: var(--font-secondary);
  color: var(--color-text);
}

/* Poem Container */
.poem-container {
  max-width: 900px;
  width: 100%;
  text-align: center;
  /* background: var(--poem-panel-bg);
  padding: 3rem 2rem;
  border: 1px solid var(--poem-panel-border);
  border-radius: 4px;
  backdrop-filter: blur(8px); */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media (max-width: 768px) {
  .poem-container {
    max-width: 95%;
    padding: 2rem 1rem;
    margin: 1rem auto;
  }
}

@media (max-width: 480px) {
  .poem-container {
    max-width: 98%;
    padding: 1.5rem 0.75rem;
    border-radius: 2px;
  }
}

.title {
  position: relative;
  font-family: var(--font-display);
  font-size: calc(15.8px + 3.94vw);
  font-weight: 700;
  color: #fff;
  margin-bottom: 2rem;
  padding: 0 2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 0 0.15em #888;
  user-select: none;
  white-space: nowrap;
  filter: blur(0.007em);
  animation: shake 2.5s linear forwards;
}

.title span {
  position: absolute;
  top: 0;
  left: 30%;
  transform: translate(-50%, -50%);
  clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}

.title::before,
.title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 30%;
}

.title::before {
  animation: crack1 2.5s linear forwards;
  clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}

.title::after {
  animation: crack2 2.5s linear forwards;
  clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}

@keyframes shake {
  5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
    filter: blur(0.018em);
    transform: translateY(0.018em) rotate(0deg);
  }

  10%, 30%, 40%, 50%, 70%, 80%, 90% {
    filter: blur(0.01em);
    transform: translateY(-0.018em) rotate(0deg);
  }

  20%, 60% {
    filter: blur(0.03em);
    transform: translate(-0.018em, 0.018em) rotate(0deg);
  }

  45%, 85% {
    filter: blur(0.03em);
    transform: translate(0.018em, -0.018em) rotate(0deg);
  }

  100% {
    filter: blur(0.007em);
    transform: translate(0) rotate(-0.5deg);
  }
}

@keyframes crack1 {
  0%, 95% {
    transform: translate(-50%, -50%);
  }

  100% {
    transform: translate(-51%, -48%);
  }
}

@keyframes crack2 {
  0%, 95% {
    transform: translate(-50%, -50%);
  }

  100% {
    transform: translate(-49%, -53%);
  }
}

.poem {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
  white-space: pre-wrap;
  text-align: left;
}

.poem pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.placeholder {
  color: #666;
  font-style: italic;
  text-align: center;
}

/* No Effects Warning */
.no-effects-warning {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 4px;
}

.warning-message {
  font-size: 1.5rem;
  color: rgba(255, 150, 150, 0.9);
  margin-bottom: 1rem;
  font-weight: 300;
}

.warning-details {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* Responsive Design (poem-specific layout only; header handled in landing.css) */
@media (max-width: 768px) {
  .poem-container .content,
  .poem {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .poem-heading {
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    padding: 0 2%;
  }


.poem-heading {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
  .poem {
    font-size: 0.9rem;
  }
}

/* Sentence Display */
.sentence-display {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem 0;
  padding: 2rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.poem-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Poem dev-only controls (skip forward, effect library): visible only when dev=true */
.poem-dev-only {
  display: none !important;
}
body[data-dev-mode="true"] .poem-dev-only {
  display: revert !important;
}

@media (max-width: 768px) {
  .sentence-display {
    min-height: 200px;
    margin: 2rem 0;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .sentence-display {
    min-height: 150px;
    margin: 1rem 0;
    padding: 0.5rem;
  }
}

.sentence {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  line-height: 1.8;
  color: #ffffff;
  text-align: center;
  max-width: 800px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  white-space: pre-line; /* preserve author line breaks within a segment */
}

/* Next Button */
.next-button {
  background: var(--poem-button-bg);
  border: 2px solid var(--poem-button-border);
  color: #ffffff;
  padding: 1rem 3rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin-top: 2rem;
}

.next-button:hover {
  background: var(--poem-button-hover-bg);
  border-color: var(--poem-button-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.next-button:active {
  transform: translateY(0);
}

/* Effect Info Bar */
.effect-info-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 0;
  width: 100%;
  background: var(--poem-info-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.effect-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.info-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.info-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 500;
}

/* Responsive Info Bar */
@media (max-width: 768px) {
  .effect-info-bar {
    flex-wrap: wrap;
    padding: 0.75rem 0.5rem;
    gap: 0.5rem;
    bottom: 2.5rem;
  }

  .effect-info {
    flex: 1 1 30%;
  }

  .info-label {
    font-size: 0.6rem;
  }

  .info-value {
    font-size: 0.75rem;
  }

  .sentence {
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .effect-info-bar {
    padding: 0.5rem 0.25rem;
    bottom: 2rem;
  }

  .effect-info {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
  }

  .info-label {
    font-size: 0.55rem;
  }

  .info-value {
    font-size: 0.7rem;
  }

  .sentence {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .next-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
  }
}

/* ============================================
   ENTRANCE ANIMATIONS - ANIMISTA.NET
   ============================================ */

/* BOUNCE IN */
@keyframes bounce-in-top {
  0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateY(-65px); animation-timing-function: ease-in; }
  72% { transform: translateY(0); animation-timing-function: ease-out; }
  81% { transform: translateY(-28px); animation-timing-function: ease-in; }
  90% { transform: translateY(0); animation-timing-function: ease-out; }
  95% { transform: translateY(-8px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); animation-timing-function: ease-out; }
}
.sentence.bounce-in-top { animation: bounce-in-top 1.1s both; }

@keyframes bounce-in-right {
  0% { transform: translateX(600px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateX(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateX(68px); animation-timing-function: ease-in; }
  72% { transform: translateX(0); animation-timing-function: ease-out; }
  81% { transform: translateX(32px); animation-timing-function: ease-in; }
  90% { transform: translateX(0); animation-timing-function: ease-out; }
  95% { transform: translateX(8px); animation-timing-function: ease-in; }
  100% { transform: translateX(0); animation-timing-function: ease-out; }
}
.sentence.bounce-in-right { animation: bounce-in-right 1.1s both; }

@keyframes bounce-in-bottom {
  0% { transform: translateY(500px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateY(65px); animation-timing-function: ease-in; }
  72% { transform: translateY(0); animation-timing-function: ease-out; }
  81% { transform: translateY(28px); animation-timing-function: ease-in; }
  90% { transform: translateY(0); animation-timing-function: ease-out; }
  95% { transform: translateY(8px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); animation-timing-function: ease-out; }
}
.sentence.bounce-in-bottom { animation: bounce-in-bottom 1.1s both; }

@keyframes bounce-in-left {
  0% { transform: translateX(-600px); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: translateX(0); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: translateX(-68px); animation-timing-function: ease-in; }
  72% { transform: translateX(0); animation-timing-function: ease-out; }
  81% { transform: translateX(-32px); animation-timing-function: ease-in; }
  90% { transform: translateX(0); animation-timing-function: ease-out; }
  95% { transform: translateX(-8px); animation-timing-function: ease-in; }
  100% { transform: translateX(0); animation-timing-function: ease-out; }
}
.sentence.bounce-in-left { animation: bounce-in-left 1.1s both; }

@keyframes bounce-in-fwd {
  0% { transform: scale(0); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: scale(1); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: scale(0.7); animation-timing-function: ease-in; }
  72% { transform: scale(1); animation-timing-function: ease-out; }
  81% { transform: scale(0.84); animation-timing-function: ease-in; }
  89% { transform: scale(1); animation-timing-function: ease-out; }
  95% { transform: scale(0.95); animation-timing-function: ease-in; }
  100% { transform: scale(1); animation-timing-function: ease-out; }
}
.sentence.bounce-in-fwd { animation: bounce-in-fwd 1.1s both; }

@keyframes bounce-in-bck {
  0% { transform: scale(7); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: scale(1); animation-timing-function: ease-out; opacity: 1; }
  55% { transform: scale(1.5); animation-timing-function: ease-in; }
  72% { transform: scale(1); animation-timing-function: ease-out; }
  81% { transform: scale(1.24); animation-timing-function: ease-in; }
  89% { transform: scale(1); animation-timing-function: ease-out; }
  95% { transform: scale(1.04); animation-timing-function: ease-in; }
  100% { transform: scale(1); animation-timing-function: ease-out; }
}
.sentence.bounce-in-bck { animation: bounce-in-bck 1.1s both; }

/* FADE IN */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.sentence.fade-in { animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-in-top {
  0% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.sentence.fade-in-top { animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-in-right {
  0% { transform: translateX(50px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.sentence.fade-in-right { animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-in-bottom {
  0% { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.sentence.fade-in-bottom { animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-in-left {
  0% { transform: translateX(-50px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.sentence.fade-in-left { animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-in-fwd {
  0% { transform: translateZ(-80px); opacity: 0; }
  100% { transform: translateZ(0); opacity: 1; }
}
.sentence.fade-in-fwd { animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-in-bck {
  0% { transform: translateZ(80px); opacity: 0; }
  100% { transform: translateZ(0); opacity: 1; }
}
.sentence.fade-in-bck { animation: fade-in-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

/* FLIP IN */
@keyframes flip-in-hor-top {
  0% { transform: rotateX(-80deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}
.sentence.flip-in-hor-top { animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes flip-in-hor-bottom {
  0% { transform: rotateX(80deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}
.sentence.flip-in-hor-bottom { animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes flip-in-ver-right {
  0% { transform: rotateY(-80deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
.sentence.flip-in-ver-right { animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes flip-in-ver-left {
  0% { transform: rotateY(80deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
.sentence.flip-in-ver-left { animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* ROLL IN */
@keyframes roll-in-left {
  0% { transform: translateX(-800px) rotate(-540deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.sentence.roll-in-left { animation: roll-in-left 0.6s ease-out both; }

@keyframes roll-in-right {
  0% { transform: translateX(800px) rotate(540deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.sentence.roll-in-right { animation: roll-in-right 0.6s ease-out both; }

@keyframes roll-in-top {
  0% { transform: translateY(-800px) rotate(-540deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.sentence.roll-in-top { animation: roll-in-top 0.6s ease-out both; }

@keyframes roll-in-bottom {
  0% { transform: translateY(800px) rotate(540deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.sentence.roll-in-bottom { animation: roll-in-bottom 0.6s ease-out both; }

/* ROTATE IN */
@keyframes rotate-in-center {
  0% { transform: rotate(-360deg); opacity: 0; }
  100% { transform: rotate(0); opacity: 1; }
}
.sentence.rotate-in-center { animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-in-top {
  0% { transform: rotate(-360deg); transform-origin: top; opacity: 0; }
  100% { transform: rotate(0); transform-origin: top; opacity: 1; }
}
.sentence.rotate-in-top { animation: rotate-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-in-right {
  0% { transform: rotate(-360deg); transform-origin: right; opacity: 0; }
  100% { transform: rotate(0); transform-origin: right; opacity: 1; }
}
.sentence.rotate-in-right { animation: rotate-in-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-in-bottom {
  0% { transform: rotate(-360deg); transform-origin: bottom; opacity: 0; }
  100% { transform: rotate(0); transform-origin: bottom; opacity: 1; }
}
.sentence.rotate-in-bottom { animation: rotate-in-bottom 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-in-left {
  0% { transform: rotate(-360deg); transform-origin: left; opacity: 0; }
  100% { transform: rotate(0); transform-origin: left; opacity: 1; }
}
.sentence.rotate-in-left { animation: rotate-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-in-2-cw {
  0% { transform: rotate(-45deg); opacity: 0; }
  100% { transform: rotate(0); opacity: 1; }
}
.sentence.rotate-in-2-cw { animation: rotate-in-2-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-in-2-ccw {
  0% { transform: rotate(45deg); opacity: 0; }
  100% { transform: rotate(0); opacity: 1; }
}
.sentence.rotate-in-2-ccw { animation: rotate-in-2-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* SCALE IN */
@keyframes scale-in-center {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sentence.scale-in-center { animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-in-top {
  0% { transform: scale(0); transform-origin: 50% 0%; opacity: 1; }
  100% { transform: scale(1); transform-origin: 50% 0%; opacity: 1; }
}
.sentence.scale-in-top { animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-in-right {
  0% { transform: scale(0); transform-origin: 100% 50%; opacity: 1; }
  100% { transform: scale(1); transform-origin: 100% 50%; opacity: 1; }
}
.sentence.scale-in-right { animation: scale-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-in-bottom {
  0% { transform: scale(0); transform-origin: 50% 100%; opacity: 1; }
  100% { transform: scale(1); transform-origin: 50% 100%; opacity: 1; }
}
.sentence.scale-in-bottom { animation: scale-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-in-left {
  0% { transform: scale(0); transform-origin: 0% 50%; opacity: 1; }
  100% { transform: scale(1); transform-origin: 0% 50%; opacity: 1; }
}
.sentence.scale-in-left { animation: scale-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-in-hor-center {
  0% { transform: scaleX(0); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
.sentence.scale-in-hor-center { animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-in-ver-center {
  0% { transform: scaleY(0); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
.sentence.scale-in-ver-center { animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* SLIDE IN */
@keyframes slide-in-top {
  0% { transform: translateY(-1000px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.sentence.slide-in-top { animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-in-right {
  0% { transform: translateX(1000px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.sentence.slide-in-right { animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-in-bottom {
  0% { transform: translateY(1000px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.sentence.slide-in-bottom { animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-in-left {
  0% { transform: translateX(-1000px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.sentence.slide-in-left { animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-in-fwd-center {
  0% { transform: translateZ(-1400px); opacity: 0; }
  100% { transform: translateZ(0); opacity: 1; }
}
.sentence.slide-in-fwd-center { animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-in-bck-center {
  0% { transform: translateZ(600px); opacity: 0; }
  100% { transform: translateZ(0); opacity: 1; }
}
.sentence.slide-in-bck-center { animation: slide-in-bck-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-in-blurred-top {
  0% { transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); transform-origin: 50% 0%; filter: blur(40px); opacity: 0; }
  100% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 50%; filter: blur(0); opacity: 1; }
}
.sentence.slide-in-blurred-top { animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }

@keyframes slide-in-blurred-right {
  0% { transform: translateX(1000px) scaleX(2.5) scaleY(0.2); transform-origin: 0% 50%; filter: blur(40px); opacity: 0; }
  100% { transform: translateX(0) scaleY(1) scaleX(1); transform-origin: 50% 50%; filter: blur(0); opacity: 1; }
}
.sentence.slide-in-blurred-right { animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }

@keyframes slide-in-blurred-bottom {
  0% { transform: translateY(1000px) scaleY(2.5) scaleX(0.2); transform-origin: 50% 100%; filter: blur(40px); opacity: 0; }
  100% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 50%; filter: blur(0); opacity: 1; }
}
.sentence.slide-in-blurred-bottom { animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }

@keyframes slide-in-blurred-left {
  0% { transform: translateX(-1000px) scaleX(2.5) scaleY(0.2); transform-origin: 100% 50%; filter: blur(40px); opacity: 0; }
  100% { transform: translateX(0) scaleY(1) scaleX(1); transform-origin: 50% 50%; filter: blur(0); opacity: 1; }
}
.sentence.slide-in-blurred-left { animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }

/* SWING IN */
@keyframes swing-in-top-fwd {
  0% { transform: rotateX(-100deg); transform-origin: top; opacity: 0; }
  100% { transform: rotateX(0deg); transform-origin: top; opacity: 1; }
}
.sentence.swing-in-top-fwd { animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }

@keyframes swing-in-right-fwd {
  0% { transform: rotateY(-100deg); transform-origin: right; opacity: 0; }
  100% { transform: rotateY(0); transform-origin: right; opacity: 1; }
}
.sentence.swing-in-right-fwd { animation: swing-in-right-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }

@keyframes swing-in-bottom-fwd {
  0% { transform: rotateX(100deg); transform-origin: bottom; opacity: 0; }
  100% { transform: rotateX(0); transform-origin: bottom; opacity: 1; }
}
.sentence.swing-in-bottom-fwd { animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }

@keyframes swing-in-left-fwd {
  0% { transform: rotateY(100deg); transform-origin: left; opacity: 0; }
  100% { transform: rotateY(0); transform-origin: left; opacity: 1; }
}
.sentence.swing-in-left-fwd { animation: swing-in-left-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }

/* PUFF IN */
@keyframes puff-in-center {
  0% { transform: scale(2); filter: blur(4px); opacity: 0; }
  100% { transform: scale(1); filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-center { animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

@keyframes puff-in-top {
  0% { transform: scale(2); transform-origin: 50% 0%; filter: blur(4px); opacity: 0; }
  100% { transform: scale(1); transform-origin: 50% 0%; filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-top { animation: puff-in-top 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

@keyframes puff-in-right {
  0% { transform: scale(2); transform-origin: 100% 50%; filter: blur(4px); opacity: 0; }
  100% { transform: scale(1); transform-origin: 100% 50%; filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-right { animation: puff-in-right 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

@keyframes puff-in-bottom {
  0% { transform: scale(2); transform-origin: 50% 100%; filter: blur(4px); opacity: 0; }
  100% { transform: scale(1); transform-origin: 50% 100%; filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-bottom { animation: puff-in-bottom 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

@keyframes puff-in-left {
  0% { transform: scale(2); transform-origin: 0% 50%; filter: blur(4px); opacity: 0; }
  100% { transform: scale(1); transform-origin: 0% 50%; filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-left { animation: puff-in-left 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

@keyframes puff-in-hor {
  0% { transform: scaleX(2); filter: blur(4px); opacity: 0; }
  100% { transform: scaleX(1); filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-hor { animation: puff-in-hor 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

@keyframes puff-in-ver {
  0% { transform: scaleY(2); filter: blur(4px); opacity: 0; }
  100% { transform: scaleY(1); filter: blur(0px); opacity: 1; }
}
.sentence.puff-in-ver { animation: puff-in-ver 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; }

/* Footer */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.5rem 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-link {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.footer-separator {
  margin: 0 0.5rem;
  opacity: 0.4;
}

/* About Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-overlay[hidden] {
  display: none !important;
}

/* Effect Picker Modal Overlay - Left Aligned */
.modal-overlay:has(.effect-picker-modal) {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) 400px, transparent 400px);
  backdrop-filter: none;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
}

.modal-content {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  font-family: var(--font-mono);
  color: #e8e8e8;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  transition: color 0.2s ease;
  z-index: 10;
}

.effect-picker-modal .modal-close {
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.modal-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.modal-content h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
}

.modal-content h3 {
  margin: 2rem 0 1rem 0;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
}

.modal-body {
  margin-bottom: 2rem;
}

.about-art {
  margin: 0 auto 1.5rem;
  max-width: 320px;
  text-align: center;
}

.about-art img {
  width: 100%;
  /* border-radius: 50% 50% 42% 58% / 52% 38% 62% 48%;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15); */
}

.about-art figcaption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.about-copy {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.pending-message {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}

.modal-credits {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.modal-credits p {
  margin: 0.5rem 0;
}

.modal-credits strong {
  color: rgba(255, 255, 255, 0.9);
}

.credit-link {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.credit-link a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.credit-link a:hover {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .modal-content {
    padding: 1.5rem;
    max-height: 90vh;
  }
  
  .site-footer {
    font-size: 0.6rem;
    padding: 0.4rem 0.5rem;
  }

  .footer-separator {
    margin: 0 0.3rem;
  }
}

@media (max-width: 480px) {
  .site-footer {
    font-size: 0.55rem;
    padding: 0.4rem 0.25rem;
    line-height: 1.4;
  }

  .footer-link {
    display: inline-block;
    margin: 0.1rem 0;
  }

  .footer-separator {
    margin: 0 0.2rem;
  }
}

/* ============================================
   TEXT ENTRANCE ANIMATIONS - ANIMISTA.NET
   ============================================ */

/* TEXT FOCUS IN */
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
.sentence.text-focus-in {
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* TEXT BLUR OUT (actually blur in effect) */
@keyframes text-blur-out {
  0% {
    filter: blur(0.01px);
  }
  100% {
    filter: blur(12px) opacity(0%);
  }
}
.sentence.text-blur-out {
  animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-direction: reverse;
}

/* TEXT FLICKER IN GLOW */
@keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    text-shadow: none;
  }
  10.1% {
    opacity: 1;
    text-shadow: none;
  }
  10.2% {
    opacity: 0;
    text-shadow: none;
  }
  20% {
    opacity: 0;
    text-shadow: none;
  }
  20.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  }
  20.6% {
    opacity: 0;
    text-shadow: none;
  }
  30% {
    opacity: 0;
    text-shadow: none;
  }
  30.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.5% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.6% {
    opacity: 0;
    text-shadow: none;
  }
  45% {
    opacity: 0;
    text-shadow: none;
  }
  45.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55.1% {
    opacity: 0;
    text-shadow: none;
  }
  57% {
    opacity: 0;
    text-shadow: none;
  }
  57.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60.1% {
    opacity: 0;
    text-shadow: none;
  }
  65% {
    opacity: 0;
    text-shadow: none;
  }
  65.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75.1% {
    opacity: 0;
    text-shadow: none;
  }
  77% {
    opacity: 0;
    text-shadow: none;
  }
  77.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85.1% {
    opacity: 0;
    text-shadow: none;
  }
  86% {
    opacity: 0;
    text-shadow: none;
  }
  86.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
}
.sentence.text-flicker-in-glow {
  animation: text-flicker-in-glow 1.5s linear both;
}

/* TEXT POP UP */
@keyframes text-pop-up-top {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(180, 180, 180, 0.6);
  }
}
.sentence.text-pop-up-top {
  animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes text-pop-up-right {
  0% {
    transform: translateX(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateX(50px);
    transform-origin: 50% 50%;
    text-shadow: -1px 0 0 #cccccc, -2px 0 0 #cccccc, -3px 0 0 #cccccc, -4px 0 0 #cccccc, -5px 0 0 #cccccc, -6px 0 0 #cccccc, -7px 0 0 #cccccc, -8px 0 0 #cccccc, -9px 0 0 #cccccc, -50px 0 30px rgba(180, 180, 180, 0.6);
  }
}
.sentence.text-pop-up-right {
  animation: text-pop-up-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes text-pop-up-bottom {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(50px);
    transform-origin: 50% 50%;
    text-shadow: 0 -1px 0 #cccccc, 0 -2px 0 #cccccc, 0 -3px 0 #cccccc, 0 -4px 0 #cccccc, 0 -5px 0 #cccccc, 0 -6px 0 #cccccc, 0 -7px 0 #cccccc, 0 -8px 0 #cccccc, 0 -9px 0 #cccccc, 0 -50px 30px rgba(180, 180, 180, 0.6);
  }
}
.sentence.text-pop-up-bottom {
  animation: text-pop-up-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes text-pop-up-left {
  0% {
    transform: translateX(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateX(-50px);
    transform-origin: 50% 50%;
    text-shadow: 1px 0 0 #cccccc, 2px 0 0 #cccccc, 3px 0 0 #cccccc, 4px 0 0 #cccccc, 5px 0 0 #cccccc, 6px 0 0 #cccccc, 7px 0 0 #cccccc, 8px 0 0 #cccccc, 9px 0 0 #cccccc, 50px 0 30px rgba(180, 180, 180, 0.6);
  }
}
.sentence.text-pop-up-left {
  animation: text-pop-up-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* TEXT SHADOW POP */
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #d0d0d0, 0 -2px #d0d0d0, 0 -3px #d0d0d0, 0 -4px #d0d0d0, 0 -5px #d0d0d0, 0 -6px #d0d0d0, 0 -7px #d0d0d0, 0 -8px #d0d0d0;
    transform: translateY(8px);
  }
}
.sentence.text-shadow-pop-top {
  animation: text-shadow-pop-top 0.6s ease both;
}

@keyframes text-shadow-pop-tr {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: 1px -1px #d0d0d0, 2px -2px #d0d0d0, 3px -3px #d0d0d0, 4px -4px #d0d0d0, 5px -5px #d0d0d0, 6px -6px #d0d0d0, 7px -7px #d0d0d0, 8px -8px #d0d0d0;
    transform: translateX(-8px) translateY(8px);
  }
}
.sentence.text-shadow-pop-tr {
  animation: text-shadow-pop-tr 0.6s ease both;
}

@keyframes text-shadow-pop-right {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateX(0);
  }
  100% {
    text-shadow: 1px 0 #d0d0d0, 2px 0 #d0d0d0, 3px 0 #d0d0d0, 4px 0 #d0d0d0, 5px 0 #d0d0d0, 6px 0 #d0d0d0, 7px 0 #d0d0d0, 8px 0 #d0d0d0;
    transform: translateX(-8px);
  }
}
.sentence.text-shadow-pop-right {
  animation: text-shadow-pop-right 0.6s ease both;
}

@keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: 1px 1px #d0d0d0, 2px 2px #d0d0d0, 3px 3px #d0d0d0, 4px 4px #d0d0d0, 5px 5px #d0d0d0, 6px 6px #d0d0d0, 7px 7px #d0d0d0, 8px 8px #d0d0d0;
    transform: translateX(-8px) translateY(-8px);
  }
}
.sentence.text-shadow-pop-br {
  animation: text-shadow-pop-br 0.6s ease both;
}

@keyframes text-shadow-pop-bottom {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 1px #d0d0d0, 0 2px #d0d0d0, 0 3px #d0d0d0, 0 4px #d0d0d0, 0 5px #d0d0d0, 0 6px #d0d0d0, 0 7px #d0d0d0, 0 8px #d0d0d0;
    transform: translateY(-8px);
  }
}
.sentence.text-shadow-pop-bottom {
  animation: text-shadow-pop-bottom 0.6s ease both;
}

@keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #d0d0d0, -2px 2px #d0d0d0, -3px 3px #d0d0d0, -4px 4px #d0d0d0, -5px 5px #d0d0d0, -6px 6px #d0d0d0, -7px 7px #d0d0d0, -8px 8px #d0d0d0;
    transform: translateX(8px) translateY(-8px);
  }
}
.sentence.text-shadow-pop-bl {
  animation: text-shadow-pop-bl 0.6s ease both;
}

@keyframes text-shadow-pop-left {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateX(0);
  }
  100% {
    text-shadow: -1px 0 #d0d0d0, -2px 0 #d0d0d0, -3px 0 #d0d0d0, -4px 0 #d0d0d0, -5px 0 #d0d0d0, -6px 0 #d0d0d0, -7px 0 #d0d0d0, -8px 0 #d0d0d0;
    transform: translateX(8px);
  }
}
.sentence.text-shadow-pop-left {
  animation: text-shadow-pop-left 0.6s ease both;
}

@keyframes text-shadow-pop-tl {
  0% {
    text-shadow: 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0, 0 0 #d0d0d0;
    transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px -1px #d0d0d0, -2px -2px #d0d0d0, -3px -3px #d0d0d0, -4px -4px #d0d0d0, -5px -5px #d0d0d0, -6px -6px #d0d0d0, -7px -7px #d0d0d0, -8px -8px #d0d0d0;
    transform: translateX(8px) translateY(8px);
  }
}
.sentence.text-shadow-pop-tl {
  animation: text-shadow-pop-tl 0.6s ease both;
}

/* TEXT SHADOW DROP */
@keyframes text-shadow-drop-center {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 0 0 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-center {
  animation: text-shadow-drop-center 0.6s ease both;
}

@keyframes text-shadow-drop-top {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 0 -6px 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-top {
  animation: text-shadow-drop-top 0.6s ease both;
}

@keyframes text-shadow-drop-tr {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 6px -6px 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-tr {
  animation: text-shadow-drop-tr 0.6s ease both;
}

@keyframes text-shadow-drop-right {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 6px 0 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-right {
  animation: text-shadow-drop-right 0.6s ease both;
}

@keyframes text-shadow-drop-br {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 6px 6px 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-br {
  animation: text-shadow-drop-br 0.6s ease both;
}

@keyframes text-shadow-drop-bottom {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 0 6px 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-bottom {
  animation: text-shadow-drop-bottom 0.6s ease both;
}

@keyframes text-shadow-drop-bl {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: -6px 6px 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-bl {
  animation: text-shadow-drop-bl 0.6s ease both;
}

@keyframes text-shadow-drop-left {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: -6px 0 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-left {
  animation: text-shadow-drop-left 0.6s ease both;
}

@keyframes text-shadow-drop-tl {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: -6px -6px 18px rgba(200, 200, 200, 0.7);
  }
}
.sentence.text-shadow-drop-tl {
  animation: text-shadow-drop-tl 0.6s ease both;
}

/* TRACKING IN */
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.sentence.tracking-in-expand {
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.sentence.tracking-in-contract {
  animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
.sentence.tracking-in-expand-fwd {
  animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-contract-bck {
  0% {
    letter-spacing: 1em;
    transform: translateZ(400px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
.sentence.tracking-in-contract-bck {
  animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* Effect Toggle & Settings Buttons */
.toggle-effect-btn,
.settings-btn {
  background: var(--poem-button-bg);
  border: 1px solid var(--poem-button-border);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.toggle-effect-btn:hover,
.settings-btn:hover {
  background: var(--poem-button-hover-bg);
  border-color: var(--poem-button-hover-border);
}

.toggle-effect-btn {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Effect Picker Modal */
.effect-picker-modal {
  width: 400px;
  max-width: 400px;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  overflow-y: auto;
  padding: 1rem;
}

.effect-picker-modal h2 {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}

.effect-summary {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.effect-summary p {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.bulk-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.bulk-btn {
  background: var(--poem-button-bg);
  border: 1px solid var(--poem-button-border);
  color: #e8e8e8;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.bulk-btn:hover {
  background: var(--poem-button-hover-bg);
  border-color: var(--poem-button-hover-border);
}

/* Category Sections */
.effect-categories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-section {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

.category-header:hover {
  background: rgba(255, 255, 255, 0.08);
}

.category-name {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.category-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Effect List */
.effect-list {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.effect-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  background: rgba(180, 180, 180, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  transition: all 0.2s ease;
}

.effect-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.effect-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.effect-label input[type="checkbox"] {
  width: 0.9rem;
  height: 0.9rem;
  cursor: pointer;
  accent-color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.effect-name {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Effect Preview */
.effect-demo-btn {
  background: rgba(100, 150, 255, 0.3);
  border: 1px solid rgba(100, 150, 255, 0.5);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 50px;
}

.effect-demo-btn:hover {
  background: rgba(100, 150, 255, 0.5);
  border-color: rgba(100, 150, 255, 0.8);
  transform: scale(1.05);
}

.effect-demo-btn:active {
  transform: scale(0.95);
}

/* Old preview box styles - keeping for backward compatibility */
.effect-preview {
  width: 80px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.preview-box {
  background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(200, 100, 255, 0.8));
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  font-size: 0.6rem;
  color: #ffffff;
  font-family: var(--font-mono);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Apply the animation dynamically based on the class */
.preview-box[class*="bounce-in"] { animation-duration: 1.1s; animation-timing-function: ease; }
.preview-box[class*="fade-in"] { animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
.preview-box[class*="flip-in"] { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.preview-box[class*="roll-in"] { animation-duration: 0.6s; animation-timing-function: ease-out; }
.preview-box[class*="rotate-in"] { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.preview-box[class*="scale-in"] { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.preview-box[class*="slide-in"] { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.preview-box[class*="swing-in"] { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.preview-box[class*="puff-in"] { animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
.preview-box[class*="text-"] { animation-duration: 1s; animation-timing-function: ease; }

/* Responsive Design for Effect Picker */
@media (max-width: 768px) {
  .effect-picker-modal {
    width: 320px;
    max-width: 90vw;
  }

  .effect-row {
    grid-template-columns: 1fr auto;
  }

  .effect-demo-btn {
    min-width: 45px;
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .effect-picker-modal {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .modal-overlay:has(.effect-picker-modal) {
    background: rgba(0, 0, 0, 0.95);
    padding: 0;
  }

  .effect-summary {
    font-size: 0.8rem;
  }

  .bulk-actions {
    flex-wrap: wrap;
  }

  .bulk-btn {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
  }

  .category-header {
    font-size: 0.75rem;
  }

  .effect-name {
    font-size: 0.7rem;
  }
}

/* ============================================
   AFTER EFFECTS (ATTENTION-GRABBING)
   Source: Animista.net - Attention Section
   ============================================ */

/* BLINK EFFECTS */
.blink-1 {
  animation: blink-1 0.6s both;
}

@keyframes blink-1 {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.blink-2 {
  animation: blink-2 0.9s both;
}

@keyframes blink-2 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* VIBRATE EFFECTS */
.vibrate-1 {
  animation: vibrate-1 0.3s linear infinite both;
}

@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

.vibrate-2 {
  animation: vibrate-2 0.5s linear infinite both;
}

@keyframes vibrate-2 {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(-3px, 0);
  }
  20% {
    transform: translate(3px, 0);
  }
  30% {
    transform: translate(-3px, 0);
  }
  40% {
    transform: translate(3px, 0);
  }
  50% {
    transform: translate(-3px, 0);
  }
  60% {
    transform: translate(3px, 0);
  }
  70% {
    transform: translate(-3px, 0);
  }
  80% {
    transform: translate(3px, 0);
  }
  90% {
    transform: translate(-3px, 0);
  }
  100% {
    transform: translate(0);
  }
}

.vibrate-3 {
  animation: vibrate-3 0.5s linear infinite both;
}

@keyframes vibrate-3 {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(0, -3px);
  }
  20% {
    transform: translate(0, 3px);
  }
  30% {
    transform: translate(0, -3px);
  }
  40% {
    transform: translate(0, 3px);
  }
  50% {
    transform: translate(0, -3px);
  }
  60% {
    transform: translate(0, 3px);
  }
  70% {
    transform: translate(0, -3px);
  }
  80% {
    transform: translate(0, 3px);
  }
  90% {
    transform: translate(0, -3px);
  }
  100% {
    transform: translate(0);
  }
}

/* FLICKER EFFECTS */
.flicker-1 {
  animation: flicker-1 2s linear infinite both;
}

@keyframes flicker-1 {
  0%, 100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

.flicker-2 {
  animation: flicker-2 3s linear infinite both;
}

@keyframes flicker-2 {
  0%, 100% {
    opacity: 1;
  }
  31.98% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  32.8% {
    opacity: 0;
  }
  32.82% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.7% {
    opacity: 0;
  }
  35.72% {
    opacity: 1;
  }
  36.98% {
    opacity: 1;
  }
  37% {
    opacity: 0;
  }
  37.6% {
    opacity: 0;
  }
  37.62% {
    opacity: 1;
  }
}

.flicker-3 {
  animation: flicker-3 1.5s linear infinite both;
}

@keyframes flicker-3 {
  0%, 100% {
    opacity: 1;
  }
  32.98% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  34.02% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.9% {
    opacity: 0;
  }
  35.92% {
    opacity: 1;
  }
  38.98% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  39.8% {
    opacity: 0;
  }
  39.82% {
    opacity: 1;
  }
  83.98% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  84.9% {
    opacity: 0;
  }
  84.92% {
    opacity: 1;
  }
}

/* SHAKE EFFECTS */
.shake-horizontal {
  animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    transform: translateX(-10px);
  }
  20%, 40%, 60% {
    transform: translateX(10px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}

.shake-vertical {
  animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-vertical {
  0%, 100% {
    transform: translateY(0);
  }
  10%, 30%, 50%, 70% {
    transform: translateY(-8px);
  }
  20%, 40%, 60% {
    transform: translateY(8px);
  }
  80% {
    transform: translateY(6.4px);
  }
  90% {
    transform: translateY(-6.4px);
  }
}

.shake-lr {
  animation: shake-lr 0.6s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-lr {
  0%, 100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  10% {
    transform: rotate(8deg);
  }
  20%, 40%, 60% {
    transform: rotate(-10deg);
  }
  30%, 50%, 70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-8deg);
  }
  90% {
    transform: rotate(8deg);
  }
}

.shake-top {
  animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-top {
  0%, 100% {
    transform: rotate(0deg);
    transform-origin: 50% 0;
  }
  10% {
    transform: rotate(2deg);
  }
  20%, 40%, 60% {
    transform: rotate(-4deg);
  }
  30%, 50%, 70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}

.shake-bottom {
  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-bottom {
  0%, 100% {
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
  10% {
    transform: rotate(2deg);
  }
  20%, 40%, 60% {
    transform: rotate(-4deg);
  }
  30%, 50%, 70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}

/* JELLO EFFECTS */
.jello-horizontal {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.jello-vertical {
  animation: jello-vertical 0.9s both;
}

@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.jello-diagonal-1 {
  animation: jello-diagonal-1 0.8s both;
}

@keyframes jello-diagonal-1 {
  0% {
    transform: skew(0deg, 0deg);
  }
  30% {
    transform: skew(25deg, 25deg);
  }
  40% {
    transform: skew(-15deg, -15deg);
  }
  50% {
    transform: skew(15deg, 15deg);
  }
  65% {
    transform: skew(-5deg, -5deg);
  }
  75% {
    transform: skew(5deg, 5deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}

.jello-diagonal-2 {
  animation: jello-diagonal-2 0.8s both;
}

@keyframes jello-diagonal-2 {
  0% {
    transform: skew(0deg, 0deg);
  }
  30% {
    transform: skew(-25deg, -25deg);
  }
  40% {
    transform: skew(15deg, 15deg);
  }
  50% {
    transform: skew(-15deg, -15deg);
  }
  65% {
    transform: skew(5deg, 5deg);
  }
  75% {
    transform: skew(-5deg, -5deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}

/* WOBBLE EFFECTS */
.wobble-hor-bottom {
  animation: wobble-hor-bottom 0.8s both;
}

@keyframes wobble-hor-bottom {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

.wobble-hor-top {
  animation: wobble-hor-top 0.8s both;
}

@keyframes wobble-hor-top {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(6deg);
  }
  30% {
    transform: translateX(15px) rotate(-6deg);
  }
  45% {
    transform: translateX(-15px) rotate(3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(-2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(1.2deg);
  }
}

.wobble-ver-left {
  animation: wobble-ver-left 0.8s both;
}

@keyframes wobble-ver-left {
  0%, 100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateY(-30px) rotate(-6deg);
  }
  30% {
    transform: translateY(15px) rotate(6deg);
  }
  45% {
    transform: translateY(-15px) rotate(-3.6deg);
  }
  60% {
    transform: translateY(9px) rotate(2.4deg);
  }
  75% {
    transform: translateY(-6px) rotate(-1.2deg);
  }
}

.wobble-ver-right {
  animation: wobble-ver-right 0.8s both;
}

@keyframes wobble-ver-right {
  0%, 100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateY(-30px) rotate(6deg);
  }
  30% {
    transform: translateY(15px) rotate(-6deg);
  }
  45% {
    transform: translateY(-15px) rotate(3.6deg);
  }
  60% {
    transform: translateY(9px) rotate(-2.4deg);
  }
  75% {
    transform: translateY(-6px) rotate(1.2deg);
  }
}

/* BOUNCE EFFECTS */
.bounce-top {
  animation: bounce-top 0.9s both;
}

@keyframes bounce-top {
  0% {
    transform: translateY(-45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%, 55%, 75%, 87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.bounce-bottom {
  animation: bounce-bottom 0.9s both;
}

@keyframes bounce-bottom {
  0% {
    transform: translateY(45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(4px);
    animation-timing-function: ease-in;
  }
  25%, 55%, 75%, 87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.bounce-left {
  animation: bounce-left 1.1s both;
}

@keyframes bounce-left {
  0% {
    transform: translateX(-48px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateX(-26px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateX(-13px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateX(-6.5px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateX(-4px);
    animation-timing-function: ease-in;
  }
  25%, 55%, 75%, 87%, 98% {
    transform: translateX(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.bounce-right {
  animation: bounce-right 1.1s both;
}

@keyframes bounce-right {
  0% {
    transform: translateX(48px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateX(26px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateX(13px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateX(6.5px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateX(4px);
    animation-timing-function: ease-in;
  }
  25%, 55%, 75%, 87%, 98% {
    transform: translateX(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

/* PULSATE EFFECTS */
.pulsate-fwd {
  animation: pulsate-fwd 0.5s ease-in-out infinite both;
}

@keyframes pulsate-fwd {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulsate-bck {
  animation: pulsate-bck 0.5s ease-in-out infinite both;
}

@keyframes pulsate-bck {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Preview box timing for after effects */
.preview-box[class*="blink"] { animation-duration: 0.7s; animation-timing-function: linear; }
.preview-box[class*="vibrate"] { animation-duration: 0.5s; animation-timing-function: linear; }
.preview-box[class*="flicker"] { animation-duration: 2s; animation-timing-function: linear; }
.preview-box[class*="shake"] { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); }
.preview-box[class*="jello"] { animation-duration: 0.9s; animation-timing-function: ease; }
.preview-box[class*="wobble"] { animation-duration: 0.8s; animation-timing-function: ease; }
.preview-box[class*="bounce-top"],
.preview-box[class*="bounce-bottom"],
.preview-box[class*="bounce-left"],
.preview-box[class*="bounce-right"] { animation-duration: 1s; animation-timing-function: ease; }
.preview-box[class*="pulsate"] { animation-duration: 0.5s; animation-timing-function: ease-in-out; }
/* ============================================ */
/* OUTRO EFFECTS - Exit Animations             */
/* ============================================ */

/* FADE OUT */
@keyframes fade-out-bottom {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(50px); opacity: 0; }
}
.sentence.fade-out-bottom { animation: fade-out-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes fade-out-bck {
  0% { transform: translateZ(0); opacity: 1; }
  100% { transform: translateZ(80px); opacity: 0; }
}
.sentence.fade-out-bck { animation: fade-out-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

/* FLIP OUT */
@keyframes flip-out-hor-top {
  0% { transform: rotateX(0); opacity: 1; }
  100% { transform: rotateX(-80deg); opacity: 0; }
}
.sentence.flip-out-hor-top { animation: flip-out-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes flip-out-ver-right {
  0% { transform: rotateY(0); opacity: 1; }
  100% { transform: rotateY(80deg); opacity: 0; }
}
.sentence.flip-out-ver-right { animation: flip-out-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes flip-out-hor-bottom {
  0% { transform: rotateX(0); opacity: 1; }
  100% { transform: rotateX(80deg); opacity: 0; }
}
.sentence.flip-out-hor-bottom { animation: flip-out-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* ROLL OUT */
@keyframes roll-out-right {
  0% { transform: translateX(0px) rotate(0deg); opacity: 1; }
  100% { transform: translateX(1000px) rotate(540deg); opacity: 0; }
}
.sentence.roll-out-right { animation: roll-out-right 0.6s ease-out both; }

/* ROTATE OUT */
@keyframes rotate-out-2-cw {
  0% { transform: rotate(0); opacity: 1; }
  100% { transform: rotate(45deg); opacity: 0; }
}
.sentence.rotate-out-2-cw { animation: rotate-out-2-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes rotate-out-top {
  0% { transform: rotate(0); transform-origin: top; opacity: 1; }
  100% { transform: rotate(-200deg); transform-origin: top; opacity: 0; }
}
.sentence.rotate-out-top { animation: rotate-out-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* SCALE OUT */
@keyframes scale-out-center {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.sentence.scale-out-center { animation: scale-out-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-out-bottom {
  0% { transform: scale(1); transform-origin: bottom center; opacity: 1; }
  100% { transform: scale(0); transform-origin: bottom center; opacity: 0; }
}
.sentence.scale-out-bottom { animation: scale-out-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-out-hor-center {
  0% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}
.sentence.scale-out-hor-center { animation: scale-out-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes scale-out-ver-center {
  0% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
.sentence.scale-out-ver-center { animation: scale-out-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* SLIDE OUT */
@keyframes slide-out-top {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-1000px); opacity: 0; }
}
.sentence.slide-out-top { animation: slide-out-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-out-bottom {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(1000px); opacity: 0; }
}
.sentence.slide-out-bottom { animation: slide-out-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes slide-out-blurred-top {
  0% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 0%; filter: blur(0); opacity: 1; }
  100% { transform: translateY(-1000px) scaleY(2) scaleX(0.2); transform-origin: 50% 0%; filter: blur(40px); opacity: 0; }
}
.sentence.slide-out-blurred-top { animation: slide-out-blurred-top 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both; }

@keyframes slide-out-blurred-right {
  0% { transform: translateX(0) scaleY(1) scaleX(1); transform-origin: 100% 50%; filter: blur(0); opacity: 1; }
  100% { transform: translateX(1000px) scaleX(2) scaleY(0.2); transform-origin: 100% 50%; filter: blur(40px); opacity: 0; }
}
.sentence.slide-out-blurred-right { animation: slide-out-blurred-right 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both; }

@keyframes slide-out-blurred-bottom {
  0% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 100%; filter: blur(0); opacity: 1; }
  100% { transform: translateY(1000px) scaleY(2) scaleX(0.2); transform-origin: 50% 100%; filter: blur(40px); opacity: 0; }
}
.sentence.slide-out-blurred-bottom { animation: slide-out-blurred-bottom 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both; }

/* SWING OUT */
@keyframes swing-out-left-fwd {
  0% { transform: rotateY(0); transform-origin: left center; opacity: 1; }
  100% { transform: rotateY(-100deg); transform-origin: left center; opacity: 0; }
}
.sentence.swing-out-left-fwd { animation: swing-out-left-fwd 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both; }

/* PUFF OUT */
@keyframes puff-out-center {
  0% { transform: scale(1); filter: blur(0px); opacity: 1; }
  100% { transform: scale(2); filter: blur(4px); opacity: 0; }
}
.sentence.puff-out-center { animation: puff-out-center 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

@keyframes puff-out-top {
  0% { transform: scale(1); transform-origin: 50% 0%; filter: blur(0px); opacity: 1; }
  100% { transform: scale(2); transform-origin: 50% 0%; filter: blur(4px); opacity: 0; }
}
.sentence.puff-out-top { animation: puff-out-top 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

@keyframes puff-out-bottom {
  0% { transform: scale(1); transform-origin: 50% 100%; filter: blur(0px); opacity: 1; }
  100% { transform: scale(2); transform-origin: 50% 100%; filter: blur(4px); opacity: 0; }
}
.sentence.puff-out-bottom { animation: puff-out-bottom 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

@keyframes puff-out-hor {
  0% { transform: scaleX(1); filter: blur(0px); opacity: 1; }
  100% { transform: scaleX(2); filter: blur(4px); opacity: 0; }
}
.sentence.puff-out-hor { animation: puff-out-hor 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

@keyframes puff-out-ver {
  0% { transform: scaleY(1); filter: blur(0px); opacity: 1; }
  100% { transform: scaleY(2); filter: blur(4px); opacity: 0; }
}
.sentence.puff-out-ver { animation: puff-out-ver 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

/* BOUNCE OUT */
@keyframes bounce-out-fwd {
  0% { transform: scale(1); opacity: 1; }
  20% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.sentence.bounce-out-fwd { animation: bounce-out-fwd 1.1s ease both; }

@keyframes bounce-out-bck {
  0% { transform: scale(1); opacity: 1; }
  20% { transform: scale(1.1); opacity: 1; }
  50% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.sentence.bounce-out-bck { animation: bounce-out-bck 1.1s ease both; }

/* TEXT EFFECTS OUT */
@keyframes text-focus-out {
  0% { filter: blur(0px); opacity: 1; }
  100% { filter: blur(12px); opacity: 0; }
}
.sentence.text-focus-out { animation: text-focus-out 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }

@keyframes tracking-out-expand {
  0% { letter-spacing: normal; opacity: 1; }
  100% { letter-spacing: 1em; opacity: 0; }
}
.sentence.tracking-out-expand { animation: tracking-out-expand 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }

@keyframes tracking-out-contract {
  0% { letter-spacing: normal; opacity: 1; }
  100% { letter-spacing: -0.5em; opacity: 0; }
}
.sentence.tracking-out-contract { animation: tracking-out-contract 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }

@keyframes tracking-out-expand-fwd {
  0% { letter-spacing: normal; transform: translateZ(0); opacity: 1; }
  100% { letter-spacing: 1em; transform: translateZ(300px); opacity: 0; }
}
.sentence.tracking-out-expand-fwd { animation: tracking-out-expand-fwd 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }

@keyframes tracking-out-contract-bck {
  0% { letter-spacing: normal; transform: translateZ(0); opacity: 1; }
  100% { letter-spacing: -0.5em; transform: translateZ(-500px); opacity: 0; }
}
.sentence.tracking-out-contract-bck { animation: tracking-out-contract-bck 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }