/* Media Trigger Block - Dynamically loaded */
.media-trigger {
  display: inline-flex;
  cursor: pointer;
  transition: all 0.2s ease;
  align-items: center;
}

.media-trigger__icon { flex-shrink: 0; }
.media-trigger__text { font-weight: 500; text-align: center; }

.media-trigger--layout-vertical { flex-direction: column; gap: 0.75rem; }
.media-trigger--layout-horizontal { flex-direction: row; gap: 1rem; }
.media-trigger--layout-icon-only, .media-trigger--layout-text-only { justify-content: center; }

/* Sizes */
.media-trigger--size-small .media-trigger__icon { width: 2rem; height: 2rem; }
.media-trigger--size-medium .media-trigger__icon { width: 3rem; height: 3rem; }
.media-trigger--size-large .media-trigger__icon { width: 4rem; height: 4rem; }
.media-trigger--size-extra-large .media-trigger__icon { width: 5rem; height: 5rem; }

.media-trigger__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Ripple Animation */
.media-trigger__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: media-trigger-ripple 2.5s ease-out infinite;
}

.media-trigger__ripple--1 { animation-delay: 0s; }
.media-trigger__ripple--2 { animation-delay: 0.8s; }
.media-trigger__ripple--3 { animation-delay: 1.6s; }

/* Pulse Animation */
.media-trigger__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.2;
  animation: media-trigger-pulse 1.5s ease-in-out infinite;
}

/* Glow Animation */
.media-trigger__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.3;
  animation: media-trigger-glow 2s ease-in-out infinite;
}

.media-trigger:hover .media-trigger__icon {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.media-trigger-block { width: 100%; display: flex; justify-content: center; }

.media-trigger-empty {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  border: 2px dashed #d1d5db;
}