/* Linknest tile / page / auth animation styles
   Sourced from C:\xampp\htdocs\linknest\index.css
   Wired into CMMS for page, card, alert, and login motion. */

/* Smooth fade-in for page content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.linknest-page-content {
  animation: fadeInUp 0.6s ease-out;
}

/* Auth modal uplift */
@keyframes authModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes authBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes authShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes authMethodPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes authStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.auth-modal-backdrop {
  animation: authBackdropIn 0.25s ease-out;
}

.auth-modal-panel:not([class*="tile-anim-"]) {
  animation: authModalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tile entrance animations set overflow:hidden; keep the sign-in card scrollable. */
.auth-modal-panel.linknest-tile-animated {
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-modal-logo {
  animation: authFloat 3.5s ease-in-out infinite;
}

.auth-modal-btn-shimmer {
  background-size: 200% 100%;
  background-image: linear-gradient(
    110deg,
    #2563eb 0%,
    #2563eb 35%,
    #7c3aed 50%,
    #2563eb 65%,
    #2563eb 100%
  );
}

.auth-modal-btn-shimmer:not(:disabled):hover {
  animation: authShimmer 1.6s linear infinite;
}

.auth-method-card-selected {
  animation: authMethodPop 0.35s ease-out;
}

.auth-status-live {
  animation: authStatusPulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .auth-modal-backdrop,
  .auth-modal-panel,
  .auth-modal-logo,
  .auth-modal-btn-shimmer:not(:disabled):hover,
  .auth-method-card-selected,
  .auth-status-live {
    animation: none !important;
  }

  .auth-modal-panel.linknest-tile-animated {
    opacity: 1;
  }
}

/* ========================================
   TILE ANIMATIONS
   ======================================== */

/* Fade In Animation */
@keyframes tileAnimFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tile-anim-fade-in {
  animation: tileAnimFadeIn 0.6s ease-out forwards;
}

/* Slide Up Animation */
@keyframes tileAnimSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-slide-up {
  animation: tileAnimSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Slide Down Animation */
@keyframes tileAnimSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-slide-down {
  animation: tileAnimSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Slide Left Animation */
@keyframes tileAnimSlideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-slide-left {
  animation: tileAnimSlideLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Slide Right Animation */
@keyframes tileAnimSlideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-slide-right {
  animation: tileAnimSlideRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Zoom In Animation */
@keyframes tileAnimZoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-zoom-in {
  animation: tileAnimZoomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Zoom Out Animation */
@keyframes tileAnimZoomOut {
  from {
    opacity: 0;
    transform: scale(1.2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-zoom-out {
  animation: tileAnimZoomOut 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Flip X Animation */
@keyframes tileAnimFlipX {
  from {
    opacity: 0;
    transform: perspective(800px) rotateY(-90deg);
  }

  to {
    opacity: 1;
    transform: perspective(800px) rotateY(0);
  }
}

.tile-anim-flip-x {
  animation: tileAnimFlipX 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Flip Y Animation */
@keyframes tileAnimFlipY {
  from {
    opacity: 0;
    transform: perspective(800px) rotateX(-90deg);
  }

  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0);
  }
}

.tile-anim-flip-y {
  animation: tileAnimFlipY 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Bounce Animation */
@keyframes tileAnimBounce {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  60% {
    opacity: 1;
    transform: translateY(10px);
  }

  80% {
    opacity: 1;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-bounce {
  animation: tileAnimBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Rotate In Animation */
@keyframes tileAnimRotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.tile-anim-rotate-in {
  animation: tileAnimRotateIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Swing Animation */
@keyframes tileAnimSwing {
  0% {
    opacity: 0;
    transform: rotate(-10deg);
  }

  20% {
    opacity: 1;
    transform: rotate(10deg);
  }

  40% {
    opacity: 1;
    transform: rotate(-8deg);
  }

  60% {
    opacity: 1;
    transform: rotate(6deg);
  }

  80% {
    opacity: 1;
    transform: rotate(-4deg);
  }

  100% {
    opacity: 1;
    transform: rotate(0);
  }
}

.tile-anim-swing {
  animation: tileAnimSwing 0.8s ease-in-out forwards;
  transform-origin: top center;
}

/* Pulse Animation */
@keyframes tileAnimPulse {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-pulse {
  animation: tileAnimPulse 0.6s ease-in-out forwards;
}

/* Shake Animation */
@keyframes tileAnimShake {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  10% {
    opacity: 1;
    transform: translateX(-10px);
  }

  20% {
    transform: translateX(10px);
  }

  30% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(-10px);
  }

  60% {
    transform: translateX(10px);
  }

  70% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }

  90% {
    transform: translateX(-2px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-shake {
  animation: tileAnimShake 0.8s ease-in-out forwards;
}

/* Blur In Animation */
@keyframes tileAnimBlurIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.tile-anim-blur-in {
  animation: tileAnimBlurIn 0.8s ease-out forwards;
}

/* Roll In Animation */
@keyframes tileAnimRollIn {
  from {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.tile-anim-roll-in {
  animation: tileAnimRollIn 0.6s ease-out forwards;
}

/* Jack In The Box Animation */
@keyframes tileAnimJackInTheBox {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-jack-in-the-box {
  animation: tileAnimJackInTheBox 0.7s ease-in-out forwards;
}

/* Back In Down Animation */
@keyframes tileAnimBackInDown {
  0% {
    opacity: 0;
    transform: translateY(-800px) scale(0.7);
  }

  80% {
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-back-in-down {
  animation: tileAnimBackInDown 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Back In Up Animation */
@keyframes tileAnimBackInUp {
  0% {
    opacity: 0;
    transform: translateY(800px) scale(0.7);
  }

  80% {
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-back-in-up {
  animation: tileAnimBackInUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Reveal Animation */
@keyframes tileAnimReveal {
  from {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
  }

  to {
    opacity: 1;
    clip-path: inset(-10%);
  }
}

.tile-anim-reveal {
  animation: tileAnimReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Jello Animation */
@keyframes tileAnimJello {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }

  11.1% {
    opacity: 1;
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  22.2% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  33.3% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  44.4% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  55.5% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  66.6% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  77.7% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }

  88.8% {
    transform: skewX(0.09765625deg) skewY(0.09765625deg);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.tile-anim-jello {
  animation: tileAnimJello 0.8s ease-in-out forwards;
  transform-origin: center;
}

/* Rubber Band Animation */
@keyframes tileAnimRubberBand {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }

  30% {
    opacity: 1;
    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% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.tile-anim-rubber-band {
  animation: tileAnimRubberBand 0.8s ease-in-out forwards;
}

/* Tada Animation */
@keyframes tileAnimTada {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    opacity: 1;
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.tile-anim-tada {
  animation: tileAnimTada 0.8s ease-in-out forwards;
}

/* Flash Animation */
@keyframes tileAnimFlash {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.tile-anim-flash {
  animation: tileAnimFlash 0.8s ease-in-out forwards;
}

/* Zoom In Up Animation */
@keyframes tileAnimZoomInUp {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translateY(1000px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translateY(-60px);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translateY(0);
  }
}

.tile-anim-zoom-in-up {
  animation: tileAnimZoomInUp 0.7s forwards;
}

/* Zoom In Down Animation */
@keyframes tileAnimZoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translateY(-1000px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translateY(60px);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translateY(0);
  }
}

.tile-anim-zoom-in-down {
  animation: tileAnimZoomInDown 0.7s forwards;
}

/* Wave Animation */
@keyframes tileAnimWave {
  0% {
    opacity: 0;
    transform: translateY(20px) rotate(-5deg);
  }

  50% {
    opacity: 0.5;
    transform: translateY(-10px) rotate(5deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

.tile-anim-wave {
  animation: tileAnimWave 0.7s ease-in-out forwards;
}

/* Glitch Animation */
@keyframes tileAnimGlitch {
  0% {
    opacity: 0;
    transform: translate(5px, -5px);
    clip-path: inset(10% 0 10% 0);
  }

  20% {
    opacity: 1;
    transform: translate(-5px, 5px);
    clip-path: inset(30% 0 20% 0);
  }

  40% {
    transform: translate(2px, -2px);
    clip-path: inset(50% 0 5% 0);
  }

  60% {
    transform: translate(-2px, 2px);
    clip-path: inset(15% 0 35% 0);
  }

  100% {
    opacity: 1;
    transform: translate(0);
    clip-path: inset(-10%);
  }
}

.tile-anim-glitch {
  animation: tileAnimGlitch 0.5s steps(2, end) forwards;
}

/* Twirl Animation */
@keyframes tileAnimTwirl {
  from {
    opacity: 0;
    transform: rotate(-540deg) scale(0);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.tile-anim-twirl {
  animation: tileAnimTwirl 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Skid Animation */
@keyframes tileAnimSkid {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(20deg);
  }

  70% {
    transform: translateX(10%) skewX(-10deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

.tile-anim-skid {
  animation: tileAnimSkid 0.6s ease-out forwards;
}

/* Spiral Animation */
@keyframes tileAnimSpiral {
  from {
    opacity: 0;
    transform: rotate(720deg) scale(0) translate(-200px, -200px);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1) translate(0, 0);
  }
}

.tile-anim-spiral {
  animation: tileAnimSpiral 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) forwards;
}

/* Bounce In Right */
@keyframes tileAnimBounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(-30px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-bounce-in-right {
  animation: tileAnimBounceInRight 0.8s forwards;
}

/* Bounce In Left */
@keyframes tileAnimBounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(30px);
  }

  80% {
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-bounce-in-left {
  animation: tileAnimBounceInLeft 0.8s forwards;
}

/* Flip 3D Animation */
@keyframes tileAnimFlip3D {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg) rotateY(-90deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) rotateY(0) scale(1);
  }
}

.tile-anim-flip-3d {
  animation: tileAnimFlip3D 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Wobble Animation */
@keyframes tileAnimWobble {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  15% {
    opacity: 1;
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-wobble {
  animation: tileAnimWobble 0.8s forwards;
}

/* Heartbeat Animation */
@keyframes tileAnimHeartbeat {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  14% {
    opacity: 1;
    transform: scale(1.1);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  70%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-heartbeat {
  animation: tileAnimHeartbeat 0.8s ease-in-out forwards;
}

/* Puff In Animation */
@keyframes tileAnimPuffIn {
  0% {
    opacity: 0;
    transform: scale(2);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-puff-in {
  animation: tileAnimPuffIn 0.6s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards;
}

/* Drop Animation */
@keyframes tileAnimDrop {
  0% {
    opacity: 0;
    transform: translateY(-500px);
    animation-timing-function: ease-in;
  }

  60% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

.tile-anim-drop {
  animation: tileAnimDrop 0.8s forwards;
}

/* Swing In Animation */
@keyframes tileAnimSwingIn {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}

.tile-anim-swing-in {
  animation: tileAnimSwingIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Blur Slide Left */
@keyframes tileAnimBlurSlideLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
    filter: blur(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.tile-anim-blur-slide-left {
  animation: tileAnimBlurSlideLeft 0.7s ease-out forwards;
}

/* Blur Slide Right */
@keyframes tileAnimBlurSlideRight {
  from {
    opacity: 0;
    transform: translateX(-100px);
    filter: blur(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.tile-anim-blur-slide-right {
  animation: tileAnimBlurSlideRight 0.7s ease-out forwards;
}

/* Neon Flicker */
@keyframes tileAnimNeon {

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  }

  20%,
  22%,
  24%,
  55% {
    opacity: 0.5;
    box-shadow: none;
  }

  100% {
    opacity: 1;
    box-shadow: none;
  }

  0% {
    opacity: 0;
  }
}

.tile-anim-neon-flicker {
  animation: tileAnimNeon 1s ease-out forwards;
}

/* Focus Reveal */
@keyframes tileAnimFocus {
  0% {
    opacity: 0;
    filter: blur(40px);
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.tile-anim-focus-reveal {
  animation: tileAnimFocus 0.8s ease-out forwards;
}

/* Perspective In */
@keyframes tileAnimPerspective {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(30deg) translateY(50px) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) translateY(0) translateZ(0);
  }
}

.tile-anim-perspective-in {
  animation: tileAnimPerspective 0.8s ease-out forwards;
}

/* Blink Animation */
@keyframes tileAnimBlink {
  0% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.2;
  }
}

.tile-anim-blink {
  animation: tileAnimBlink 0.6s ease-in-out forwards;
}

/* Elastic Animation */
@keyframes tileAnimElastic {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) rotate(10deg);
  }

  70% {
    transform: scale(0.9) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.tile-anim-elastic {
  animation: tileAnimElastic 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* 53 More Animations */

/* Zoom In Directions */
@keyframes tileAnimZoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translateX(-1000px);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translateX(0);
  }
}

.tile-anim-zoom-in-left {
  animation: tileAnimZoomInLeft 0.7s forwards;
}

@keyframes tileAnimZoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translateX(1000px);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translateX(0);
  }
}

.tile-anim-zoom-in-right {
  animation: tileAnimZoomInRight 0.7s forwards;
}

/* Slide In Corners */
@keyframes tileAnimSlideInDownLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, -100%, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.tile-anim-slide-in-down-left {
  animation: tileAnimSlideInDownLeft 0.7s forwards;
}

@keyframes tileAnimSlideInDownRight {
  from {
    opacity: 0;
    transform: translate3d(100%, -100%, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.tile-anim-slide-in-down-right {
  animation: tileAnimSlideInDownRight 0.7s forwards;
}

@keyframes tileAnimSlideInUpLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 100%, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.tile-anim-slide-in-up-left {
  animation: tileAnimSlideInUpLeft 0.7s forwards;
}

@keyframes tileAnimSlideInUpRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 100%, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.tile-anim-slide-in-up-right {
  animation: tileAnimSlideInUpRight 0.7s forwards;
}

/* Rotate In Corners */
@keyframes tileAnimRotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.tile-anim-rotate-in-down-left {
  animation: tileAnimRotateInDownLeft 0.7s forwards;
}

@keyframes tileAnimRotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.tile-anim-rotate-in-down-right {
  animation: tileAnimRotateInDownRight 0.7s forwards;
}

@keyframes tileAnimRotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.tile-anim-rotate-in-up-left {
  animation: tileAnimRotateInUpLeft 0.7s forwards;
}

@keyframes tileAnimRotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.tile-anim-rotate-in-up-right {
  animation: tileAnimRotateInUpRight 0.7s forwards;
}

/* LightSpeed */
@keyframes tileAnimLightSpeedInRight {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.tile-anim-light-speed-in-right {
  animation: tileAnimLightSpeedInRight 0.7s ease-out forwards;
}

@keyframes tileAnimLightSpeedInLeft {
  from {
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.tile-anim-light-speed-in-left {
  animation: tileAnimLightSpeedInLeft 0.7s ease-out forwards;
}

/* Swing Sides */
@keyframes tileAnimSwingInLeft {
  from {
    transform: rotateY(-100deg);
    opacity: 0;
  }

  to {
    transform: rotateY(0);
    opacity: 1;
  }
}

.tile-anim-swing-in-left {
  animation: tileAnimSwingInLeft 0.7s forwards;
  transform-origin: left;
}

@keyframes tileAnimSwingInRight {
  from {
    transform: rotateY(100deg);
    opacity: 0;
  }

  to {
    transform: rotateY(0);
    opacity: 1;
  }
}

.tile-anim-swing-in-right {
  animation: tileAnimSwingInRight 0.7s forwards;
  transform-origin: right;
}

/* Roll Directions */
@keyframes tileAnimRollInBottom {
  from {
    transform: translateY(100%) rotate(120deg);
    opacity: 0;
  }

  to {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}

.tile-anim-roll-in-bottom {
  animation: tileAnimRollInBottom 0.7s forwards;
}

@keyframes tileAnimRollInTop {
  from {
    transform: translateY(-100%) rotate(-120deg);
    opacity: 0;
  }

  to {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}

.tile-anim-roll-in-top {
  animation: tileAnimRollInTop 0.7s forwards;
}

/* Back In Left/Right */
@keyframes tileAnimBackInLeft {
  0% {
    opacity: 0;
    transform: translateX(-800px) scale(0.7);
  }

  80% {
    opacity: 0.7;
    transform: translateX(0px) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-back-in-left {
  animation: tileAnimBackInLeft 0.7s forwards;
}

@keyframes tileAnimBackInRight {
  0% {
    opacity: 0;
    transform: translateX(800px) scale(0.7);
  }

  80% {
    opacity: 0.7;
    transform: translateX(0px) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-back-in-right {
  animation: tileAnimBackInRight 0.7s forwards;
}

/* Stretch */
@keyframes tileAnimStretchInHor {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.tile-anim-stretch-in-hor {
  animation: tileAnimStretchInHor 0.7s forwards;
}

@keyframes tileAnimStretchInVer {
  from {
    transform: scaleY(0);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.tile-anim-stretch-in-ver {
  animation: tileAnimStretchInVer 0.7s forwards;
}

/* Bounce Up/Down */
@keyframes tileAnimBounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-bounce-in-up {
  animation: tileAnimBounceInUp 0.7s forwards;
}

@keyframes tileAnimBounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(20px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-bounce-in-down {
  animation: tileAnimBounceInDown 0.7s forwards;
}

/* Jelly */
@keyframes tileAnimJelly {
  from {
    transform: scale(0.1);
    opacity: 0;
  }

  30% {
    transform: scale(1.25, 0.75);
    opacity: 1;
  }

  40% {
    transform: scale(0.75, 1.25);
  }

  50% {
    transform: scale(1.15, 0.85);
  }

  65% {
    transform: scale(0.95, 1.05);
  }

  75% {
    transform: scale(1.05, 0.95);
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-jelly {
  animation: tileAnimJelly 0.8s forwards;
}

/* Effects */
@keyframes tileAnimStarIn {
  from {
    transform: rotate(720deg) scale(0);
    opacity: 0;
  }

  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.tile-anim-star-in {
  animation: tileAnimStarIn 0.8s forwards;
}

@keyframes tileAnimFlareIn {
  from {
    opacity: 0;
    filter: brightness(5) blur(10px);
    transform: scale(1.2);
  }

  to {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: scale(1);
  }
}

.tile-anim-flare-in {
  animation: tileAnimFlareIn 0.7s forwards;
}

@keyframes tileAnimBeamIn {
  from {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
    filter: contrast(2);
  }

  to {
    opacity: 1;
    clip-path: inset(-10%);
    filter: contrast(1);
  }
}

.tile-anim-beam-in {
  animation: tileAnimBeamIn 0.8s forwards;
}

@keyframes tileAnimTeleport {
  0% {
    opacity: 0;
    filter: contrast(10) brightness(10);
    transform: scaleX(5);
  }

  50% {
    opacity: 1;
    transform: scaleX(0.1);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    filter: none;
  }
}

.tile-anim-teleport {
  animation: tileAnimTeleport 0.5s forwards;
}

@keyframes tileAnimShimmerIn {
  0% {
    opacity: 0;
    background: linear-gradient(90deg, transparent, white, transparent);
    background-size: 200% 100%;
  }

  100% {
    opacity: 1;
    background: none;
  }
}

.tile-anim-shimmer-in {
  animation: tileAnimShimmerIn 0.8s forwards, tileAnimFadeIn 0.8s forwards;
}

@keyframes tileAnimTiltIn {
  from {
    transform: perspective(1000px) rotateY(-30deg) translateZ(-100px);
    opacity: 0;
  }

  to {
    transform: perspective(1000px) rotateY(0) translateZ(0);
    opacity: 1;
  }
}

.tile-anim-tilt-in {
  animation: tileAnimTiltIn 0.7s forwards;
}

@keyframes tileAnimMagnify {
  from {
    transform: scale(0);
    opacity: 0;
    filter: drop-shadow(0 0 20px white);
  }

  to {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
}

.tile-anim-magnify {
  animation: tileAnimMagnify 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimBlurInUp {
  from {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.tile-anim-blur-in-up {
  animation: tileAnimBlurInUp 0.7s forwards;
}

@keyframes tileAnimBlurInDown {
  from {
    transform: translateY(-50px);
    filter: blur(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.tile-anim-blur-in-down {
  animation: tileAnimBlurInDown 0.7s forwards;
}

@keyframes tileAnimPopIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  70% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-pop-in {
  animation: tileAnimPopIn 0.5s forwards;
}

@keyframes tileAnimUnfoldIn {
  from {
    transform: rotateX(-90deg);
    opacity: 0;
  }

  to {
    transform: rotateX(0);
    opacity: 1;
  }
}

.tile-anim-unfold-in {
  animation: tileAnimUnfoldIn 0.7s forwards;
  transform-origin: top;
}

@keyframes tileAnimFoldIn {
  from {
    transform: rotateY(-90deg);
    opacity: 0;
  }

  to {
    transform: rotateY(0);
    opacity: 1;
  }
}

.tile-anim-fold-in {
  animation: tileAnimFoldIn 0.7s forwards;
  transform-origin: left;
}

@keyframes tileAnimSlotIn {
  from {
    transform: translateY(-100%) skewY(10deg);
    opacity: 0;
  }

  60% {
    transform: translateY(10%);
  }

  to {
    transform: translateY(0) skewY(0);
    opacity: 1;
  }
}

.tile-anim-slot-in {
  animation: tileAnimSlotIn 0.6s forwards;
}

@keyframes tileAnimNewspaper {
  from {
    transform: rotate(720deg) scale(0);
    opacity: 0;
  }

  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.tile-anim-newspaper {
  animation: tileAnimNewspaper 0.8s forwards;
}

@keyframes tileAnimCarouselIn {
  from {
    transform: rotateY(-180deg) translateZ(-500px);
    opacity: 0;
  }

  to {
    transform: rotateY(0) translateZ(0);
    opacity: 1;
  }
}

.tile-anim-carousel-in {
  animation: tileAnimCarouselIn 0.8s forwards;
}

@keyframes tileAnimCubeIn {
  from {
    transform: rotateX(-90deg) translateZ(-100px);
    opacity: 0;
  }

  to {
    transform: rotateX(0) translateZ(0);
    opacity: 1;
  }
}

.tile-anim-cube-in {
  animation: tileAnimCubeIn 0.8s forwards;
  transform-origin: center bottom;
}

@keyframes tileAnimStackIn {
  from {
    transform: scale(1.5) translateZ(200px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.tile-anim-stack-in {
  animation: tileAnimStackIn 0.7s forwards;
}

@keyframes tileAnimDoorIn {
  from {
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
  }

  to {
    transform: perspective(1000px) rotateY(0);
    opacity: 1;
  }
}

.tile-anim-door-in {
  animation: tileAnimDoorIn 0.7s forwards;
  transform-origin: left;
}

@keyframes tileAnimGhostIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(20px);
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-ghost-in {
  animation: tileAnimGhostIn 1s forwards;
}

@keyframes tileAnimGlitch2 {
  0% {
    transform: translate(0);
    opacity: 0;
  }

  10% {
    transform: translate(-2px, 2px);
    opacity: 1;
  }

  20% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
    opacity: 1;
  }
}

.tile-anim-glitch-2 {
  animation: tileAnimGlitch2 0.3s forwards;
}

@keyframes tileAnimNeonPulse {
  0% {
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
    opacity: 0;
  }

  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
    opacity: 1;
  }

  100% {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.4);
    opacity: 1;
  }
}

.tile-anim-neon-pulse {
  animation: tileAnimNeonPulse 1s forwards, tileAnimFadeIn 1s forwards;
}

@keyframes tileAnimVibrate {
  0% {
    transform: translate(0);
    opacity: 0;
  }

  10% {
    transform: translate(-1px, 1px);
    opacity: 1;
  }

  100% {
    transform: translate(0);
    opacity: 1;
  }
}

.tile-anim-vibrate {
  animation: tileAnimVibrate 0.1s infinite, tileAnimFadeIn 0.5s forwards;
}

@keyframes tileAnimBounceTop {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }

  50% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.tile-anim-bounce-top {
  animation: tileAnimBounceTop 0.6s forwards;
}

@keyframes tileAnimBounceBottom {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

  50% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.tile-anim-bounce-bottom {
  animation: tileAnimBounceBottom 0.6s forwards;
}

@keyframes tileAnimBounceLeft {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }

  50% {
    transform: translateX(0);
    opacity: 1;
  }

  70% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.tile-anim-bounce-left {
  animation: tileAnimBounceLeft 0.6s forwards;
}

@keyframes tileAnimBounceRight {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }

  50% {
    transform: translateX(0);
    opacity: 1;
  }

  70% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.tile-anim-bounce-right {
  animation: tileAnimBounceRight 0.6s forwards;
}

@keyframes tileAnimSquish {
  0% {
    transform: scale(1.5, 0.5);
    opacity: 0;
  }

  50% {
    transform: scale(0.8, 1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-squish {
  animation: tileAnimSquish 0.6s forwards;
}

@keyframes tileAnimSlideTilt {
  from {
    transform: translateX(-50px) rotate(-10deg);
    opacity: 0;
  }

  to {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}

.tile-anim-slide-tilt {
  animation: tileAnimSlideTilt 0.7s forwards;
}

@keyframes tileAnimSwirlIn {
  from {
    transform: rotate(-540deg) scale(0);
    filter: blur(10px);
    opacity: 0;
  }

  to {
    transform: rotate(0) scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

.tile-anim-swirl-in {
  animation: tileAnimSwirlIn 0.8s forwards;
}

@keyframes tileAnimBlurPerspective {
  from {
    transform: perspective(1000px) rotateX(45deg) translateZ(-200px);
    filter: blur(20px);
    opacity: 0;
  }

  to {
    transform: perspective(1000px) rotateX(0) translateZ(0);
    filter: blur(0);
    opacity: 1;
  }
}

.tile-anim-blur-perspective {
  animation: tileAnimBlurPerspective 0.8s forwards;
}


/* Initial state for animated tiles - Ensure they are hidden until animation starts */
.linknest-tile-animated {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  overflow: hidden;
}

/* Ensure tiles stay visible after animation completes */
.linknest-tile-animated[class*="tile-anim-"] {
  /* "both" = backwards + forwards.
     Backwards prevents a visual snap/jump at the end of animation-delay by
     applying the 0% keyframe styles during the delay. */
  animation-fill-mode: both !important;
}

/* Monitoring tiles share space entrance animations; keep overflow visible so hover actions are not clipped. */
.linknest-monitor-tile.linknest-tile-animated {
  overflow: visible;
}


@keyframes tileAnimLiquid {
  0% {
    opacity: 0;
    transform: scale(0.5) skew(30deg);
  }

  50% {
    transform: scale(1.1) skew(-10deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) skew(0);
  }
}

.tile-anim-liquid-in {
  animation: tileAnimLiquid 0.8s forwards;
}

@keyframes tileAnimSmoke {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px) scale(1.2);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.tile-anim-smoke-in {
  animation: tileAnimSmoke 0.9s forwards;
}

@keyframes tileAnimFire {
  0% {
    opacity: 0;
    transform: scale(0);
    filter: brightness(3) hue-rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(1.5);
  }

  100% {
    transform: scale(1);
    filter: none;
    opacity: 1;
  }
}

.tile-anim-fire-in {
  animation: tileAnimFire 0.7s forwards;
}

@keyframes tileAnimPixel {
  0% {
    opacity: 0;
    clip-path: inset(45% 45% 45% 45%);
  }

  100% {
    opacity: 1;
    clip-path: inset(-10%);
  }
}

.tile-anim-pixel-in {
  animation: tileAnimPixel 0.6s steps(5) forwards;
}

@keyframes tileAnimMosaic {
  0% {
    opacity: 0;
    transform: scale(0.2);
    filter: contrast(5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-mosaic-in {
  animation: tileAnimMosaic 0.7s forwards;
}

@keyframes tileAnimShatter {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(10deg);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: none;
  }
}

.tile-anim-shatter-in {
  animation: tileAnimShatter 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimCrack {
  0% {
    opacity: 0;
    transform: scale(0.9) rotate(-5deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  50% {
    opacity: 1;
    clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.tile-anim-crack-in {
  animation: tileAnimCrack 0.6s forwards;
}

@keyframes tileAnimDissolve {
  0% {
    opacity: 0;
    filter: contrast(0) brightness(2);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

.tile-anim-dissolve-in {
  animation: tileAnimDissolve 0.8s forwards;
}

@keyframes tileAnimEvaporate {
  0% {
    opacity: 0;
    transform: translateY(30px) scaleY(1.5);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: none;
  }
}

.tile-anim-evaporate-in {
  animation: tileAnimEvaporate 0.8s forwards;
}

@keyframes tileAnimCrystallize {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: saturate(0) min-blend-mode(screen);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-crystallize-in {
  animation: tileAnimCrystallize 0.8s forwards;
}

@keyframes tileAnimGravity {
  0% {
    opacity: 0;
    transform: translateY(-500px) rotate(15deg);
  }

  60% {
    transform: translateY(0) rotate(-5deg);
  }

  80% {
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

.tile-anim-gravity-in {
  animation: tileAnimGravity 0.8s forwards;
}

@keyframes tileAnimMagnet {
  0% {
    opacity: 0;
    transform: scale(2);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-magnet-in {
  animation: tileAnimMagnet 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes tileAnimVortex {
  0% {
    opacity: 0;
    transform: rotate(-1080deg) scale(0);
  }

  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.tile-anim-vortex-in {
  animation: tileAnimVortex 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimBlackHole {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
    filter: contrast(5) brightness(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: none;
  }
}

.tile-anim-black-hole-in {
  animation: tileAnimBlackHole 0.8s forwards;
}

@keyframes tileAnimWarp {
  0% {
    opacity: 0;
    transform: scaleX(2) scaleY(0.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-warp-in {
  animation: tileAnimWarp 0.6s forwards;
}

@keyframes tileAnimHyperJump {
  0% {
    opacity: 0;
    transform: scaleX(0.1) scaleY(5);
    filter: blur(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-hyper-jump-in {
  animation: tileAnimHyperJump 0.5s forwards;
}

@keyframes tileAnimTimeWarp {
  0% {
    opacity: 0;
    filter: hue-rotate(360deg);
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}

.tile-anim-time-warp-in {
  animation: tileAnimTimeWarp 0.8s forwards;
}

@keyframes tileAnimDimensionShift {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg) translateZ(100px);
  }

  100% {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateZ(0);
  }
}

.tile-anim-dimension-shift-in {
  animation: tileAnimDimensionShift 0.8s forwards;
}

@keyframes tileAnimPhase {
  0% {
    opacity: 0;
    filter: grayscale(1) opacity(0.5);
    transform: skewX(20deg);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: skewX(0);
  }
}

.tile-anim-phase-in {
  animation: tileAnimPhase 0.7s forwards;
}

@keyframes tileAnimGhostFade {
  0% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(15px) opacity(0);
  }

  50% {
    opacity: 0.5;
    filter: blur(5px) opacity(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-ghost-fade-in {
  animation: tileAnimGhostFade 1s forwards;
}

@keyframes tileAnimNeonFlicker3 {

  0%,
  2%,
  4%,
  10%,
  14%,
  18%,
  20%,
  50%,
  54%,
  56%,
  100% {
    opacity: 1;
  }

  1%,
  3%,
  12%,
  16%,
  19%,
  52%,
  55% {
    opacity: 0;
  }

  0% {
    opacity: 0;
  }
}

.tile-anim-neon-flicker-3 {
  animation: tileAnimNeonFlicker3 0.6s forwards;
}

@keyframes tileAnimCyberScan {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    border-top: 2px solid cyan;
  }

  100% {
    opacity: 1;
    clip-path: inset(-10%);
    border-top: none;
  }
}

.tile-anim-cyber-scan-in {
  animation: tileAnimCyberScan 0.8s forwards;
}

@keyframes tileAnimCodeReveal {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-code-reveal-in {
  animation: tileAnimCodeReveal 0.5s steps(10) forwards;
}

@keyframes tileAnimBinary {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: brightness(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-binary-in {
  animation: tileAnimBinary 0.7s forwards;
}

@keyframes tileAnimMatrix {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    filter: contrast(2) brightness(0.5);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

.tile-anim-matrix-in {
  animation: tileAnimMatrix 0.7s forwards;
}

@keyframes tileAnimDataStream {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

.tile-anim-data-stream-in {
  animation: tileAnimDataStream 0.6s forwards;
}

@keyframes tileAnimCircuit {
  0% {
    opacity: 0;
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }

  100% {
    opacity: 1;
    clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
  }
}

.tile-anim-circuit-in {
  animation: tileAnimCircuit 0.7s forwards;
}

@keyframes tileAnimPulseGlow {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  }

  100% {
    opacity: 1;
    box-shadow: none;
  }
}

.tile-anim-pulse-glow-in {
  animation: tileAnimPulseGlow 0.8s forwards;
}

@keyframes tileAnimHologram {
  0% {
    opacity: 0;
    transform: scaleY(0);
    filter: hue-rotate(90deg) brightness(2);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    filter: none;
  }
}

.tile-anim-hologram-in {
  animation: tileAnimHologram 0.6s forwards;
}

@keyframes tileAnimStatic {
  0% {
    opacity: 0;
    transform: scale(1.05);
    filter: contrast(3) brightness(2) grayscale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-static-in {
  animation: tileAnimStatic 0.5s forwards;
}

@keyframes tileAnimBounceElasticUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  30% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-bounce-elastic-up {
  animation: tileAnimBounceElasticUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes tileAnimBounceElasticDown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  30% {
    transform: translateY(20px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-bounce-elastic-down {
  animation: tileAnimBounceElasticDown 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes tileAnimBounceElasticLeft {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  30% {
    transform: translateX(-20px);
  }

  50% {
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-bounce-elastic-left {
  animation: tileAnimBounceElasticLeft 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes tileAnimBounceElasticRight {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  30% {
    transform: translateX(20px);
  }

  50% {
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-bounce-elastic-right {
  animation: tileAnimBounceElasticRight 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes tileAnimSpringUp {
  0% {
    opacity: 0;
    transform: translateY(200px) scaleY(2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-spring-in-up {
  animation: tileAnimSpringUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimSpringDown {
  0% {
    opacity: 0;
    transform: translateY(-200px) scaleY(2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-spring-in-down {
  animation: tileAnimSpringDown 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimSpringLeft {
  0% {
    opacity: 0;
    transform: translateX(200px) scaleX(2);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

.tile-anim-spring-in-left {
  animation: tileAnimSpringLeft 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimSpringRight {
  0% {
    opacity: 0;
    transform: translateX(-200px) scaleX(2);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

.tile-anim-spring-in-right {
  animation: tileAnimSpringRight 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimRubberBand2 {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  30% {
    transform: scale(1.25, 0.75);
    opacity: 1;
  }

  40% {
    transform: scale(0.75, 1.25);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-rubber-band-2 {
  animation: tileAnimRubberBand2 0.8s forwards;
}

@keyframes tileAnimBungee {
  0% {
    opacity: 0;
    transform: translateY(-300px) scaleY(2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-bungee-in {
  animation: tileAnimBungee 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tileAnimSlideRotateTL {
  0% {
    opacity: 0;
    transform: translate(-100%, -100%) rotate(-90deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

.tile-anim-slide-rotate-in-tl {
  animation: tileAnimSlideRotateTL 0.7s forwards;
}

@keyframes tileAnimSlideRotateTR {
  0% {
    opacity: 0;
    transform: translate(100%, -100%) rotate(90deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

.tile-anim-slide-rotate-in-tr {
  animation: tileAnimSlideRotateTR 0.7s forwards;
}

@keyframes tileAnimSlideRotateBL {
  0% {
    opacity: 0;
    transform: translate(-100%, 100%) rotate(90deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

.tile-anim-slide-rotate-in-bl {
  animation: tileAnimSlideRotateBL 0.7s forwards;
}

@keyframes tileAnimSlideRotateBR {
  0% {
    opacity: 0;
    transform: translate(100%, 100%) rotate(-90deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

.tile-anim-slide-rotate-in-br {
  animation: tileAnimSlideRotateBR 0.7s forwards;
}

@keyframes tileAnimZoomRotate {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.tile-anim-zoom-rotate-in {
  animation: tileAnimZoomRotate 0.8s forwards;
}

@keyframes tileAnimFlipRotate {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(90deg) rotateY(90deg);
  }

  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) rotateY(0);
  }
}

.tile-anim-flip-rotate-in {
  animation: tileAnimFlipRotate 0.8s forwards;
}

@keyframes tileAnimSwingRotate {
  0% {
    opacity: 0;
    transform: rotateX(90deg) rotateZ(90deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(0) rotateZ(0);
  }
}

.tile-anim-swing-rotate-in {
  animation: tileAnimSwingRotate 0.8s forwards;
}

@keyframes tileAnimBounceRotate {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }

  60% {
    transform: scale(1.1) rotate(-20deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.tile-anim-bounce-rotate-in {
  animation: tileAnimBounceRotate 0.8s forwards;
}

@keyframes tileAnimRollRotate {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-360deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

.tile-anim-roll-rotate-in {
  animation: tileAnimRollRotate 0.7s forwards;
}

@keyframes tileAnimTwirlRotate {
  0% {
    opacity: 0;
    transform: rotate(540deg) scale(0);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
    filter: none;
  }
}

.tile-anim-twirl-rotate-in {
  animation: tileAnimTwirlRotate 0.8s forwards;
}

@keyframes tileAnimSplitV {
  0% {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
  }

  100% {
    opacity: 1;
    clip-path: inset(-10%);
  }
}

.tile-anim-split-v-in {
  animation: tileAnimSplitV 0.7s forwards;
}

@keyframes tileAnimSplitH {
  0% {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(-10%);
  }
}

.tile-anim-split-h-in {
  animation: tileAnimSplitH 0.7s forwards;
}

@keyframes tileAnimBlindV {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.tile-anim-blind-v-in {
  animation: tileAnimBlindV 0.6s forwards;
}

@keyframes tileAnimBlindH {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.tile-anim-blind-h-in {
  animation: tileAnimBlindH 0.6s forwards;
}

@keyframes tileAnimChecker {
  0% {
    opacity: 0;
    filter: contrast(5) grayscale(1);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

.tile-anim-checker-in {
  animation: tileAnimChecker 0.7s forwards;
}

@keyframes tileAnimDiagonal {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 0);
  }

  100% {
    opacity: 1;
    clip-path: polygon(-20% -20%, 250% -20%, -20% 250%);
  }
}

.tile-anim-diagonal-in {
  animation: tileAnimDiagonal 0.8s forwards;
}

@keyframes tileAnimDiamond {
  0% {
    opacity: 0;
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }

  50% {
    opacity: 1;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }

  100% {
    opacity: 1;
    clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
  }
}

.tile-anim-diamond-in {
  animation: tileAnimDiamond 0.7s forwards;
}

@keyframes tileAnimCircleReveal {
  0% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    opacity: 1;
    clip-path: circle(150% at 50% 50%);
  }
}

.tile-anim-circle-in {
  animation: tileAnimCircleReveal 0.8s forwards;
}

@keyframes tileAnimSquareReveal {
  0% {
    opacity: 0;
    clip-path: inset(50% 50% 50% 50%);
  }

  100% {
    opacity: 1;
    clip-path: inset(-10%);
  }
}

.tile-anim-square-in {
  animation: tileAnimSquareReveal 0.7s forwards;
}

@keyframes tileAnimStarReveal {
  0% {
    opacity: 0;
    transform: scale(0);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
  }
}

.tile-anim-star-reveal-in {
  animation: tileAnimStarReveal 0.8s forwards;
}

@keyframes tileAnimPopOutIn2 {
  0% {
    opacity: 0;
    transform: scale(2);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-pop-out-in-2 {
  animation: tileAnimPopOutIn2 0.6s forwards;
}

@keyframes tileAnimExpandIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-expand-in {
  animation: tileAnimExpandIn 0.5s ease-out forwards;
}

@keyframes tileAnimContractReveal {
  0% {
    opacity: 0;
    transform: scale(1.5);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.tile-anim-contract-reveal-in {
  animation: tileAnimContractReveal 0.7s ease-out forwards;
}

@keyframes tileAnimBounceScale {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-bounce-scale-in {
  animation: tileAnimBounceScale 0.7s forwards;
}

@keyframes tileAnimElasticScale {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-elastic-scale-in {
  animation: tileAnimElasticScale 0.8s forwards;
}

@keyframes tileAnimSwingScale {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.tile-anim-swing-scale-in {
  animation: tileAnimSwingScale 0.7s forwards;
}

@keyframes tileAnimRollScale {
  0% {
    opacity: 0;
    transform: scale(0) translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.tile-anim-roll-scale-in {
  animation: tileAnimRollScale 0.7s forwards;
}

@keyframes tileAnimTwirlScale {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.tile-anim-twirl-scale-in {
  animation: tileAnimTwirlScale 0.7s forwards;
}

@keyframes tileAnimSpiralScale {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-360deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.tile-anim-spiral-scale-in {
  animation: tileAnimSpiralScale 0.8s forwards;
}

@keyframes tileAnimWaveScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-wave-scale-in {
  animation: tileAnimWaveScale 0.8s forwards;
}

@keyframes tileAnimBlurSwipeU {
  from {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

.tile-anim-blur-swipe-up {
  animation: tileAnimBlurSwipeU 0.6s forwards;
}

@keyframes tileAnimBlurSwipeD {
  from {
    opacity: 0;
    transform: translateY(-50px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

.tile-anim-blur-swipe-down {
  animation: tileAnimBlurSwipeD 0.6s forwards;
}

@keyframes tileAnimBlurSwipeL {
  from {
    opacity: 0;
    transform: translateX(50px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: none;
  }
}

.tile-anim-blur-swipe-left {
  animation: tileAnimBlurSwipeL 0.6s forwards;
}

@keyframes tileAnimBlurSwipeR {
  from {
    opacity: 0;
    transform: translateX(-50px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: none;
  }
}

.tile-anim-blur-swipe-right {
  animation: tileAnimBlurSwipeR 0.6s forwards;
}

@keyframes tileAnimFocusSwipe {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}

.tile-anim-focus-swipe-in {
  animation: tileAnimFocusSwipe 0.7s forwards;
}

@keyframes tileAnimGlowSwipe {
  0% {
    opacity: 0;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0);
  }

  100% {
    opacity: 1;
    box-shadow: none;
  }
}

.tile-anim-glow-swipe-in {
  animation: tileAnimGlowSwipe 0.7s forwards, tileAnimFadeIn 0.7s forwards;
}

@keyframes tileAnimColorSwipe {
  0% {
    opacity: 0;
    filter: hue-rotate(180deg);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

.tile-anim-color-swipe-in {
  animation: tileAnimColorSwipe 0.8s forwards, tileAnimFadeIn 0.8s forwards;
}

@keyframes tileAnimMaskSwipe {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(-10%);
  }
}

.tile-anim-mask-swipe-in {
  animation: tileAnimMaskSwipe 0.7s forwards;
}

@keyframes tileAnimGradientSwipe {
  0% {
    opacity: 0;
    mask-image: linear-gradient(to right, transparent, black);
  }

  100% {
    opacity: 1;
    mask-image: none;
  }
}

.tile-anim-gradient-swipe-in {
  animation: tileAnimGradientSwipe 0.8s forwards, tileAnimFadeIn 0.8s forwards;
}

@keyframes tileAnimTextureSwipe {
  0% {
    opacity: 0;
    filter: contrast(2);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

.tile-anim-texture-swipe-in {
  animation: tileAnimTextureSwipe 0.8s forwards, tileAnimFadeIn 0.8s forwards;
}

@keyframes tileAnimSkidUp {
  0% {
    opacity: 0;
    transform: translateY(100px) skewY(10deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

.tile-anim-skid-up {
  animation: tileAnimSkidUp 0.6s forwards;
}

@keyframes tileAnimSkidDown {
  0% {
    opacity: 0;
    transform: translateY(-100px) skewY(-10deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

.tile-anim-skid-down {
  animation: tileAnimSkidDown 0.6s forwards;
}

@keyframes tileAnimSkidLeft {
  0% {
    opacity: 0;
    transform: translateX(100px) skewX(10deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

.tile-anim-skid-left {
  animation: tileAnimSkidLeft 0.6s forwards;
}

@keyframes tileAnimSkidRight {
  0% {
    opacity: 0;
    transform: translateX(-100px) skewX(-10deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

.tile-anim-skid-right {
  animation: tileAnimSkidRight 0.6s forwards;
}

@keyframes tileAnimDrift {
  0% {
    opacity: 0;
    transform: translateX(-50px) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

.tile-anim-drift-in {
  animation: tileAnimDrift 0.8s forwards;
}

@keyframes tileAnimBrake {
  0% {
    opacity: 0;
    transform: scale(1.2) translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tile-anim-brake-in {
  animation: tileAnimBrake 0.5s cubic-bezier(0, 0, 0, 1) forwards;
}

@keyframes tileAnimAccelerate {
  0% {
    opacity: 0;
    transform: scale(0.8) translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.tile-anim-accelerate-in {
  animation: tileAnimAccelerate 0.5s cubic-bezier(1, 0, 1, 1) forwards;
}

@keyframes tileAnimCruise {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-cruise-in {
  animation: tileAnimCruise 1s linear forwards;
}

@keyframes tileAnimJump {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.tile-anim-jump-in {
  animation: tileAnimJump 0.6s forwards;
}

@keyframes tileAnimDive {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotateX(45deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.tile-anim-dive-in {
  animation: tileAnimDive 0.7s forwards;
}

@keyframes tileAnimHeart2 {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  10% {
    transform: scale(1.2);
    opacity: 1;
  }

  20% {
    transform: scale(0.9);
  }

  30% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-heartbeat-2 {
  animation: tileAnimHeart2 0.6s forwards;
}

@keyframes tileAnimBreathing {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-breathing-in {
  animation: tileAnimBreathing 1.2s ease-in-out forwards;
}

@keyframes tileAnimFlutter {
  0% {
    transform: rotateY(0);
    opacity: 0;
  }

  50% {
    transform: rotateY(90deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}

.tile-anim-flutter-in {
  animation: tileAnimFlutter 0.6s ease-in-out forwards;
}


@keyframes tileAnimVibrateFast {
  0% {
    transform: translate(0);
    opacity: 0;
  }

  10% {
    transform: translate(-2px, 2px);
    opacity: 1;
  }

  100% {
    transform: translate(0);
    opacity: 1;
  }
}

.tile-anim-vibrate-fast {
  animation: tileAnimVibrateFast 0.3s ease-out forwards;
}


@keyframes tileAnimJiggle {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.1, 0.9);
    opacity: 1;
  }

  50% {
    transform: scale(0.9, 1.1);
  }

  75% {
    transform: scale(1.05, 0.95);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-jiggle-in {
  animation: tileAnimJiggle 0.7s forwards;
}

@keyframes tileAnimWiggle {
  0% {
    transform: rotate(0);
    opacity: 0;
  }

  25% {
    transform: rotate(5deg);
    opacity: 1;
  }

  50% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(0);
    opacity: 1;
  }
}

.tile-anim-wiggle-in {
  animation: tileAnimWiggle 0.6s forwards;
}

@keyframes tileAnimTremble {
  0% {
    transform: translate(0);
    opacity: 0;
  }

  20% {
    transform: translate(-1px, 1px);
    opacity: 1;
  }

  40% {
    transform: translate(-1px, -1px);
  }

  60% {
    transform: translate(1px, 1px);
  }

  80% {
    transform: translate(1px, -1px);
  }

  100% {
    transform: translate(0);
    opacity: 1;
  }
}

.tile-anim-tremble-in {
  animation: tileAnimTremble 0.5s ease-out forwards;
}


@keyframes tileAnimThrob {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile-anim-throb-in {
  animation: tileAnimThrob 0.5s 2 forwards;
}

@keyframes tileAnimPulseBurst {
  0% {
    transform: scale(1);
    opacity: 0;
    filter: brightness(1);
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
    filter: brightness(5);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
}

.tile-anim-pulse-burst-in {
  animation: tileAnimPulseBurst 0.6s forwards;
}

@keyframes tileAnimFinaleMega {
  0% {
    transform: scale(0) rotate(720deg);
    filter: blur(20px) hue-rotate(360deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.5) rotate(0);
    filter: blur(5px);
  }

  100% {
    transform: scale(1) rotate(0);
    filter: none;
    opacity: 1;
  }
}

.tile-anim-finale-mega-in {
  animation: tileAnimFinaleMega 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Leaf Drop - Gentle falling with slight rotation */
@keyframes tileAnimLeafDrop {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(15deg);
  }
}

.tile-anim-leaf-drop {
  animation: tileAnimLeafDrop 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Feather Float - Very light, slow descent */
@keyframes tileAnimFeatherFloat {
  0% {
    opacity: 0;
    transform: translateY(-60px) translateX(-10px);
  }

  50% {
    transform: translateY(-20px) translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.tile-anim-feather-float {
  animation: tileAnimFeatherFloat 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Snow Settle - Soft, gentle landing */
@keyframes tileAnimSnowSettle {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tile-anim-snow-settle {
  animation: tileAnimSnowSettle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Petal Fall - Graceful flower petal descent */
@keyframes tileAnimPetalFall {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(-5deg);
  }

  60% {
    transform: translateY(-10px) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.tile-anim-petal-fall {
  animation: tileAnimPetalFall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Dust Settle - Particles gently settling */
@keyframes tileAnimDustSettle {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.tile-anim-dust-settle {
  animation: tileAnimDustSettle 1.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Silk Drape - Smooth, flowing fabric */
@keyframes tileAnimSilkDrape {
  0% {
    opacity: 0;
    transform: translateY(-40px) scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-silk-drape {
  animation: tileAnimSilkDrape 1.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Velvet Slide - Luxurious, smooth glide */
@keyframes tileAnimVelvetSlide {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-velvet-slide {
  animation: tileAnimVelvetSlide 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Cotton Drift - Soft, airy float */
@keyframes tileAnimCottonDrift {
  0% {
    opacity: 0;
    transform: translateY(-45px) translateX(-8px);
  }

  50% {
    transform: translateY(-15px) translateX(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.tile-anim-cotton-drift {
  animation: tileAnimCottonDrift 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Mist Descend - Gentle fog falling */
@keyframes tileAnimMistDescend {
  0% {
    opacity: 0;
    transform: translateY(-35px);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.tile-anim-mist-descend {
  animation: tileAnimMistDescend 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Dew Form - Morning dew appearing */
@keyframes tileAnimDewForm {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-dew-form {
  animation: tileAnimDewForm 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Water Ripple - Concentric ripple effect */
@keyframes tileAnimWaterRipple {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-water-ripple {
  animation: tileAnimWaterRipple 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Pond Ripple - Calm pond waves */
@keyframes tileAnimPondRipple {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  40% {
    transform: scale(1.01);
  }

  70% {
    transform: scale(0.99);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-pond-ripple {
  animation: tileAnimPondRipple 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Lake Calm - Peaceful, still water */
@keyframes tileAnimLakeCalm {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-lake-calm {
  animation: tileAnimLakeCalm 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Ocean Swell - Gentle wave rise */
@keyframes tileAnimOceanSwell {
  0% {
    opacity: 0;
    transform: translateY(20px) scaleY(0.95);
  }

  60% {
    transform: translateY(-5px) scaleY(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-ocean-swell {
  animation: tileAnimOceanSwell 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Tide In - Tide coming in slowly */
@keyframes tileAnimTideIn {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-tide-in {
  animation: tileAnimTideIn 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Wave Gentle - Soft wave motion */
@keyframes tileAnimWaveGentle {
  0% {
    opacity: 0;
    transform: translateY(15px) translateX(-10px);
  }

  50% {
    transform: translateY(-3px) translateX(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.tile-anim-wave-gentle {
  animation: tileAnimWaveGentle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Stream Flow - Flowing water */
@keyframes tileAnimStreamFlow {
  0% {
    opacity: 0;
    transform: translateX(-30px) translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

.tile-anim-stream-flow {
  animation: tileAnimStreamFlow 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Rain Drop - Single raindrop falling */
@keyframes tileAnimRainDrop {
  0% {
    opacity: 0;
    transform: translateY(-60px) scaleY(1.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-rain-drop {
  animation: tileAnimRainDrop 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Drizzle In - Light rain effect */
@keyframes tileAnimDrizzleIn {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-drizzle-in {
  animation: tileAnimDrizzleIn 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Puddle Form - Puddle forming */
@keyframes tileAnimPuddleForm {
  0% {
    opacity: 0;
    transform: scale(0.7) scaleY(0.3);
  }

  100% {
    opacity: 1;
    transform: scale(1) scaleY(1);
  }
}

.tile-anim-puddle-form {
  animation: tileAnimPuddleForm 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Cloud Drift - Cloud floating by */
@keyframes tileAnimCloudDrift {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-cloud-drift {
  animation: tileAnimCloudDrift 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fog Roll - Rolling fog */
@keyframes tileAnimFogRoll {
  0% {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.tile-anim-fog-roll {
  animation: tileAnimFogRoll 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Haze Settle - Hazy atmosphere */
@keyframes tileAnimHazeSettle {
  0% {
    opacity: 0;
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.tile-anim-haze-settle {
  animation: tileAnimHazeSettle 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Vapor Rise - Steam rising */
@keyframes tileAnimVaporRise {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.tile-anim-vapor-rise {
  animation: tileAnimVaporRise 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Smoke Curl - Curling smoke */
@keyframes tileAnimSmokeCurl {
  0% {
    opacity: 0;
    transform: translateY(25px) rotate(-5deg);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }
}

.tile-anim-smoke-curl {
  animation: tileAnimSmokeCurl 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Steam Wisp - Wispy steam */
@keyframes tileAnimSteamWisp {
  0% {
    opacity: 0;
    transform: translateY(20px) translateX(-5px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
    filter: blur(0);
  }
}

.tile-anim-steam-wisp {
  animation: tileAnimSteamWisp 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Breeze Sway - Gentle breeze */
@keyframes tileAnimBreezeSway {
  0% {
    opacity: 0;
    transform: translateX(-15px) rotate(-2deg);
  }

  50% {
    transform: translateX(5px) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.tile-anim-breeze-sway {
  animation: tileAnimBreezeSway 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Wind Gentle - Soft wind */
@keyframes tileAnimWindGentle {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-wind-gentle {
  animation: tileAnimWindGentle 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Air Float - Floating on air */
@keyframes tileAnimAirFloat {
  0% {
    opacity: 0;
    transform: translateY(-35px);
  }

  60% {
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-air-float {
  animation: tileAnimAirFloat 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Bubble Rise - Bubble floating up */
@keyframes tileAnimBubbleRise {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tile-anim-bubble-rise {
  animation: tileAnimBubbleRise 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Honey Drip - Thick honey flow */
@keyframes tileAnimHoneyDrip {
  0% {
    opacity: 0;
    transform: translateY(-30px) scaleY(1.3);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-honey-drip {
  animation: tileAnimHoneyDrip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Syrup Pour - Syrup pouring */
@keyframes tileAnimSyrupPour {
  0% {
    opacity: 0;
    transform: translateY(-35px) scaleY(1.4);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-syrup-pour {
  animation: tileAnimSyrupPour 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Oil Spread - Oil spreading */
@keyframes tileAnimOilSpread {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-oil-spread {
  animation: tileAnimOilSpread 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ink Diffuse - Ink in water */
@keyframes tileAnimInkDiffuse {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-ink-diffuse {
  animation: tileAnimInkDiffuse 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Paint Blend - Paint mixing */
@keyframes tileAnimPaintBlend {
  0% {
    opacity: 0;
    filter: blur(6px) saturate(0.5);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
  }
}

.tile-anim-paint-blend {
  animation: tileAnimPaintBlend 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Watercolor Bleed - Watercolor effect */
@keyframes tileAnimWatercolorBleed {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-watercolor-bleed {
  animation: tileAnimWatercolorBleed 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Gradient Wash - Color gradient */
@keyframes tileAnimGradientWash {
  0% {
    opacity: 0;
    filter: hue-rotate(30deg);
  }

  100% {
    opacity: 1;
    filter: hue-rotate(0deg);
  }
}

.tile-anim-gradient-wash {
  animation: tileAnimGradientWash 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Color Fade - Fading colors */
@keyframes tileAnimColorFade {
  0% {
    opacity: 0;
    filter: saturate(0);
  }

  100% {
    opacity: 1;
    filter: saturate(1);
  }
}

.tile-anim-color-fade {
  animation: tileAnimColorFade 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Tint Spread - Tint spreading */
@keyframes tileAnimTintSpread {
  0% {
    opacity: 0;
    filter: brightness(0.5);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.tile-anim-tint-spread {
  animation: tileAnimTintSpread 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Shade Deepen - Deepening shade */
@keyframes tileAnimShadeDeepen {
  0% {
    opacity: 0;
    filter: brightness(1.5);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.tile-anim-shade-deepen {
  animation: tileAnimShadeDeepen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Sand Pour - Sand pouring */
@keyframes tileAnimSandPour {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotate(5deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.tile-anim-sand-pour {
  animation: tileAnimSandPour 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Grain Settle - Grains settling */
@keyframes tileAnimGrainSettle {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-grain-settle {
  animation: tileAnimGrainSettle 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Powder Dust - Powder dusting */
@keyframes tileAnimPowderDust {
  0% {
    opacity: 0;
    transform: translateY(-25px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.tile-anim-powder-dust {
  animation: tileAnimPowderDust 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ash Fall - Ash falling */
@keyframes tileAnimAshFall {
  0% {
    opacity: 0;
    transform: translateY(-35px) translateX(-8px);
  }

  50% {
    transform: translateY(-10px) translateX(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.tile-anim-ash-fall {
  animation: tileAnimAshFall 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ember Fade - Fading ember */
@keyframes tileAnimEmberFade {
  0% {
    opacity: 0;
    filter: brightness(2);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.tile-anim-ember-fade {
  animation: tileAnimEmberFade 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Glow Dim - Dimming glow */
@keyframes tileAnimGlowDim {
  0% {
    opacity: 0;
    filter: brightness(2) blur(5px);
  }

  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}

.tile-anim-glow-dim {
  animation: tileAnimGlowDim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Light Soften - Softening light */
@keyframes tileAnimLightSoften {
  0% {
    opacity: 0;
    filter: brightness(1.8);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.tile-anim-light-soften {
  animation: tileAnimLightSoften 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Shadow Lengthen - Shadow lengthens */
@keyframes tileAnimShadowLengthen {
  0% {
    opacity: 0;
    transform: scaleX(0.5);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.tile-anim-shadow-lengthen {
  animation: tileAnimShadowLengthen 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Dusk Settle - Evening falling */
@keyframes tileAnimDuskSettle {
  0% {
    opacity: 0;
    filter: brightness(1.3);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.tile-anim-dusk-settle {
  animation: tileAnimDuskSettle 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Dawn Break - Morning arrives */
@keyframes tileAnimDawnBreak {
  0% {
    opacity: 0;
    filter: brightness(0.5);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.tile-anim-dawn-break {
  animation: tileAnimDawnBreak 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Silk Unfurl - Silk unfolding */
@keyframes tileAnimSilkUnfurl {
  0% {
    opacity: 0;
    transform: scaleX(0) scaleY(0.9);
  }

  100% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
}

.tile-anim-silk-unfurl {
  animation: tileAnimSilkUnfurl 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ribbon Wave - Ribbon waving */
@keyframes tileAnimRibbonWave {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(-10deg);
  }

  50% {
    transform: translateY(-5px) rotate(5deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.tile-anim-ribbon-wave {
  animation: tileAnimRibbonWave 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fabric Billow - Fabric billowing */
@keyframes tileAnimFabricBillow {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-15px);
  }

  50% {
    transform: scale(1.03) translateY(-3px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tile-anim-fabric-billow {
  animation: tileAnimFabricBillow 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Curtain Sway - Curtain swaying */
@keyframes tileAnimCurtainSway {
  0% {
    opacity: 0;
    transform: translateX(-15px) scaleX(0.95);
  }

  50% {
    transform: translateX(5px) scaleX(1.02);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

.tile-anim-curtain-sway {
  animation: tileAnimCurtainSway 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Banner Flutter - Banner fluttering */
@keyframes tileAnimBannerFlutter {
  0% {
    opacity: 0;
    transform: translateX(-20px) rotate(-3deg);
  }

  40% {
    transform: translateX(3px) rotate(2deg);
  }

  70% {
    transform: translateX(-2px) rotate(-1deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.tile-anim-banner-flutter {
  animation: tileAnimBannerFlutter 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Flag Ripple - Flag rippling */
@keyframes tileAnimFlagRipple {
  0% {
    opacity: 0;
    transform: translateX(-18px) scaleX(0.95);
  }

  50% {
    transform: translateX(4px) scaleX(1.03);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

.tile-anim-flag-ripple {
  animation: tileAnimFlagRipple 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Cloth Settle - Cloth settling */
@keyframes tileAnimClothSettle {
  0% {
    opacity: 0;
    transform: translateY(-25px) scaleY(1.1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-cloth-settle {
  animation: tileAnimClothSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Veil Lift - Veil lifting */
@keyframes tileAnimVeilLift {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-veil-lift {
  animation: tileAnimVeilLift 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Scarf Drift - Scarf drifting */
@keyframes tileAnimScarfDrift {
  0% {
    opacity: 0;
    transform: translateX(-25px) rotate(-8deg);
  }

  50% {
    transform: translateX(5px) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.tile-anim-scarf-drift {
  animation: tileAnimScarfDrift 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Sheet Float - Sheet floating */
@keyframes tileAnimSheetFloat {
  0% {
    opacity: 0;
    transform: translateY(-30px) scaleY(1.05);
  }

  60% {
    transform: translateY(-5px) scaleY(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-sheet-float {
  animation: tileAnimSheetFloat 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Paper Glide - Paper gliding */
@keyframes tileAnimPaperGlide {
  0% {
    opacity: 0;
    transform: translateX(-30px) translateY(-15px) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg);
  }
}

.tile-anim-paper-glide {
  animation: tileAnimPaperGlide 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Page Turn - Page turning */
@keyframes tileAnimPageTurn {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateY(-90deg);
  }

  100% {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
  }
}

.tile-anim-page-turn {
  animation: tileAnimPageTurn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Book Open - Book opening */
@keyframes tileAnimBookOpen {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(-45deg) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) scale(1);
  }
}

.tile-anim-book-open {
  animation: tileAnimBookOpen 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Scroll Unfurl - Scroll unrolling */
@keyframes tileAnimScrollUnfurl {
  0% {
    opacity: 0;
    transform: scaleY(0.1) translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

.tile-anim-scroll-unfurl {
  animation: tileAnimScrollUnfurl 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Origami Fold - Origami folding */
@keyframes tileAnimOrigamiFold {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateX(-30deg) rotateY(-30deg) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) scale(1);
  }
}

.tile-anim-origami-fold {
  animation: tileAnimOrigamiFold 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Card Flip Slow - Slow card flip */
@keyframes tileAnimCardFlipSlow {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateY(180deg);
  }

  100% {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
  }
}

.tile-anim-card-flip-slow {
  animation: tileAnimCardFlipSlow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Letter Settle - Letter landing */
@keyframes tileAnimLetterSettle {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotate(10deg);
  }

  70% {
    transform: translateY(5px) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.tile-anim-letter-settle {
  animation: tileAnimLetterSettle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Note Drift - Note drifting */
@keyframes tileAnimNoteDrift {
  0% {
    opacity: 0;
    transform: translateY(-35px) translateX(-10px) rotate(-8deg);
  }

  50% {
    transform: translateY(-10px) translateX(5px) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

.tile-anim-note-drift {
  animation: tileAnimNoteDrift 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Document Slide - Document sliding */
@keyframes tileAnimDocumentSlide {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-document-slide {
  animation: tileAnimDocumentSlide 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Parchment Roll - Parchment rolling */
@keyframes tileAnimParchmentRoll {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}

.tile-anim-parchment-roll {
  animation: tileAnimParchmentRoll 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ice Melt - Ice melting */
@keyframes tileAnimIceMelt {
  0% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-ice-melt {
  animation: tileAnimIceMelt 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Frost Form - Frost forming */
@keyframes tileAnimFrostForm {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-frost-form {
  animation: tileAnimFrostForm 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Crystal Grow - Crystal growing */
@keyframes tileAnimCrystalGrow {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-crystal-grow {
  animation: tileAnimCrystalGrow 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Snowflake Settle - Snowflake landing */
@keyframes tileAnimSnowflakeSettle {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(360deg);
  }
}

.tile-anim-snowflake-settle {
  animation: tileAnimSnowflakeSettle 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Icicle Drip - Icicle dripping */
@keyframes tileAnimIcicleDrip {
  0% {
    opacity: 0;
    transform: translateY(-30px) scaleY(1.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.tile-anim-icicle-drip {
  animation: tileAnimIcicleDrip 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Glacier Shift - Glacier moving */
@keyframes tileAnimGlacierShift {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tile-anim-glacier-shift {
  animation: tileAnimGlacierShift 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Frozen Thaw - Ice thawing */
@keyframes tileAnimFrozenThaw {
  0% {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-frozen-thaw {
  animation: tileAnimFrozenThaw 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Chill Spread - Cold spreading */
@keyframes tileAnimChillSpread {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.tile-anim-chill-spread {
  animation: tileAnimChillSpread 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Winter Breath - Frosty breath */
@keyframes tileAnimWinterBreath {
  0% {
    opacity: 0;
    transform: translateX(-25px);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.tile-anim-winter-breath {
  animation: tileAnimWinterBreath 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Arctic Drift - Arctic wind */
@keyframes tileAnimArcticDrift {
  0% {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.tile-anim-arctic-drift {
  animation: tileAnimArcticDrift 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Zen Settle - Zen calmness */
@keyframes tileAnimZenSettle {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-zen-settle {
  animation: tileAnimZenSettle 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Meditation Calm - Meditative calm */
@keyframes tileAnimMeditationCalm {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-meditation-calm {
  animation: tileAnimMeditationCalm 2.1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Peaceful Rest - Peaceful resting */
@keyframes tileAnimPeacefulRest {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-peaceful-rest {
  animation: tileAnimPeacefulRest 1.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Tranquil Ease - Tranquil motion */
@keyframes tileAnimTranquilEase {
  0% {
    opacity: 0;
    transform: translateY(-18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-tranquil-ease {
  animation: tileAnimTranquilEase 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Serene Float - Serene floating */
@keyframes tileAnimSereneFloat {
  0% {
    opacity: 0;
    transform: translateY(-25px);
  }

  60% {
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-serene-float {
  animation: tileAnimSereneFloat 2.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Harmony Balance - Balanced harmony */
@keyframes tileAnimHarmonyBalance {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  50% {
    transform: scale(1.01);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-anim-harmony-balance {
  animation: tileAnimHarmonyBalance 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Gentle Rest - Gentle resting */
@keyframes tileAnimGentleRest {
  0% {
    opacity: 0;
    transform: translateY(-22px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-gentle-rest {
  animation: tileAnimGentleRest 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Soft Landing - Soft touchdown */
@keyframes tileAnimSoftLanding {
  0% {
    opacity: 0;
    transform: translateY(-35px);
  }

  80% {
    transform: translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-soft-landing {
  animation: tileAnimSoftLanding 1.7s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Calm Descent - Calm descending */
@keyframes tileAnimCalmDescent {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-calm-descent {
  animation: tileAnimCalmDescent 1.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Quiet Settle - Quiet settling */
@keyframes tileAnimQuietSettle {
  0% {
    opacity: 0;
    transform: translateY(-28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile-anim-quiet-settle {
  animation: tileAnimQuietSettle 2.1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}



/* End of animated tile declarations */

/* CMMS reduced-motion: skip entrance animations */
@media (prefers-reduced-motion: reduce) {
  [class*="tile-anim-"],
  .linknest-page-content,
  .linknest-tile-animated,
  .linknest-category-animated,
  .auth-modal-backdrop,
  .auth-modal-panel,
  .auth-modal-logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}