/* EU AI Act Art. 50 / Code of Practice - transparency label for AI-generated
   imagery. Official EU icon set of 2026-06-10, used unmodified.
   Kept out of gisela.css because that file is generated Tailwind output. */

.ai-label-host {
  position: relative;
}

.ai-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  background: url(/assets/images/eu-ai-label/eu-ai-label-white-transparent.svg) center/contain no-repeat;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
}

/* The fade starts only once the image has actually been seen (class set by
   /assets/js/ai-label.js via IntersectionObserver). Without JS the label
   simply stays visible, which is the compliant fallback. */
.ai-label-host.ai-label-seen .ai-label {
  animation: ai-label-fade 1s ease-out 6s forwards;
}

@keyframes ai-label-fade {
  to { opacity: 0; }
}

.ai-label-host:hover .ai-label,
.ai-label-host:focus-within .ai-label {
  animation: none;
  opacity: 1;
}

/* Dark variant for images with very bright corners. */
.ai-label--dark {
  background-image: url(/assets/images/eu-ai-label/eu-ai-label-black-transparent.svg);
}

/* Article cards: the .article-content panel covers the lower edge,
   so the label sits in the free upper right corner of the image. */
.ai-label--top {
  top: 12px;
  bottom: auto;
}

/* Larger inset where the image has rounded corners (rounded-xl / rounded-2xl),
   so the icon stays fully on the image instead of riding the radius. */
.ai-label--inset {
  right: 20px;
  bottom: 20px;
}

@media (max-width: 720px) {
  .ai-label {
    width: 28px;
    height: 28px;
    right: 10px;
    bottom: 10px;
  }
  .ai-label--top {
    top: 10px;
    bottom: auto;
  }
  .ai-label--inset {
    right: 18px;
    bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-label-host.ai-label-seen .ai-label {
    animation: none;
    opacity: 1;
  }
}