/* Theme palette and content components */
:root {
  --theme-yellow: #ffdf67;
  --theme-orange: #e27f2e;
  --theme-mint: #d1ffee;
  --theme-teal: #2ac3a2;
  --theme-pink: #ffdfe7;
  --theme-hot-pink: #ff8ac5;
  --theme-lilac: #e7dfff;
  --theme-purple: #9059ff;
  --theme-fish-green: #b8ff1f;
}

.theme-filter,
.article-theme {
  --theme-fill: var(--primary-light);
  --theme-shadow: var(--primary);
  --theme-accent: var(--accent-orange);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0.34rem 0.34rem var(--theme-shadow);
}

.theme-filter {
  min-height: 2.75rem;
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.5rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.theme-filter:hover {
  transform: translate(-0.08rem, -0.08rem);
  background: color-mix(in srgb, var(--theme-fill) 48%, white);
  box-shadow: 0.43rem 0.43rem var(--theme-shadow);
}

.theme-filter:active,
.theme-filter[aria-pressed="true"] {
  transform: translate(0.17rem, 0.17rem);
  background: var(--theme-fill);
  box-shadow: 0.16rem 0.16rem var(--theme-shadow);
}

.theme-filter__label,
.article-theme__label {
  position: relative;
  z-index: 2;
}

.theme-filter__animation,
.article-theme__animation {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.theme-filter[aria-pressed="true"] .theme-filter__animation,
.article-theme .article-theme__animation {
  opacity: 1;
}

.article-theme {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  padding: 0.42rem 0.85rem;
  background: var(--theme-fill);
  box-shadow: 0.28rem 0.28rem var(--theme-shadow);
  font-size: 0.8rem;
  font-weight: 800;
}

/* Stable theme colors */
.theme--workflow { --theme-fill: var(--theme-mint); --theme-shadow: var(--theme-teal); --theme-accent: var(--theme-fish-green); }
.theme--ethics { --theme-fill: var(--theme-pink); --theme-shadow: var(--theme-hot-pink); --theme-accent: var(--theme-hot-pink); }
.theme--ai { --theme-fill: var(--theme-lilac); --theme-shadow: var(--theme-purple); --theme-accent: var(--theme-purple); }
.theme--methods { --theme-fill: #fff2cf; --theme-shadow: var(--theme-orange); --theme-accent: var(--theme-orange); }
.theme--tools { --theme-fill: var(--theme-yellow); --theme-shadow: var(--theme-orange); --theme-accent: var(--theme-orange); }
.theme--pedagogy { --theme-fill: #f1ffe1; --theme-shadow: var(--theme-fish-green); --theme-accent: var(--theme-fish-green); }
.theme--prospective { --theme-fill: #e4f3ff; --theme-shadow: var(--accent-blue); --theme-accent: var(--accent-blue); }
.theme--uxui { --theme-fill: #ffe7f3; --theme-shadow: var(--theme-hot-pink); --theme-accent: var(--theme-hot-pink); }
.theme--vibe { --theme-fill: #eee8ff; --theme-shadow: var(--theme-purple); --theme-accent: var(--theme-purple); }

/* Design de workflows: ball travels along the button */
.theme--workflow .theme-filter__animation,
.theme--workflow .article-theme__animation {
  top: 0.28rem;
  left: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--theme-fish-green);
  box-shadow: 0 0.25rem 0 rgba(18, 18, 18, 0.18);
  animation: workflow-ball 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes workflow-ball {
  0% { top: 0.25rem; left: 0.35rem; transform: scaleY(0.82); }
  12% { top: calc(100% - 0.92rem); left: 15%; transform: scaleX(1.16) scaleY(0.72); }
  28% { top: 0.25rem; left: 35%; transform: scale(1); }
  45% { top: calc(100% - 0.92rem); left: 56%; transform: scaleX(1.16) scaleY(0.72); }
  65% { top: 0.25rem; left: 76%; transform: scale(1); }
  82% { top: calc(100% - 0.92rem); left: calc(100% - 0.95rem); transform: scaleX(1.16) scaleY(0.72); }
  100% { top: 0.25rem; left: 0.35rem; transform: scaleY(0.82); }
}

/* Ethics: two shapes meet and separate */
.theme--ethics .theme-filter__animation,
.theme--ethics .article-theme__animation {
  right: 0.45rem;
  bottom: 0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border: 2px solid var(--ink);
  background: var(--theme-hot-pink);
  animation: ethics-pair 1.5s ease-in-out infinite alternate;
}

.theme--ethics .theme-filter__animation::before,
.theme--ethics .article-theme__animation::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -0.7rem;
  top: -0.15rem;
  border: inherit;
  background: var(--theme-pink);
}

@keyframes ethics-pair { to { transform: translateX(-0.35rem) rotate(8deg); } }

/* AI: pulse and orbit */
.theme--ai .theme-filter__animation,
.theme--ai .article-theme__animation {
  right: 0.5rem;
  bottom: 0.35rem;
  width: 0.46rem;
  height: 0.46rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--theme-purple);
  animation: ai-orbit 1.8s linear infinite;
}

@keyframes ai-orbit {
  0% { transform: rotate(0deg) translateX(0.2rem) rotate(0deg) scale(0.8); }
  50% { transform: rotate(180deg) translateX(0.35rem) rotate(-180deg) scale(1.2); }
  100% { transform: rotate(360deg) translateX(0.2rem) rotate(-360deg) scale(0.8); }
}

/* Methods: little blocks reorder */
.theme--methods .theme-filter__animation,
.theme--methods .article-theme__animation {
  right: 0.45rem;
  bottom: 0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border: 2px solid var(--ink);
  background: var(--theme-orange);
  animation: methods-step 1.4s steps(3, end) infinite;
}

.theme--methods .theme-filter__animation::before,
.theme--methods .article-theme__animation::before,
.theme--methods .theme-filter__animation::after,
.theme--methods .article-theme__animation::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: inherit;
  background: var(--theme-yellow);
}

.theme--methods .theme-filter__animation::before,
.theme--methods .article-theme__animation::before { left: -0.65rem; top: -0.3rem; }
.theme--methods .theme-filter__animation::after,
.theme--methods .article-theme__animation::after { left: -1.3rem; top: 0.05rem; }

@keyframes methods-step {
  0% { transform: translateY(0); }
  33% { transform: translateY(-0.28rem); }
  66% { transform: translate(-0.22rem, 0.05rem); }
}

/* Tools: rotating cog-like square */
.theme--tools .theme-filter__animation,
.theme--tools .article-theme__animation {
  right: 0.5rem;
  bottom: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px dashed var(--ink);
  background: var(--theme-orange);
  animation: tools-spin 1.8s linear infinite;
}
@keyframes tools-spin { to { transform: rotate(1turn); } }

/* Remaining themes */
.theme--pedagogy .theme-filter__animation,
.theme--pedagogy .article-theme__animation,
.theme--prospective .theme-filter__animation,
.theme--prospective .article-theme__animation,
.theme--uxui .theme-filter__animation,
.theme--uxui .article-theme__animation,
.theme--vibe .theme-filter__animation,
.theme--vibe .article-theme__animation {
  right: 0.5rem;
  bottom: 0.35rem;
  width: 0.48rem;
  height: 0.48rem;
  border: 2px solid var(--ink);
  background: var(--theme-accent);
}
.theme--pedagogy .theme-filter__animation,
.theme--pedagogy .article-theme__animation { border-radius: 50% 50% 50% 0; animation: pedagogy-grow 1.4s ease-in-out infinite alternate; }
.theme--prospective .theme-filter__animation,
.theme--prospective .article-theme__animation { border-radius: 50%; animation: prospective-look 1.6s ease-in-out infinite; }
.theme--uxui .theme-filter__animation,
.theme--uxui .article-theme__animation { animation: ux-toggle 1.2s steps(2, end) infinite; }
.theme--vibe .theme-filter__animation,
.theme--vibe .article-theme__animation { border-radius: 50%; animation: vibe-dance 0.9s ease-in-out infinite alternate; }

@keyframes pedagogy-grow { to { transform: translateY(-0.25rem) rotate(20deg) scale(1.2); } }
@keyframes prospective-look { 0%, 100% { transform: translateX(-0.3rem); } 50% { transform: translateX(0.15rem) scale(1.15); } }
@keyframes ux-toggle { 50% { transform: translateX(-0.45rem); background: var(--theme-fill); } }
@keyframes vibe-dance { to { transform: translate(-0.18rem, -0.3rem) rotate(25deg) scale(1.12); } }

/* Theme labels inside reflection cards */
.article-themes li {
  --theme-shadow: var(--primary);
  border-color: var(--ink);
  box-shadow: 0.16rem 0.16rem var(--theme-shadow);
}
.article-themes .theme--workflow { --theme-shadow: var(--theme-teal); }
.article-themes .theme--ethics,
.article-themes .theme--uxui { --theme-shadow: var(--theme-hot-pink); }
.article-themes .theme--ai,
.article-themes .theme--vibe { --theme-shadow: var(--theme-purple); }
.article-themes .theme--methods,
.article-themes .theme--tools { --theme-shadow: var(--theme-orange); }
.article-themes .theme--pedagogy { --theme-shadow: var(--theme-fish-green); }
.article-themes .theme--prospective { --theme-shadow: var(--accent-blue); }

/* Responsive YouTube embeds */
.content-video {
  width: 100%;
  max-width: 68ch;
  margin: 2.5rem 0;
}

.content-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: 0.45rem 0.45rem var(--theme-purple);
}

.content-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.content-video figcaption {
  margin-top: 0.65rem;
  color: var(--ink-medium);
  font-size: 0.85rem;
}

/* Tool link cards in articles */
.content-tool-card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  width: 100%;
  max-width: 68ch;
  margin: 2.5rem 0;
  padding: 1.25rem 3.4rem 1.25rem 1.25rem;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--theme-mint);
  color: var(--ink);
  box-shadow: 0.45rem 0.45rem var(--theme-teal);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.content-tool-card:hover,
.content-tool-card:focus-visible {
  transform: translate(-0.12rem, -0.12rem);
  box-shadow: 0.58rem 0.58rem var(--theme-teal);
  text-decoration: none;
}

.content-tool-card__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.content-tool-card__title {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.12;
}

.content-tool-card__description {
  max-width: 55ch;
  color: var(--ink-medium);
}

.content-tool-card__arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.4rem;
}

@media (max-width: 40rem) {
  .theme-filter,
  .article-theme,
  .content-video__frame,
  .content-tool-card {
    border-width: 2px;
  }

  .theme-filter {
    min-height: 2.5rem;
    margin-right: 0.2rem;
    padding: 0.42rem 0.75rem;
  }

  .article-theme {
    min-height: 2.4rem;
    padding: 0.36rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-filter__animation,
  .article-theme__animation {
    animation: none !important;
  }
}