/**
 * Effects - Animations and Visual Effects
 * Consolidated from animations.css + rainbow-gradient.css
 */

/* ============================================
   RAINBOW GRADIENT
   ============================================ */

:root {
  --rg-stops:
    #fff 0%,
    #fff 5%,
    hsl(180 100% 50%) 15%,
    hsl(240 100% 50%) 25%,
    hsl(270 100% 50%) 35%,
    hsl(330 40% 70%) 45%,
    hsl(0 100% 50%) 55%,
    hsl(60 100% 50%) 65%,
    hsl(90 100% 75%) 75%,
    #fff 95%,
    #fff 100%;
  --rg: linear-gradient(90deg, var(--rg-stops));
  --rg-size: 900% 100%;
}

@keyframes rainbow-flow {
  from { background-position: 100% 0 }
  to   { background-position:   0% 0 }
}

/* Rainbow utilities */
.rg {
  background-image: var(--rg);
  background-size: var(--rg-size);
}

.rg-animated {
  animation: rainbow-flow 3s linear infinite;
}

.rg-text {
  background-image: var(--rg);
  background-size: var(--rg-size);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rg-hover {
  transition: background-position .3s ease;
}

.rg-hover:hover {
  background-image: var(--rg);
  background-size: var(--rg-size);
  animation: rainbow-flow 3s linear infinite;
}

/* Icon with mask */
.ico {
  --sz: 24px;
  display: inline-block;
  inline-size: var(--sz);
  block-size: var(--sz);
  width: var(--sz);
  height: var(--sz);
  background: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
  vertical-align: middle;
}

/* ============================================
   LIKE ICON ANIMATIONS
   ============================================ */

/* Base transitions */
.main-body,
.core,
.sparks {
  fill: transparent;
  transition: fill 0.3s linear;
  transition-delay: 0s;
}

.contour {
  transition: fill 0.1s linear;
}

/* Hover states */
.like-icon:hover .core {
  fill: var(--accent-color);
  transition-delay: 0s;
}

.like-icon:not(:hover) .core {
  fill: transparent;
  transition-delay: 0.03s;
}

.like-icon:hover .main-body {
  fill: var(--accent-color);
  transition-delay: 0.05s;
}

.like-icon:not(:hover) .main-body {
  fill: transparent;
  transition-delay: 0s;
}

.like-icon:hover .contour {
  fill: var(--accent-color);
}

/* Active states */
.like-icon:active .core {
  fill: var(--animation-fill-color);
}

.like-icon:active .main-body {
  fill: var(--animation-fill-color);
  transition-delay: 0.05s;
}

.like-icon:not(:active) .core {
  transition-delay: 0.03s;
}

/* Liked state */
.like-icon.is-liked .core {
  fill: var(--animation-fill-color);
  transition-delay: 0s;
}

.like-icon.is-liked .main-body {
  fill: var(--animation-fill-color);
  transition-delay: 0.05s;
}

.like-icon.is-liked .contour {
  fill: var(--animation-fill-color);
  transition-delay: 0.06s;
}

.like-icon.is-liked .heart {
  animation: pulse 0.3s ease-in-out 0.06s 1 forwards;
  transform-origin: center;
}

.like-icon.is-liked .sparks {
  animation: spark 0.3s ease-in-out 0.12s 1 forwards;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes spark {
  0%   { fill: none; }
  50%  { fill: var(--animation-fill-color); }
  100% { fill: none; }
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */

.button {
  transition: color 0.3s ease, background 0.3s ease;
}

.button::before {
  transition: transform 0.5s ease-in-out;
}

.card__icon-button {
  transition: border 0.3s ease;
}

/* ============================================
   MOTION SAFETY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .button::before {
    transition: none;
  }
  
  .like-icon.is-liked .heart {
    animation: none;
  }
  
  .like-icon.is-liked .sparks {
    animation: none;
  }
}