/* Flowing motion for abstract ribbon / prism images in cards */

.media-flow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
}

.media-flow__img {
  display: block;
  width: 120%;
  height: 120%;
  max-width: none;
  margin: -10%;
  object-fit: cover;
  animation: media-flow-pan 28s ease-in-out infinite;
  will-change: transform;
}

@keyframes media-flow-pan {
  0% {
    transform: scale(1.06) translate(0, 0);
  }
  25% {
    transform: scale(1.1) translate(-4%, 2%);
  }
  50% {
    transform: scale(1.08) translate(3%, -3%);
  }
  75% {
    transform: scale(1.11) translate(-2%, 1%);
  }
  100% {
    transform: scale(1.06) translate(0, 0);
  }
}

.media-flow__layer {
  position: absolute;
  inset: -35%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(214, 98, 248, 0.35), transparent 70%),
    radial-gradient(ellipse 45% 38% at 80% 60%, rgba(107, 23, 130, 0.4), transparent 72%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(168, 216, 240, 0.3), transparent 68%);
  animation: media-flow-mesh 22s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.75;
}

@keyframes media-flow-mesh {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(5%, -4%) rotate(2deg);
  }
  66% {
    transform: translate(-4%, 5%) rotate(-1.5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.media-flow__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: media-flow-shine 9s ease-in-out infinite;
}

@keyframes media-flow-shine {
  0%,
  100% {
    background-position: 130% 0;
    opacity: 0;
  }
  40% {
    opacity: 0.7;
  }
  55% {
    background-position: -30% 0;
    opacity: 0.4;
  }
}

/* Burst / radial art — slightly more energetic motion */
.media-flow--burst .media-flow__img {
  animation-name: media-flow-burst-pan;
  animation-duration: 24s;
}

.media-flow--burst .media-flow__layer {
  animation-name: media-flow-burst-mesh;
  animation-duration: 18s;
  background:
    radial-gradient(ellipse 45% 45% at 50% 50%, rgba(255, 255, 255, 0.4), transparent 55%),
    radial-gradient(ellipse 55% 50% at 30% 40%, rgba(168, 216, 240, 0.4), transparent 70%),
    radial-gradient(ellipse 50% 45% at 70% 55%, rgba(244, 180, 210, 0.35), transparent 72%),
    radial-gradient(ellipse 40% 40% at 60% 25%, rgba(190, 73, 223, 0.25), transparent 68%);
}

@keyframes media-flow-burst-pan {
  0% {
    transform: scale(1.08) translate(0, 0) rotate(0deg);
  }
  25% {
    transform: scale(1.12) translate(-3%, -2%) rotate(0.8deg);
  }
  50% {
    transform: scale(1.1) translate(2%, 3%) rotate(-0.6deg);
  }
  75% {
    transform: scale(1.13) translate(-1%, 2%) rotate(0.5deg);
  }
  100% {
    transform: scale(1.08) translate(0, 0) rotate(0deg);
  }
}

@keyframes media-flow-burst-mesh {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(3%, -3%) rotate(4deg) scale(1.08);
    opacity: 0.9;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.7;
  }
}

@media (hover: hover) and (pointer: fine) {
  .media-flow:hover .media-flow__img {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-flow__img,
  .media-flow--burst .media-flow__img {
    animation: none;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .media-flow__layer,
  .media-flow__shine {
    display: none;
  }
}