/* =========================================================
   TANA — GHOST EASTER EGG LOOP

   Loaded after wow.css so it only overrides the mascot timing.
   Scroll wakes the ghost once; after that it periodically dissolves
   into blur, shrinks away, then rematerializes and grows back.
========================================================= */

.coming.coming-visible .coming-ghost-stage {
  animation:
    ghostMaterialize
    3.25s
    cubic-bezier(.16, 1, .3, 1)
    .18s
    forwards,

    ghostVanishReturn
    12.8s
    cubic-bezier(.45, .05, .25, 1)
    3.55s
    infinite;
}

@keyframes ghostVanishReturn {
  /* Stay fully materialized for a while. */
  0%,
  29% {
    opacity: .82;
    filter: blur(0) brightness(1);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  /* Start dissolving: smaller, softer, slightly displaced. */
  39% {
    opacity: .64;
    filter: blur(10px) brightness(1.06);
    transform: translate3d(12px, -6px, 0) scale(.90) rotate(2deg);
  }

  47% {
    opacity: .34;
    filter: blur(25px) brightness(1.14);
    transform: translate3d(28px, -14px, 0) scale(.67) rotate(5deg);
  }

  /* Vanish completely into a compact blur. */
  54%,
  61% {
    opacity: 0;
    filter: blur(46px) brightness(1.28);
    transform: translate3d(52px, -23px, 0) scale(.28) rotate(9deg);
  }

  /* Reappear from a slightly different point, still tiny and hazy. */
  68% {
    opacity: .08;
    filter: blur(43px) brightness(1.25);
    transform: translate3d(-34px, 22px, 0) scale(.30) rotate(-9deg);
  }

  76% {
    opacity: .25;
    filter: blur(31px) brightness(1.17);
    transform: translate3d(-24px, 14px, 0) scale(.49) rotate(-6deg);
  }

  85% {
    opacity: .56;
    filter: blur(16px) brightness(1.09);
    transform: translate3d(-11px, 7px, 0) scale(.76) rotate(-3deg);
  }

  /* Small overshoot makes the rematerialization feel organic. */
  94% {
    opacity: .84;
    filter: blur(3px) brightness(1.02);
    transform: translate3d(3px, -2px, 0) scale(1.08) rotate(1deg);
  }

  100% {
    opacity: .82;
    filter: blur(0) brightness(1);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@media (max-width: 760px) {
  .coming.coming-visible .coming-ghost-stage {
    animation:
      ghostMaterialize
      3.25s
      cubic-bezier(.16, 1, .3, 1)
      .18s
      forwards,

      ghostVanishReturn
      12.8s
      cubic-bezier(.45, .05, .25, 1)
      3.55s
      infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming.coming-visible .coming-ghost-stage {
    animation: none !important;
  }
}