/* OMINO media generation state */
.generation-state {
  --generation-accent: #8b5cf6;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  width: min(100%, 348px);
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--generation-accent) 20%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--generation-accent) 14%, transparent), transparent 46%),
    var(--bg-card);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--generation-accent) 8%, transparent);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.generation-state--video { --generation-accent: #0071e3; }

.generation-state::after {
  content: '';
  position: absolute;
  inset: auto -34% -65% auto;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--generation-accent) 15%, transparent);
  filter: blur(24px);
  animation: generation-glow 3.4s ease-in-out infinite alternate;
  z-index: -1;
}

.generation-art {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  position: relative;
}

.generation-art::before,
.generation-art::after,
.generation-art span {
  content: '';
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--generation-accent) 40%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--generation-accent) 32%, transparent), color-mix(in srgb, var(--generation-accent) 7%, transparent));
}

.generation-art::before {
  transform: translate(-6px, -5px) rotate(-10deg);
  opacity: .48;
  animation: generation-card-back 2.5s ease-in-out infinite;
}

.generation-art::after {
  transform: translate(6px, 5px) rotate(9deg);
  opacity: .68;
  animation: generation-card-front 2.5s ease-in-out infinite;
}

.generation-art span {
  z-index: 1;
  display: grid;
  place-items: center;
  transform: rotate(-1deg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--generation-accent) 58%, #fff), color-mix(in srgb, var(--generation-accent) 20%, var(--bg-card)));
  box-shadow: 0 7px 14px color-mix(in srgb, var(--generation-accent) 20%, transparent);
  animation: generation-card-main 2.5s ease-in-out infinite;
}

[data-theme='dark'] .generation-art span {
  background: linear-gradient(145deg, color-mix(in srgb, var(--generation-accent) 50%, #20202a), color-mix(in srgb, var(--generation-accent) 14%, #101018));
}

.generation-art svg {
  width: 16px;
  height: 16px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .16));
}

.generation-copy { min-width: 0; padding: 1px 0; }

.generation-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--generation-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.generation-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
  animation: generation-pulse 1.6s ease-out infinite;
}

.generation-title {
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.15px;
}

.generation-note {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.35;
}

.generation-steps {
  display: flex;
  gap: 4px;
  margin-top: 9px;
}

.generation-steps span {
  width: 19px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--generation-accent) 15%, var(--line));
  animation: generation-step 2.2s ease-in-out infinite;
}

.generation-steps span:nth-child(2) { animation-delay: .22s; }
.generation-steps span:nth-child(3) { animation-delay: .44s; }

@keyframes generation-pulse {
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes generation-glow {
  to { transform: translate(-18px, -10px) scale(1.2); opacity: .55; }
}

@keyframes generation-card-back {
  50% { transform: translate(-8px, -9px) rotate(-15deg); }
}

@keyframes generation-card-front {
  50% { transform: translate(8px, 9px) rotate(14deg); }
}

@keyframes generation-card-main {
  50% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes generation-step {
  0%, 100% { opacity: .32; transform: scaleX(.75); }
  45% { background: var(--generation-accent); opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .generation-state *, .generation-state::after { animation: none !important; }
}