/* Ambigram article — page extensions (shared: insight-article.css) */


/* =========================================================
   FIGURE VARIANTS
   ========================================================= */

.article-figure--wide img {
  aspect-ratio: 16 / 9;
  background: var(--surface-soft);
}

.article-figure--wide {
  max-width: var(--container-md);
}

.article-figure--closing img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}


/* =========================================================
   MEDIA PLACEHOLDERS
   ========================================================= */

.article-hero-image .article-media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-figure .article-media-placeholder {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.article-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-9);
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft-color);
  border-radius: var(--radius-md);
}

.article-media-placeholder__label {
  max-width: 24ch;
  padding-inline: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body);
  text-align: center;
  color: var(--text-secondary);
}


/* =========================================================
   ROTATING AMBIGRAM DEMO
   ========================================================= */

.article-ambigram-rotate {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 16 / 9;

  background: var(--bg-signal);
  border: 1px solid var(--border-soft-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.article-ambigram-rotate__mark {
  display: block;
  width: auto;
  max-width: var(--space-12);
  height: auto;

  transform-origin: center center;
}

@keyframes ambigram-rotate-cycle {
  0% {
    transform: rotate(0deg);
  }

  6% {
    transform: rotate(0deg);
  }

  38% {
    transform: rotate(180deg);
  }

  52%,
  62% {
    transform: rotate(180deg);
  }

  94% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .article-ambigram-rotate__mark {
    animation: ambigram-rotate-cycle 7s ease-in-out infinite;
  }
}

@media (max-width: 760px) {

  .article-figure .article-media-placeholder {
    border-radius: var(--radius-sm);
  }

}