/* ================================================================
   FORTUNESPACE — FORTUNE LOVE DELIGHT V1

   Presentation only.
   Existing Laravel Like backend remains authoritative.
   ================================================================ */


/* ---------------------------------------------------------------
   Like button tactile states
   --------------------------------------------------------------- */

[data-role="like-button"] {
  position: relative;

  -webkit-tap-highlight-color: transparent;

  transform-origin: center;

  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    filter .16s ease,
    opacity .16s ease;
}


[data-role="like-button"].fs-love-pending {
  cursor: wait;

  opacity: .82;
}


[data-role="like-button"].fs-love-pop {
  animation:
    fs-love-button-pop
    520ms
    cubic-bezier(.18,.88,.28,1.28)
    both;
}


[data-role="like-button"].fs-love-unlike {
  animation:
    fs-love-button-unlike
    260ms
    ease-out
    both;
}


/*
 * The Like count receives a tiny bounce after a successful Like.
 */
[data-role="like-count"].fs-love-count-pop {
  display: inline-block;

  animation:
    fs-love-count-pop
    440ms
    cubic-bezier(.18,.88,.28,1.25)
    both;
}


/*
 * Existing active Like receives a little extra glow without
 * replacing the current FortuneSpace active-state styling.
 */
[data-role="like-button"].is-active .viewer-action__icon {
  filter:
    drop-shadow(0 0 7px rgba(239,77,98,.34));
}


/* ---------------------------------------------------------------
   Reaction particle layer
   --------------------------------------------------------------- */

.fs-love-layer {
  position: fixed;

  inset: 0;

  z-index: 2147483000;

  overflow: hidden;

  pointer-events: none;
}


.fs-love-particle {
  position: fixed;

  left: var(--fs-love-x);
  top: var(--fs-love-y);

  width: 26px;
  height: 26px;

  margin:
    -13px
    0
    0
    -13px;

  display: grid;
  place-items: center;

  opacity: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-weight: 900;

  line-height: 1;

  transform:
    translate3d(0,0,0)
    scale(.42);

  animation:
    fs-love-particle-fly
    var(--fs-love-duration, 700ms)
    cubic-bezier(.18,.84,.28,1)
    var(--fs-love-delay, 0ms)
    forwards;

  will-change:
    opacity,
    transform;
}


.fs-love-particle--heart {
  color: #ef4d62;

  font-size: 19px;

  text-shadow:
    0 0 8px rgba(239,77,98,.48),
    0 0 15px rgba(239,77,98,.20);
}


.fs-love-particle--soft-heart {
  color: #ffffff;

  font-size: 17px;

  text-shadow:
    0 0 7px rgba(239,77,98,.58),
    0 0 14px rgba(239,77,98,.24);
}


.fs-love-particle--gold {
  color: #f2c94c;

  font-size: 16px;

  text-shadow:
    0 0 7px rgba(242,201,76,.58),
    0 0 14px rgba(242,201,76,.24);
}


.fs-love-particle--green {
  color: #22c55e;

  font-size: 15px;

  text-shadow:
    0 0 7px rgba(34,197,94,.54),
    0 0 14px rgba(34,197,94,.20);
}


/* ---------------------------------------------------------------
   Double-tap center heart
   --------------------------------------------------------------- */

.fs-love-center-heart {
  position: fixed;

  left: var(--fs-center-x);
  top: var(--fs-center-y);

  z-index: 2147483001;

  width: 108px;
  height: 108px;

  margin:
    -54px
    0
    0
    -54px;

  display: grid;
  place-items: center;

  pointer-events: none;

  color: rgba(255,255,255,.96);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 82px;

  line-height: 1;

  text-shadow:
    0 5px 24px rgba(0,0,0,.27),
    0 0 14px rgba(239,77,98,.42);

  opacity: 0;

  transform:
    scale(.45)
    rotate(-7deg);

  animation:
    fs-love-center-heart
    680ms
    cubic-bezier(.17,.87,.27,1.16)
    forwards;

  will-change:
    opacity,
    transform;
}


/* ---------------------------------------------------------------
   Animations
   --------------------------------------------------------------- */

@keyframes fs-love-button-pop {

  0% {
    transform: scale(1);
  }

  22% {
    transform: scale(.82);
  }

  52% {
    transform: scale(1.22);
  }

  72% {
    transform: scale(.96);
  }

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


@keyframes fs-love-button-unlike {

  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(.86);
  }

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


@keyframes fs-love-count-pop {

  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.32);
  }

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


@keyframes fs-love-particle-fly {

  0% {
    opacity: 0;

    transform:
      translate3d(0,5px,0)
      scale(.40)
      rotate(-8deg);
  }

  18% {
    opacity: 1;
  }

  65% {
    opacity: .94;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--fs-love-dx),
        var(--fs-love-dy),
        0
      )
      scale(1.12)
      rotate(var(--fs-love-rotate, 12deg));
  }
}


@keyframes fs-love-center-heart {

  0% {
    opacity: 0;

    transform:
      scale(.38)
      rotate(-8deg);
  }

  22% {
    opacity: .98;

    transform:
      scale(1.18)
      rotate(3deg);
  }

  48% {
    opacity: 1;

    transform:
      scale(.96)
      rotate(0deg);
  }

  72% {
    opacity: .88;

    transform:
      scale(1.02)
      rotate(0deg);
  }

  100% {
    opacity: 0;

    transform:
      scale(.92)
      translate3d(0,-22px,0);
  }
}


/* ---------------------------------------------------------------
   Viewer image double-tap affordance
   --------------------------------------------------------------- */

[data-role="viewer-image"] {
  touch-action: manipulation;
}


/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .fs-love-layer,
  .fs-love-center-heart {
    display: none !important;
  }

  [data-role="like-button"].fs-love-pop,
  [data-role="like-button"].fs-love-unlike,
  [data-role="like-count"].fs-love-count-pop {
    animation: none !important;
  }
}

/* END FORTUNESPACE — FORTUNE LOVE DELIGHT V1 */